/* Calculadora pública (/calculadora). Tokens --df-* de landing-tokens.css:
   o tema escuro vem dos tokens, redefinidos em [data-theme="dark"]. */

.calc-hero { padding-bottom: 1.5rem; text-align: center; }
.calc-hero__inner { max-width: 44rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.calc-hero__title {
    margin: 0;
    font-size: clamp(1.9rem, 6vw, 3rem);
    line-height: 1.15;
    font-weight: 700;
    color: rgb(var(--df-on-surface));
}
.calc-hero__lead { margin: 0; font-size: 1.05rem; line-height: 1.6; color: rgb(var(--df-on-surface-variant)); }

.calc-main {
    padding-block: 1rem 4rem;
    /* Azuis de marca FIXOS (iguais nos dois temas) para superfícies com texto #fff:
       em tema escuro --df-primary-container clareia e #fff sobre ele fica abaixo de 4.5:1. */
    --calc-brand-from: #325bb3;
    --calc-brand-to: #4f46e5;
    --calc-brand-hover: #2a4d99;
}

/* Botões com fundo de marca: contraste AA com texto #fff nos dois temas */
.calc-main .df-btn--primary { background: var(--calc-brand-from); }
.calc-main .df-btn--primary:hover { background: var(--calc-brand-hover); }
.calc-main .df-btn--cta { background: linear-gradient(135deg, var(--calc-brand-from), var(--calc-brand-to)); }
/* Botão de contorno: texto com --df-primary (no escuro é o azul claro, 10:1) */
.calc-main .df-btn--outline { color: rgb(var(--df-primary)); border-color: rgb(var(--df-outline) / .6); }
.calc-main .df-btn:disabled { opacity: .6; cursor: not-allowed; }

.calc-layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
    .calc-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; }
    .calc-side { position: sticky; top: 5.5rem; }
}
.calc-form { display: grid; gap: 1.25rem; min-width: 0; }

.calc-card { padding: 1.25rem; }
@media (min-width: 640px) { .calc-card { padding: 1.5rem; } }
.calc-h2 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 700; color: rgb(var(--df-on-surface)); }
.calc-note, .calc-hint {
    margin: 0 0 1rem;
    font-size: .875rem;
    color: rgb(var(--df-on-surface-variant));
}
.calc-note i { color: rgb(var(--df-accent)); margin-right: .25rem; }

.calc-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.calc-label { font-size: .8125rem; font-weight: 600; color: rgb(var(--df-on-surface-variant)); }
.calc-input {
    width: 100%;
    min-height: 2.75rem;
    padding: .55rem .75rem;
    font: inherit;
    font-size: 1rem; /* >=16px: evita zoom automático no iOS */
    color: rgb(var(--df-on-surface));
    background: rgb(var(--df-surface-lowest));
    border: 1px solid rgb(var(--df-outline)); /* contorno de controlo: >=3:1 (WCAG 1.4.11) */
    border-radius: var(--df-radius);
}
.calc-input:focus-visible,
.calc-remove:focus-visible {
    outline: 2px solid rgb(var(--df-primary-container));
    outline-offset: 1px;
}
.calc-input[aria-invalid="true"] { border-color: rgb(var(--df-error)); }
select.calc-input { cursor: pointer; }

.calc-picker { display: grid; gap: .75rem; margin-bottom: 1rem; align-items: end; }
@media (min-width: 640px) { .calc-picker { grid-template-columns: 1fr 1fr auto; } }
.calc-picker .df-btn { min-height: 2.75rem; }

.calc-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.calc-list:empty { display: none; }
.calc-row {
    padding: .9rem;
    background: rgb(var(--df-surface-container-low));
    border: 1px solid rgb(var(--df-outline-variant) / .5);
    border-radius: var(--df-radius-md);
}
.calc-row__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.calc-row__title { display: flex; flex-direction: column; gap: .1rem; min-width: 0; color: rgb(var(--df-on-surface)); }
.calc-row__title strong { overflow-wrap: anywhere; }
.calc-row__meta { font-size: .75rem; color: rgb(var(--df-on-surface-variant)); }
.calc-row__grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
.calc-row__sub { display: flex; flex-direction: column; gap: .35rem; justify-content: center; }
.calc-row__subvalue { font-weight: 700; color: rgb(var(--df-primary)); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) {
    .calc-row__grid { grid-template-columns: 1fr 1fr 1.4fr 1fr; }
    .calc-row__grid--desp { grid-template-columns: 2fr 1.2fr 1fr auto; align-items: end; }
}
.calc-row__grid--desp .calc-field:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .calc-row__grid--desp .calc-field:first-child { grid-column: auto; } }

.calc-remove {
    flex: none;
    width: 2.5rem; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgb(var(--df-error));
    background: transparent;
    border: 1px solid rgb(var(--df-outline-variant) / .6);
    border-radius: var(--df-radius);
    cursor: pointer;
}
.calc-remove:hover { background: rgb(var(--df-error) / .1); }

