/**
 * Tema Start alinhado com go.clan.pt (propostas digitais).
 * Comentário pt-PT: camada por cima de clan.css — só redefine tokens e superfícies.
 * Linguagem: fundo #fbfbfd, cartões brancos raio 24 com fio #ece7f7,
 * degradê da marca em CTAs/títulos, Roboto Slab nos títulos, Lato no texto.
 */
:root,
body.theme-clan {
    --ink: var(--clan-dark-blue);
    --ink2: var(--clan-purple);
    --magenta: var(--clan-magenta);
    --text: #4e5265;
    --muted: #7f8290;
    --bg: #fbfbfd;
    --card: #fff;
    --line: #ece7f7;
    --line-input: #ddd8ec;
    --soft-a: #fff0eb;
    --soft-b: #f6edff;
    --grad: linear-gradient(105deg, var(--clan-orange), var(--clan-pink) 38%, var(--clan-magenta) 67%, var(--clan-purple));
    --grad-dark: linear-gradient(135deg, #001D6C, #491D8B 55%, #D81B60);
    --shadow: 0 16px 40px rgba(0, 29, 108, .08);
    --shadow-float: 0 24px 60px rgba(0, 29, 108, .14);
    --radius-xl: 24px;

    /* Tokens herdados de clan.css: alinhar com o go */
    --surface-1: #fff;
    --surface-2: var(--bg);
    --border-soft: var(--line);
    --border-hover: #d9cdf2;
    --text-main: var(--ink);
    --text-body: var(--text);
    --text-muted: var(--muted);
    --text-soft: var(--muted);
    --shadow-card: var(--shadow);
    --radius-card: var(--radius-xl);
    --radius: 14px;
}

/* SGL: mesma gramática, palete própria */
body.theme-sgl {
    --ink: #23292E;
    --ink2: #535E5B;
    --magenta: #0E7C66;
    --text: #535E5B;
    --muted: #6a7471;
    --bg: #F4F6F5;
    --line: #d8dedc;
    --line-input: #cfd6d3;
    --soft-a: #eef7f3;
    --soft-b: #f3f8e7;
    --grad: linear-gradient(105deg, #0E7C66, #535E5B 60%, #23292E);
    --grad-dark: linear-gradient(135deg, #23292E, #535E5B 60%, #0E7C66);
    --shadow: 0 16px 40px rgba(35, 41, 46, .08);
    --shadow-float: 0 24px 60px rgba(35, 41, 46, .14);
}

/* ---------- Base ---------- */
body.page-simulator {
    background: var(--bg);
    color: var(--text);
}
body.page-simulator main.container::before {
    display: none;
}
body.page-simulator main a:not(.btn):not(.thankyou-cta):not(.quote-list-item) {
    color: var(--magenta);
}
h1, h2, h3, h4, .font-Roboto {
    font-family: var(--font-roboto-slab);
}

/* Degradê em texto (mesmo truque do go: inline-block + padding evita cortar a última letra) */
.grad-text {
    display: inline-block;
    padding-right: .12em;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Eyebrow com traço em degradê */
.eyebrow {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 700;
    color: #777487;
}
.eyebrow span {
    display: inline-block;
    width: 42px;
    height: 3px;
    border-radius: 4px;
    background: var(--grad);
    vertical-align: middle;
    margin-left: 12px;
}

/* ---------- Header: topbar clara com desfoque (go) ---------- */
body.theme-clan .clan-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: 72px;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgba(70, 19, 183, .08);
}
body.theme-clan .clan-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(251, 251, 253, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
body.theme-clan .header-logo-link .logo {
    height: 30px;
}
body.theme-clan .header-action-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    backdrop-filter: none;
    font-size: .95rem;
}
body.theme-clan .header-action-btn:hover {
    background: #faf7ff;
    border-color: var(--border-hover);
    transform: none;
}
body.theme-clan .header-action-badge {
    border-color: #fff;
}
.header-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    background: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    color: var(--ink2);
    white-space: nowrap;
}
body.theme-sgl .header-pill {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .18);
    color: #fff;
}
body.theme-sgl .clan-header {
    height: 72px;
}

/* ---------- Título de página (hero compacto) ---------- */
.simulator-continuity {
    padding: 10px 0 14px;
    margin-bottom: 20px;
}
.simulator-continuity-eyebrow {
    font-size: 11px;
    letter-spacing: .24em;
    font-weight: 700;
    color: #777487;
    margin-bottom: 10px;
}
.simulator-continuity-eyebrow span {
    display: inline-block;
    width: 42px;
    height: 3px;
    border-radius: 4px;
    background: var(--grad);
    vertical-align: middle;
    margin-left: 12px;
}
.simulator-continuity-title {
    font-family: var(--font-roboto-slab);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.04em;
    color: var(--ink);
}
.simulator-continuity-title .accent {
    display: inline-block;
    padding-right: .12em;
    padding-bottom: .1em;
    margin-bottom: -.1em;
    font-family: inherit;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.theme-sgl .simulator-continuity-title .accent {
    color: transparent;
}

/* ---------- Layout ---------- */
/* Comentário pt-PT: só desktop — no mobile o clan.css empilha numa coluna */
@media (min-width: 992px) {
    .simulator-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 32px;
        padding: 24px 0 56px;
    }
    .simulator-layout > div:last-child {
        top: 92px;
    }
}

/* ---------- Cartão do formulário ---------- */
.simulator-form-shell {
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    background: var(--card);
}
.simulator-form-card-header {
    background: #fff;
    color: var(--ink);
    padding: 26px 28px 0;
    border-bottom: 0;
}
.simulator-form-card-header-eyebrow {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--soft-b);
    color: var(--ink2);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 14px;
}
body.theme-sgl .simulator-form-card-header-eyebrow {
    color: var(--magenta);
}
.simulator-form-card-header-title {
    font-family: var(--font-roboto-slab);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.simulator-form-card-body {
    padding: 24px 28px 28px;
}

/* Labels e inputs (go .form) */
.simulator-form-card-body .form-label {
    font-family: var(--font-lato);
    font-size: 13px;
    font-weight: 750;
    color: var(--ink);
    margin-bottom: 6px;
}
.simulator-form-card-body .form-sublabel {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.45;
    margin-bottom: 10px;
}
.simulator-form-card-body .form-control,
.simulator-form-card-body .form-select,
.simulator-form-card-body .select2-container--bootstrap-5 .select2-selection {
    border: 1px solid var(--line-input);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    padding: 12px 14px;
}
.simulator-form-card-body .form-control:focus,
.simulator-form-card-body .form-select:focus {
    border-color: var(--magenta);
    box-shadow: 0 0 0 3px rgba(123, 31, 162, .12);
}
body.theme-sgl .simulator-form-card-body .form-control:focus,
body.theme-sgl .simulator-form-card-body .form-select:focus {
    box-shadow: 0 0 0 3px rgba(14, 124, 102, .14);
}
.simulator-form-card-body .form-check-input {
    width: 1.1em;
    height: 1.1em;
    border-color: var(--line-input);
}
.simulator-form-card-body .form-check-input:checked {
    background-color: var(--magenta);
    border-color: var(--magenta);
}
.simulator-form-card-body .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(123, 31, 162, .12);
    border-color: var(--magenta);
}
.simulator-form-section {
    border-color: var(--line);
}

