/* ============================================================================
   Neurodor Onboarding — Responsivo v2 (opt-in)
   ----------------------------------------------------------------------------
   PRINCÍPIO: ADITIVO. Não esmaga o desktop. Não toca em layout split.
   Só altera comportamento em viewports que precisam, gated por classes.

   Classes no shell:
     .is-resp-v2                  → master
     .is-resp-v2--fluid           → tipografia fluida em MOBILE (<600)
     .is-resp-v2--compact-stepper → stepper compacto em MOBILE (<600)
     .is-resp-v2--sticky-footer   → footer sticky em MOBILE (<600)
     .is-resp-v2--photo-v2        → upload de foto preview circular
     .is-resp-v2--checkout-2col   → etapa 4 com summary sticky em ≥720px
     .is-resp-v2--no-zoom         → input font-size 16px em MOBILE (<600)
     .is-resp-v2--side-banner     → side vira banner ~80px em MOBILE/TABLET (<880)
     .is-resp-v2--side-hidden     → side oculto em MOBILE/TABLET (<880)
============================================================================ */

/* ─── 100dvh em vez de 100vh (resolve barra Safari móvel + teclado) ─────── */
.neurodor-onboarding-shell.is-resp-v2.is-layout-split {
    min-height: 100dvh;
}
/* No layout split desktop, o card original tem max-height: calc(100vh - 64px)
   + overflow interno. Em v2 desligamos isso para o teclado mobile não cortar. */
@media (max-width: 879.98px) {
    .neurodor-onboarding-shell.is-resp-v2.is-layout-split .neurodor-onboarding-main .neurodor-onboarding-card {
        max-height: none;
        overflow: visible;
    }
}

/* ─── Stepper: remover mask-image (causa ilusão de scroll horizontal) ───── */
/* O onboarding.css base aplica `mask-image: linear-gradient(...)` que cria
   fade transparente nas bordas, dando aparência de scroll lateral mesmo
   quando o ol cabe no viewport. v2 sempre desliga isso. */
.neurodor-onboarding-shell.is-resp-v2 .neurodor-stepper-nav {
    -webkit-mask-image: none;
            mask-image: none;
}

/* ============================================================================
   1) Tipografia fluida (.is-resp-v2--fluid)
   APENAS em mobile (<600px) — diminui fontes para caber.
   Em ≥600px, mantém os tamanhos originais (não toca).
============================================================================ */
@media (max-width: 599.98px) {
    .neurodor-onboarding-shell.is-resp-v2--fluid .neurodor-onboarding-title {
        font-size: clamp(1.125rem, 0.95rem + 1vw, 1.5rem);
        line-height: 1.25;
    }
    .neurodor-onboarding-shell.is-resp-v2--fluid .neurodor-onboarding-subtitle {
        font-size: var(--nd-fs-sm);
        line-height: 1.5;
    }
    .neurodor-onboarding-shell.is-resp-v2--fluid .neurodor-step-header h2 {
        font-size: var(--nd-fs-base);
    }
    .neurodor-onboarding-shell.is-resp-v2--fluid .neurodor-step-header p {
        font-size: var(--nd-fs-sm);
    }
}