.calc-error { margin: .5rem 0 0; font-size: .8125rem; color: rgb(var(--df-error)); }
.calc-row .calc-hint { margin: .5rem 0 0; font-size: .8125rem; }

.calc-params { display: grid; gap: 1rem; }
@media (min-width: 640px) { .calc-params { grid-template-columns: repeat(3, 1fr); } }

/* Resultado */
.calc-result { border-color: rgb(var(--df-primary-container) / .35); scroll-margin-top: 5.5rem; /* não fica debaixo da navegação fixa */ }
.calc-price {
    display: flex; flex-direction: column; gap: .25rem;
    padding: 1rem;
    margin-bottom: .75rem;
    color: #fff; /* sobre gradiente de marca FIXO; --df-on-primary inverte no tema escuro */
    background: linear-gradient(135deg, var(--calc-brand-from), var(--calc-brand-to));
    border-radius: var(--df-radius-md);
}
.calc-price__label { font-size: .8125rem; }
.calc-price__value { font-size: clamp(1.6rem, 5vw, 2rem); line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc-status { min-height: 1.25rem; margin: 0 0 .5rem; font-size: .8125rem; color: rgb(var(--df-on-surface-variant)); }
.calc-dl { margin: 0; display: grid; gap: .1rem; }
.calc-dl > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgb(var(--df-outline-variant) / .4);
    font-size: .9rem;
}
.calc-dl > div:last-child { border-bottom: 0; }
.calc-dl dt { color: rgb(var(--df-on-surface-variant)); }
.calc-dl dd { margin: 0; font-weight: 600; color: rgb(var(--df-on-surface)); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-dl__strong dt, .calc-dl__strong dd { color: rgb(var(--df-on-surface)); font-weight: 700; }
#calc-export-slot:not(:empty) { margin-top: 1rem; }
.calc-export__btn { width: 100%; justify-content: center; min-height: 2.75rem; }
#calc-export-msg { margin: .5rem 0 0; }

/* Estado vazio e CTA */
.calc-empty, .calc-cta { padding: 2rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.calc-empty i { font-size: 2rem; color: rgb(var(--df-accent)); }
.calc-empty h2, .calc-cta h2 { margin: 0; font-size: 1.35rem; color: rgb(var(--df-on-surface)); }
.calc-empty p, .calc-cta p { margin: 0; max-width: 36rem; color: rgb(var(--df-on-surface-variant)); line-height: 1.6; }
.calc-cta { margin-top: 2rem; }

/* Selo do hero: o rosa de acento (3.2:1 no claro) nao chega a 4.5:1 em texto pequeno; --df-tertiary cumpre nos dois temas */
.calc-hero .df-badge--accent { color: rgb(var(--df-tertiary)); }

/* ── Receitas prontas ───────────────────────────────────────── */
.calc-receitas__grupo { margin-top: 12px; }
.calc-receitas__titulo { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--df-text-muted, #64748b); }
.calc-receitas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.calc-receita {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit;
  background: var(--df-surface, #fff); border: 1px solid var(--df-border, #e2e8f0);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.calc-receita strong { font-size: .92rem; line-height: 1.25; }
.calc-receita span { font-size: .78rem; color: var(--df-text-muted, #64748b); }
.calc-receita:hover, .calc-receita:focus-visible { border-color: var(--df-primary, #325bb3); box-shadow: 0 2px 10px rgba(50, 91, 179, .15); transform: translateY(-1px); }
.calc-receita:focus-visible { outline: 2px solid var(--df-primary, #325bb3); outline-offset: 2px; }

/* ── Calcular / ver resultado ─────────────────────────────── */
/* O resultado atualiza-se sozinho; o botão leva até ele (no telemóvel fica no fim da página). */
.calc-calcular { width: 100%; justify-content: center; min-height: 3rem; }

/* Barra fixa do telemóvel com o preço sugerido; em ecrãs largos o resultado já está sempre à vista (coluna fixa). */
.calc-barra[hidden] { display: none; }
.calc-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--df-c-surface-lowest);
    border-top: 1px solid rgb(var(--df-outline-variant) / .5);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
}
.calc-barra__preco { display: flex; flex-direction: column; min-width: 0; }
.calc-barra__preco span { font-size: .75rem; color: rgb(var(--df-on-surface-variant)); }
.calc-barra__preco strong { font-size: 1.2rem; color: rgb(var(--df-on-surface)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-barra .df-btn { flex-shrink: 0; }
/* Com a barra visível: o botão "voltar ao topo" sobe e o fim da página não fica tapado. */
body:has(.calc-barra:not([hidden])) .lp-back-top { bottom: 6rem; }
.calc-main:has(.calc-barra:not([hidden])) { padding-bottom: 5.5rem; }
@media (min-width: 960px) {
    .calc-barra, .calc-barra:not([hidden]) { display: none; }
    body:has(.calc-barra:not([hidden])) .lp-back-top { bottom: 28px; }
    .calc-main:has(.calc-barra:not([hidden])) { padding-bottom: 0; }
}