/* Toggle subsídio: opção activa em tinta */
.food-allowance-toggle .btn {
    border: 1px solid var(--line-input);
    color: var(--ink);
    background: #fff;
}
.food-allowance-toggle .btn.active,
.food-allowance-toggle .btn-check:checked + .btn {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* Sugestões de função */
.suggestions-dropdown {
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}
.suggestion-item:hover {
    background: var(--soft-b);
    color: var(--ink);
}

/* ---------- Cartões de produto (go .card / .chosen) ---------- */
.service-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 18px;
    background: #fff;
    box-shadow: none;
}
.service-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.service-card.selected {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
    box-shadow: var(--shadow);
    transform: none;
}
.service-card-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--soft-a), var(--soft-b));
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--magenta);
}
.service-card.selected .service-card-icon,
.service-card.selected .service-card-title {
    color: var(--ink);
}
.service-card-title {
    font-family: var(--font-roboto-slab);
    font-size: 1.05rem;
    color: var(--ink);
}
.service-card-desc {
    color: var(--muted);
}
body.theme-sgl .service-card.selected,
body.theme-sgl .service-card:hover {
    border-color: transparent !important;
    box-shadow: var(--shadow);
}
body.theme-sgl .service-card:hover {
    border-color: var(--border-hover) !important;
}

/* ---------- Botões de navegação (go .cta / .ghost) ---------- */
.simulator-nav-buttons {
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 18px 28px 24px;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.simulator-nav-buttons .btn {
    border-radius: 999px;
    font-weight: 750;
    padding: 13px 18px;
}
/* Desktop: CTAs compactos à direita, como no go; no mobile voltam a esticar */
@media (min-width: 992px) {
    .simulator-nav-buttons {
        justify-content: flex-end;
    }
    .simulator-nav-buttons .btn {
        flex: 0 0 auto;
        min-width: 180px;
        padding: 13px 26px;
    }
}
.simulator-nav-buttons .btn-primary,
body.theme-sgl #btnNext.btn-primary {
    background: var(--grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(123, 31, 162, .2);
}
.simulator-nav-buttons .btn-primary:hover,
body.theme-sgl #btnNext.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(123, 31, 162, .26);
}
body.theme-sgl .simulator-nav-buttons .btn-primary {
    box-shadow: 0 10px 28px rgba(14, 124, 102, .22);
}
.simulator-nav-buttons .btn-outline-primary,
body.theme-sgl .simulator-nav-buttons .btn-outline-primary {
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    background: #fff !important;
}
.simulator-nav-buttons .btn-outline-primary:hover,
body.theme-sgl .simulator-nav-buttons .btn-outline-primary:hover {
    border-color: var(--border-hover) !important;
    background: #faf7ff !important;
    color: var(--ink) !important;
}

