/* /css/testes.css */

/* Color Variables for Tests - can be overridden by specific test page classes if needed */
:root {
    --test-primary-color-green: #00796b; /* Default for consumista, perfil-financeiro */
    --test-primary-color-blue: #265add;  /* Default for teste-investidor */

    --test-secondary-color: #f4f7f6; /* Light gray background for options in some tests */
    --test-text-color: #333;
    --test-background-color: #ffffff;
    --test-border-color: #e0e0e0;

    /* Profile/Result Specific Colors */
    --consumista-color: #d32f2f;
    --equilibrado-color: #0288d1;
    --economista-color: #2e7d32;
    --warning-color: #f57c00;

    --investidor-color: #2e7d32;   /* Verde (Sucesso) - Perfil Financeiro */
    /* --equilibrado-color is already defined */
    --endividado-color: #f57c00;   /* Laranja (Atenção) - Perfil Financeiro */
    --superendividado-color: #d32f2f; /* Vermelho (Alerta) - Perfil Financeiro */

    --conservative-color: #3b82f6; /* Azul - Teste Investidor */
    --moderate-color: #f97316;   /* Laranja - Teste Investidor */
    --arrojado-color: #ef4444;      /* Vermelho - Teste Investidor */
    --aggressive-color: #8b5cf6; /* Roxo - Teste Investidor */
}

body {
    padding-top: 10px; /* igual ou maior que a altura do header fixo */
}

/* Adiciona um espaçamento superior na área principal APENAS nas páginas de teste */
/* Isso cria a distância desejada entre o header do site e o título do teste */
main:has(.quiz-page-container) {
    padding-top: 120px; /* Aumenta o espaço entre o header e o card do quiz */
}

.quiz-page-container { /* Add this class to the main div.container in each test HTML */
    /* A margem superior foi removida para ser controlada pelo padding do <main> acima */
    background-color: var(--test-background-color);
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07);
    color: var(--test-text-color);
}

.quiz-page-container header { /* Local header for the quiz title */
    text-align: center;
    margin-bottom: 30px;
}

.quiz-page-container header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    /* Color will be inherited or can be set if different from site's default h1 */
}

/* Progress Bar */
#progress-bar-container {
    position: sticky; /* Faz a barra grudar no topo ao rolar */
    top: 90px; /* Altura aproximada do header principal do site (ajuste se necessário) */
    /* O header principal tem z-index: 1000, então este deve ser menor */
    z-index: 990; 
    width: 100%;
    background-color: #e9ecef;
    border-radius: 20px;
    /* margin-bottom: 30px; */ /* Removido para controlar o espaço pelo margin-top do quiz-form */
    overflow: hidden;
    /* Adiciona uma leve sombra para destacar quando estiver "flutuando" */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); 
}


#progress-bar {
    width: 0%;
    height: 12px;
    border-radius: 20px;
    transition: width 0.4s ease-in-out;
    /* background-color will be set by specific test styles below */
}

/*
Remove a margem superior que estava diretamente no #quiz-form,
pois vamos aplicá-la ao contêiner pai do formulário (o <main> aninhado).
*/
/*
#quiz-form {
    margin-top: 52px; 
}
*/

/* Adiciona margem ao contêiner principal do conteúdo do quiz (o <main> aninhado)
   para que ele comece exatamente abaixo da barra de progresso sticky. */
.quiz-page-container > main { /* Seleciona o <main> diretamente dentro de .quiz-page-container */
    /*
    - O #progress-bar-container é sticky com `top: 90px;`.
    - O `main` tem `padding-top: 80px;` para o header.
    - Espaço efetivo que a barra ocupa abaixo do início do conteúdo do `main` (após o padding do header):
      `90px (top da barra) - 80px (padding do main) = 10px`.
    - Altura da barra de progresso: `12px`.
    - Total margin-top para o conteúdo do quiz = 10px (offset da barra) + 12px (altura da barra) = 22px.
    */
    margin-top: -50px;
}

/* Questions */
.question-block {
    margin-bottom: 30px;
    border-top: 1px solid var(--test-border-color);
    padding-top: 20px;
}

.question-block h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.options div {
    margin-bottom: 10px;
}

.options label {
    display: block;
    background-color: #fff; /* Default, can be var(--test-secondary-color) if preferred */
    padding: 15px 20px;
    border: 1px solid var(--test-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.options label:hover {
    transform: translateY(-2px);
    /* border-color will be set by specific test styles */
}

.options input[type="radio"] {
    display: none;
}

.options input[type="radio"]:checked + label {
    font-weight: 600;
    /* border-color, background-color, box-shadow will be set by specific test styles */
}

/* Submit Button - assuming .submit-btn might have base styles from style.css */
.submit-btn { /* Styles here are additive or overriding for tests if needed */
    display: block;
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 20px;
    /* background-color will be set by specific test styles */
}

.submit-btn:disabled {
    background-color: #b0bec5 !important; /* Ensure override if needed */
    color: #eceff1 !important;
    cursor: not-allowed !important;
}

/* Result Container */
.hidden { display: none !important; } /* Ensure it overrides any other display property */

#result-container {
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-top: 30px;
    border-top-width: 5px;
    border-top-style: solid;
    animation: fadeIn 0.5s ease-in-out;
    /* background-color and border-color set by profile-specific classes */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#result-title {
    font-size: 2.5rem;
    margin-bottom: 15px;
    /* color set by profile-specific classes */
}

#result-description {
    font-size: 1.1rem;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#result-actions li, /* For consumista, perfil-financeiro */
#result-investments li { /* For teste-investidor */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>') no-repeat left center;
    padding-left: 30px;
    margin-bottom: 10px;
    font-size: 1.05rem;
    list-style: none;
    text-align: left;
}