/* ============================================================================
   2) Stepper compacto mobile (.is-resp-v2--compact-stepper)
   <600px: dot inativo 8px + label SÓ do ativo, todos em uma linha sem overflow.
   ≥600px: stepper original preservado (linha bonita, labels visíveis).
============================================================================ */
@media (max-width: 599.98px) {
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-nav {
        position: sticky;
        top: 0;
        z-index: var(--nd-z-sticky);
        background: var(--no-card-bg, #fff);
        margin: calc(-1 * var(--nd-sp-3)) calc(-1 * var(--nd-sp-3)) var(--nd-sp-3);
        padding: var(--nd-sp-2) var(--nd-sp-3);
        border-bottom: 1px solid var(--no-card-border, #e2e8f0);
        overflow: visible; /* override do overflow-x: auto base — não precisa scroll */
    }
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-nav ol {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 6px;
        align-items: center;
        min-width: 0;
        flex-wrap: nowrap;
    }
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-item {
        flex: 0 0 auto;
        padding: 0;
        background: none;
        font-size: 0;
        gap: 0;
        min-width: 0;
        transform: none;
    }
    /* Esconde conector entre items — não cabe no compact */
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-item::after {
        display: none !important;
    }
    /* Esconde número e check, mostra só o dot redondo */
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-num-text,
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-check {
        display: none;
    }
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-num {
        width: 10px;
        height: 10px;
        min-width: 10px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--no-card-border, #cbd5e1);
        box-shadow: none;
        transition: background var(--nd-dur-base) var(--nd-ease-out),
                    width var(--nd-dur-base) var(--nd-ease-out),
                    height var(--nd-dur-base) var(--nd-ease-out);
    }
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-item.is-done .neurodor-stepper-num {
        background: var(--no-primary, #0ea5a4);
    }
    /* Ativo: dot maior + label visível ao lado, ocupa espaço extra */
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-item.is-current {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 100%;
    }
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-item.is-current .neurodor-stepper-num {
        width: 12px;
        height: 12px;
        min-width: 12px;
        background: var(--no-primary, #0ea5a4);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--no-primary, #0ea5a4) 25%, transparent);
    }
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-label {
        display: none;
    }
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-item.is-current .neurodor-stepper-label {
        display: inline-block;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--no-card-text, #0f172a);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    /* Esconde a barra de progresso linear quando temos dots compactos */
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-progress {
        display: none;
    }
}

/* ============================================================================
   3) Sticky footer de ações (.is-resp-v2--sticky-footer)
   APENAS em mobile (<600). Em ≥600 mantém comportamento original.
============================================================================ */
@media (max-width: 599.98px) {
    .neurodor-onboarding-shell.is-resp-v2--sticky-footer .neurodor-step-actions {
        position: sticky;
        bottom: 0;
        z-index: var(--nd-z-sticky);
        background: var(--no-card-bg, #fff);
        margin: var(--nd-sp-4) calc(-1 * var(--nd-sp-3)) calc(-1 * var(--nd-sp-3));
        padding: var(--nd-sp-3) var(--nd-sp-3) max(var(--nd-sp-3), env(safe-area-inset-bottom));
        border-top: 1px solid var(--no-card-border, #e2e8f0);
        display: flex;
        gap: var(--nd-sp-2);
        flex-direction: row; /* sobrescreve column-reverse legado em mobile */
    }
    .neurodor-onboarding-shell.is-resp-v2--sticky-footer .neurodor-step-actions .neurodor-btn {
        flex: 1 1 auto;
        min-height: var(--nd-touch-min);
        width: auto;
    }
    /* Span vazio (placeholder do "Voltar" no primeiro step) some pra não roubar metade */
    .neurodor-onboarding-shell.is-resp-v2--sticky-footer .neurodor-step.is-current[data-step-index="0"] .neurodor-step-actions > span:empty {
        display: none;
    }
}

/* ============================================================================
   4) Anti-zoom iOS (.is-resp-v2--no-zoom)
   APENAS <600px: força font-size 16px nos inputs (impede zoom no foco em iOS).
   Em ≥600px: NADA — mantém font-size original (1rem do onboarding.css base).
============================================================================ */
@media (max-width: 599.98px) {
    .neurodor-onboarding-shell.is-resp-v2--no-zoom input,
    .neurodor-onboarding-shell.is-resp-v2--no-zoom select,
    .neurodor-onboarding-shell.is-resp-v2--no-zoom textarea {
        font-size: 16px;
    }
}

/* ============================================================================
   5) Upload de foto v2 (.is-resp-v2--photo-v2)
   Estilos para o markup gerado por wizard.js (.neurodor-photo-*).
   Independente de viewport — preview circular escalável via clamp.
============================================================================ */
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nd-sp-2);
    cursor: pointer;
    width: 100%;
    margin: 0;
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-preview {
    width: clamp(96px, 22vw, 140px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px dashed var(--no-card-border, #cbd5e1);
    background: var(--no-input-bg, #fff);
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
    transition: border-color var(--nd-dur-base) var(--nd-ease-out),
                transform var(--nd-dur-fast) var(--nd-ease-out);
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-upload:hover .neurodor-photo-preview {
    border-color: var(--no-primary, #0ea5a4);
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-upload:active .neurodor-photo-preview {
    transform: scale(0.97);
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-preview:not([data-empty="true"]) .neurodor-photo-img {
    display: block;
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-preview:not([data-empty="true"]) .neurodor-photo-placeholder {
    display: none;
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-placeholder {
    font-size: var(--nd-fs-xs);
    color: var(--no-card-muted, #64748b);
    text-align: center;
    padding: 0 var(--nd-sp-3);
    line-height: 1.3;
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-hint {
    font-size: var(--nd-fs-xs);
    color: var(--no-card-muted, #64748b);
}
.neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-error {
    font-size: var(--nd-fs-xs);
    color: #dc2626;
    margin-top: var(--nd-sp-1);
}

/* ============================================================================
   6) Pré-checkout 2 colunas (.is-resp-v2--checkout-2col)
   <720px: summary acima, colapsável.
   ≥720px: summary sticky lateral.
   NÃO toca em desktop sem checkout (não muda etapa 4 em modos diferentes).
============================================================================ */
.neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary {
    border: 1px solid var(--no-card-border, #e2e8f0);
    border-radius: var(--nd-radius);
    background: var(--no-input-bg, #fff);
    margin-bottom: var(--nd-sp-4);
}
.neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--nd-sp-3) var(--nd-sp-4);
    font-weight: 600;
    font-size: var(--nd-fs-sm);
    min-height: var(--nd-touch-min);
}
.neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary > summary::-webkit-details-marker {
    display: none;
}
.neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary > summary::after {
    content: '▾';
    transition: transform var(--nd-dur-fast) var(--nd-ease-out);
}
.neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary[open] > summary::after {
    transform: rotate(180deg);
}
.neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary__body {
    padding: var(--nd-sp-3) var(--nd-sp-4) var(--nd-sp-4);
    border-top: 1px solid var(--no-card-border, #e2e8f0);
    font-size: var(--nd-fs-sm);
    line-height: 1.5;
}

@media (min-width: 720px) {
    .neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-step[data-step-id="curso"] .neurodor-step-body {
        display: grid;
        grid-template-columns: 1fr var(--nd-summary-w);
        gap: var(--nd-sp-5);
        align-items: start;
    }
    .neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-step[data-step-id="curso"] .neurodor-checkout-summary {
        grid-column: 2;
        /* 2026-05-21 FIX: era `span 99`. Span de 99 forçava 99 tracks de linha
           no grid; com `gap` (var(--nd-sp-5)=24px) o navegador inseria 98
           row-gaps mesmo nos tracks vazios → ~2350px de espaço em branco
           gigante entre o conteúdo e o footer. A coluna 1 do step curso tem
           no máximo 3 campos (curso, pagamento, skip) — `span 3` cobre a
           altura real sem criar tracks fantasma. */
        grid-row: 1 / span 3;
        position: sticky;
        top: var(--nd-sp-5);
        margin-bottom: 0;
    }
    .neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary > summary {
        cursor: default;
    }
    .neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary > summary::after {
        display: none;
    }
}

/* ============================================================================
   7) Side visual em mobile/tablet — banner_top / hidden
   APENAS <880px. Em ≥880px o painel lateral original é preservado.
============================================================================ */
@media (max-width: 879.98px) {
    /* Modo "banner_top": side vira ~80px com logo + título */
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side {
        min-height: 0;
        padding: var(--nd-sp-3) var(--nd-sp-4);
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: var(--nd-sp-3);
    }
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-inner {
        flex-direction: row;
        align-items: center;
        gap: var(--nd-sp-3);
        width: auto;
    }
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-logo {
        flex: 0 0 auto;
    }
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-logo img {
        max-width: 56px !important;
        height: auto;
    }
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-title {
        font-size: var(--nd-fs-base);
        margin: 0;
        line-height: 1.2;
    }
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-subtitle,
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-lgpd,
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-deco,
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-video,
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-overlay,
    .neurodor-onboarding-shell.is-resp-v2--side-banner.is-layout-split .neurodor-onboarding-side-backdrop {
        display: none;
    }

    /* Modo "hidden": side oculto */
    .neurodor-onboarding-shell.is-resp-v2--side-hidden.is-layout-split .neurodor-onboarding-side {
        display: none;
    }
}

/* ============================================================================
   Reduced motion: respeita preferência
============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .neurodor-onboarding-shell.is-resp-v2--compact-stepper .neurodor-stepper-num,
    .neurodor-onboarding-shell.is-resp-v2--photo-v2 .neurodor-photo-preview,
    .neurodor-onboarding-shell.is-resp-v2--checkout-2col .neurodor-checkout-summary > summary::after {
        transition: none;
    }
}