/* ========================================================= */
/* LAYOUT PRINCIPAL EM 2 COLUNAS                             */
/* ========================================================= */
.calculator-main-layout {
display: grid;
grid-template-columns: 1fr 1fr; /* Duas colunas de tamanho igual */
gap: 2rem;
align-items: start;
margin-top: 2rem;
}

/* Em ecrãs pequenos/telemóveis passa para 1 coluna */
@media (max-width: 992px) {
.calculator-main-layout {
    grid-template-columns: 1fr;
}
}

/* Coluna Esquerda: Formulário + Velocímetro stacked */
.left-side-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

/* Estilos do Formulário */
.calculator-card-form {
background: #18181b;
border: 1px solid #27272a;
border-radius: 12px;
padding: 1.5rem;
}

/* Estilos do SVG e Animação */
.finance-gauge {
width: 100%;
max-width: 320px;
max-height: 140px; 
height: auto;
display: block;
margin: 0 auto;
overflow: visible;
}
.chart-container {
    max-height: 280px; /* Garante que não estica mais que isto */
    margin-bottom: 1rem;
}

#seta {
transform-origin: 200px 200px;
transform: rotate(0deg);
transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================================= */
/* COLUNA DA DIREITA: EXPLICAÇÃO DOS PATAMARES               */
/* ========================================================= */
.right-side-explanation {
display: flex;
flex-direction: column;
gap: 1.2rem;
}

.explanation-title-group {
margin-bottom: 0.5rem;
}

.explanation-title-group h2 {
font-size: 1.6rem;
color: #ffffff;
margin-bottom: 0.4rem;
}

.explanation-title-group p {
color: #a1a1aa;
font-size: 0.95rem;
line-height: 1.4;
margin: 0;
}

/* Cartões da Explicação (Tema Escuro/Adaptativo) */
.interval-card {
background: #18181b;
border: 1px solid #27272a;
border-radius: 12px;
padding: 1.25rem;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 0.8rem;
transition: transform 0.2s ease, border-color 0.2s ease;
}

.interval-card:hover {
transform: translateX(4px);
border-color: #3f3f46;
}

/* Linha decorativa no topo de cada cartão */
.interval-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}

.card-sobrevivencia::before { background-color: #ef4444; }
.card-comeco::before { background-color: #f97316; }
.card-estabilidade::before { background-color: #fbbf24; }
.card-conforto::before { background-color: #facc15; }
.card-liberdade::before { background-color: #84cc16; }
.card-independencia::before { background-color: #22c55e; }
.card-abundancia::before { background-color: #16a34a; }



.card-top {
display: flex;
justify-content: space-between;
align-items: center;
}

.card-title-group {
display: flex;
align-items: center;
gap: 0.5rem;
}

.card-title-group h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #f4f4f5;
}

.badge-years {
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.6rem;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.badge-perigo { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.badge-risco { background: rgba(249, 115, 22, 0.15); color: #fdba74; }
.badge-atencao { background: rgba(234, 179, 8, 0.15); color: #fde047; }
.badge-bom { background: rgba(132, 204, 22, 0.15); color: #bef264; }
.badge-excelente { background: rgba(34, 197, 94, 0.15); color: #86efac; }

.card-body p {
color: #d4d4d8;
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
}

.card-action {
background: #09090b;
border-radius: 8px;
padding: 0.75rem;
border-left: 3px solid #3f3f46;
}

.card-action strong {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #a1a1aa;
margin-bottom: 0.2rem;
}

.card-action span {
font-size: 0.85rem;
color: #f4f4f5;
font-weight: 500;
}