#result-actions, #result-investments {
    padding: 0;
    display: inline-block; /* To center the block of LIs */
    margin-top: 15px;
    margin-bottom: 25px;
}

.disclaimer {
    font-size: 0.9rem;
    color: #777;
    margin-top: 20px;
    text-align: center;
}

/* Specific styles for Teste de Consumismo & Perfil Financeiro (Green primary) */
.consumista-quiz-container #progress-bar,
.perfil-financeiro-quiz-container #progress-bar {
    background-color: var(--test-primary-color-green);
}

.consumista-quiz-container .options label:hover,
.perfil-financeiro-quiz-container .options label:hover {
    border-color: var(--test-primary-color-green);
}

.consumista-quiz-container .options input[type="radio"]:checked + label,
.perfil-financeiro-quiz-container .options input[type="radio"]:checked + label {
    border-color: var(--test-primary-color-green);
    background-color: #e8f5e9; /* Light green */
    box-shadow: 0 4px 12px rgba(0, 121, 107, 0.15);
}

.consumista-quiz-container .submit-btn,
.perfil-financeiro-quiz-container .submit-btn {
    background-color: var(--test-primary-color-green);
}
.consumista-quiz-container .submit-btn:hover,
.perfil-financeiro-quiz-container .submit-btn:hover {
    background-color: #004d40; /* Darker green */
}
.consumista-quiz-container header h1,
.perfil-financeiro-quiz-container header h1 {
    color: var(--test-primary-color-green);
}

/* Result container variants for Consumista */
#result-container.consumista-profile { background-color: #ffebee; border-color: var(--consumista-color); }
#result-container.consumista-profile #result-title { color: var(--consumista-color); }
#result-container.equilibrado-profile { background-color: #e1f5fe; border-color: var(--equilibrado-color); }
#result-container.equilibrado-profile #result-title { color: var(--equilibrado-color); }
#result-container.economista-profile { background-color: #e8f5e9; border-color: var(--economista-color); }
#result-container.economista-profile #result-title { color: var(--economista-color); }
#result-container.error-profile { background-color: #fff3e0; border-color: var(--warning-color); } /* For consumista error */
#result-container.error-profile #result-title { color: var(--warning-color); }

/* Result container variants for Perfil Financeiro */
#result-container.investidor { background-color: #e8f5e9; border-color: var(--investidor-color); }
#result-container.investidor #result-title { color: var(--investidor-color); }
#result-container.equilibrado { background-color: #e1f5fe; border-color: var(--equilibrado-color); } /* Uses equilibrado-color */
#result-container.equilibrado #result-title { color: var(--equilibrado-color); }
#result-container.endividado { background-color: #fff3e0; border-color: var(--endividido-color); }
#result-container.endividado #result-title { color: var(--endividido-color); }
#result-container.superendividado { background-color: #ffebee; border-color: var(--superendividado-color); }
#result-container.superendividado #result-title { color: var(--superendividado-color); }


/* Specific styles for Teste de Investidor (Blue primary) */
.investidor-quiz-container #progress-bar {
    background-color: var(--test-primary-color-blue);
}

.investidor-quiz-container .options label {
    background-color: var(--test-secondary-color); /* Uses a light gray for options */
}

.investidor-quiz-container .options label:hover {
    border-color: var(--test-primary-color-blue);
}

.investidor-quiz-container .options input[type="radio"]:checked + label {
    border-color: var(--test-primary-color-blue);
    background-color: #e9efff; /* Light blue */
    box-shadow: 0 4px 12px rgba(38, 90, 221, 0.15);
}

.investidor-quiz-container .submit-btn {
    background-color: var(--test-primary-color-blue);
}
.investidor-quiz-container .submit-btn:hover {
    background-color: #1c45a3; /* Darker blue */
}
/* .investidor-quiz-container header h1 color can be default or set if needed */

/* Result container variants for Teste Investidor */
#result-container.conservative { background-color: #f0f9ff; border-color: var(--conservative-color); }
#result-container.conservative #result-title { color: var(--conservative-color); }
#result-container.moderate { background-color: #fffbeb; border-color: var(--moderate-color); }
#result-container.moderate #result-title { color: var(--moderate-color); }
#result-container.arrojado { background-color: #fee2e2; border-color: var(--arrojado-color); }
#result-container.arrojado #result-title { color: var(--arrojado-color); }
#result-container.aggressive { background-color: #f5f3ff; border-color: var(--aggressive-color); }
#result-container.aggressive #result-title { color: var(--aggressive-color); }


/* Responsive adjustments */
@media (max-width: 600px) {
    .quiz-page-container { 
        padding: 20px;
        /* Remove a margem superior para usar o padding do <main>, mantém o centro e a margem inferior */
        margin: 0 auto 20px;
    }
    .quiz-page-container header h1 { font-size: 1.8rem; }
    .options label, .submit-btn { padding: 12px 15px; font-size: 1rem; }
    #result-container { padding: 25px; }
    #result-title { font-size: 2rem; }
}