/* =============================================================
   Egina Finanças — Calculator shared styles
   Carregado por todas as páginas de calculadora em frontend/.
   Substitui ~50 LOC de <style> inline duplicado por arquivo (#303).
   ============================================================= */

.container { max-width: 900px; margin: 0 auto; padding: 20px; }

.calculator-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #eee;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
}

.form-group { margin-bottom: 0; }

.calculator-card label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95em;
}

.calculator-card label .hint {
    font-weight: 400;
    color: #666;
    font-size: 0.85em;
}

.calculator-card input,
.calculator-card select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;
    background: #fff;
}

.calculator-card input:focus,
.calculator-card select:focus {
    outline: 2px solid #27ae60;
    outline-offset: 1px;
    border-color: #27ae60;
}

.btn-calc {
    width: 100%;
    padding: 15px;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-top: 20px;
}

.btn-calc:hover {
    background-color: #219150;
    transform: translateY(-2px);
}

.btn-calc:focus {
    outline: 3px solid #2c3e50;
    outline-offset: 2px;
}

.result-section { display: none; margin-top: 30px; }

.result-hero {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.25);
    margin-bottom: 20px;
}

.result-hero .label { font-size: 1em; opacity: 0.9; }
.result-hero .value { font-size: 2.4em; font-weight: bold; margin-top: 5px; }
.result-hero .subline { font-size: 0.95em; opacity: 0.92; margin-top: 8px; }

.result-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .result-cards { grid-template-columns: 1fr; }
}

.result-card {
    background: #f9fafb;
    padding: 14px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eef0f2;
}

.result-card .lbl { display: block; font-size: 0.85em; color: #666; }
.result-card .val {
    font-size: 1.2em;
    font-weight: 600;
    color: #2c3e50;
    margin-top: 4px;
}

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 0.92em;
}

.alert.info {
    background: #e8f4fd;
    border-left: 4px solid #2980b9;
    color: #1f5d8a;
}

.alert.warn {
    background: #fff8e1;
    border-left: 4px solid #f39c12;
    color: #6b5b2a;
}

.disclaimer {
    background: #fff8e1;
    border-left: 4px solid #f39c12;
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 20px;
    font-size: 0.9em;
    color: #6b5b2a;
}

/* =============================================================
   Utility classes (#305) — substituem inline style="" repetidos
   ============================================================= */

/* Chip de "calculadoras relacionadas" — antes era 161× inline */
.related-chip {
    background: #e8f8f5;
    color: #2c3e50;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
}

/* Linha clicável FAQ (<summary>) — antes era 135× inline */
.faq-summary {
    cursor: pointer;
    font-weight: 600;
    color: #2c3e50;
    padding: 10px 0;
}

/* Brand fineprint do footer/cabeçalho — 43× inline */
.brand-fineprint {
    font-size: 0.75em;
    opacity: 0.7;
    margin-top: 4px;
}

/* Link "Voltar para Home" + nav links sóbrios — 39× inline */
.nav-back-link {
    text-decoration: none;
    color: #2c3e50;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bloco de disclaimer separador — 36× inline */
.disclaimer-divider {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid #eee;
}

/* Linha de lista com ícone — 36× inline */
.list-row-icon {
    margin-bottom: 10px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Ícone destaque verde — 36× inline */
.icon-accent {
    font-size: 18px;
    color: #27ae60;
}

/* Row de chips/tags — 36× inline */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Título de seção primário — 36× inline */
.section-title-primary {
    color: #2c3e50;
    margin-bottom: 16px;
}

/* mb 12 — 135× inline */
.mb-12 { margin-bottom: 12px; }

/* Helpers tipográficos */
.text-muted-sm { color: #555; font-size: 0.9em; }
.text-accent-link {
    color: #27ae60;
    text-decoration: none;
    font-weight: 600;
}
.text-accent-link-sm {
    color: #27ae60;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
}

/* ── Utilities (#305 — single-property classes substituindo styles inline) ── */
.fs-sm  { font-size: 0.9em; }
.fs-xs  { font-size: 0.8em; }
.fs-16  { font-size: 16px; }
.fs-18  { font-size: 18px; }
.fs-22  { font-size: 22px; }
.text-accent  { color: #27ae60; }
.text-555     { color: #555; }
.text-666     { color: #666; }
.text-777     { color: #777; }
.text-2c3e50  { color: #2c3e50; }
.disclaimer-fineprint { font-size: 0.8em; color: #666; margin-top: 10px; }
.divider-dot { color: #ddd; margin: 0 6px; }