/**
 * Páginas internas do simulador
 *
 * Estas telas (recuperação de senha, lista de simulações, pré-cadastro, ficha
 * técnica, opt-out, confirmação de cadastro, gestão do farol, comparativo e vídeo)
 * usam a marcação do layout antigo, cujas classes viviam em main.css. O layout
 * atual carrega apenas app.min.css, então elas ficavam renderizando sem estilo
 * nenhum. Este arquivo reveste essa marcação com a identidade visual atual do site.
 *
 * Todo o conteúdo está escopado em .grid-container — classe inexistente no
 * app.min.css — para não interferir nas páginas do layout novo.
 */

.grid-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 72px;
    box-sizing: border-box;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: #122233;
}

.grid-container *,
.grid-container *::before,
.grid-container *::after { box-sizing: border-box; }

/* ---------- Grade ---------- */
.grid-container [class*="grid-"] { width: 100%; }

@media (min-width: 768px) {
    .grid-container .grid-5   { width: 5%; }
    .grid-container .grid-10  { width: 10%; }
    .grid-container .grid-15  { width: 15%; }
    .grid-container .grid-20  { width: 20%; }
    .grid-container .grid-25  { width: 25%; }
    .grid-container .grid-30  { width: 30%; }
    .grid-container .grid-33  { width: 33.3333%; }
    .grid-container .grid-35  { width: 35%; }
    .grid-container .grid-40  { width: 40%; }
    .grid-container .grid-45  { width: 45%; }
    .grid-container .grid-50  { width: 50%; }
    .grid-container .grid-55  { width: 55%; }
    .grid-container .grid-60  { width: 60%; }
    .grid-container .grid-65  { width: 65%; }
    .grid-container .grid-70  { width: 70%; }
    .grid-container .grid-75  { width: 75%; }
    .grid-container .grid-80  { width: 80%; }
    .grid-container .grid-100 { width: 100%; }

    .grid-container .prefix-10 { margin-left: 10%; }
    .grid-container .prefix-15 { margin-left: 15%; }
    .grid-container .prefix-20 { margin-left: 20%; }
    .grid-container .suffix-15 { margin-right: 15%; }
    .grid-container .suffix-20 { margin-right: 20%; }

    .grid-container [class*="grid-"]:not(.grid-parent):not(.grid-100) {
        display: inline-block;
        vertical-align: top;
    }
}

.grid-container .grid-parent { padding-left: 0; padding-right: 0; }

.grid-container .margem-topo-10 { margin-top: 16px; }
.grid-container .margem-topo-20 { margin-top: 26px; }
.grid-container .text-center { text-align: center; }
.grid-container .right { text-align: right; }

/* ---------- Painel ---------- */
.grid-container .painel {
    background: #fff;
    border: 1px solid #e3e8ed;
    border-radius: 10px;
    padding: 36px 40px 40px;
    box-shadow: 0 1px 2px rgba(18, 34, 51, .05), 0 8px 28px rgba(18, 34, 51, .06);
}

@media (max-width: 767px) {
    .grid-container { padding: 24px 16px 48px; }
    .grid-container .painel { padding: 26px 20px 30px; }
    .grid-container .prefix-15,
    .grid-container .suffix-15,
    .grid-container .prefix-20,
    .grid-container .suffix-20 { margin-left: 0; margin-right: 0; }
}

/* ---------- Tipografia ---------- */
.grid-container h1 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #122233;
    margin: 0 0 6px;
    padding-bottom: 16px;
    border-bottom: 3px solid #EC1C23;
    display: inline-block;
}

.grid-container h2 { font-size: 20px; font-weight: 700; color: #122233; margin: 28px 0 10px; }
.grid-container h3 { font-size: 16px; font-weight: 700; color: #122233; margin: 22px 0 8px; }
.grid-container p  { font-size: 15px; line-height: 1.65; color: #4a5764; margin: 0 0 14px; }
.grid-container a  { color: #14638F; }

/* Ícones do layout antigo: a fonte não é mais carregada, então não ocupam espaço */
.grid-container .icon:empty { display: none; }

/* ---------- Formulários ---------- */
.grid-container label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(18, 34, 51, .8);
    margin-bottom: 6px;
}

.grid-container label small {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #6e7c8a;
}

.grid-container input[type="text"],
.grid-container input[type="email"],
.grid-container input[type="password"],
.grid-container input[type="number"],
.grid-container input[type="tel"],
.grid-container select,
.grid-container textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #cbd5de;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #122233;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.grid-container textarea { height: auto; padding: 12px 14px; line-height: 1.5; }

.grid-container input:focus,
.grid-container select:focus,
.grid-container textarea:focus {
    border-color: #89C5F0;
    box-shadow: 0 0 0 3px rgba(137, 197, 240, .35);
}

.grid-container input:disabled,
.grid-container input[disabled] {
    background: #f1f4f7;
    color: #6e7c8a;
    cursor: not-allowed;
}

/* ---------- Botões ---------- */
.grid-container .btn,
.grid-container input[type="button"],
.grid-container input[type="submit"],
.grid-container button {
    display: inline-block;
    min-height: 44px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f1f4f7;
    color: #122233;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    text-decoration: none;
    line-height: 42px;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.grid-container .btn:hover,
.grid-container input[type="button"]:hover,
.grid-container button:hover { background: #e3e8ed; }

.grid-container .btn-primary,
.grid-container input[type="button"].btn-primary,
.grid-container input[type="submit"].btn-primary,
.grid-container button.btn-primary {
    background: #EC1C23;
    border-color: #EC1C23;
    color: #fff;
}

.grid-container .btn-primary:hover,
.grid-container input[type="button"].btn-primary:hover,
.grid-container button.btn-primary:hover { background: #cf1219; border-color: #cf1219; }

.grid-container .btn:focus-visible,
.grid-container input[type="button"]:focus-visible,
.grid-container button:focus-visible {
    outline: 2px solid #122233;
    outline-offset: 2px;
}

.grid-container .btn:disabled,
.grid-container input[type="button"]:disabled,
.grid-container button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Tabelas ---------- */
.grid-container table { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid-container th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6e7c8a;
    padding: 10px 12px;
    border-bottom: 2px solid #e3e8ed;
}
.grid-container td { padding: 12px; border-bottom: 1px solid #eef1f4; vertical-align: middle; }
.grid-container tr:last-child td { border-bottom: 0; }