/* ══════════════════════════════════════════════════════════════════
   Ferramenta: Calculadora de Planejamento para Portugal (post 2549)
   Migrada do Elementor (Tailwind + Alpine + Lucide) para o tema claro.
   Re-tematizada para a paleta forest + gold (tokens globais).
   O container é fluido (width:100%) — a largura/centralização vem do
   .jt-wrap do template page-templates/ferramenta.php.
   ══════════════════════════════════════════════════════════════════ */

.calc-tool{
  width:100%;
  font-family:var(--font-sans);
  color:var(--text-900);
  --calc-radius:18px;
  --calc-radius-sm:12px;
}
.calc-tool *{box-sizing:border-box;}

/* remove as setinhas dos inputs number (como no original) */
.calc-tool input[type=number]::-webkit-outer-spin-button,
.calc-tool input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.calc-tool input[type=number]{-moz-appearance:textfield;}

/* ── Cabeçalho ───────────────────────────────────────────────────── */
.calc-head{text-align:center;margin:0 auto 40px;max-width:640px;}
.calc-head-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--gold);
  border-radius:16px;color:var(--gold-deep);box-shadow:var(--sh-sm);
}
.calc-head-badge svg{width:30px;height:30px;}
.calc-title{
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:clamp(24px,4vw,var(--fs-h1));line-height:1.15;
  color:var(--forest-900);margin:0 0 10px;
}
.calc-sub{color:var(--text-500);font-size:var(--fs-body);line-height:1.5;margin:0;}

/* ── Layout de duas colunas ──────────────────────────────────────── */
.calc-grid{display:grid;grid-template-columns:1fr;gap:28px;}
@media (min-width:1024px){
  .calc-grid{grid-template-columns:2fr 1fr;gap:32px;align-items:start;}
}
.calc-main{display:flex;flex-direction:column;gap:28px;min-width:0;}

/* ── Cards ───────────────────────────────────────────────────────── */
.calc-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--calc-radius);padding:24px;box-shadow:var(--sh-sm);
}
.calc-card-title{
  display:flex;align-items:center;gap:8px;margin:0 0 22px;
  font-family:var(--font-display);font-weight:var(--fw-display-semi);
  font-size:var(--fs-h3);color:var(--gold-deep);
}
.calc-card-title svg{width:20px;height:20px;}

/* ── Configurações base ──────────────────────────────────────────── */
.calc-fields{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:560px){.calc-fields{grid-template-columns:1fr 1fr;}}
.calc-field{display:flex;flex-direction:column;gap:8px;}
.calc-field label{font-size:var(--fs-small);font-weight:600;color:var(--text-700);}
.calc-field-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}

.calc-refresh{
  display:inline-flex;align-items:center;gap:4px;
  background:none;border:0;cursor:pointer;padding:0;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--text-500);transition:color .15s ease;
}
.calc-refresh:hover{color:var(--gold-deep);}
.calc-refresh svg{width:12px;height:12px;}
.calc-refresh.is-fetching svg{animation:calc-spin 1s linear infinite;}
@keyframes calc-spin{to{transform:rotate(360deg);}}

.calc-input-wrap{position:relative;}
.calc-input{
  width:100%;padding:12px 14px;
  background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--calc-radius-sm);
  color:var(--text-900);font-family:var(--font-num);font-size:15px;
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.calc-input-wrap .calc-input{padding-right:38px;}
.calc-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.25);}
.calc-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697067' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;
}
.calc-clear{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:2px;
  color:var(--text-400);transition:color .15s ease;
}
.calc-clear:hover{color:var(--text-900);}
.calc-clear svg{width:16px;height:16px;}
.calc-clear[hidden]{display:none;}

/* ── Lista de itens ──────────────────────────────────────────────── */
.calc-items-section{display:flex;flex-direction:column;gap:16px;}
.calc-section-title{
  font-family:var(--font-display);font-weight:var(--fw-display-semi);
  font-size:var(--fs-h3);color:var(--gold-deep);margin:0;
}
.calc-items{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:560px){.calc-items{grid-template-columns:1fr 1fr;}}

.calc-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;cursor:pointer;
  padding:14px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.calc-item:hover{border-color:var(--line-2);}
.calc-item.is-selected{
  background:var(--gold-bg);border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold);
}
.calc-item-info{display:flex;align-items:center;gap:12px;min-width:0;}
.calc-item-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:10px;
  background:var(--forest-50);color:var(--text-400);
  transition:background .15s ease,color .15s ease;
}
.calc-item-icon svg{width:18px;height:18px;}
.calc-item.is-selected .calc-item-icon{background:var(--gold);color:var(--forest-900);}
.calc-item-text{min-width:0;}
.calc-item-label{
  display:block;font-size:var(--fs-small);font-weight:600;color:var(--forest-900);
  line-height:1.25;
}
.calc-item-meta{
  display:block;margin-top:2px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--text-400);
}
.calc-item-value{
  flex:none;font-family:var(--font-num);font-weight:700;
  font-size:var(--fs-small);color:var(--forest-900);
}

/* ── Coluna resumo (sticky) ──────────────────────────────────────── */
.calc-side{min-width:0;}
.calc-sticky{display:flex;flex-direction:column;gap:20px;}
@media (min-width:1024px){.calc-sticky{position:sticky;top:24px;}}

.calc-summary{border-color:var(--gold);box-shadow:var(--sh-md);}
.calc-summary-title{
  display:flex;align-items:center;gap:8px;margin:0 0 22px;
  font-family:var(--font-display);font-weight:var(--fw-display);
  font-size:var(--fs-h3);color:var(--forest-900);
}
.calc-summary-title svg{width:20px;height:20px;color:var(--gold-deep);}

.calc-totals{display:flex;flex-direction:column;gap:16px;margin-bottom:28px;}
.calc-total-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;}
.calc-total-row--main{padding-top:16px;border-top:1px solid var(--line);}
.calc-total-label{font-size:var(--fs-small);color:var(--text-500);}
.calc-total-eur{font-family:var(--font-num);font-weight:700;font-size:24px;color:var(--forest-900);}
.calc-total-brl{font-family:var(--font-num);font-weight:800;font-size:30px;color:var(--gold-deep);line-height:1;}

/* ── Botões de ação ──────────────────────────────────────────────── */
.calc-actions{display:flex;flex-direction:column;gap:12px;}
.calc-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 16px;border-radius:var(--calc-radius-sm);
  font-family:var(--font-sans);font-weight:700;font-size:var(--fs-small);
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.calc-btn svg{width:18px;height:18px;}
.calc-btn--primary{background:var(--gold);color:var(--forest-900);}
.calc-btn--primary:hover{background:var(--gold-bright);transform:translateY(-1px);}
.calc-btn--ghost{background:var(--surface);color:var(--forest-900);border-color:var(--line-2);padding:12px 16px;}
.calc-btn--ghost:hover{background:var(--forest-50);border-color:var(--forest-300);}
.calc-social{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.calc-social .calc-btn{width:100%;}

/* ── Aviso ───────────────────────────────────────────────────────── */
.calc-note{
  display:flex;gap:12px;padding:16px;border-radius:14px;
  background:var(--warning-bg);border:1px solid var(--gold-soft);
}
.calc-note svg{width:20px;height:20px;flex:none;color:var(--warning-ink);}
.calc-note p{margin:0;font-size:12px;line-height:1.55;color:var(--warning-ink);}
.calc-note strong{color:var(--warning-ink);}