/* ---------- Sidebar (go .summaryCard) ---------- */
.sidebar-card {
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-float);
    background: #fff;
}
.sidebar-header {
    background: #fff;
    padding: 20px 20px 6px;
}
.sidebar-header-title {
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--muted);
}
.sidebar-header-subtitle {
    font-size: 17px;
    color: var(--ink);
}
.sidebar-steps {
    background: #fff;
    padding: 10px 12px 12px;
    gap: 6px;
}
.sidebar-step {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.sidebar-step.active {
    background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box !important;
    border: 2px solid transparent !important;
    box-shadow: var(--shadow);
    transform: none;
}
.sidebar-step.completed {
    border-color: var(--line);
    background: var(--bg);
}
.sidebar-step.clickable:hover {
    border-color: var(--border-hover);
    background: #faf7ff;
    box-shadow: none;
}
.step-badge {
    background: var(--bg);
    border: 1.5px solid var(--line-input);
    color: var(--ink2);
    font-weight: 800;
}
.step-badge.active {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    transform: none;
}
.step-num .fa-check-circle {
    color: var(--magenta);
}
.sidebar-step.active .step-label {
    color: var(--ink);
}
.sidebar-step.completed .step-summary {
    color: var(--ink2);
}
.sidebar-step:hover .step-edit-link {
    color: var(--magenta);
    background: var(--soft-b);
}
.sidebar-footer {
    border-top: 1px solid var(--line);
    padding: 14px 20px 18px;
}
.sidebar-progress-pct {
    color: var(--ink);
}
.sidebar-progress-bar {
    background: var(--bg);
    height: 5px;
}
.sidebar-progress-bar-fill {
    background: var(--grad);
}

/* ---------- Indicador móvel ---------- */
.step-indicator-mobile {
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: none;
    background: #fff;
}
.step-indicator-label {
    color: var(--muted);
}
.step-indicator-label strong {
    color: var(--ink);
}
.step-indicator-title {
    color: var(--ink);
    font-weight: 700;
}
.step-indicator-mobile .progress {
    background: var(--bg);
}
.step-indicator-mobile .progress-bar,
body.theme-sgl .step-indicator-mobile .progress-bar.bg-clan-pink {
    background: var(--grad) !important;
}

/* ---------- Modal de confirmação ---------- */
.summary-modal-content {
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
}
.summary-modal-header {
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.summary-modal-eyebrow {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #777487;
    font-weight: 700;
}
.summary-modal-title {
    font-family: var(--font-roboto-slab);
    color: var(--ink);
    letter-spacing: -.02em;
}
.summary-modal-lead {
    color: var(--muted);
}
.summary-modal-close {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 50%;
}
.summary-modal-footer {
    border-top: 1px solid var(--line);
    background: #fff;
}
.btn-summary-cancel {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    font-weight: 650;
}
.btn-summary-cancel:hover {
    background: #faf7ff;
    border-color: var(--border-hover);
}
.btn-summary-confirm {
    background: var(--grad);
    border: 0;
    color: #fff;
    border-radius: 999px;
    font-weight: 750;
    box-shadow: 0 10px 28px rgba(123, 31, 162, .2);
}
.btn-summary-confirm:hover {
    background: var(--grad);
    transform: translateY(-1px);
}

/* ---------- Modal de reinício ---------- */
.reset-modal-content {
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
}
.reset-modal-icon {
    background: linear-gradient(135deg, var(--soft-a), var(--soft-b));
    color: var(--magenta);
}
.reset-modal-title {
    font-family: var(--font-roboto-slab);
    color: var(--ink);
}

/* ---------- Overlay «a registar» ---------- */
.generating-box {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
}
.generating-progress-bar {
    background: var(--grad);
}

/* ---------- Offcanvas de termos ---------- */
.offcanvas {
    border-left: 0 !important;
    border-radius: 24px 0 0 24px;
    box-shadow: -24px 0 60px rgba(0, 29, 108, .22);
}
.offcanvas-header {
    border-bottom: 1px solid var(--line);
}
.offcanvas-title {
    font-family: var(--font-roboto-slab);
    color: var(--ink);
}

/* ---------- Thank-you (hero do go) ---------- */
.thankyou-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 100% 0%, rgba(216, 27, 96, .08), transparent 55%), var(--bg);
    border: 0;
    border-radius: 0;
    color: var(--ink);
    padding: 36px 0 28px;
}
/* Arco da marca no canto, como no hero mobile do go */
.thankyou-hero::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -110px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 34px solid transparent;
    background: var(--grad) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
    opacity: .18;
    pointer-events: none;
}
.thankyou-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 44em;
}
.thankyou-eyebrow {
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 700;
    color: #777487;
}
body.theme-sgl .thankyou-eyebrow {
    color: #777487;
}
.thankyou-eyebrow span {
    display: inline-block;
    width: 42px;
    height: 3px;
    border-radius: 4px;
    background: var(--grad);
    vertical-align: middle;
    margin-left: 12px;
}
.thankyou-title {
    font-family: var(--font-roboto-slab);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: .98;
    letter-spacing: -.045em;
    color: var(--ink);
    margin: 14px 0 16px;
}
/* Comentário pt-PT: padding inferior para o descendente do «g» não ser cortado pelo background-clip */
.thankyou-title .grad-text {
    padding-right: .14em;
    padding-bottom: .12em;
    margin-bottom: -.12em;
    line-height: 1.05;
}
.thankyou-lead {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--text);
    max-width: 34em;
}
.thankyou-body {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 28px;
}
.thankyou-summary-title {
    font-family: var(--font-roboto-slab);
    color: var(--ink);
    font-size: 1.2rem;
}
.thankyou-summary-row dt {
    color: var(--muted);
    letter-spacing: .08em;
}
.thankyou-summary-row dd {
    color: var(--ink);
    font-weight: 650;
}
.thankyou-cta {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.thankyou-cta:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.thankyou-cta-primary {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
}
.thankyou-cta-kicker {
    color: var(--magenta);
    letter-spacing: .08em;
}
.thankyou-cta-label {
    font-family: var(--font-roboto-slab);
    color: var(--ink);
}
.thankyou-cta-arrow {
    color: var(--magenta);
}
.thankyou-footer-actions .btn {
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 750;
    border: 0 !important;
    background: var(--grad) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(123, 31, 162, .2);
}

/* ---------- Footer: igual ao go (escuro, logo branco) ---------- */
/* Comentário pt-PT: mesma largura que o .container Bootstrap da página */
.clan-footer__inner {
    width: 100%;
    box-sizing: border-box;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
@media (min-width: 576px) {
    .clan-footer__inner { max-width: 540px; }
}
@media (min-width: 768px) {
    .clan-footer__inner { max-width: 720px; }
}
@media (min-width: 992px) {
    .clan-footer__inner { max-width: 960px; }
}
@media (min-width: 1200px) {
    .clan-footer__inner { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .clan-footer__inner { max-width: 1320px; }
}
.clan-footer__subscribe,
.clan-footer__subscribe:hover {
    background: var(--grad);
}
.clan-footer__newsletter {
    border-radius: 12px;
}
body.theme-sgl .clan-footer__subscribe {
    background: #B6F23E !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
    body.theme-clan .clan-header,
    body.theme-sgl .clan-header {
        height: 64px;
    }
    /* Comentário pt-PT: mantém o cartão no mobile (como o go), com respiração interior */
    .simulator-form-shell,
    .simulator-form-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
    }
    .simulator-form-shell {
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
    .simulator-form-card-header {
        margin: 0;
        padding: 18px 16px 0;
        background: #fff;
        border-radius: 0;
    }
    .simulator-form-card-header-title {
        font-size: 1.3rem;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--line);
    }
    .simulator-form-card-body,
    .simulator-form-card-body.step-container {
        padding: 16px 16px 20px;
        background: #fff;
    }
    /* Barra fixa no fundo, como a .mobileBar do go */
    .simulator-nav-buttons {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 14px 34px rgba(0, 29, 108, .18);
    }
    .simulator-nav-buttons .btn {
        padding: 12px 14px;
    }
    .service-card {
        border-radius: 16px;
        align-items: center;
    }
    .service-card-icon {
        width: 44px;
        height: 44px;
        margin: 0;
        font-size: 1.1rem;
    }
    .thankyou-hero {
        padding: 20px 0 18px;
    }
    .thankyou-body {
        padding: 20px 16px 22px;
    }
}
@media (max-width: 576px) {
    .simulator-continuity-title {
        font-size: 1.75rem;
    }
    .header-pill {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .thankyou-cta,
    .service-card,
    .simulator-nav-buttons .btn {
        transition: none !important;
    }
}