/* ==========================================================================
   Calculadora de poupança (#savings) — no estilo do landing.css
   Mesmas cores, cartões (8 px, borda fina) e modo escuro (.dark) das outras secções.
   ========================================================================== */

/* Cor da secção no modo escuro (como as outras: cada secção com a sua cor) */
.dark { --sec-savings: #0f1620; }
.fb-sav { background: #f9fafb; }
.dark .fb-sav { background: var(--sec-savings) !important; }

/* ---------- Cabeçalho (igual aos das outras secções) ---------- */
.fb-sav__badge {
    display: inline-flex;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    background: rgba(135, 230, 75, 0.15);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #3f7a1e;
}
.dark .fb-sav__badge { color: #87e64b; }

.fb-sav__title {
    margin: 1rem 0 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #111827;
}
@media (min-width: 640px) { .fb-sav__title { font-size: 2.25rem; } }
.dark .fb-sav__title { color: #ffffff; }

.fb-sav__lead {
    margin: 1rem 0 0;
    font-size: 1.125rem;
    line-height: 1.75;
    color: #4b5563;
}
.dark .fb-sav__lead { color: #9ca3af; }

/* ---------- Grelha ---------- */
.fb-sav__grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 3.5rem;
}
@media (min-width: 1024px) {
    .fb-sav__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; }
}

/* Cartões: como .fb-prod */
.fb-sav__card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dark .fb-sav__card {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}

/* ---------- Controlos ---------- */
.fb-sav__controls { display: flex; flex-direction: column; gap: 1.75rem; padding: 2rem; }

.fb-sav__presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fb-sav__chip {
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid #e5e7eb;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.dark .fb-sav__chip { border-color: rgba(255, 255, 255, 0.1); color: #d1d5db; }
.fb-sav__chip:hover { border-color: #87e64b; }
.fb-sav__chip.is-on { border-color: #87e64b; background: rgba(135, 230, 75, 0.15); color: #3f7a1e; }
.dark .fb-sav__chip.is-on { color: #87e64b; }

.fb-sav__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.fb-sav__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; }
.fb-sav__hours { font-size: 2rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: #111827; font-variant-numeric: tabular-nums; }
.dark .fb-sav__hours { color: #ffffff; }

/* Barra das horas (sem herdar o estilo dos campos do formulário) */
input.fb-sav__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 1.75rem;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    --sc-fill: 40%;
    --sc-track: rgba(17, 24, 39, 0.08);
}
.dark input.fb-sav__range { --sc-track: rgba(255, 255, 255, 0.1); }
input.fb-sav__range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #5fbf2c, #87e64b var(--sc-fill), var(--sc-track) var(--sc-fill)); }
input.fb-sav__range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--sc-track); }
input.fb-sav__range::-moz-range-progress { height: 6px; border-radius: 6px; background: #87e64b; }
input.fb-sav__range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 3px solid #ffffff; border-radius: 50%; background: #87e64b; box-shadow: 0 0 0 1px #87e64b, 0 4px 10px rgba(0, 0, 0, 0.2); }
.dark input.fb-sav__range::-webkit-slider-thumb { border-color: #0b120f; }
input.fb-sav__range::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid #ffffff; border-radius: 50%; background: #87e64b; }
input.fb-sav__range:focus-visible { outline: 2px solid #87e64b; outline-offset: 4px; }

.fb-sav__scale { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.75rem; color: #9ca3af; }
.fb-sav__ref { margin: auto 0 0; font-size: 0.8rem; color: #6b7280; }

/* ---------- Resultado ---------- */
.fb-sav__results { display: grid; gap: 1rem; align-content: start; }

/* Cartão principal: como .fb-prod--featured */
.fb-sav__main {
    padding: 1.75rem 2rem;
    border-color: #87e64b;
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.1), rgba(135, 230, 75, 0) 60%), #ffffff;
}
.dark .fb-sav__main {
    border-color: rgba(135, 230, 75, 0.6);
    background: linear-gradient(180deg, rgba(135, 230, 75, 0.12), rgba(135, 230, 75, 0.02) 60%);
}
.fb-sav__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; }
.dark .fb-sav__kicker { color: #9ca3af; }
.fb-sav__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-top: 0.5rem; }
.fb-sav__num { font-size: clamp(2.5rem, 4.5vw, 3.25rem); line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: #3f7a1e; font-variant-numeric: tabular-nums; }
.dark .fb-sav__num { color: #87e64b; }
.fb-sav__unit { font-size: 1rem; font-weight: 700; color: #3f7a1e; }
.dark .fb-sav__unit { color: #87e64b; }
.fb-sav__year { margin-top: 0.6rem; font-size: 0.95rem; color: #4b5563; }
.dark .fb-sav__year { color: #9ca3af; }
.fb-sav__year strong { font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.dark .fb-sav__year strong { color: #ffffff; }

.fb-sav__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fb-sav__stat { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem; }
.fb-sav__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; background: rgba(135, 230, 75, 0.15); color: #3f7a1e; }
.dark .fb-sav__icon { color: #87e64b; }
.fb-sav__icon svg { width: 1.35rem; height: 1.35rem; }
.fb-sav__val { font-size: 1.6rem; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; color: #111827; font-variant-numeric: tabular-nums; }
.dark .fb-sav__val { color: #ffffff; }
.fb-sav__val small { font-size: 0.9rem; font-weight: 700; color: #6b7280; }
.fb-sav__cap { margin-top: 0.15rem; font-size: 0.85rem; line-height: 1.35; color: #6b7280; }
.dark .fb-sav__cap { color: #9ca3af; }

/* Botão: como .fb-vs__cta */
.fb-sav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.85rem 1rem;
    border-radius: 8px !important;
    background: #87e64b;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #000 !important;
    transition: background-color 0.2s ease;
}
.fb-sav__cta, .fb-sav__cta:hover { text-decoration: none !important; }
.fb-sav__cta:hover { background: #7dd642; }

/* ---------- Telemóvel ---------- */
@media (max-width: 767px) {
    .fb-sav__grid { margin-top: 2rem; gap: 1rem; }
    .fb-sav__controls { padding: 1.5rem 1.25rem; }
    .fb-sav__main { padding: 1.4rem 1.25rem; }
    .fb-sav__hours { font-size: 1.6rem; }
}
@media (max-width: 420px) { .fb-sav__pair { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .fb-sav__chip, .fb-sav__cta { transition: none; } }

/* ==========================================================================
   Animações
   1. Entrada: cabeçalho e cartões aparecem um a um quando a secção chega ao ecrã
   2. Números contam até ao valor (ao entrar e sempre que mudam)
   3. Ao mudar o caso: o cartão do resultado "acende" e as horas dão um salto
   4. Ícones vivos: a gota pinga, a nuvem flutua; brilho a passar no cartão principal
   ========================================================================== */

/* 1. Entrada escalonada (só com JavaScript; sem ele fica tudo visível) */
.fb-sav.is-ready .fb-sav__in {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 0.12s);
}
.fb-sav.is-ready.is-in .fb-sav__in { opacity: 1; transform: none; }

/* A barra enche-se a partir do zero ao entrar */
.fb-sav.is-ready:not(.is-in) input.fb-sav__range { --sc-fill: 0% !important; }

/* 3. Resultado "acende" quando o valor muda */
.fb-sav__main { position: relative; overflow: hidden; transition: box-shadow 0.4s ease, transform 0.4s ease; }
.fb-sav__main.is-flash { box-shadow: 0 0 0 4px rgba(135, 230, 75, 0.25), 0 18px 40px rgba(135, 230, 75, 0.18); transform: translateY(-2px); }
.fb-sav__main > *:not(.fb-sav__glow) { position: relative; z-index: 1; }

/* Brilho que passa devagar pelo cartão principal */
.fb-sav__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(135, 230, 75, 0.14) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: fb-sav-shine 5s ease-in-out 1.5s infinite;
    pointer-events: none;
}
@keyframes fb-sav-shine { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

/* As horas dão um pequeno salto ao mudar */
.fb-sav__hours.is-bump { animation: fb-sav-bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes fb-sav-bump { 0% { transform: scale(1); } 50% { transform: scale(1.18); color: #87e64b; } 100% { transform: scale(1); } }

/* Exemplo escolhido: pequeno "clique" */
.fb-sav__chip.is-on { animation: fb-sav-pick 0.3s ease; }
@keyframes fb-sav-pick { 50% { transform: scale(0.95); } }

/* 4. Ícones vivos */
.fb-sav__icon--drop svg { animation: fb-sav-drip 2.4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes fb-sav-drip { 0%, 60%, 100% { transform: translateY(0) scaleY(1); } 70% { transform: translateY(2px) scaleY(0.92); } 80% { transform: translateY(-1px) scaleY(1.04); } }
.fb-sav__icon--cloud svg { animation: fb-sav-float 4s ease-in-out infinite; }
@keyframes fb-sav-float { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Botão: seta que avança ao passar o rato */
.fb-sav__cta { transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.fb-sav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(135, 230, 75, 0.25); }

/* Cartões pequenos sobem um pouco ao passar o rato (como os Produtos) */
.fb-sav__stat { transition: transform 0.3s ease, border-color 0.3s ease; }
.fb-sav__stat:hover { transform: translateY(-3px); border-color: #b9dea0; }
.dark .fb-sav__stat:hover { border-color: rgba(135, 230, 75, 0.45); }

/* Movimento reduzido: sem animações, tudo visível */
@media (prefers-reduced-motion: reduce) {
    .fb-sav.is-ready .fb-sav__in { opacity: 1; transform: none; transition: none; }
    .fb-sav__glow, .fb-sav__icon--drop svg, .fb-sav__icon--cloud svg, .fb-sav__hours.is-bump, .fb-sav__chip.is-on { animation: none; }
    .fb-sav__main, .fb-sav__cta, .fb-sav__stat { transition: none; }
    .fb-sav.is-ready:not(.is-in) input.fb-sav__range { --sc-fill: initial; }
}