/* ==============================================================================
   SIMULADOR: ESTRUTURA (tarefa 3.3)
   Grid de 2 colunas (prévia sticky à esquerda, wizard à direita), card da prévia,
   posição do stepper de etapas e espaço inferior para a bandeja de resumo (3.5).
   Aparência de cards de tipologia, swatches e campos: simulator.css (3.4).
   ============================================================================== */

.sim-section {
    --sim-nav-h: 64px;                 /* altura da .site-nav (56px + respiro) */
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);   /* a bandeja não é mais sticky embaixo: fica na coluna da prévia */
}

.sim-section-title {
    margin: 0 0 var(--space-8);
}

/* ---------- Grid ---------- */
.sim-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.sim-preview-col,
.sim-wizard-col { min-width: 0; }

/* Área rolável das etapas (#wizard_body): só rola no desktop (abaixo, sem altura fixa) */
.sim-wizard-body { min-width: 0; }

/* Desktop: as duas colunas ocupam a altura útil da tela (tela − nav − respiro em cima e embaixo).
   Esquerda = prévia (estica) + bandeja; direita = stepper fixo + etapa rolável + rodapé fixo.
   Mínimo de 520px para telas muito baixas não espremerem o palco e os botões. */
@media (min-width: 992px) {
    .sim-section {
        --sim-col-top: calc(var(--sim-nav-h) + var(--space-4));
        --sim-col-h: max(520px, calc(100vh - var(--sim-nav-h) - 2 * var(--space-4)));
    }
    @supports (height: 100dvh) {
        .sim-section { --sim-col-h: max(520px, calc(100dvh - var(--sim-nav-h) - 2 * var(--space-4))); }
    }

    .sim-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 400px);
        gap: var(--space-8);
        align-items: stretch;
        scroll-margin-top: var(--sim-col-top);   /* alvo do scroll ao entrar em edição e da âncora #simulador (simulator.js) */
    }
    /* O botão flutuante do WhatsApp (fixo, canto inferior direito) cobriria a nota: reserva só o lado dele */
    .sim-wizard-footnote { text-align: left !important; padding-right: 150px; }
    .sim-preview-col,
    .sim-wizard-col {
        position: sticky;
        top: var(--sim-col-top);
        display: flex;
        flex-direction: column;
        height: var(--sim-col-h);
        min-height: 0;
    }

    /* Esquerda: a prévia fica com o que sobra da bandeja; o palco encolhe até um mínimo */
    .sim-preview-col { gap: var(--space-4); }
    .sim-preview-col > .sim-preview-card { flex: 1 1 auto; min-height: 0; }
    .sim-preview-col > .quote-tray-wrap { flex: 0 0 auto; margin-top: 0; }
    .sim-preview-card .sim-preview-stage:not(.d-none) {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
    }
    .sim-preview-card .preview-stage {
        flex: 1 1 0;
        height: auto;
        min-height: 220px;
    }
    .sim-preview-card .sim-preview-photos:not(.d-none) { flex: 1 1 0; height: auto; min-height: 220px; }

    /* Direita: só #wizard_body rola */
    .sim-wizard {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .sim-wizard > :not(.sim-wizard-body) { flex: 0 0 auto; }
    .sim-wizard-body {
        flex: 1 1 auto;
        min-height: 0;
        /* respiro para o anel de seleção/foco dos cards não ser cortado pela rolagem */
        margin: 0 -6px;
        padding: 4px 6px var(--space-2);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-block: var(--space-8);    /* foco/scrollIntoView param fora da faixa do fade */
        scrollbar-width: thin;
        scrollbar-color: var(--fill-control-hover) transparent;
        --sim-fade-top: 0px;
        --sim-fade-bottom: 0px;
    }
    .sim-wizard-body.is-fade-top { --sim-fade-top: var(--space-6); }
    .sim-wizard-body.is-fade-bottom { --sim-fade-bottom: var(--space-6); }
    .sim-wizard-body.is-fade-top,
    .sim-wizard-body.is-fade-bottom {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sim-fade-top), #000 calc(100% - var(--sim-fade-bottom)), transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sim-fade-top), #000 calc(100% - var(--sim-fade-bottom)), transparent 100%);
    }
    .sim-wizard .sim-wizard-footer { margin-top: var(--space-4); }
}

/* ---------- Card da prévia ---------- */
.sim-preview-card {
    border-radius: var(--radius-panel);
    padding: var(--space-6) var(--space-6) var(--space-6);
}
.sim-preview-card:hover { transform: none; }

.sim-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.sim-preview-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}
.sim-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: var(--space-1) 10px;
    border-radius: 980px;
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: var(--fs-caption);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sim-preview-badge .preview-typology-icon { display: none; }
.sim-preview-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.sim-preview-card .preview-mode-switch.segmented { flex: 0 0 auto; display: inline-flex; }
.sim-preview-card .preview-mode-switch.segmented.d-none { display: none !important; }

.sim-preview-stage,
.sim-preview-photos {
    margin-top: var(--space-4);
    border-radius: var(--radius-card);
    background: var(--bg-grouped);
}

.sim-preview-specs { margin-top: var(--space-10); }

/* ---------- Coluna do wizard (sem card, como no protótipo) ---------- */
.sim-wizard.glass-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.sim-wizard.glass-card:hover { transform: none; box-shadow: none; }

/* Stepper de etapas: posicionado no topo do wizard (estados .is-current/.is-done vêm do ui.css). */
.sim-steps {
    margin-bottom: var(--space-6);
}

.sim-step-title { margin: 0; }
.sim-step-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.sim-step-intro {
    margin: 6px 0 var(--space-5);
    font-size: var(--fs-callout);
    color: var(--text-secondary);
}
.sim-step-footnote {
    margin: var(--space-3) var(--space-1) 0;
    font-size: var(--fs-footnote);
    color: var(--text-secondary);
}

.sim-group {
    border-radius: var(--radius-card);
    padding: var(--space-5);
}
.sim-group + .sim-group { margin-top: var(--space-3); }

.sim-option-group + .sim-option-group {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--separator);
}

/* Lambril em segmented: cada .swatch-option (mantido para o JS) ocupa uma fatia */
.sim-lambril-segmented { display: inline-flex; flex-wrap: nowrap; gap: 2px; }
.sim-lambril-segmented > .swatch-option { flex: 1 1 0; display: flex; }
.sim-lambril-segmented > .swatch-option.d-none { display: none !important; }
.sim-lambril-segmented > .swatch-option > .segmented-item { flex: 1 1 auto; }

/* Linha "Manter acabamento" com o switch à direita */
.sim-switch-row.form-check.form-switch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap);
    padding: 14px var(--space-5);
    margin-bottom: 0;
}
.sim-switch-row .form-check-label { flex: 1 1 auto; }
.sim-switch-row .form-check-input {
    float: none;
    flex: 0 0 auto;
    margin: 0;
}

.sim-obs { margin-top: var(--space-4); }

.sim-area-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-3) var(--space-1) 0;
    font-size: var(--fs-footnote);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.sim-area-line #live_area_preview { color: var(--text); }

.sim-qty-stepper { margin-top: 2px; }

.sim-wizard-footer {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* Etapa 1: grade de tipologias sem rolagem interna no desktop */
.sim-typology-grid { margin-top: 0; }

@media (max-width: 991.98px) {
    .sim-section { padding-top: var(--space-10); }
    .sim-preview-card { padding: var(--space-5); }
}