/* ============================================================
   MEDICINA DIRETA - BOOKING UI
   CSS ESTRUTURAL ESTÁVEL + REFINO DESKTOP/MOBILE
   ============================================================ */

/* ============================================================
   RESET E BASE
============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    width: 100%;
    height: 100dvh; /* 🚀 MÁGICA: dvh (Dynamic Viewport Height) impede que a barra do celular corte o rodapé */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Trava o fundo, apenas o conteúdo interno vai rolar */
    background-color: #E2E8F0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

/* Previne zoom em inputs no iOS */
input, select, textarea {
    font-size: 16px !important;
    touch-action: manipulation;
}

/* ============================================================
   CARD PRINCIPAL E CONTAINERS
============================================================ */
#main-card {
    background: #FFFFFF;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    opacity: 0; /* Para a animação do GSAP */
}

#dynamic-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   SISTEMA DE ETAPAS (STEPS) E ROLAGEM PERFEITA
============================================================ */
.step-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.step-container.step-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 20;
    transition: opacity 0.25s ease;
}

/* A área que realmente rola (O Segredo para não cortar layout) */
.step-content {
    flex: 1; /* Ocupa todo o espaço restante */
    overflow-y: auto; /* Habilita rolagem vertical */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); /* Respeita a área do iPhone */
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
}

.step-content::-webkit-scrollbar { display: none; }

/* ============================================================
   BARRA INFERIOR (BOTÕES DE AVANÇAR)
============================================================ */
.app-bottom-bar {
    flex: none; /* Impede que a barra encolha */
    padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid #F1F5F9;
    z-index: 30;
    width: 100%;
}

.app-bottom-bar.hidden { display: none !important; }

/* ============================================================
   COMPONENTES VISUAIS (CARDS, BOTÕES, INPUTS)
============================================================ */
.date-card {
    position: relative;
    z-index: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.date-card:hover { transform: translateY(-2px); }

.date-card.active {
    z-index: 5;
    background: #0088FF !important;
    border-color: #0088FF !important;
    box-shadow: 0 14px 30px rgba(43, 150, 230, 0.20);
}

.date-card.active span { color: #FFFFFF !important; }
.date-card.active span:first-child { color: rgba(255, 255, 255, 0.92) !important; }
.date-card.active span:last-child { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }

.hora-btn {
    min-height: 50px;
    border-radius: 14px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.hora-btn:hover { transform: translateY(-1px); }
.hora-btn.bg-brand-light { background-color: #0088FF !important; }
.hora-btn.border-brand-light { border-color: #0088FF !important; }
.hora-btn.text-white { color: #FFFFFF !important; }

.drag-container {
    scroll-behavior: smooth;
    cursor: grab;
    scrollbar-width: none;
    padding-top: 0.55rem;
    padding-bottom: 0.95rem;
    display: flex;
    gap: 0.625rem;
    width: max-content;
    min-width: 100%;
    user-select: none;
}
.drag-container::-webkit-scrollbar { display: none; }
.drag-container:active { cursor: grabbing; }

.btn-primary {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 800;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.input-field {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 16px;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.label-field {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.625rem;
}

#form-agendamento { gap: 1rem; }

/* SPINNER DO BOTÃO */
.btn-spinner {
    display: none;
    width: 18px;
    height: 18px;
    margin-left: 12px;
    border: 3px solid rgba(255,255,255,0.28);
    border-top-color: #FFFFFF;
    border-radius: 999px;
    animation: mdSpin 1s linear infinite;
}
@keyframes mdSpin { to { transform: rotate(360deg); } }

/* TIPOGRAFIA FLUIDA */
.fluid-title-xl { font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem); line-height: 1.1; }
.fluid-title-lg { font-size: clamp(1.5rem, 3vw + 0.5rem, 3rem); line-height: 1.15; }
.fluid-title-md { font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2.5rem); line-height: 1.2; }
.fluid-text-base { font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); line-height: 1.6; }
.fluid-text-sm { font-size: clamp(0.75rem, 0.8vw + 0.5rem, 0.875rem); line-height: 1.5; }
.touch-target { min-height: 44px; min-width: 44px; }
.touch-target-lg { min-height: 48px; min-width: 48px; }

/* UTILITÁRIOS E GRID */
.hide-scrollbar { scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.calendar-scroll-container { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
.responsive-grid-cards { display: grid; grid-template-columns: 1fr; gap: 0.875rem; }
.responsive-grid-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.responsive-grid-form { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* TELEFONE INTERNACIONAL */
.iti { width: 100%; }
.iti__country-container { z-index: 10; }

/* ============================================================
   RESPONSIVIDADE: TABLET E DESKTOP (ALINHAMENTO E ESCALA)
============================================================ */
#sidebar-container { display: none; background: #F8FAFC; }

@media (min-width: 640px) {
    .calendar-scroll-container { margin: 0 -1.5rem; padding: 0 1.5rem; }
    .drag-container { gap: 0.75rem; }
    .responsive-grid-cards { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .responsive-grid-times { grid-template-columns: repeat(4, 1fr); }
    .responsive-grid-form { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

@media (min-width: 768px) {
    /* 🚀 TRAVA DEFINITIVA DE CENTRALIZAÇÃO DESKTOP */
    html, body { 
        height: 100vh !important; 
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important; /* Limpa conflitos de padding da tela no Desktop */
    }
    
    #main-card {
        width: min(96vw, 960px);
        /* 🚀 Recuo estratégico para 90vh: Dá espaço para a sombra inferior respirar e centraliza o eixo */
        height: min(90vh, 900px); 
        border-radius: 20px;
        box-shadow: 0 25px 50px -12px rgba(22, 34, 61, 0.15);
        margin: 0 !important; /* Removemos o auto-margin, o Flexbox do body assume o controle 100% */
    }
    
    #sidebar-container { display: flex; width: 35%; min-width: 280px; max-width: 320px; }
    .step-content { padding: 2rem 2.25rem; }
    
    .app-bottom-bar {
        padding: 0 2rem 1.5rem 2rem;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: none;
    }
    
    .btn-primary { padding: 1rem 2rem; }
    .responsive-grid-cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
    #form-agendamento { gap: 1.5rem; }
}

@media (min-width: 1024px) {
    #main-card { 
        width: min(95vw, 1100px); 
        height: min(90vh, 960px); /* Ajustado para 90vh */
        border-radius: 24px; 
    }
    #sidebar-container { min-width: 320px; max-width: 380px; }
    .step-content { padding: 2.5rem; }
    .app-bottom-bar { padding: 0 2.5rem 2rem 2.5rem; }
    .responsive-grid-times { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1280px) {
    #main-card { 
        width: min(94vw, 1280px); 
        height: min(90vh, 1020px); /* Ajustado para 90vh */
        border-radius: 28px; 
    }
    #sidebar-container { min-width: 380px; max-width: 420px; }
    .step-content { padding: 3rem; }
    .app-bottom-bar { padding: 0 3rem 2.5rem 3rem; }
    .responsive-grid-cards { gap: 1.5rem; }
    .responsive-grid-form { gap: 1.5rem; }
}

@media (min-width: 1536px) {
    #main-card { 
        width: min(92vw, 1400px); 
        height: min(90vh, 1100px); /* Ajustado para 90vh */
    }
    #sidebar-container { min-width: 400px; max-width: 480px; }
    .step-content { padding: 3.5rem; }
    .responsive-grid-times { grid-template-columns: repeat(6, 1fr); }
}

/* ============================================================
   🚀 HOTFIX: REFINAMENTO DE UX MOBILE E FÍSICA DE ROLAGEM
============================================================ */

/* 1. PREVENIR ENCAVALAMENTO DOS BOTÕES (Espaçamento de Segurança) */
.step-content {
    /* Cria um espaço fantasma no fim da rolagem para o último input nunca ficar atrás da barra */
    padding-bottom: 6rem !important; 
}

/* 2. REDUÇÃO INTELIGENTE DO CALENDÁRIO (Roubando menos espaço) */
.date-card {
    width: 4rem !important; /* Reduzido de 4.5rem */
    height: 4.5rem !important; /* Reduzido de 5rem */
    min-height: 4.5rem !important;
}

.date-card span:first-child {
    font-size: 9px !important; /* Dia da semana mais delicado */
}

.date-card span:last-child {
    font-size: 1.15rem !important; /* Número um pouco mais compacto */
}

/* Retorna o tamanho original em tablets e desktops */
@media (min-width: 640px) {
    .date-card {
        width: 4.5rem !important;
        height: 5rem !important;
        min-height: 5rem !important;
    }
    .date-card span:first-child { font-size: 10px !important; }
    .date-card span:last-child { font-size: 1.3rem !important; }
}

/* 🚀 3. E 4. CORREÇÃO DEFINITIVA DO DRAG & SCROLL */
.calendar-scroll-container {
    overflow: hidden !important; 
    width: 100% !important;
}

#calendario-dias {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important; /* Aqui acontece a mágica do scroll */
    width: 100% !important;
    scroll-behavior: auto !important; /* Desliga o smooth para o JS não engasgar */
    -webkit-overflow-scrolling: touch !important; 
    cursor: grab !important;
    padding-bottom: 0.5rem !important; 
}

#calendario-dias:active {
    cursor: grabbing !important;
}

#calendario-dias::-webkit-scrollbar {
    display: none !important;
}

/* As datas precisam ter flex: 0 0 auto para não serem esmagadas */
#calendario-dias .date-card {
    flex: 0 0 auto !important; 
    user-select: none !important; /* Impede que o texto seja selecionado ao arrastar */
}


/* ============================================================
   🚀 UX ADVANCED: ELIMINAÇÃO DE SCROLL INTERNO NO DESKTOP
   (Compressão de layout ativada apenas em telas "baixas")
============================================================ */

@media (min-width: 768px) and (max-height: 980px) {
    /* 1. Enxugando a "gordura" vertical das caixas principais */
    .step-content {
        padding-top: 1.5rem !important; 
        padding-bottom: 1rem !important;
    }
    
    .app-bottom-bar {
        padding-top: 0 !important;
        padding-bottom: 1.25rem !important;
    }

    /* 2. Reduzindo os espaços mortos entre títulos e parágrafos */
    h2, #titulo-calendario, #titulo-revisao { 
        margin-bottom: 0.25rem !important; 
    }
    
    p.text-slate-500.leading-relaxed { 
        margin-bottom: 1.25rem !important; 
    }

    /* 3. Compressão da Tela 1 (Calendário) */
    .flex.items-center.justify-between.bg-slate-50 {
        margin-bottom: 1rem !important; 
    }
    
    #horarios-container .flex.items-center {
        margin-top: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    /* 4. Compressão da Tela 2 (Formulário) */
    #form-agendamento { 
        gap: 0.85rem !important; 
    }
    
    .form-animate input, .form-animate select { 
        padding-top: 0.75rem !important; 
        padding-bottom: 0.75rem !important; 
    }
    
    .label-field { 
        margin-bottom: 0.25rem !important; 
    }

    /* 5. Compressão da Tela de Revisão */
    #step-revisao .bg-white.rounded-xl, 
    #step-revisao .bg-slate-50\/50 {
        margin-bottom: 1rem !important;
    }
    
    #step-revisao .bg-brand-accent\/50 {
        padding: 1rem 1.25rem !important;
    }
}

/* Modo Ultra-Compacto para telas de notebooks de 13"/14" */
@media (min-width: 768px) and (max-height: 800px) {
    #main-card {
        height: 98vh !important; 
    }
    .hora-btn {
        min-height: 42px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}





/* ============================================================
   🚀 5. UX ADVANCED: REFINAMENTO DO FORMULÁRIO (RESPIRABILIDADE E PREMIUM UI)
============================================================ */

/* 1. Aumentando o respiro geral entre as linhas do formulário */
#form-agendamento {
    gap: 1.5rem !important; /* Reduzido levemente para melhor encaixe */
    padding-bottom: 2rem !important; 
}

/* 2. Mais espaço nas colunas duplas (Telefones, Cidade/Estado) */
.responsive-grid-form {
    gap: 1.5rem 1.25rem !important; 
}

/* 3. O Padrão Premium para Inputs (Mais altos e confortáveis) */
.input-field {
    padding-top: 1.1rem !important; 
    padding-bottom: 1.1rem !important; 
    padding-right: 1.25rem !important;
    padding-left: 1.25rem; /* 🚀 SEM !important aqui para permitir que a bandeira do telefone respire */
    border-radius: 1rem !important; 
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #16223D !important;
    border: 1px solid #E2E8F0 !important;
    background-color: #F8FAFC !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 4. O Efeito de Foco (Quando o cliente clica para digitar) */
.input-field:focus {
    background-color: #FFFFFF !important;
    border-color: #0088FF !important;
    box-shadow: 0 0 0 4px rgba(43, 150, 230, 0.15), inset 0 1px 2px rgba(0,0,0,0.01) !important; 
    transform: translateY(-2px) !important; 
    outline: none !important;
}

/* 5. Labels mais elegantes e organizadas */
.label-field {
    font-size: 0.725rem !important;
    letter-spacing: 0.12em !important;
    color: #64748B !important;
    margin-bottom: 0.6rem !important;
}

/* 6. Ajuste específico para o Select (Estado) não esmagar a setinha */
select.input-field {
    appearance: none;
    padding-right: 2.5rem !important;
}

/* 🚀 7. CORREÇÃO DO PLUGIN DE TELEFONE (A MÁGICA ACONTECE AQUI) */
.iti {
    display: block !important;
    width: 100% !important;
}

/* Força um recuo gigante na esquerda APENAS nos campos de telefone */
.iti .input-field {
    padding-left: 5.5rem !important; 
}

/* 8. Relaxando o modo compacto: Se a tela for média, não esmaga tanto o form */
@media (min-width: 768px) and (max-height: 980px) {
    #form-agendamento { gap: 1.25rem !important; }
    .input-field { 
        padding-top: 0.9rem !important; 
        padding-bottom: 0.9rem !important; 
    }
}





/* ============================================================
   🚀 7. UX ADVANCED: REVISÃO COMPACTA E ELEGANTE (NOTEBOOKS E MOBILE)
   ============================================================
   Organiza os dados em 2 colunas sem perder legibilidade e os ícones.
============================================================ */

@media (max-height: 850px), (max-width: 1024px) {
    
    /* 1. Remoção de Textos de Apoio (Ganhando espaço vertical valioso) */
    #step-revisao > .step-content > p.leading-relaxed { 
        display: none !important; 
    }
    #titulo-revisao { 
        font-size: 1.6rem !important; 
        margin-bottom: 1rem !important; 
    }

    /* 2. Compactação do Card de Data e Hora */
    #step-revisao .bg-brand-accent\/50 {
        padding: 0.85rem 1rem !important; 
    }
    #rev-datahora {
        font-size: 1.25rem !important; /* Um pouco maior que o teste anterior */
    }

    /* 3. Card de Dados: Ajustes de Espaçamento */
    #step-revisao .bg-slate-50\/50 {
        padding: 1.15rem 1.25rem !important; 
        margin-bottom: 0.5rem !important;
    }
    
    /* 🔥 4. OS ÍCONES VOLTAM! (Ligeiramente menores para caber no grid duplo) */
    #step-revisao .grid p svg {
        display: block !important; 
        width: 1.15rem !important;  
        height: 1.15rem !important;
    }
    
    /* 5. Forçando 2 Colunas Perfeitas */
    #step-revisao .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem 0.75rem !important; /* Respiro entre as linhas e colunas */
    }

    /* 6. Tipografia Restaurada (Legível e Elegante) */
    #step-revisao .grid p.uppercase {
        font-size: 0.65rem !important; /* Aumentou o Rótulo */
        margin-bottom: 0.2rem !important;
        letter-spacing: 0.05em !important;
    }
    
    #step-revisao .grid p.font-black, 
    #step-revisao .grid p.font-medium {
        font-size: 0.9rem !important; /* Aumentou o Texto Principal */
        gap: 0.4rem !important; /* Aproxima o ícone do texto de forma elegante */
    }

    /* 7. Tratamento da Mensagem (O último item ocupa 2 colunas) */
    #step-revisao .grid > div:last-child {
        grid-column: span 2 !important;
        padding-top: 0.5rem !important;
        margin-top: 0 !important;
    }
    
    /* Truncamento Inteligente: Limita a mensagem a 2 linhas com "..." no final */
    #rev-mensagem {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important; 
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }
}



/* ============================================================
   🚀 UX SUPREMA: MODO FOCO & SIDEBAR DINÂMICA
   ============================================================ */

@media (min-width: 768px) {
    /* 1. Transição Suave da Sidebar (Efeito Spring/Ease-Out) */
    #sidebar-container {
        transition: 
            max-width 0.7s cubic-bezier(0.19, 1, 0.22, 1), 
            min-width 0.7s cubic-bezier(0.19, 1, 0.22, 1), 
            opacity 0.5s ease, 
            border-width 0.4s ease !important;
        will-change: max-width, min-width, opacity;
    }

    /* 2. Ativação do Modo Foco (Sidebar Oculta) */
    /* Quando o Step 0 está ativo, o JS injeta 'modo-foco' no body */
    body.modo-foco #sidebar-container {
        min-width: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        border-right-width: 0 !important;
        pointer-events: none;
    }

    /* 3. Estabilidade do Conteúdo Interno */
    /* Garante que o texto da sidebar não sofra "reflow" (quebra de linha) na animação */
    .inner-sidebar-content {
        width: 320px; 
        transition: opacity 0.3s ease;
        flex-shrink: 0;
    }

    body.modo-foco .inner-sidebar-content {
        opacity: 0;
    }

    /* 4. Ajuste de Largura do Container Dinâmico */
    #dynamic-container {
        transition: width 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        width: 100%; /* Ocupa tudo se a sidebar sumir */
    }
}

/* Larguras consistentes para o conteúdo da sidebar por monitor */
@media (min-width: 1024px) { .inner-sidebar-content { width: 380px; } }
@media (min-width: 1280px) { .inner-sidebar-content { width: 420px; } }
@media (min-width: 1536px) { .inner-sidebar-content { width: 480px; } }

/* ============================================================
   🚀 REFINO DE DESIGN: CARD DE PERFIL (STEP 0)
   ============================================================ */

/* Espaçamento extra para o texto descritivo respirar melhor em telas grandes */
.padding-left-huge {
    padding-left: 0.25rem;
}

@media (min-width: 1024px) {
    .padding-left-huge {
        padding-left: 4.25rem; /* Alinha o texto abaixo do título, ignorando o ícone */
    }
}

/* Efeito de elevação premium nos cards de perfil */
#step-0 button.group:hover {
    background-color: #ffffff;
    box-shadow: 0 30px 60px -12px rgba(22, 34, 61, 0.12), 0 18px 36px -18px rgba(0, 0, 0, 0.05);
}


body.booking-confirmed-mode #btn-edit-instituicao,
body.booking-confirmed-mode #btn-edit-date,
body.booking-confirmed-mode #btn-edit-time,
body.booking-confirmed-mode #btn-edit-user,
body.booking-confirmed-mode #live-ticket button[title="Editar"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}



@media (min-width: 768px) and (max-height: 780px) {
    #step-sucesso .step-content {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    #step-sucesso .min-h-full {
        min-height: auto !important;
        align-items: flex-start !important;
    }

    #step-sucesso .shadow-premium {
        box-shadow: 0 18px 38px -24px rgba(22, 34, 61, 0.22) !important;
    }

    #step-sucesso h2 {
        font-size: 1.45rem !important;
    }

    #step-sucesso .p-5,
    #step-sucesso .sm\:p-6 {
        padding: 0.95rem !important;
    }

    #step-sucesso .py-5,
    #step-sucesso .sm\:py-6 {
        padding-top: 0.95rem !important;
        padding-bottom: 0.95rem !important;
    }

    #step-sucesso .mb-4 {
        margin-bottom: 0.65rem !important;
    }

    #step-sucesso button {
        height: 46px !important;
    }
}




/* =======================================================
   MODO SUCESSO EM TELA CHEIA — CARD BRANCO TOTAL
======================================================= */

body.booking-success-fullscreen #sidebar-container {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    opacity: 0 !important;
    transform: translateX(-18px) !important;
    border-right: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition:
        width 420ms cubic-bezier(0.16, 1, 0.3, 1),
        min-width 420ms cubic-bezier(0.16, 1, 0.3, 1),
        max-width 420ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 260ms ease,
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.booking-success-fullscreen #main-card {
    max-width: min(1440px, calc(100vw - 3rem));
}

body.booking-success-fullscreen #dynamic-container {
    width: 100% !important;
    flex: 1 1 100% !important;
}

body.booking-success-fullscreen #step-sucesso {
    display: flex !important;
}

body.booking-success-fullscreen #step-sucesso .step-content {
    min-height: 100%;
    height: 100%;
    background:
        radial-gradient(circle at top right, rgba(51, 181, 51, 0.06), transparent 32%),
        radial-gradient(circle at bottom left, rgba(43, 150, 230, 0.045), transparent 34%),
        #ffffff;
}

/* Bloqueio visual definitivo dos botões de edição após confirmação */
body.booking-confirmed-mode #btn-edit-instituicao,
body.booking-confirmed-mode #btn-edit-date,
body.booking-confirmed-mode #btn-edit-time,
body.booking-confirmed-mode #btn-edit-user,
body.booking-confirmed-mode #live-ticket button[title="Editar"],
body.booking-success-fullscreen #btn-edit-instituicao,
body.booking-success-fullscreen #btn-edit-date,
body.booking-success-fullscreen #btn-edit-time,
body.booking-success-fullscreen #btn-edit-user,
body.booking-success-fullscreen #live-ticket button[title="Editar"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Estrutura */
.success-final-stage {
    width: 100%;
    min-height: 100%;
    height: 100%;
    padding: clamp(1.25rem, 2.2vw, 2.25rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(1.25rem, 2.2vw, 2rem);
    animation: successFadeIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes successFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hero */
.success-final-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.success-hero-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.success-check-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.25rem;
    background: #33B533;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 16px 30px -16px rgba(51, 181, 51, 0.75);
}

.success-kicker {
    font-size: 10px;
    font-weight: 900;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    margin-bottom: 0.25rem;
}

.success-title {
    color: #16223D;
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 1.02;
    font-size: clamp(2rem, 3vw, 2.65rem);
    white-space: nowrap;
}

.success-subtitle {
    color: #64748b;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 600;
    margin-top: 0.4rem;
}

.success-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #047857;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    white-space: nowrap;
}

.success-badge span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #10b981;
}

/* Faixa de data/hora */
.success-schedule-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) minmax(260px, 0.8fr);
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 1.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #eff6ff 100%);
    border: 1px solid #e2e8f0;
}

.success-schedule-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.success-schedule-icon,
.success-note-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0088FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.success-field-label {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 0.25rem;
}

.success-date-value,
.success-time-value {
    display: block;
    color: #16223D;
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.055em;
    overflow-wrap: anywhere;
}

.success-time-value {
    color: #0088FF;
}

.success-schedule-divider {
    width: 1px;
    height: 100%;
    background: #e2e8f0;
}

.success-schedule-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 0.25rem;
    min-width: 0;
}

.success-schedule-note p {
    color: #475569;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 800;
}

/* Conteúdo */
.success-final-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 420px);
    gap: clamp(1.25rem, 2vw, 2rem);
    min-height: 0;
}

.success-details-panel,
.success-next-panel {
    min-width: 0;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border-radius: 1.75rem;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.82);
}

.success-details-panel {
    background: rgba(248, 250, 252, 0.55);
}

.success-next-panel {
    background: rgba(240, 253, 244, 0.72);
    border-color: #bbf7d0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.success-section-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.35rem;
}

.success-section-heading p {
    font-size: 10px;
    font-weight: 900;
    color: #16223d;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.success-section-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 1rem;
    background: #eff6ff;
    color: #0088FF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.success-section-icon-green {
    background: #ffffff;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Dados */
.success-data-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.success-data-card {
    min-width: 0;
    padding: 1rem;
    border-radius: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.success-data-card-main {
    grid-column: span 3;
}

.success-data-card span {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.success-data-card strong {
    display: block;
    color: #16223D;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.success-data-card-main strong {
    font-size: 17px;
    
}

/* Próximos passos */
.success-next-message {
    color: #16223D;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 900;
    margin-bottom: 1rem;
}

.success-steps-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.success-steps-list > div {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.success-steps-list span {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #bbf7d0;
    color: #047857;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
    margin-top: 1px;
}

.success-steps-list p {
    color: #065f46;
    font-size: 13px;
    line-height: 1.48;
    font-weight: 800;
}

.success-action-btn {
    width: 100%;
    height: 52px;
    margin-top: 1.5rem;
    border-radius: 1rem;
    background: #16223D;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transition: 180ms ease;
    box-shadow: 0 18px 35px -25px rgba(15, 23, 42, 0.8);
}

.success-action-btn:hover {
    background: #000000;
}

.success-action-btn:active {
    transform: scale(0.98);
}

/* Notebook baixo */
@media (min-width: 1024px) and (max-height: 780px) {
    body.booking-success-fullscreen #main-card {
        max-width: calc(100vw - 2rem);
    }

    .success-final-stage {
        padding: 1.35rem;
        gap: 1rem;
    }

    .success-check-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
    }

    .success-title {
        font-size: 2rem;
    }

    .success-schedule-band {
        padding: 1rem;
        gap: 1rem;
    }

    .success-details-panel,
    .success-next-panel {
        padding: 1rem;
    }

    .success-data-grid {
        gap: 0.8rem;
    }

    .success-data-card {
        padding: 0.85rem;
    }

    .success-action-btn {
        height: 46px;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    .success-final-stage {
        height: auto;
        min-height: 100%;
    }

    .success-schedule-band {
        grid-template-columns: 1fr 1fr;
    }

    .success-schedule-divider {
        display: none;
    }

    .success-schedule-note {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .success-final-grid {
        grid-template-columns: 1fr;
    }

    .success-next-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 1.25rem;
        align-items: end;
    }

    .success-action-btn {
        margin-top: 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
    body.booking-success-fullscreen {
        overflow: hidden;
    }

    body.booking-success-fullscreen #main-card {
        width: 100%;
        height: calc(var(--app-vh, 1vh) * 100);
        max-width: 100%;
        border-radius: 0 !important;
    }

    body.booking-success-fullscreen #step-sucesso .step-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .success-final-stage {
        padding: 1rem;
        gap: 1rem;
    }

    .success-final-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .success-hero-left {
        align-items: flex-start;
    }

    .success-check-icon {
        width: 3rem;
        height: 3rem;
        border-radius: 1rem;
    }

    .success-title {
        white-space: normal;
        font-size: 1.65rem;
    }

    .success-subtitle {
        font-size: 0.9rem;
    }

    .success-schedule-band {
        grid-template-columns: 1fr;
        padding: 1rem;
        border-radius: 1.35rem;
    }

    .success-schedule-note {
        align-items: flex-start;
    }

    .success-date-value,
    .success-time-value {
        font-size: 1.8rem;
    }

    .success-details-panel,
    .success-next-panel {
        border-radius: 1.35rem;
        padding: 1rem;
    }

    .success-data-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .success-data-card-main,
    .success-data-card {
        grid-column: 1 / -1;
    }

    .success-next-panel {
        display: flex;
    }

    .success-action-btn {
        margin-top: 1rem;
        height: 50px;
    }
}

/* Mobile pequeno */
@media (max-width: 390px) {
    .success-final-stage {
        padding: 0.75rem;
    }

    .success-title {
        font-size: 1.45rem;
    }

    .success-date-value,
    .success-time-value {
        font-size: 1.55rem;
    }

    .success-badge {
        font-size: 9px;
        padding: 0.45rem 0.7rem;
    }
}









/* =======================================================
   REFINO DE LARGURA — TELA DE SUCESSO
======================================================= */

body.booking-success-fullscreen #main-card {
    max-width: min(1440px, calc(100vw - 3rem));
}

body.booking-success-fullscreen .success-final-stage {
    padding: clamp(1.25rem, 2.2vw, 2.25rem);
}

body.booking-success-fullscreen .success-final-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 420px);
}

@media (max-width: 1023px) {
    body.booking-success-fullscreen #main-card {
        max-width: calc(100vw - 2rem);
    }

    body.booking-success-fullscreen .success-final-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    body.booking-success-fullscreen #main-card {
        max-width: 100%;
    }
}










/* =======================================================
   UX AVANÇADO DOS INPUTS — FORMULÁRIO PÚBLICO
======================================================= */

.form-animate {
    position: relative;
}

.field-assist {
    min-height: 16px;
    margin-top: 0.45rem;
    font-size: 11.5px;
    line-height: 1.35;
    font-weight: 700;
    color: #94a3b8;
    transition: color 180ms ease, opacity 180ms ease;
}

.form-animate.ux-valid .field-assist {
    color: #059669;
}

.form-animate.ux-invalid .field-assist {
    color: #dc2626;
}

.form-animate.ux-valid .input-field {
    border-color: rgba(16, 185, 129, 0.55) !important;
    background: #f8fffb !important;
}

.form-animate.ux-invalid .input-field {
    border-color: rgba(239, 68, 68, 0.7) !important;
    background: #fffafa !important;
}

.form-animate.ux-valid .input-field:focus {
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08) !important;
}

.form-animate.ux-invalid .input-field:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08) !important;
}

@media (max-width: 767px) {
    .field-assist {
        font-size: 11px;
        margin-top: 0.4rem;
    }
}





/* =======================================================
   CORREÇÃO TEXTAREA — MENSAGEM OPCIONAL
======================================================= */

#mensagem {
    min-height: 108px !important;
    height: auto;
    line-height: 1.55;
    overflow-y: hidden;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#mensagem:focus {
    min-height: 124px !important;
}

@media (max-width: 767px) {
    #mensagem {
        min-height: 104px !important;
    }

    #mensagem:focus {
        min-height: 118px !important;
    }
}












/* =======================================================
   CORREÇÃO — LARGURA DOS BOTÕES DO MICROFORMULÁRIO
======================================================= */

#step-2 #form-agendamento {
    width: 100%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

#step-2 #form-agendamento > .w-full.mt-8 {
    width: 100%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

#step-2 #btn-continuar-micro {
    width: 100%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* Mantém confortável no mobile */
@media (max-width: 767px) {
    #step-2 #form-agendamento,
    #step-2 #form-agendamento > .w-full.mt-8,
    #step-2 #btn-continuar-micro {
        max-width: 100%;
    }
}
















/* =======================================================
   SELECT PREMIUM — COMO NOS CONHECEU
======================================================= */

.premium-select-wrapper {
    position: relative;
    width: 100%;
}

.premium-select {
    width: 100% !important;
    height: 56px;
    padding-right: 3.25rem !important;
    color: #16223D;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.premium-select:hover {
    border-color: rgba(43, 150, 230, 0.4) !important;
    background: #ffffff !important;
}

.premium-select:focus {
    border-color: rgba(43, 150, 230, 0.75) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(43, 150, 230, 0.1) !important;
    outline: none;
}

.premium-select-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border-radius: 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.premium-select-wrapper:focus-within .premium-select-icon {
    color: #0088FF;
    border-color: rgba(43, 150, 230, 0.45);
    background: #eff6ff;
}

.form-animate.ux-valid .premium-select {
    border-color: rgba(16, 185, 129, 0.55) !important;
    background: #f8fffb !important;
}

.form-animate.ux-invalid .premium-select {
    border-color: rgba(239, 68, 68, 0.7) !important;
    background: #fffafa !important;
}

.form-animate.ux-valid .premium-select-icon {
    color: #059669;
    border-color: rgba(16, 185, 129, 0.35);
    background: #ecfdf5;
}

.form-animate.ux-invalid .premium-select-icon {
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.35);
    background: #fff1f2;
}

@media (max-width: 767px) {
    .premium-select {
        height: 54px;
        font-size: 14px;
    }

    .premium-select-icon {
        width: 1.85rem;
        height: 1.85rem;
        right: 0.85rem;
    }
}









/* =======================================================
   UX — AÇÕES DE EDIÇÃO NA REVISÃO
======================================================= */

.review-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0088FF;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.review-edit-btn:hover {
    background: #eff6ff;
    border-color: rgba(43, 150, 230, 0.45);
    color: #16223D;
    box-shadow: 0 12px 24px -22px rgba(15, 23, 42, 0.5);
}

.review-edit-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(43, 150, 230, 0.12);
}

.review-edit-btn:active {
    transform: scale(0.97);
}

@media (max-width: 390px) {
    .review-edit-btn {
        min-height: 28px;
        padding: 0.35rem 0.55rem;
        font-size: 9px;
    }
}























































































/* =======================================================
   REVISÃO V2 — GRADE ISOLADA E SEM CONFLITOS
======================================================= */

#step-revisao .review-v2-panel {
    padding: 1rem;
    border-radius: 1.5rem;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 45px -36px rgba(15, 23, 42, 0.42);
}

#step-revisao .review-v2-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

#step-revisao .review-v2-head span {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

#step-revisao .review-v2-head p {
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 700;
    margin-top: 0.25rem;
}

#step-revisao .review-v2-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

#step-revisao .review-v2-row-primary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.7rem;
}

#step-revisao .review-v2-row-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.7rem;
}

#step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#step-revisao .review-v2-optional.is-hidden {
    display: none !important;
}

#step-revisao .review-v2-message {
    width: 100%;
}

#step-revisao .review-v2-item {
    min-width: 0;
    padding: 0.72rem 0.85rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

#step-revisao .review-v2-item span {
    display: block;
    color: #94a3b8;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    margin-bottom: 0.3rem;
}

#step-revisao .review-v2-item strong {
    display: block;
    color: #16223D;
    font-size: 14px;
    line-height: 1.32;
    font-weight: 900;
    overflow-wrap: anywhere;
}

@media (min-width: 768px) and (max-height: 780px) {
    #step-revisao .review-v2-panel {
        padding: 0.85rem;
    }

    #step-revisao .review-v2-layout,
    #step-revisao .review-v2-row-primary,
    #step-revisao .review-v2-row-secondary {
        gap: 0.55rem;
    }

    #step-revisao .review-v2-item {
        padding: 0.62rem 0.72rem;
    }

    #step-revisao .review-v2-item span {
        font-size: 9px;
        margin-bottom: 0.22rem;
    }

    #step-revisao .review-v2-item strong {
        font-size: 13.5px;
    }
}

@media (max-width: 767px) {
    #step-revisao .review-v2-head {
        flex-direction: column;
        gap: 0.75rem;
    }

    #step-revisao .review-v2-head .review-edit-btn {
        width: 100%;
    }

    #step-revisao .review-v2-row-primary,
    #step-revisao .review-v2-row-secondary,
    #step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
        grid-template-columns: 1fr !important;
    }
}












/* =======================================================
   REVISÃO V2 — BASE VISUAL / HEADER / DATA / FOOTER
======================================================= */

#step-revisao .review-smart-content {
    padding: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(51, 181, 51, 0.045), transparent 34%),
        radial-gradient(circle at bottom left, rgba(43, 150, 230, 0.04), transparent 34%),
        #ffffff;
}

#step-revisao .review-smart-shell {
    width: 100%;
    max-width: 900px;
    min-height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto minmax(0, auto) auto;
    gap: 1rem;
}

#step-revisao .review-smart-header {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 1rem;
}

#step-revisao .review-back-btn {
    width: fit-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    transition: 180ms ease;
}

#step-revisao .review-back-btn:hover {
    background: #f8fafc;
    color: #16223D;
}

#step-revisao .review-title-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    text-align: left;
    min-width: 0;
}

#step-revisao .review-title-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 1rem;
    background: #ecfdf5;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#step-revisao .review-title-block h2 {
    color: #16223D;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.05em;
    margin: 0;
}

#step-revisao .review-title-block p {
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 600;
    margin: 0.2rem 0 0;
}

/* Data e horário */
#step-revisao .review-schedule-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #eff6ff 100%);
    border: 1px solid #e2e8f0;
}

#step-revisao .review-schedule-main {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

#step-revisao .review-schedule-icon {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 1rem;
    background: #ffffff;
    color: #0088FF;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#step-revisao .review-schedule-main span {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

#step-revisao .review-schedule-main strong {
    display: block;
    color: #16223D;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}

/* Botão editar */
#step-revisao .review-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0088FF;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    transition: 180ms ease;
}

#step-revisao .review-edit-btn:hover {
    background: #eff6ff;
    border-color: rgba(43, 150, 230, 0.45);
    color: #16223D;
}

/* Rodapé */
#step-revisao .review-action-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, #ffffff 72%, rgba(255, 255, 255, 0));
}

#step-revisao .review-footer-smart {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: 0.8rem;
    align-items: stretch;
}

#step-revisao .review-confirm-note {
    min-height: 48px;
    padding: 0.7rem 0.85rem;
    border-radius: 1rem;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
}

#step-revisao .review-confirm-note > div:first-child {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.7rem;
    background: #ffffff;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#step-revisao .review-confirm-note p {
    margin: 0;
    color: #065f46;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 800;
}

#step-revisao .review-actions {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 0.7rem;
}

#step-revisao .review-secondary-btn,
#step-revisao .review-primary-btn {
    height: 48px;
    border-radius: 1rem;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 180ms ease;
}

#step-revisao .review-secondary-btn {
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

#step-revisao .review-secondary-btn:hover {
    background: #f8fafc;
    color: #16223D;
}

#step-revisao .review-primary-btn {
    position: relative;
    background: #33B533;
    color: #ffffff;
    border: 1px solid #33B533;
    box-shadow: 0 16px 30px -22px rgba(51, 181, 51, 0.9);
}

#step-revisao .review-primary-btn:hover {
    background: #16a34a;
}

#step-revisao .review-btn-loader {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: spin 700ms linear infinite;
    position: absolute;
    left: 1rem;
}

/* Notebook baixo */
@media (min-width: 768px) and (max-height: 780px) {
    #step-revisao .review-smart-content {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    #step-revisao .review-smart-shell {
        gap: 0.75rem;
        max-width: 920px;
    }

    #step-revisao .review-title-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.8rem;
    }

    #step-revisao .review-title-block h2 {
        font-size: 1.55rem;
    }

    #step-revisao .review-title-block p {
        font-size: 12.5px;
    }

    #step-revisao .review-schedule-strip {
        padding: 0.85rem;
        border-radius: 1.25rem;
    }

    #step-revisao .review-confirm-note {
        padding: 0.62rem 0.75rem;
    }

    #step-revisao .review-secondary-btn,
    #step-revisao .review-primary-btn {
        height: 44px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #step-revisao .review-smart-content {
        padding: 1rem;
    }

    #step-revisao .review-smart-header {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    #step-revisao .review-title-block {
        justify-content: flex-start;
    }

    #step-revisao .review-schedule-strip {
        align-items: flex-start;
        flex-direction: column;
    }

    #step-revisao .review-schedule-strip .review-edit-btn {
        width: 100%;
    }

    #step-revisao .review-footer-smart {
        grid-template-columns: 1fr;
    }

    #step-revisao .review-actions {
        grid-template-columns: 1fr;
    }

    #step-revisao .review-secondary-btn {
        order: 2;
    }

    #step-revisao .review-primary-btn {
        order: 1;
    }
}











/* =======================================================
   REVISÃO — RODAPÉ FINAL INTELIGENTE
======================================================= */

#step-revisao .review-final-footer {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
    gap: 0.9rem;
    align-items: center;
    margin-top: 0.65rem;
    padding-top: 0.85rem;
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, #ffffff 70%, rgba(255,255,255,0));
    border: 0 !important;
    box-shadow: none !important;
}

#step-revisao .review-final-note {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #047857;
}

#step-revisao .review-final-note-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#step-revisao .review-final-note p {
    margin: 0;
    color: #047857;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 800;
}

#step-revisao .review-final-actions {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
}

#step-revisao .review-final-back-btn,
#step-revisao .review-final-submit-btn {
    height: 50px;
    border-radius: 1rem;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 160ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;
}

#step-revisao .review-final-back-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

#step-revisao .review-final-back-btn:hover {
    background: #f8fafc;
    color: #16223D;
}

#step-revisao .review-final-submit-btn {
    position: relative;
    background: #33B533;
    border: 1px solid #33B533;
    color: #ffffff;
    box-shadow: 0 16px 32px -22px rgba(51, 181, 51, 0.95);
}

#step-revisao .review-final-submit-btn:hover {
    background: #16a34a;
    border-color: #16a34a;
}

#step-revisao .review-final-back-btn:active,
#step-revisao .review-final-submit-btn:active {
    transform: scale(0.98);
}

#step-revisao .review-final-submit-btn .review-btn-loader {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: spin 700ms linear infinite;
    position: absolute;
    left: 1rem;
}

/* Notebook baixo */
@media (min-width: 768px) and (max-height: 780px) {
    #step-revisao .review-final-footer {
        margin-top: 0.5rem;
        padding-top: 0.6rem;
        gap: 0.65rem;
    }

    #step-revisao .review-final-back-btn,
    #step-revisao .review-final-submit-btn {
        height: 44px;
    }

    #step-revisao .review-final-note p {
        font-size: 12px;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    #step-revisao .review-final-footer {
        grid-template-columns: 1fr;
    }

    #step-revisao .review-final-actions {
        grid-template-columns: 130px minmax(0, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    #step-revisao .review-final-footer {
        background: linear-gradient(to top, #ffffff 82%, rgba(255,255,255,0));
    }

    #step-revisao .review-final-note {
        align-items: flex-start;
    }

    #step-revisao .review-final-actions {
        grid-template-columns: 1fr;
    }

    #step-revisao .review-final-submit-btn {
        order: 1;
    }

    #step-revisao .review-final-back-btn {
        order: 2;
    }
}












/* =======================================================
   REVISÃO V2 — FOOTER FINAL OFICIAL
======================================================= */

#step-revisao .review-final-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 40 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 500px) !important;
    gap: 0.9rem !important;
    align-items: center !important;
    margin-top: 0.75rem !important;
    padding-top: 0.85rem !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    background: linear-gradient(to top, #ffffff 74%, rgba(255,255,255,0)) !important;
    border: 0 !important;
    box-shadow: none !important;
}

#step-revisao .review-final-note {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#step-revisao .review-final-note-icon {
    width: 1.65rem !important;
    height: 1.65rem !important;
    border-radius: 999px !important;
    background: #ecfdf5 !important;
    border: 1px solid #bbf7d0 !important;
    color: #16a34a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#step-revisao .review-final-note p {
    margin: 0 !important;
    color: #047857 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

#step-revisao .review-final-actions {
    display: grid !important;
    grid-template-columns: 125px minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
}

#step-revisao .review-final-back-btn,
#step-revisao .review-final-submit-btn {
    height: 50px !important;
    border-radius: 1rem !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        transform 160ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease !important;
}

#step-revisao .review-final-back-btn {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
}

#step-revisao .review-final-back-btn:hover {
    background: #f8fafc !important;
    color: #16223D !important;
}

#step-revisao .review-final-submit-btn {
    position: relative !important;
    background: #33B533 !important;
    border: 1px solid #33B533 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 32px -22px rgba(51, 181, 51, 0.95) !important;
}

#step-revisao .review-final-submit-btn:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
}

#step-revisao .review-final-back-btn:active,
#step-revisao .review-final-submit-btn:active {
    transform: scale(0.98) !important;
}

#step-revisao .review-final-submit-btn .review-btn-loader {
    width: 1.15rem !important;
    height: 1.15rem !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #ffffff !important;
    animation: spin 700ms linear infinite !important;
    position: absolute !important;
    left: 1rem !important;
}

/* Notebook baixo */
@media (min-width: 768px) and (max-height: 780px) {
    #step-revisao .review-final-footer {
        margin-top: 0.55rem !important;
        padding-top: 0.6rem !important;
        gap: 0.65rem !important;
    }

    #step-revisao .review-final-back-btn,
    #step-revisao .review-final-submit-btn {
        height: 44px !important;
    }

    #step-revisao .review-final-note p {
        font-size: 12px !important;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    #step-revisao .review-final-footer {
        grid-template-columns: 1fr !important;
    }

    #step-revisao .review-final-actions {
        grid-template-columns: 130px minmax(0, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #step-revisao .review-final-footer {
        background: linear-gradient(to top, #ffffff 82%, rgba(255,255,255,0)) !important;
    }

    #step-revisao .review-final-note {
        align-items: flex-start !important;
    }

    #step-revisao .review-final-actions {
        grid-template-columns: 1fr !important;
    }

    #step-revisao .review-final-submit-btn {
        order: 1 !important;
    }

    #step-revisao .review-final-back-btn {
        order: 2 !important;
    }
}






/* =======================================================
   REVISÃO V2 — CTA FINAL LIMPO E INTELIGENTE
======================================================= */

#step-revisao .review-cta-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    margin-top: 0.75rem !important;
    padding-top: 0.9rem !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    background: linear-gradient(to top, #ffffff 72%, rgba(255,255,255,0)) !important;
    border: 0 !important;
    box-shadow: none !important;
}

#step-revisao .review-cta-actions {
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    display: grid !important;
    grid-template-columns: 140px minmax(0, 1fr) !important;
    gap: 0.8rem !important;
    align-items: stretch !important;
}

#step-revisao .review-cta-back,
#step-revisao .review-cta-submit {
    height: 52px !important;
    border-radius: 1rem !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition:
        transform 160ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease !important;
}

#step-revisao .review-cta-back {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
}

#step-revisao .review-cta-back:hover {
    background: #f8fafc !important;
    color: #16223D !important;
    border-color: #cbd5e1 !important;
}

#step-revisao .review-cta-submit {
    position: relative !important;
    background: #33B533 !important;
    border: 1px solid #33B533 !important;
    color: #ffffff !important;
    box-shadow: 0 18px 34px -22px rgba(51, 181, 51, 0.95) !important;
}

#step-revisao .review-cta-submit:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    box-shadow: 0 20px 38px -22px rgba(22, 163, 74, 0.95) !important;
}

#step-revisao .review-cta-back:active,
#step-revisao .review-cta-submit:active {
    transform: scale(0.98) !important;
}

#step-revisao .review-cta-submit .review-btn-loader {
    width: 1.15rem !important;
    height: 1.15rem !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #ffffff !important;
    animation: spin 700ms linear infinite !important;
    position: absolute !important;
    left: 1rem !important;
}

/* Notebook baixo */
@media (min-width: 768px) and (max-height: 780px) {
    #step-revisao .review-cta-footer {
        margin-top: 0.55rem !important;
        padding-top: 0.65rem !important;
    }

    #step-revisao .review-cta-back,
    #step-revisao .review-cta-submit {
        height: 46px !important;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    #step-revisao .review-cta-actions {
        max-width: 100% !important;
        grid-template-columns: 140px minmax(0, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #step-revisao .review-cta-footer {
        background: linear-gradient(to top, #ffffff 84%, rgba(255,255,255,0)) !important;
    }

    #step-revisao .review-cta-actions {
        grid-template-columns: 1fr !important;
    }

    #step-revisao .review-cta-submit {
        order: 1 !important;
    }

    #step-revisao .review-cta-back {
        order: 2 !important;
    }
}













/* =======================================================
   REVISÃO V2 — DOCK FINAL PREMIUM CENTRALIZADO
======================================================= */

#step-revisao .review-neo-footer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    margin-top: 0.9rem !important;
    padding-top: 1rem !important;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom)) !important;
    background:
        linear-gradient(to top, #ffffff 68%, rgba(255, 255, 255, 0)) !important;
    border: 0 !important;
    box-shadow: none !important;
}

#step-revisao .review-neo-dock {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 0.5rem !important;
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
    border-radius: 1.45rem !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(226, 232, 240, 0.86) !important;
    box-shadow:
        0 18px 44px -34px rgba(15, 23, 42, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(14px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}

#step-revisao .review-neo-back,
#step-revisao .review-neo-submit {
    height: 52px !important;
    min-width: 0 !important;
    border-radius: 1.05rem !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.015em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    outline: none !important;
    transition:
        transform 160ms ease,
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease !important;
}

#step-revisao .review-neo-back {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
}

#step-revisao .review-neo-back:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #16223D !important;
}

#step-revisao .review-neo-submit {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, #33B533 0%, #21a821 48%, #118b3b 100%) !important;
    border: 1px solid rgba(51, 181, 51, 0.9) !important;
    color: #ffffff !important;
    box-shadow:
        0 20px 38px -22px rgba(51, 181, 51, 1),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

#step-revisao .review-neo-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 20%, rgba(255,255,255,0.28), transparent 28%),
        linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
    opacity: 0.55;
    pointer-events: none;
}

#step-revisao .review-neo-submit:hover {
    filter: saturate(1.08) brightness(1.02) !important;
    box-shadow:
        0 24px 44px -22px rgba(22, 163, 74, 1),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

#step-revisao .review-neo-submit-text,
#step-revisao .review-neo-submit-icon {
    position: relative;
    z-index: 2;
}

#step-revisao .review-neo-submit-icon {
    opacity: 0.95;
}

#step-revisao .review-neo-back:active,
#step-revisao .review-neo-submit:active {
    transform: scale(0.98) !important;
}

#step-revisao .review-neo-back:focus-visible,
#step-revisao .review-neo-submit:focus-visible {
    box-shadow:
        0 0 0 4px rgba(43, 150, 230, 0.12),
        0 18px 38px -26px rgba(15, 23, 42, 0.35) !important;
}

#step-revisao .review-neo-loader {
    width: 1.15rem !important;
    height: 1.15rem !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #ffffff !important;
    animation: spin 700ms linear infinite !important;
    position: absolute !important;
    left: 1rem !important;
    z-index: 3 !important;
}

/* Notebook baixo */
@media (min-width: 768px) and (max-height: 780px) {
    #step-revisao .review-neo-footer {
        margin-top: 0.6rem !important;
        padding-top: 0.65rem !important;
    }

    #step-revisao .review-neo-dock {
        max-width: 580px !important;
        padding: 0.42rem !important;
        border-radius: 1.25rem !important;
    }

    #step-revisao .review-neo-back,
    #step-revisao .review-neo-submit {
        height: 46px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #step-revisao .review-neo-footer {
        background: linear-gradient(to top, #ffffff 84%, rgba(255, 255, 255, 0)) !important;
    }

    #step-revisao .review-neo-dock {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        padding: 0.5rem !important;
    }

    #step-revisao .review-neo-submit {
        order: 1 !important;
    }

    #step-revisao .review-neo-back {
        order: 2 !important;
    }
}


















/* =======================================================
   MOBILE APP-LIKE — AGENDAMENTO ONLINE
   Camada oficial mobile: início, calendário, formulário,
   revisão e sucesso
======================================================= */

@media (max-width: 767px) {
    html,
    body {
        width: 100% !important;
        height: calc(var(--app-vh, 1vh) * 100) !important;
        min-height: calc(var(--app-vh, 1vh) * 100) !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    body {
        display: block !important;
        padding: 0 !important;
    }

    #main-card {
        width: 100% !important;
        height: calc(var(--app-vh, 1vh) * 100) !important;
        min-height: calc(var(--app-vh, 1vh) * 100) !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        background: #ffffff !important;
    }

    #dynamic-container {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at top right, rgba(43, 150, 230, 0.055), transparent 34%),
            radial-gradient(circle at bottom left, rgba(51, 181, 51, 0.045), transparent 34%),
            #ffffff !important;
    }

    .step-container {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .step-content {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding: 1rem 1rem calc(6.25rem + env(safe-area-inset-bottom)) !important;
    }

    .app-bottom-bar {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 80 !important;
        padding: 0.75rem 1rem max(0.85rem, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(to top, #ffffff 82%, rgba(255,255,255,0)) !important;
        border-top: 0 !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    .btn-primary,
    .touch-target-lg {
        min-height: 52px !important;
    }
}










/* =======================================================
   MOBILE APP-LIKE — STEP 0 / ESCOLHA DO PERFIL
======================================================= */

@media (max-width: 767px) {
    #step-0 {
        justify-content: flex-start !important;
        align-items: stretch !important;
        padding: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #step-0 > .relative {
        padding: 1.25rem 1rem calc(2rem + env(safe-area-inset-bottom)) !important;
        max-width: 100% !important;
    }

    #step-0 .logo-cliente {
        height: 42px !important;
        margin-bottom: 1.25rem !important;
    }

    #step-0 .text-center {
        margin-bottom: 1.25rem !important;
    }

    #step-0 h2 {
        font-size: clamp(1.85rem, 8vw, 2.55rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.065em !important;
        margin-bottom: 0.75rem !important;
        padding: 0 !important;
    }

    #step-0 p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        max-width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
    }

    #step-0 .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    #step-0 button.group {
        min-height: 168px !important;
        border-radius: 1.25rem !important;
        padding: 1rem !important;
        box-shadow: 0 14px 32px -26px rgba(15, 23, 42, 0.45) !important;
        transform: none !important;
    }

    #step-0 button.group > .relative:first-of-type {
        width: 2.55rem !important;
        height: 2.55rem !important;
        border-radius: 0.9rem !important;
        margin-bottom: 0.85rem !important;
    }

    #step-0 button.group h3 {
        font-size: 1.05rem !important;
        line-height: 1.08 !important;
        margin-bottom: 0.45rem !important;
        letter-spacing: -0.04em !important;
    }

    #step-0 button.group p {
        max-width: 100% !important;
        text-align: left !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

@media (max-width: 370px) {
    #step-0 .grid {
        grid-template-columns: 1fr !important;
    }

    #step-0 button.group {
        min-height: 138px !important;
    }
}












/* =======================================================
   MOBILE APP-LIKE — CALENDÁRIO E HORÁRIOS
======================================================= */

@media (max-width: 767px) {
    #step-1 .step-content {
        padding-top: 1rem !important;
    }

    #step-1 .w-full.md\:hidden {
        margin-bottom: 1rem !important;
    }

    #titulo-calendario {
        font-size: 1.65rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.055em !important;
    }

    #titulo-calendario + p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    .calendar-scroll-container {
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 1rem !important;
        overflow: hidden !important;
    }

    #calendario-dias {
        gap: 0.65rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        padding-bottom: 0.4rem !important;
    }

    #calendario-dias .date-card {
        width: 4.25rem !important;
        height: 4.8rem !important;
        min-height: 4.8rem !important;
        border-radius: 1rem !important;
        scroll-snap-align: start !important;
    }

    #horarios-container {
        margin-top: 0.25rem !important;
    }

    #label-horarios-data {
        font-size: 10px !important;
    }

    .responsive-grid-times {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.7rem !important;
    }

    .hora-btn {
        min-height: 48px !important;
        border-radius: 1rem !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    #action-avancar .btn-primary {
        border-radius: 1.1rem !important;
        height: 54px !important;
        box-shadow: 0 18px 36px -24px rgba(51, 181, 51, 0.9) !important;
    }
}
















/* =======================================================
   MOBILE APP-LIKE — FORMULÁRIO EM MICROETAPAS
======================================================= */

@media (max-width: 767px) {
    #step-2 .step-content {
        padding: 1rem 1rem calc(5.75rem + env(safe-area-inset-bottom)) !important;
    }

    #step-2 .w-full.max-w-\[550px\] {
        max-width: 100% !important;
        margin-top: 0.75rem !important;
    }

    #step-2 .w-full.flex.items-center.justify-between.mb-16 {
        margin-bottom: 3.25rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #step-2 [id^="stepper-circle-"] {
        width: 2.35rem !important;
        height: 2.35rem !important;
        font-size: 0.85rem !important;
    }

    #step-2 [id^="stepper-label-"] {
        font-size: 8.5px !important;
        width: 68px !important;
        margin-top: 0.55rem !important;
        letter-spacing: 0.08em !important;
    }

    #micro-title {
        font-size: 1.65rem !important;
        line-height: 1.08 !important;
        letter-spacing: -0.055em !important;
    }

    #micro-subtitle {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    #form-agendamento {
        gap: 1rem !important;
        padding-bottom: 0 !important;
    }

    .micro-step-panel {
        gap: 1rem !important;
    }

    .label-field {
        font-size: 10px !important;
        margin-bottom: 0.45rem !important;
        letter-spacing: 0.12em !important;
    }

    .input-field {
        min-height: 54px !important;
        border-radius: 1rem !important;
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
        font-size: 16px !important;
    }

    .field-assist {
        font-size: 11px !important;
        min-height: 14px !important;
        margin-top: 0.35rem !important;
    }

    #btn-continuar-micro {
        height: 54px !important;
        border-radius: 1.1rem !important;
        font-size: 14px !important;
    }

    #form-agendamento > .w-full.mt-8 {
        margin-top: 1.25rem !important;
        padding-top: 1.1rem !important;
    }

    #mensagem {
        min-height: 112px !important;
    }
}

















/* =======================================================
   MOBILE APP-LIKE — REVISÃO E SUCESSO
======================================================= */

@media (max-width: 767px) {
    #step-revisao .review-smart-content {
        padding: 0.85rem !important;
    }

    #step-revisao .review-smart-shell {
        gap: 0.8rem !important;
        max-width: 100% !important;
    }

    #step-revisao .review-smart-header {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    #step-revisao .review-title-block {
        align-items: flex-start !important;
    }

    #step-revisao .review-title-block h2 {
        font-size: 1.65rem !important;
    }

    #step-revisao .review-schedule-strip {
        border-radius: 1.25rem !important;
        padding: 0.9rem !important;
    }

    #step-revisao .review-v2-panel {
        border-radius: 1.25rem !important;
        padding: 0.85rem !important;
    }

    #step-revisao .review-v2-row-primary,
    #step-revisao .review-v2-row-secondary,
    #step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
        grid-template-columns: 1fr !important;
    }

    #step-revisao .review-neo-footer {
        padding-top: 0.55rem !important;
    }

    #step-revisao .review-neo-dock {
        border-radius: 1.25rem !important;
    }

    #step-sucesso .success-final-stage {
        padding: 0.85rem !important;
        gap: 0.85rem !important;
    }

    #step-sucesso .success-final-hero {
        gap: 0.85rem !important;
    }

    #step-sucesso .success-title {
        font-size: 1.6rem !important;
        line-height: 1.05 !important;
    }

    #step-sucesso .success-schedule-band,
    #step-sucesso .success-details-panel,
    #step-sucesso .success-next-panel {
        border-radius: 1.25rem !important;
        padding: 0.9rem !important;
    }
}












/* =======================================================
   MOBILE APP-LIKE — CALENDÁRIO E HORÁRIOS V2
   Corrige sobreposição dos horários nas datas
======================================================= */

@media (max-width: 767px) {
    #step-1 .step-content {
        padding-top: 1rem !important;
        padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #step-1 .step-content > .max-w-\[950px\],
    #step-1 .step-content > div {
        min-height: auto !important;
    }

    #step-1 .flex.flex-col.md\:flex-row.justify-between {
        margin-bottom: 1rem !important;
        gap: 1rem !important;
    }

    #titulo-calendario {
        font-size: 1.65rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.055em !important;
        margin-bottom: 0.4rem !important;
    }

    #titulo-calendario + p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    #step-1 .calendar-scroll-container {
        position: relative !important;
        z-index: 2 !important;
        width: calc(100% + 2rem) !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 0.85rem !important;
        padding-bottom: 1.35rem !important;
        margin-bottom: 0.35rem !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #step-1 #calendario-dias {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0.7rem !important;
        min-height: 5.35rem !important;
        width: max-content !important;
        min-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding-top: 0.15rem !important;
        padding-bottom: 0.75rem !important;
        scroll-snap-type: x proximity !important;
    }

    #step-1 #calendario-dias .date-card {
        position: relative !important;
        z-index: 3 !important;
        flex: 0 0 4.35rem !important;
        width: 4.35rem !important;
        height: 4.85rem !important;
        min-height: 4.85rem !important;
        border-radius: 1.05rem !important;
        scroll-snap-align: start !important;
    }

    #step-1 #calendario-dias .date-card.active {
        z-index: 5 !important;
        transform: translateY(-2px) !important;
    }

    #step-1 #horarios-container {
        position: relative !important;
        z-index: 4 !important;
        display: none;
        margin-top: 0.25rem !important;
        padding-top: 0.9rem !important;
        padding-bottom: 1rem !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(226, 232, 240, 0.75) !important;
        clear: both !important;
    }

    #step-1 #horarios-container[style*="display: block"],
    #step-1 #horarios-container[style*="display:block"] {
        display: block !important;
    }

    #step-1 #horarios-container > .flex.items-center {
        margin-top: 0 !important;
        margin-bottom: 0.85rem !important;
    }

    #step-1 #label-horarios-data {
        font-size: 10px !important;
        letter-spacing: 0.13em !important;
        white-space: nowrap !important;
    }

    #step-1 #horarios-botoes {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.7rem !important;
    }

    #step-1 .hora-btn {
        min-height: 50px !important;
        border-radius: 1rem !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.5) !important;
    }

    #step-1 .hora-btn.bg-brand-light,
    #step-1 .hora-btn.active {
        box-shadow: 0 16px 30px -20px rgba(43, 150, 230, 0.85) !important;
    }

    #step-1 #action-avancar {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 80 !important;
        padding: 0.75rem 1rem max(0.85rem, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(to top, #ffffff 84%, rgba(255,255,255,0)) !important;
        border-top: 0 !important;
    }

    #step-1 #btn-avancar-real {
        height: 54px !important;
        border-radius: 1.15rem !important;
        font-size: 14px !important;
        box-shadow: 0 18px 36px -24px rgba(51, 181, 51, 0.95) !important;
    }
}

/* Mobile muito pequeno */
@media (max-width: 370px) {
    #step-1 #horarios-botoes {
        grid-template-columns: 1fr !important;
    }

    #step-1 #calendario-dias .date-card {
        flex-basis: 4.1rem !important;
        width: 4.1rem !important;
    }
}














/* =======================================================
   MOBILE APP-LIKE — CALENDÁRIO FIX DEFINITIVO V3
   Garante que horários nunca sobreponham as datas
======================================================= */

@media (max-width: 767px) {
    #step-1 .step-content {
        padding-top: 1rem !important;
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Cabeçalho da etapa */
    #step-1 .flex.flex-col.md\:flex-row.justify-between.md\:items-end {
        margin-bottom: 0.85rem !important;
        gap: 0.85rem !important;
    }

    #titulo-calendario {
        font-size: 1.65rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.055em !important;
        margin-bottom: 0.4rem !important;
    }

    #titulo-calendario + p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    /* Navegação do mês */
    #step-1 .flex.items-center.justify-between.bg-slate-50\/80 {
        margin-bottom: 0 !important;
        border-radius: 1rem !important;
        padding: 0.45rem !important;
    }

    /* BLOCO DAS DATAS — reserva altura real */
    #step-1 .calendar-scroll-container {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        width: calc(100% + 2rem) !important;
        min-height: 6.65rem !important;
        height: 6.65rem !important;
        margin: 0 -1rem 0.65rem -1rem !important;
        padding: 0.85rem 1rem 0.95rem 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: #ffffff !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        clear: both !important;
    }

    #step-1 .calendar-scroll-container::-webkit-scrollbar {
        display: none !important;
    }

    #step-1 #calendario-dias {
        position: relative !important;
        z-index: 4 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0.72rem !important;
        width: max-content !important;
        min-width: 100% !important;
        height: 5.05rem !important;
        min-height: 5.05rem !important;
        max-height: 5.05rem !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        scroll-snap-type: x proximity !important;
    }

    #step-1 #calendario-dias .date-card {
        position: relative !important;
        z-index: 5 !important;
        flex: 0 0 4.35rem !important;
        width: 4.35rem !important;
        height: 5.05rem !important;
        min-height: 5.05rem !important;
        max-height: 5.05rem !important;
        border-radius: 1.05rem !important;
        scroll-snap-align: start !important;
        transform: none !important;
    }

    #step-1 #calendario-dias .date-card.active {
        transform: none !important;
        box-shadow: 0 14px 30px -18px rgba(43, 150, 230, 0.85) !important;
    }

    /* HORÁRIOS — sempre abaixo das datas */
    #step-1 #horarios-container {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
        margin-top: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
    }

    #step-1 #horarios-container > .flex.items-center {
        margin-top: 0 !important;
        margin-bottom: 0.9rem !important;
    }

    #step-1 #label-horarios-data {
        font-size: 10px !important;
        letter-spacing: 0.13em !important;
        white-space: nowrap !important;
    }

    #step-1 #horarios-botoes {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.72rem !important;
    }

    #step-1 .hora-btn {
        min-height: 50px !important;
        border-radius: 1rem !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.5) !important;
    }

    #step-1 .hora-btn.bg-brand-light,
    #step-1 .hora-btn.active {
        background: #0088FF !important;
        border-color: #0088FF !important;
        color: #ffffff !important;
        box-shadow: 0 16px 30px -20px rgba(43, 150, 230, 0.85) !important;
    }

    /* CTA inferior */
    #step-1 #action-avancar {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 80 !important;
        padding: 0.75rem 1rem max(0.85rem, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(to top, #ffffff 84%, rgba(255,255,255,0)) !important;
        border-top: 0 !important;
    }

    #step-1 #btn-avancar-real {
        height: 54px !important;
        border-radius: 1.15rem !important;
        font-size: 14px !important;
        box-shadow: 0 18px 36px -24px rgba(51, 181, 51, 0.95) !important;
    }
}

/* Mobile muito estreito */
@media (max-width: 370px) {
    #step-1 #calendario-dias .date-card {
        flex-basis: 4.05rem !important;
        width: 4.05rem !important;
    }

    #step-1 #horarios-botoes {
        grid-template-columns: 1fr !important;
    }
}
















/* =======================================================
   MOBILE APP-LIKE — LOGO PADRÃO EM TODAS AS ETAPAS
======================================================= */

@media (max-width: 767px) {
    #step-0 .logo-cliente,
    #step-1 .logo-cliente,
    #step-2 .logo-cliente,
    #step-revisao .logo-cliente,
    #step-sucesso .logo-cliente {
        height: 42px !important;
        width: auto !important;
        max-width: 170px !important;
        object-fit: contain !important;
    }

    /* Mantém o header mobile das etapas internas com boa proporção */
    #step-1 .w-full.md\:hidden,
    #step-2 .w-full.md\:hidden {
        min-height: 52px !important;
        align-items: center !important;
        margin-bottom: 1rem !important;
    }

    /* Botão voltar acompanha visualmente a logo maior */
    #step-1 .w-full.md\:hidden button,
    #step-2 .w-full.md\:hidden button {
        min-height: 42px !important;
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        border-radius: 0.9rem !important;
    }
}








/* =======================================================
   MOBILE APP-LIKE — CALENDÁRIO DEFINITIVO SEM CORTE
======================================================= */

@media (max-width: 767px) {
    #step-1 .step-content {
        padding-top: 1rem !important;
        padding-bottom: calc(7.25rem + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #step-1 .calendar-scroll-container {
        position: relative !important;
        z-index: 5 !important;
        display: block !important;
        width: calc(100% + 2rem) !important;
        min-height: 6.85rem !important;
        height: 6.85rem !important;
        margin: 0 -1rem 1rem -1rem !important;
        padding: 0.9rem 1rem 1rem 1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: #ffffff !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        clear: both !important;
    }

    #step-1 .calendar-scroll-container::-webkit-scrollbar {
        display: none !important;
    }

    #step-1 #calendario-dias {
        position: relative !important;
        z-index: 6 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: max-content !important;
        min-width: 100% !important;
        height: 5.15rem !important;
        min-height: 5.15rem !important;
        max-height: 5.15rem !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #step-1 #calendario-dias .date-card {
        position: relative !important;
        z-index: 7 !important;
        flex: 0 0 4.4rem !important;
        width: 4.4rem !important;
        height: 5.15rem !important;
        min-height: 5.15rem !important;
        max-height: 5.15rem !important;
        border-radius: 1.1rem !important;
        transform: none !important;
    }

    #step-1 #calendario-dias .date-card:hover,
    #step-1 #calendario-dias .date-card.active {
        transform: none !important;
    }

    #step-1 #calendario-dias .date-card.active {
        box-shadow: 0 14px 30px -18px rgba(43, 150, 230, 0.85) !important;
    }

    #step-1 #horarios-container {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
        margin-top: 0 !important;
        padding-top: 1.05rem !important;
        padding-bottom: 1rem !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
    }

    #step-1 #horarios-container > .flex.items-center {
        margin-top: 0 !important;
        margin-bottom: 0.9rem !important;
    }

    #step-1 #horarios-botoes {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.72rem !important;
    }

    #step-1 .hora-btn {
        min-height: 50px !important;
        border-radius: 1rem !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }
}

@media (max-width: 370px) {
    #step-1 #calendario-dias .date-card {
        flex-basis: 4.1rem !important;
        width: 4.1rem !important;
    }

    #step-1 #horarios-botoes {
        grid-template-columns: 1fr !important;
    }
}


















/* =======================================================
   MOBILE APP-LIKE — CALENDÁRIO COM RESUMO DE DATA
   Solução definitiva contra corte de datas
======================================================= */

@media (max-width: 767px) {
    #step-1 .step-content {
        padding-top: 1rem !important;
        padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    #step-1 .calendar-scroll-container {
        width: calc(100% + 2rem) !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        margin-bottom: 1rem !important;
        padding: 0.85rem 1rem 1.1rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: #ffffff !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #step-1 #calendario-dias {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        width: max-content !important;
        min-width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #step-1 #calendario-dias .date-card {
        flex: 0 0 4.4rem !important;
        width: 4.4rem !important;
        height: 5.15rem !important;
        min-height: 5.15rem !important;
        border-radius: 1.1rem !important;
        transform: none !important;
    }

    /*
      Após escolher uma data:
      escondemos mês + carrossel para evitar qualquer sobreposição.
    */
    #step-1.md-mobile-date-picked .md-mobile-monthbar,
    #step-1.md-mobile-date-picked .calendar-scroll-container {
        display: none !important;
    }

    .md-mobile-date-summary {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        width: 100%;
        padding: 0.95rem;
        margin: 0.75rem 0 0.85rem;
        border-radius: 1.2rem;
        background:
            linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #eff6ff 100%);
        border: 1px solid #e2e8f0;
        box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.42);
    }

    .md-mobile-date-summary.is-visible {
        display: flex !important;
    }

    .md-mobile-date-summary-main {
        min-width: 0;
    }

    .md-mobile-date-summary-main span {
        display: block;
        color: #94a3b8;
        font-size: 10px;
        line-height: 1.2;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        margin-bottom: 0.25rem;
    }

    .md-mobile-date-summary-main strong {
        display: block;
        color: #16223D;
        font-size: 1.05rem;
        line-height: 1.2;
        font-weight: 900;
        overflow-wrap: anywhere;
    }

    #md-mobile-change-date-btn {
        min-height: 38px;
        flex-shrink: 0;
        padding: 0.45rem 0.75rem;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #0088FF;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    #step-1 #horarios-container {
        position: relative !important;
        z-index: 1 !important;
        clear: both !important;
        margin-top: 0 !important;
        padding-top: 0.85rem !important;
        padding-bottom: 1rem !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(226, 232, 240, 0.85) !important;
    }

    #step-1.md-mobile-date-picked #horarios-container {
        border-top: 0 !important;
        padding-top: 0.2rem !important;
    }

    #step-1 #horarios-container > .flex.items-center {
        margin-top: 0 !important;
        margin-bottom: 0.9rem !important;
    }

    #step-1 #label-horarios-data {
        font-size: 10px !important;
        letter-spacing: 0.13em !important;
        white-space: nowrap !important;
    }

    #step-1 #horarios-botoes {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.72rem !important;
    }

    #step-1 .hora-btn {
        min-height: 50px !important;
        border-radius: 1rem !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.5) !important;
    }

    #step-1 .hora-btn.bg-brand-light,
    #step-1 .hora-btn.active {
        background: #0088FF !important;
        border-color: #0088FF !important;
        color: #ffffff !important;
        box-shadow: 0 16px 30px -20px rgba(43, 150, 230, 0.85) !important;
    }
}

@media (max-width: 370px) {
    #step-1 #horarios-botoes {
        grid-template-columns: 1fr !important;
    }

    .md-mobile-date-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    #md-mobile-change-date-btn {
        width: 100%;
    }
}

















/* =======================================================
   MOBILE APP-LIKE — TRANSIÇÃO ELEGANTE DATA → HORÁRIOS
======================================================= */

@media (max-width: 767px) {
    /*
      Sobrescreve o display:none antigo.
      Agora o calendário recolhe com animação, em vez de sumir seco.
    */
    #step-1.md-mobile-date-picked .md-mobile-monthbar {
        display: flex !important;
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-8px) scale(0.985) !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        transition:
            max-height 320ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 220ms ease,
            transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 320ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #step-1.md-mobile-date-picked .calendar-scroll-container {
        display: block !important;
        max-height: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-10px) scale(0.985) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        transition:
            max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            min-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 220ms ease,
            transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 360ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /*
      Estado normal antes de escolher a data.
    */
    #step-1:not(.md-mobile-date-picked) .md-mobile-monthbar {
        display: flex !important;
        max-height: 72px !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        overflow: hidden !important;
        transition:
            max-height 340ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 240ms ease,
            transform 340ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #step-1:not(.md-mobile-date-picked) .calendar-scroll-container {
        display: block !important;
        max-height: 7rem !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        transition:
            max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 240ms ease,
            transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /*
      Resumo da data selecionada entrando.
    */
    .md-mobile-date-summary {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
        max-height: 0;
        overflow: hidden;
        transition:
            opacity 280ms ease,
            transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
            max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 360ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 360ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .md-mobile-date-summary.is-visible {
        display: flex !important;
        max-height: 96px;
    }

    .md-mobile-date-summary.is-entering {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /*
      Horários entram com sensação de sequência.
    */
    #step-1.md-mobile-date-picked #horarios-container {
        animation: mdHorariosEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn {
        animation: mdHoraBtnEnter 340ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(1) { animation-delay: 30ms; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(2) { animation-delay: 55ms; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(3) { animation-delay: 80ms; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(4) { animation-delay: 105ms; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(5) { animation-delay: 130ms; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(6) { animation-delay: 155ms; }
}

@keyframes mdHorariosEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mdHoraBtnEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
















/* =======================================================
   MOBILE APP-LIKE — DATA → HORÁRIOS V4 DEFINITIVO
   Sem display:none durante transição
======================================================= */

@media (max-width: 767px) {
    /*
      Estado normal: mês e carrossel aparecem.
    */
    #step-1 .md-mobile-monthbar {
        display: flex !important;
        max-height: 64px !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        overflow: hidden !important;
        transition:
            max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 240ms ease,
            transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 360ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #step-1 .calendar-scroll-container {
        display: block !important;
        max-height: 7.25rem !important;
        min-height: 6.65rem !important;
        height: 6.65rem !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        transition:
            max-height 390ms cubic-bezier(0.16, 1, 0.3, 1),
            min-height 390ms cubic-bezier(0.16, 1, 0.3, 1),
            height 390ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 240ms ease,
            transform 390ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 390ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 390ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /*
      Após escolher data: mês e carrossel recolhem animando.
      Importante: display continua flex/block.
    */
    #step-1.md-mobile-date-picked .md-mobile-monthbar {
        display: flex !important;
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-8px) scale(0.985) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
    }

    #step-1.md-mobile-date-picked .calendar-scroll-container {
        display: block !important;
        max-height: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-10px) scale(0.985) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
    }

    /*
      Card da data selecionada — sempre tecnicamente presente,
      mas recolhido quando não está visível.
    */
    #step-1 .md-mobile-date-summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 0.75rem !important;

        width: 100% !important;
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(10px) scale(0.985) !important;

        margin: 0 !important;
        padding: 0 0.85rem !important;

        overflow: hidden !important;
        border-radius: 1.15rem !important;
        background:
            linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #eff6ff 100%) !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;

        transition:
            max-height 380ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 260ms ease,
            transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 380ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 380ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 260ms ease,
            box-shadow 260ms ease !important;
    }

    #step-1 .md-mobile-date-summary.is-visible {
        max-height: 86px !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        margin: 0.7rem 0 0.8rem !important;
        padding: 0.82rem 0.9rem !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.42) !important;
    }

    #step-1 .md-mobile-date-summary-main {
        min-width: 0 !important;
    }

    #step-1 .md-mobile-date-summary-main span {
        display: block !important;
        color: #94a3b8 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.13em !important;
        margin-bottom: 0.2rem !important;
    }

    #step-1 .md-mobile-date-summary-main strong {
        display: block !important;
        color: #16223D !important;
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        overflow-wrap: anywhere !important;
    }

    #step-1 #md-mobile-change-date-btn {
        min-height: 36px !important;
        padding: 0.45rem 0.75rem !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
        font-size: 9.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.45) !important;
    }

    /*
      Horários entram com animação real.
    */
    #step-1.md-mobile-date-picked #horarios-container {
        animation: mdHorariosEnterV4 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn {
        animation: mdHoraBtnEnterV4 360ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(1) { animation-delay: 30ms !important; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(2) { animation-delay: 55ms !important; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(3) { animation-delay: 80ms !important; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(4) { animation-delay: 105ms !important; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(5) { animation-delay: 130ms !important; }
    #step-1.md-mobile-date-picked #horarios-botoes .hora-btn:nth-child(6) { animation-delay: 155ms !important; }
}

/* Mobile muito estreito */
@media (max-width: 370px) {
    #step-1 .md-mobile-date-summary {
        grid-template-columns: 1fr !important;
        align-items: flex-start !important;
    }

    #step-1 #md-mobile-change-date-btn {
        width: 100% !important;
    }
}

@keyframes mdHorariosEnterV4 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mdHoraBtnEnterV4 {
    from {
        opacity: 0;
        transform: translateY(9px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


















/* =======================================================
   MOBILE APP-LIKE — DATA SELECIONADA V5 DEFINITIVA
======================================================= */

@media (max-width: 767px) {
    /*
      Desativa visualmente o card antigo para evitar conflito.
    */
    #step-1 #md-mobile-date-summary {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /*
      Estado normal: mês e carrossel visíveis.
    */
    #step-1 .md-v5-monthbar {
        display: flex !important;
        max-height: 64px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        overflow: hidden !important;
        transition:
            max-height 320ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 220ms ease,
            transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 320ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #step-1 .calendar-scroll-container {
        display: block !important;
        max-height: 7rem !important;
        min-height: 6.45rem !important;
        height: 6.45rem !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        transition:
            max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            min-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 220ms ease,
            transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 360ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 360ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /*
      Depois da data escolhida: mês e carrossel recolhem suavemente.
    */
    #step-1.md-v5-picked .md-v5-monthbar {
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
    }

    #step-1.md-v5-picked .calendar-scroll-container {
        max-height: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-10px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
    }

    /*
      Card novo da data selecionada.
      Sem max-height pequeno bugado. Estrutura estável.
    */
    #step-1 .md-v5-date-card {
        width: 100% !important;
        min-height: 0 !important;
        max-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(10px) scale(0.985) !important;
        overflow: hidden !important;
        pointer-events: none !important;

        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 0.75rem !important;

        margin: 0 !important;
        padding: 0 0.9rem !important;

        border-radius: 1.2rem !important;
        background:
            linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #eff6ff 100%) !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;

        transition:
            max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            min-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 260ms ease,
            transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 360ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 360ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 260ms ease,
            box-shadow 260ms ease !important;
    }

    #step-1 .md-v5-date-card.is-visible {
        min-height: 68px !important;
        max-height: 92px !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        margin: 0.7rem 0 0.9rem !important;
        padding: 0.78rem 0.9rem !important;
        pointer-events: auto !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.42) !important;
    }

    #step-1 .md-v5-date-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 0.95rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #step-1 .md-v5-date-copy {
        min-width: 0 !important;
    }

    #step-1 .md-v5-date-copy span {
        display: block !important;
        color: #94a3b8 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.13em !important;
        margin-bottom: 0.18rem !important;
    }

    #step-1 .md-v5-date-copy strong {
        display: block !important;
        color: #16223D !important;
        font-size: 1.08rem !important;
        line-height: 1.12 !important;
        font-weight: 900 !important;
        overflow-wrap: anywhere !important;
    }

    #step-1 #md-v5-change-date {
        min-height: 36px !important;
        padding: 0.45rem 0.75rem !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
        font-size: 9.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.45) !important;
    }

    #step-1 #md-v5-change-date:active {
        transform: scale(0.97) !important;
    }

    /*
      Horários com entrada elegante.
    */
    #step-1.md-v5-picked #horarios-container {
        animation: mdV5HorariosEnter 380ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
        border-top: 0 !important;
        padding-top: 0.15rem !important;
    }

    #step-1.md-v5-picked #horarios-botoes .hora-btn {
        animation: mdV5HoraEnter 340ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }

    #step-1.md-v5-picked #horarios-botoes .hora-btn:nth-child(1) { animation-delay: 25ms !important; }
    #step-1.md-v5-picked #horarios-botoes .hora-btn:nth-child(2) { animation-delay: 50ms !important; }
    #step-1.md-v5-picked #horarios-botoes .hora-btn:nth-child(3) { animation-delay: 75ms !important; }
    #step-1.md-v5-picked #horarios-botoes .hora-btn:nth-child(4) { animation-delay: 100ms !important; }
    #step-1.md-v5-picked #horarios-botoes .hora-btn:nth-child(5) { animation-delay: 125ms !important; }
    #step-1.md-v5-picked #horarios-botoes .hora-btn:nth-child(6) { animation-delay: 150ms !important; }
}

@media (max-width: 370px) {
    #step-1 .md-v5-date-card {
        grid-template-columns: 38px minmax(0, 1fr) !important;
    }

    #step-1 #md-v5-change-date {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    #step-1 .md-v5-date-card.is-visible {
        max-height: 132px !important;
    }
}

@keyframes mdV5HorariosEnter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mdV5HoraEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}













/* =======================================================
   MOBILE APP-LIKE — DATA SELECIONADA V6 ESTÁVEL
======================================================= */

@media (max-width: 767px) {
    #step-1 #md-mobile-date-summary,
    #step-1 #md-v5-date-card {
        display: none !important;
    }

    #step-1 .md-v6-monthbar,
    #step-1 .calendar-scroll-container {
        transition:
            max-height 340ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 220ms ease,
            transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 340ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 340ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #step-1 .md-v6-monthbar {
        display: flex !important;
        max-height: 64px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        overflow: hidden !important;
    }

    #step-1 .calendar-scroll-container {
        display: block !important;
        max-height: 7rem !important;
        min-height: 6.45rem !important;
        height: 6.45rem !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    #step-1.md-v6-picked .md-v6-monthbar,
    #step-1.md-v6-picked .calendar-scroll-container {
        max-height: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
    }

    #step-1 .md-v6-date-card {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 0.75rem !important;

        width: 100% !important;
        max-height: 0 !important;
        min-height: 0 !important;
        opacity: 0 !important;
        transform: translateY(10px) scale(0.985) !important;
        overflow: hidden !important;
        pointer-events: none !important;

        margin: 0 !important;
        padding: 0 0.9rem !important;

        border-radius: 1.2rem !important;
        background: linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #eff6ff 100%) !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;

        transition:
            max-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            min-height 360ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 260ms ease,
            transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
            margin 360ms cubic-bezier(0.16, 1, 0.3, 1),
            padding 360ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 260ms ease,
            box-shadow 260ms ease !important;
    }

    #step-1 .md-v6-date-card.is-visible {
        max-height: 96px !important;
        min-height: 70px !important;
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        margin: 0.7rem 0 0.9rem !important;
        padding: 0.8rem 0.9rem !important;
        pointer-events: auto !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.42) !important;
    }

    #step-1 .md-v6-date-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 1rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #step-1 .md-v6-date-copy {
        min-width: 0 !important;
    }

    #step-1 .md-v6-date-copy span {
        display: block !important;
        color: #94a3b8 !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.13em !important;
        margin-bottom: 0.2rem !important;
    }

    #step-1 .md-v6-date-copy strong {
        display: block !important;
        color: #16223D !important;
        font-size: 1.08rem !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        overflow-wrap: anywhere !important;
    }

    #step-1 #md-v6-change-date {
        min-height: 38px !important;
        padding: 0.45rem 0.78rem !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
        font-size: 9.5px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.45) !important;
    }

    #step-1.md-v6-picked #horarios-container {
        border-top: 0 !important;
        padding-top: 0.2rem !important;
        animation: mdV6HorariosEnter 360ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    }
}

@media (max-width: 370px) {
    #step-1 .md-v6-date-card {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    #step-1 #md-v6-change-date {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    #step-1 .md-v6-date-card.is-visible {
        max-height: 140px !important;
    }
}

@keyframes mdV6HorariosEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




















/* =======================================================
   MOBILE APP-LIKE — REVISÃO PREMIUM FINAL
======================================================= */

@media (max-width: 767px) {
    /* Estrutura base */
    #step-revisao {
        background: #ffffff !important;
    }

    #step-revisao .review-smart-content {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding: 0.85rem 0.85rem calc(8.5rem + env(safe-area-inset-bottom)) !important;
        background:
            radial-gradient(circle at top right, rgba(51, 181, 51, 0.05), transparent 34%),
            radial-gradient(circle at bottom left, rgba(43, 150, 230, 0.045), transparent 34%),
            #ffffff !important;
    }

    #step-revisao .review-smart-shell {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
    }

    /* Header app-like */
    #step-revisao .review-smart-header {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        align-items: flex-start !important;
        padding-top: 0.15rem !important;
    }

    #step-revisao .review-back-btn {
        width: fit-content !important;
        min-height: 40px !important;
        padding: 0.55rem 0.85rem !important;
        border-radius: 0.95rem !important;
        background: rgba(255, 255, 255, 0.82) !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: 0.09em !important;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.45) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    #step-revisao .review-title-block {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #step-revisao .review-title-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 1rem !important;
        background: #ecfdf5 !important;
        border: 1px solid #bbf7d0 !important;
        color: #16a34a !important;
        box-shadow: 0 12px 24px -20px rgba(22, 163, 74, 0.75) !important;
    }

    #step-revisao .review-title-block h2 {
        font-size: clamp(1.55rem, 7vw, 1.95rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.065em !important;
        margin: 0 !important;
        color: #16223D !important;
    }

    #step-revisao .review-title-block p {
        margin-top: 0.35rem !important;
        font-size: 13.5px !important;
        line-height: 1.42 !important;
        color: #64748b !important;
        font-weight: 600 !important;
        max-width: 95% !important;
    }

    /* Card data/hora */
    #step-revisao .review-schedule-strip {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        padding: 0.95rem !important;
        border-radius: 1.35rem !important;
        background:
            linear-gradient(135deg, #f8fafc 0%, #ffffff 58%, #eff6ff 100%) !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 16px 34px -30px rgba(15, 23, 42, 0.46) !important;
    }

    #step-revisao .review-schedule-main {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }

    #step-revisao .review-schedule-icon {
        width: 44px !important;
        height: 44px !important;
        border-radius: 1rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
    }

    #step-revisao .review-schedule-main span {
        font-size: 9.5px !important;
        letter-spacing: 0.13em !important;
        color: #94a3b8 !important;
        font-weight: 900 !important;
    }

    #step-revisao .review-schedule-main strong {
        font-size: 1.25rem !important;
        line-height: 1.12 !important;
        letter-spacing: -0.045em !important;
        color: #16223D !important;
        font-weight: 900 !important;
    }

    #step-revisao .review-schedule-strip .review-edit-btn {
        width: 100% !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.4) !important;
    }

    /* Painel de dados */
    #step-revisao .review-v2-panel {
        padding: 0.9rem !important;
        border-radius: 1.35rem !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 18px 42px -36px rgba(15, 23, 42, 0.48) !important;
    }

    #step-revisao .review-v2-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        margin-bottom: 0.85rem !important;
    }

    #step-revisao .review-v2-head span {
        font-size: 9.5px !important;
        letter-spacing: 0.14em !important;
        color: #94a3b8 !important;
        font-weight: 900 !important;
    }

    #step-revisao .review-v2-head p {
        margin-top: 0.25rem !important;
        font-size: 12.5px !important;
        line-height: 1.42 !important;
        color: #94a3b8 !important;
        font-weight: 700 !important;
    }

    #step-revisao .review-v2-head .review-edit-btn {
        width: 100% !important;
        min-height: 36px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #0088FF !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
    }

    /* Campos em mobile: uma coluna limpa */
    #step-revisao .review-v2-layout,
    #step-revisao .review-v2-row-primary,
    #step-revisao .review-v2-row-secondary,
    #step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    #step-revisao .review-v2-item {
        padding: 0.78rem 0.85rem !important;
        border-radius: 1rem !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.78) !important;
    }

    #step-revisao .review-v2-item span {
        font-size: 9px !important;
        line-height: 1.15 !important;
        letter-spacing: 0.13em !important;
        color: #94a3b8 !important;
        font-weight: 900 !important;
        margin-bottom: 0.28rem !important;
    }

    #step-revisao .review-v2-item strong {
        font-size: 14.5px !important;
        line-height: 1.32 !important;
        color: #16223D !important;
        font-weight: 900 !important;
        overflow-wrap: anywhere !important;
    }

    /* CTA inferior app-like */
    #step-revisao .review-neo-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 90 !important;
        width: 100% !important;
        margin-top: 0.65rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: max(0.55rem, env(safe-area-inset-bottom)) !important;
        background: linear-gradient(to top, #ffffff 82%, rgba(255,255,255,0)) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #step-revisao .review-neo-dock {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0.5rem !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
        border-radius: 1.45rem !important;
        background: rgba(255,255,255,0.86) !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow:
            0 20px 48px -34px rgba(15, 23, 42, 0.55),
            inset 0 1px 0 rgba(255,255,255,0.95) !important;
        backdrop-filter: blur(14px) saturate(1.15) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
    }

    #step-revisao .review-neo-submit {
        order: 1 !important;
        height: 52px !important;
        border-radius: 1.05rem !important;
        font-size: 14.5px !important;
        font-weight: 900 !important;
        background:
            linear-gradient(135deg, #33B533 0%, #21a821 48%, #118b3b 100%) !important;
        border: 1px solid rgba(51,181,51,0.9) !important;
        color: #ffffff !important;
        box-shadow:
            0 20px 38px -22px rgba(51,181,51,1),
            inset 0 1px 0 rgba(255,255,255,0.25) !important;
    }

    #step-revisao .review-neo-back {
        order: 2 !important;
        height: 50px !important;
        border-radius: 1.05rem !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
    }

    #step-revisao .review-neo-submit:active,
    #step-revisao .review-neo-back:active,
    #step-revisao .review-edit-btn:active {
        transform: scale(0.98) !important;
    }
}

/* Mobile pequeno */
@media (max-width: 370px) {
    #step-revisao .review-smart-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #step-revisao .review-title-block {
        grid-template-columns: 38px minmax(0, 1fr) !important;
    }

    #step-revisao .review-title-icon {
        width: 38px !important;
        height: 38px !important;
    }

    #step-revisao .review-title-block h2 {
        font-size: 1.48rem !important;
    }

    #step-revisao .review-schedule-main {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    #step-revisao .review-schedule-icon {
        width: 40px !important;
        height: 40px !important;
    }
}












/* =======================================================
   MOBILE APP-LIKE — REVISÃO TOPBAR + DOCK SEM SOBREPOSIÇÃO
======================================================= */

.review-mobile-topbar {
    display: none;
}

@media (max-width: 767px) {
    /* Espaço real para o dock inferior não cobrir conteúdo */
    #step-revisao .review-smart-content {
        padding: 1rem 1rem calc(9.75rem + env(safe-area-inset-bottom)) !important;
        background:
            radial-gradient(circle at top right, rgba(51, 181, 51, 0.045), transparent 34%),
            radial-gradient(circle at bottom left, rgba(43, 150, 230, 0.04), transparent 34%),
            #ffffff !important;
    }

    #step-revisao .review-smart-shell {
        gap: 0.9rem !important;
    }

    /* Topo igual às demais telas */
    #step-revisao .review-mobile-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        width: 100% !important;
        min-height: 52px !important;
        margin-bottom: 0.15rem !important;
    }

    #step-revisao .review-mobile-logo {
        height: 42px !important;
        width: auto !important;
        max-width: 170px !important;
        object-fit: contain !important;
        display: block !important;
    }

    #step-revisao .review-mobile-back-btn {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        padding: 0.6rem 0.9rem !important;
        border-radius: 0.95rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.09em !important;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.45) !important;
    }

    /* Some com o Voltar antigo no mobile */
    #step-revisao .review-smart-header > .review-back-btn {
        display: none !important;
    }

    /* Header do título fica mais limpo abaixo da topbar */
    #step-revisao .review-smart-header {
        display: block !important;
        padding-top: 0 !important;
    }

    #step-revisao .review-title-block {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        text-align: left !important;
    }

    #step-revisao .review-title-block h2 {
        font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.065em !important;
    }

    #step-revisao .review-title-block p {
        font-size: 13.5px !important;
        line-height: 1.42 !important;
        margin-top: 0.35rem !important;
    }

    /*
      Dock inferior:
      - agora é fixo no viewport mobile;
      - fundo sólido;
      - conteúdo não aparece "atrás" de forma feia.
    */
    #step-revisao .review-neo-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 999 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.75rem 1rem max(0.85rem, env(safe-area-inset-bottom)) !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 -18px 45px -32px rgba(15, 23, 42, 0.45) !important;
    }

    #step-revisao .review-neo-dock {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #step-revisao .review-neo-submit {
        order: 1 !important;
        height: 52px !important;
        border-radius: 1.1rem !important;
    }

    #step-revisao .review-neo-back {
        order: 2 !important;
        height: 50px !important;
        border-radius: 1.1rem !important;
        background: #ffffff !important;
    }

    /*
      Área fantasma no final do conteúdo:
      impede o último campo de ficar colado no dock.
    */
    #step-revisao .review-smart-shell::after {
        content: "";
        display: block;
        height: 1rem;
        flex: 0 0 auto;
    }
}

/* Mobile muito pequeno */
@media (max-width: 370px) {
    #step-revisao .review-smart-content {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        padding-bottom: calc(10.25rem + env(safe-area-inset-bottom)) !important;
    }

    #step-revisao .review-mobile-logo {
        height: 38px !important;
        max-width: 145px !important;
    }

    #step-revisao .review-mobile-back-btn {
        min-height: 40px !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}
















/* =======================================================
   MOBILE APP-LIKE — CORREÇÃO DEFINITIVA TOPBAR REVISÃO
======================================================= */

.review-mobile-topbar {
    display: none;
}

@media (max-width: 767px) {
    /* Topbar mobile oficial */
    #step-revisao .review-mobile-topbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        width: 100% !important;
        min-height: 52px !important;
        margin: 0 0 0.45rem 0 !important;
        padding: 0 !important;
    }

    #step-revisao .review-mobile-logo {
        height: 42px !important;
        width: auto !important;
        max-width: 170px !important;
        object-fit: contain !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    #step-revisao .review-mobile-back-btn {
        min-height: 42px !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        padding: 0.6rem 0.95rem !important;
        border-radius: 0.95rem !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.09em !important;
        white-space: nowrap !important;
        box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.45) !important;
    }

    #step-revisao .review-mobile-back-btn svg {
        flex-shrink: 0 !important;
    }

    /*
      Esconde qualquer botão Voltar antigo dentro do header da revisão no mobile.
      Esse é o botão que apareceu duplicado no print.
    */
    #step-revisao .review-smart-header .review-back-btn,
    #step-revisao .review-smart-header > .review-back-btn,
    #step-revisao .review-back-btn:not(.review-mobile-back-btn) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /*
      Garante que o header do título não tente reservar coluna para botão antigo.
    */
    #step-revisao .review-smart-header {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    #step-revisao .review-title-block {
        margin-top: 0 !important;
    }
}







/* =======================================================
   PROTEÇÃO DESKTOP — CARD MOBILE NÃO APARECE FORA DO MOBILE
======================================================= */

#step-1 #md-v6-date-card,
#step-1 #md-mobile-date-summary,
#step-1 #md-v5-date-card {
    display: none;
}

@media (max-width: 767px) {
    #step-1 .md-v6-date-card {
        display: grid !important;
    }
}








/* =======================================================
   SEGURANÇA — HONEYPOT INVISÍVEL
======================================================= */

.md-hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}








/* =======================================================
   ADMIN — SWITCH REGRAS DE HORÁRIOS
======================================================= */

.schedule-day-card input[type="checkbox"]:checked + label {
    background: #0088FF !important;
}

.schedule-day-card input[type="checkbox"]:checked + label span {
    transform: translateX(1.25rem) !important;
}

.schedule-day-card input[type="checkbox"]:disabled + label {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}







/* =======================================================
   FORMULÁRIO — ACTION BAR INTELIGENTE DOS MICRO-STEPS
======================================================= */

.md-micro-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.md-micro-back-btn,
.md-micro-next-btn {
    min-height: 56px;
    border-radius: 1rem;
    font-size: 14.5px;
    font-weight: 900;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transition: all .2s ease;
    outline: none;
}

.md-micro-back-btn {
    display: none;
    background: #ffffff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.4);
}

.md-micro-next-btn {
    width: 100%;
    background: #0088FF;
    color: #ffffff;
    border: 1px solid #0088FF;
    box-shadow: 0 18px 36px -24px rgba(0, 136, 255, 0.9);
}

.md-micro-next-btn:disabled {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

.md-micro-back-btn:active,
.md-micro-next-btn:active:not(:disabled) {
    transform: scale(0.985);
}

/* Quando o micro-step 4 estiver visível, vira barra com Voltar + Avançar */
#micro-step-4:not(.hidden) ~ .md-micro-actions {
    grid-template-columns: 0.42fr 0.58fr;
    margin-top: 1.35rem !important;
    padding-top: 1.1rem !important;
}

#micro-step-4:not(.hidden) ~ .md-micro-actions .md-micro-back-btn {
    display: inline-flex;
}

/* Nos passos 1, 2 e 3, mantém só o botão principal */
#micro-step-4.hidden ~ .md-micro-actions .md-micro-back-btn {
    display: none !important;
}

#micro-step-4.hidden ~ .md-micro-actions {
    grid-template-columns: 1fr;
}

/* Ajuste para telas desktop mais baixas */
@media (min-width: 768px) and (max-height: 850px) {
    #step-2 .step-content {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    #step-2 .w-full.flex.items-center.justify-between.mb-16 {
        margin-bottom: 2.6rem !important;
    }

    #step-2 .text-center.w-full.mb-8 {
        margin-bottom: 1.35rem !important;
    }

    #micro-step-4 {
        gap: 1rem !important;
    }

    #micro-step-4 textarea {
        min-height: 92px !important;
        height: 92px !important;
    }

    .md-micro-actions {
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }

    .md-micro-back-btn,
    .md-micro-next-btn {
        min-height: 50px;
    }
}

/* Mobile: mantém app-like, principal em cima e voltar embaixo no step 4 */
@media (max-width: 767px) {
    #micro-step-4:not(.hidden) ~ .md-micro-actions {
        grid-template-columns: 1fr;
    }

    #micro-step-4:not(.hidden) ~ .md-micro-actions .md-micro-next-btn {
        order: 1;
    }

    #micro-step-4:not(.hidden) ~ .md-micro-actions .md-micro-back-btn {
        order: 2;
    }

    .md-micro-back-btn,
    .md-micro-next-btn {
        min-height: 54px;
    }
}









/* =======================================================
   FORMULÁRIO — ACTION BAR EM TODOS OS MICRO-STEPS
======================================================= */

/* Todos os micro-steps agora usam Voltar + Avançar */
#micro-step-1:not(.hidden) ~ .md-micro-actions,
#micro-step-2:not(.hidden) ~ .md-micro-actions,
#micro-step-3:not(.hidden) ~ .md-micro-actions,
#micro-step-4:not(.hidden) ~ .md-micro-actions {
    display: grid !important;
    grid-template-columns: 0.42fr 0.58fr !important;
    gap: 0.85rem !important;
    margin-top: 1.35rem !important;
    padding-top: 1.1rem !important;
}

/* Mostra o botão Voltar também na etapa 1 */
#micro-step-1:not(.hidden) ~ .md-micro-actions .md-micro-back-btn,
#micro-step-2:not(.hidden) ~ .md-micro-actions .md-micro-back-btn,
#micro-step-3:not(.hidden) ~ .md-micro-actions .md-micro-back-btn,
#micro-step-4:not(.hidden) ~ .md-micro-actions .md-micro-back-btn {
    display: inline-flex !important;
}

/* Mobile: botão principal em cima, Voltar embaixo */
@media (max-width: 767px) {
    #micro-step-1:not(.hidden) ~ .md-micro-actions,
    #micro-step-2:not(.hidden) ~ .md-micro-actions,
    #micro-step-3:not(.hidden) ~ .md-micro-actions,
    #micro-step-4:not(.hidden) ~ .md-micro-actions {
        grid-template-columns: 1fr !important;
    }

    #micro-step-1:not(.hidden) ~ .md-micro-actions .md-micro-next-btn,
    #micro-step-2:not(.hidden) ~ .md-micro-actions .md-micro-next-btn,
    #micro-step-3:not(.hidden) ~ .md-micro-actions .md-micro-next-btn,
    #micro-step-4:not(.hidden) ~ .md-micro-actions .md-micro-next-btn {
        order: 1;
    }

    #micro-step-1:not(.hidden) ~ .md-micro-actions .md-micro-back-btn,
    #micro-step-2:not(.hidden) ~ .md-micro-actions .md-micro-back-btn,
    #micro-step-3:not(.hidden) ~ .md-micro-actions .md-micro-back-btn,
    #micro-step-4:not(.hidden) ~ .md-micro-actions .md-micro-back-btn {
        order: 2;
    }
}
/* MD FIX MOBILE DATE STRIP START */
/*
    Correção visual mobile para o passo de escolha de data e horário.

    Objetivo:
    - impedir que os cards de data sejam cortados verticalmente no celular;
    - preservar o layout desktop;
    - não alterar regra de negócio, horários, APIs, Microsoft Calendar,
      Salesforce, banco de dados ou fluxo de agendamento.

    Escopo:
    - somente telas mobile;
    - somente área pública do agendamento;
    - somente elementos dentro do step de calendário.
*/
@media (max-width: 767px) {
    body:not(.admin-body) #step-1 {
        overflow: visible !important;
    }

    body:not(.admin-body) #step-1 .overflow-x-auto,
    body:not(.admin-body) #step-1 [class*="overflow-x-auto"] {
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    body:not(.admin-body) #step-1 .date-selector,
    body:not(.admin-body) #step-1 .date-carousel,
    body:not(.admin-body) #step-1 .days-carousel,
    body:not(.admin-body) #step-1 .calendar-dates,
    body:not(.admin-body) #step-1 .date-strip,
    body:not(.admin-body) #step-1 .week-days-wrapper,
    body:not(.admin-body) #step-1 .dias-carrossel,
    body:not(.admin-body) #step-1 .seletor-dias,
    body:not(.admin-body) #step-1 #date-carousel,
    body:not(.admin-body) #step-1 #calendar-days,
    body:not(.admin-body) #step-1 #date-options,
    body:not(.admin-body) #step-1 #dias-container,
    body:not(.admin-body) #step-1 #lista-dias {
        min-height: 104px !important;
        height: auto !important;
        padding-bottom: 18px !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
    }

    body:not(.admin-body) #step-1 .date-card,
    body:not(.admin-body) #step-1 .day-card,
    body:not(.admin-body) #step-1 .calendar-day-card,
    body:not(.admin-body) #step-1 .date-option,
    body:not(.admin-body) #step-1 .day-option,
    body:not(.admin-body) #step-1 .dia-card,
    body:not(.admin-body) #step-1 .date-pill,
    body:not(.admin-body) #step-1 .day-pill {
        min-height: 84px !important;
        height: auto !important;
        padding-top: 14px !important;
        padding-bottom: 18px !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.1 !important;
    }

    body:not(.admin-body) #step-1 .date-card *,
    body:not(.admin-body) #step-1 .day-card *,
    body:not(.admin-body) #step-1 .calendar-day-card *,
    body:not(.admin-body) #step-1 .date-option *,
    body:not(.admin-body) #step-1 .day-option *,
    body:not(.admin-body) #step-1 .dia-card *,
    body:not(.admin-body) #step-1 .date-pill *,
    body:not(.admin-body) #step-1 .day-pill * {
        line-height: 1.1 !important;
        overflow: visible !important;
    }

    body:not(.admin-body) #step-1 #time-slots-container,
    body:not(.admin-body) #step-1 .time-slots,
    body:not(.admin-body) #step-1 .horarios-disponiveis,
    body:not(.admin-body) #step-1 .available-times {
        margin-top: 12px !important;
    }
}
/* MD FIX MOBILE DATE STRIP END */
/* MD REVIEW WHITESPACE FIX START */
/*
    Ajuste CSS-only para remover o espaço em branco excessivo
    abaixo dos dados da reserva na etapa "Revise seus dados".

    Mapeamento confirmado:
    - HTML: #step-revisao > .review-v2-panel > #review-v2-layout
    - CSS ativo: assets/css/index.css
    - Campos opcionais: .review-v2-optional.is-hidden

    Escopo:
    - somente etapa de revisão;
    - somente layout review-v2;
    - sem alteração de HTML, JavaScript, APIs, banco, calendário,
      Salesforce, SMTP, admin ou regras de negócio.
*/

#step-revisao .review-v2-panel {
    min-height: 0 !important;
    height: auto !important;
}

#step-revisao .review-v2-layout {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    align-content: start !important;
}

#step-revisao .review-v2-row-primary,
#step-revisao .review-v2-row-secondary,
#step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

#step-revisao .review-v2-optional.is-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

#step-revisao .review-v2-message.is-hidden {
    display: none !important;
}

#step-revisao .review-v2-layout > *:last-child {
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    #step-revisao .review-v2-panel {
        padding-bottom: 24px !important;
    }
}

@media (max-width: 767px) {
    #step-revisao .review-v2-panel {
        padding-bottom: 20px !important;
    }
}
/* MD REVIEW WHITESPACE FIX END */
/* MD REVIEW FULLSCREEN PREVIEW START */
/*
    Preview refinado da etapa "Revise seus dados" em tela cheia.

    Como ativar:
    - acessar /index.php?review_fullscreen=1

    Refinos desta versão:
    - cards de dados mais compactos;
    - menor altura vertical;
    - botões Voltar / Confirmar reserva padronizados;
    - dock inferior menos pesado;
    - layout preservado no mobile.

    Escopo:
    - somente camada visual da revisão;
    - sem alteração de backend, banco, calendário, Salesforce, SMTP ou admin.
*/

body.md-review-fullscreen-preview.md-review-fullscreen-active {
    background:
        radial-gradient(circle at top left, rgba(43, 150, 230, 0.12), transparent 34%),
        radial-gradient(circle at bottom right, rgba(51, 181, 51, 0.08), transparent 30%),
        #f1f5f9 !important;
}

@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(96vw, 1180px) !important;
        height: min(92vh, 980px) !important;
        max-width: 1180px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #sidebar-container {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        opacity: 0 !important;
        border-right-width: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao {
    background:
        radial-gradient(circle at top left, rgba(43, 150, 230, 0.08), transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-content {
    padding: clamp(16px, 2.7vw, 34px) !important;
    background: transparent !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell {
    width: 100% !important;
    max-width: 1040px !important;
    min-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block {
    margin: 0 !important;
    padding: 0 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block h2 {
    font-size: clamp(1.55rem, 2.3vw, 2.15rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.05em !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block p {
    max-width: 620px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel {
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 18px 50px -36px rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip {
    margin: 0 !important;
    min-height: 76px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel {
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 24px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-head {
    margin-bottom: 14px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-layout {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-primary,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-secondary,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
}

@media (min-width: 900px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-primary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/*
    Cards de dados compactos:
    - altura mínima reduzida;
    - padding menor;
    - conteúdo alinhado ao centro vertical de forma controlada;
    - mantém área de toque e legibilidade.
*/
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item {
    min-height: 68px !important;
    height: auto !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    letter-spacing: 0.11em !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item strong {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-message {
    min-height: 68px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-optional.is-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/*
    Botões inferiores:
    - remove aparência pesada de container/dock;
    - mantém Voltar branco e Confirmar verde;
    - altura e bordas mais próximas dos botões anteriores.
*/
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
    margin-top: auto !important;
    padding-top: 4px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transform: none !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back {
    width: 100% !important;
    background: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #dbe5f2 !important;
    box-shadow: 0 10px 26px -22px rgba(15, 23, 42, 0.45) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
    width: 100% !important;
    background: linear-gradient(135deg, #33B533 0%, #12933A 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    box-shadow: 0 18px 38px -28px rgba(22, 163, 74, 0.8) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back:hover {
    background: #f8fafc !important;
    color: #16223D !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit:hover {
    filter: brightness(1.02) !important;
}

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-content {
        padding: 16px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell {
        gap: 12px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip {
        min-height: 72px !important;
        padding: 14px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel {
        padding: 16px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-layout,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-primary,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-secondary {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item {
        min-height: 64px !important;
        padding: 12px 14px !important;
        border-radius: 15px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back {
        order: 2 !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
        order: 1 !important;
    }
}
/* MD REVIEW FULLSCREEN PREVIEW END */
/* MD REVIEW FULLSCREEN ROW LAYOUT FIX START */
/*
    Ajuste fino da diagramação da revisão fullscreen.

    Estrutura desejada no desktop:
    - Linha 1: Nome | E-mail de confirmação | Telefone
    - Linha 2: Telefone alternativo | Área de atuação | Como nos conheceu
    - Linha 3: Mensagem em largura total

    Observações:
    - só atua quando o preview fullscreen está ativo;
    - no mobile mantém uma coluna;
    - não altera HTML, JavaScript, backend, banco ou integrações.
*/

@media (min-width: 900px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-primary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-message {
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 899px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-primary,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-secondary,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-layout.has-alt-phone .review-v2-row-secondary {
        grid-template-columns: 1fr !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-message {
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }
}
/* MD REVIEW FULLSCREEN ROW LAYOUT FIX END */
/* MD REVIEW FULLSCREEN BUTTON BACKGROUND FIX START */
/*
    Remove a faixa branca atrás dos botões da revisão fullscreen.

    Escopo:
    - somente quando body.md-review-fullscreen-preview.md-review-fullscreen-active estiver ativo;
    - preserva os botões Voltar e Confirmar reserva;
    - não altera backend, JS, banco ou integrações.
*/

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer::before,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    content: none !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock::before,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    content: none !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer > div {
    background: transparent !important;
}
/* MD REVIEW FULLSCREEN BUTTON BACKGROUND FIX END */
/* MD REVIEW FULLSCREEN UX POLISH START */
/*
    Polimento UX da etapa "Revise seus dados" em fullscreen.

    Escopo:
    - somente quando o preview fullscreen estiver ativo;
    - melhora hierarquia visual, labels, valores, cards e botões;
    - não altera HTML, JavaScript, APIs, banco, Salesforce,
      Microsoft Calendar, e-mail ou painel admin.
*/

/* Cabeçalho principal mais premium e menos pesado */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block {
    gap: 13px !important;
    align-items: center !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 15px !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.28) !important;
    color: #16a34a !important;
    box-shadow: 0 10px 24px -20px rgba(22, 163, 74, 0.7) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-icon svg {
    width: 16px !important;
    height: 16px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block h2 {
    font-size: clamp(1.75rem, 2.15vw, 2.08rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    font-weight: 950 !important;
    color: #101b35 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block p {
    margin-top: 5px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #65738d !important;
}

/* Card de data/hora com mais equilíbrio visual */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip {
    min-height: 72px !important;
    padding: 14px 18px !important;
    border-radius: 23px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-icon svg {
    width: 18px !important;
    height: 18px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-main {
    gap: 12px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-main span {
    font-size: 10px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.13em !important;
    font-weight: 900 !important;
    color: #94a3b8 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-main strong {
    margin-top: 3px !important;
    font-size: clamp(1.08rem, 1.65vw, 1.38rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.045em !important;
    font-weight: 950 !important;
    color: #111c36 !important;
}

/* Cabeçalho do card Dados da reserva mais limpo */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel {
    border-radius: 23px !important;
    padding: 19px 22px 22px 22px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-head {
    margin-bottom: 13px !important;
    padding-bottom: 13px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-head span {
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.14em !important;
    font-weight: 950 !important;
    color: #8fa0bb !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-head p {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: #75839d !important;
}

/* Botões pequenos de edição com menos ruído visual */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-edit-btn {
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.035em !important;
    font-weight: 950 !important;
    background: #ffffff !important;
    border: 1px solid #dce6f3 !important;
    color: #0784ee !important;
    box-shadow: 0 10px 26px -24px rgba(15, 23, 42, 0.55) !important;
}

/* Cards de dados com leitura mais refinada */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-layout,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-primary,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-row-secondary {
    gap: 11px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item {
    min-height: 64px !important;
    padding: 11px 13px !important;
    border-radius: 15px !important;
    background: #f9fbfe !important;
    border-color: #dfe8f4 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item span {
    font-size: 9.8px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.125em !important;
    font-weight: 900 !important;
    color: #95a4bb !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item strong {
    margin-top: 2px !important;
    font-size: 14.2px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    font-weight: 850 !important;
    color: #101b35 !important;
}

/* Mensagem em linha inteira com melhor proporção */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-message {
    min-height: 62px !important;
}

/* Botões finais mais alinhados ao design do fluxo anterior */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
    padding-top: 6px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
    max-width: 840px !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    gap: 12px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back {
    color: #64748b !important;
    border-color: #dbe5f2 !important;
    box-shadow: 0 10px 24px -24px rgba(15, 23, 42, 0.45) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
    box-shadow: 0 16px 34px -28px rgba(22, 163, 74, 0.85) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit-icon {
    width: 15px !important;
    height: 15px !important;
}

/* Mobile preservado em uma coluna e com texto confortável */
@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 13px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block h2 {
        font-size: 1.45rem !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block p {
        font-size: 12.5px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip {
        padding: 13px 14px !important;
        border-radius: 20px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel {
        padding: 15px !important;
        border-radius: 20px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item {
        min-height: 62px !important;
        padding: 11px 12px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-item strong {
        font-size: 13.8px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
        height: 52px !important;
        min-height: 52px !important;
    }
}
/* MD REVIEW FULLSCREEN UX POLISH END */
/* MD REVIEW FULLSCREEN WIDTH ALIGN START */
/*
    Padroniza a largura da revisão fullscreen com o restante do agendamento.

    Motivo:
    - o preview fullscreen estava criando uma largura visual própria;
    - esta regra devolve o #main-card para a largura padrão do projeto;
    - os blocos internos passam a usar uma largura proporcional e consistente.

    Escopo:
    - somente ?review_fullscreen=1;
    - somente tela #step-revisao;
    - não altera HTML, JS, backend, banco ou integrações.
*/

/*
    Mantém o container principal na largura padrão global do sistema.
    Ou seja: não força 1180px no modo review_fullscreen.
*/
@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(95vw, 1100px) !important;
        height: min(90vh, 960px) !important;
    }
}

@media (min-width: 1280px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(94vw, 1280px) !important;
        height: min(90vh, 1020px) !important;
    }
}

@media (min-width: 1536px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(92vw, 1400px) !important;
        height: min(90vh, 1100px) !important;
    }
}

/*
    Com a sidebar oculta, o conteúdo precisa ocupar uma largura útil
    parecida com a largura interna das demais experiências premium.
*/
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell {
    max-width: 1120px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-after-confirm-card {
    max-width: 1120px !important;
    width: 100% !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
    max-width: 880px !important;
}

/*
    Em notebooks menores, mantém a leitura centralizada e sem excesso lateral.
*/
@media (min-width: 768px) and (max-width: 1279px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-after-confirm-card {
        max-width: 980px !important;
    }
}

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-after-confirm-card,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        max-width: 100% !important;
        width: 100% !important;
    }
}
/* MD REVIEW FULLSCREEN WIDTH ALIGN END */
/* MD REVIEW CONTAINER WIDTH AND VERTICAL ALIGN START */
/*
    Ajuste final da revisão fullscreen.

    O que corrige:
    - remove a largura própria criada pelo preview;
    - força o #main-card a respeitar as mesmas medidas globais das demais etapas;
    - centraliza verticalmente o conteúdo da revisão;
    - remove a sensação de conteúdo preso no topo e botões soltos no rodapé.

    Escopo:
    - somente quando ?review_fullscreen=1 estiver ativo;
    - somente na etapa #step-revisao;
    - não altera HTML, JavaScript, backend, banco, Salesforce,
      Microsoft Calendar, SMTP ou admin.
*/

/* 1. Container externo usando as mesmas larguras globais do projeto */
@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(96vw, 960px) !important;
        height: min(90vh, 900px) !important;
        max-width: none !important;
    }
}

@media (min-width: 1024px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(95vw, 1100px) !important;
        height: min(90vh, 960px) !important;
        max-width: none !important;
    }
}

@media (min-width: 1280px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(94vw, 1280px) !important;
        height: min(90vh, 1020px) !important;
        max-width: none !important;
    }
}

@media (min-width: 1536px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: min(92vw, 1400px) !important;
        height: min(90vh, 1100px) !important;
        max-width: none !important;
    }
}

/* 2. Área de scroll vira uma área de centralização vertical */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100% !important;
    height: 100% !important;
    padding-top: clamp(16px, 2.4vw, 30px) !important;
    padding-bottom: clamp(16px, 2.4vw, 30px) !important;
}

/* 3. Shell interno sem altura forçada para permitir centralização real */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell {
    width: 100% !important;
    max-width: 1040px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: auto !important;
    justify-content: center !important;
    gap: 12px !important;
}

/* 4. Todos os blocos principais usam a mesma largura útil */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel,
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-after-confirm-card {
    width: 100% !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 5. Footer deixa de empurrar para o rodapé */
body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 6. Em telas baixas, prioriza leitura e permite scroll natural */
@media (max-height: 760px) and (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-content {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* 7. Mobile preservado: ocupa largura total e mantém scroll natural */
@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #main-card {
        width: 100% !important;
        height: 100dvh !important;
        max-width: none !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-content {
        display: block !important;
        min-height: 100% !important;
        height: auto !important;
        padding: 16px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-schedule-strip,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-after-confirm-card,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        max-width: 100% !important;
        width: 100% !important;
    }
}
/* MD REVIEW CONTAINER WIDTH AND VERTICAL ALIGN END */
/* MD REVIEW CONTEXT CARD SPACING START */
/*
    Ajuste fino de espaçamento do card contextual da revisão fullscreen.

    Por que existe:
    - o card contextual estava muito próximo do card Dados da reserva;
    - este respiro melhora agrupamento visual e leitura;
    - mantém os botões próximos o suficiente para a ação final continuar clara.

    Escopo:
    - somente ?review_fullscreen=1;
    - somente #step-revisao;
    - não altera HTML, JavaScript, backend, banco ou integrações.
*/

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-card {
    margin-top: 16px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
    margin-top: 14px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed #step-revisao .review-smart-shell {
    gap: 10px !important;
}

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-card {
        margin-top: 12px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
        margin-top: 12px !important;
    }
}
/* MD REVIEW CONTEXT CARD SPACING END */
/* MD REVIEW CONTEXT CARD BOTTOM SPACING START */
/*
    Ajuste fino do espaçamento abaixo do card contextual da revisão fullscreen.

    Por que existe:
    - o card contextual ficou muito próximo dos botões;
    - este bloco cria um respiro melhor entre mensagem e ação;
    - melhora leitura e deixa o CTA final mais elegante.

    Escopo:
    - somente ?review_fullscreen=1;
    - somente #step-revisao;
    - não altera HTML, JS, backend, banco ou integrações.
*/

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
    margin-top: 22px !important;
    padding-top: 0 !important;
}

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
        margin-top: 18px !important;
    }
}
/* MD REVIEW CONTEXT CARD BOTTOM SPACING END */
/* MD REVIEW MOBILE FIXED ACTION BAR FINAL START */
/*
    Barra fixa final dos botões no mobile para a revisão fullscreen.

    O que faz:
    - usa position: fixed para prender a área dos botões no fim real da tela;
    - cria um fundo branco de largura total do viewport;
    - adiciona padding superior para o botão Confirmar reserva respirar;
    - adiciona padding inferior seguro para iPhone/Android com safe-area;
    - adiciona espaço inferior no conteúdo para não ficar escondido atrás da barra.

    Escopo:
    - somente mobile;
    - somente quando ?review_fullscreen=1 estiver ativo;
    - não altera HTML, JS, backend, banco, Salesforce, Calendar ou e-mail.
*/

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active {
        padding-bottom: 0 !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-content {
        padding-bottom: calc(170px + env(safe-area-inset-bottom)) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-smart-shell {
        padding-bottom: 0 !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-card {
        margin-bottom: 14px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        margin: 0 !important;

        padding-top: 22px !important;
        padding-right: calc(16px + env(safe-area-inset-right)) !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        padding-left: calc(16px + env(safe-area-inset-left)) !important;

        background: #ffffff !important;
        background-image:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.92) 18%,
                rgba(255, 255, 255, 0.985) 38%,
                #ffffff 100%
            ) !important;

        border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
        border-radius: 0 !important;

        box-shadow: 0 -18px 42px -34px rgba(15, 23, 42, 0.38) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer::before,
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer::after {
        content: none !important;
        display: none !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
        order: 1 !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back {
        order: 2 !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        background: #ffffff !important;
    }
}
/* MD REVIEW MOBILE FIXED ACTION BAR FINAL END */
/* MD REVIEW MOBILE FOOTER TOP BREATHING START */
/*
    Ajuste fino do footer mobile da revisão fullscreen.

    Por que existe:
    - o footer mobile já está grudando corretamente no fim da tela;
    - o botão Voltar possui respiro inferior adequado;
    - o botão Confirmar reserva precisava de respiro superior dentro da própria área branca.

    O que faz:
    - aumenta somente o padding-top da sessão branca dos botões;
    - preserva o comportamento atual do footer;
    - não altera JS, HTML, backend, banco ou integrações.
*/

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-footer {
        padding-top: 24px !important;
        box-sizing: border-box !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        gap: 10px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
        margin-top: 0 !important;
    }
}
/* MD REVIEW MOBILE FOOTER TOP BREATHING END */
/* MD REVIEW MOBILE FOOTER REAL TOP PADDING START */
/*
    Ajuste final e específico do respiro superior do footer mobile.

    Diagnóstico:
    - o DevTools mostrou que a regra realmente ativa é:
      body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed
      #step-revisao .review-neo-footer

    Solução:
    - aplicar padding-top: 20px diretamente nesse seletor;
    - manter a mudança restrita ao mobile;
    - preservar o comportamento atual dos botões e do footer.
*/

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed #step-revisao .review-neo-footer {
        padding-top: 20px !important;
        box-sizing: border-box !important;
    }
}
/* MD REVIEW MOBILE FOOTER REAL TOP PADDING END */
/* MD REVIEW DESKTOP TITLE BREATHING START */
/*
    Respiro inferior do cabeçalho da tela "Revise seus dados".

    Por que existe:
    - no desktop, o título/subtítulo estava muito próximo do card de data e horário;
    - este ajuste melhora a hierarquia visual e deixa a composição mais premium.

    Escopo:
    - somente desktop/tablet;
    - somente no modo review_fullscreen;
    - não altera mobile, HTML, JS, backend, banco ou integrações.
*/

@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block {
        margin-bottom: 18px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block + .review-schedule-strip {
        margin-top: 0 !important;
    }
}

@media (min-width: 1280px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-title-block {
        margin-bottom: 22px !important;
    }
}
/* MD REVIEW DESKTOP TITLE BREATHING END */
/* MD REVIEW CONTEXTUAL PREMIUM CARD START */
/*
    Card contextual refinado da revisão fullscreen.

    Por que existe:
    - transforma o aviso final em uma mensagem mais humana e objetiva;
    - mantém data/hora e e-mail reais;
    - reduz ruído visual;
    - preserva o mobile já aprovado.

    Escopo:
    - somente ?review_fullscreen=1;
    - não altera backend, payload, banco, Salesforce, Microsoft Calendar ou e-mail.
*/

body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed #step-revisao .review-smart-shell {
    gap: 12px !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-card {
    width: 100% !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 12px 15px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(191, 219, 254, 0.62) !important;
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.70), rgba(255, 255, 255, 0.88)) !important;
    box-shadow: 0 14px 38px -36px rgba(15, 23, 42, 0.34) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-inner {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: center !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 13px !important;
    background: rgba(43, 150, 230, 0.08) !important;
    color: #0784ee !important;
    border: 1px solid rgba(43, 150, 230, 0.18) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-copy {
    min-width: 0 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-title {
    margin: 0 !important;
    color: #101b35 !important;
    font-size: 13.8px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.025em !important;
    font-weight: 950 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-text {
    margin: 3px 0 0 0 !important;
    color: #66758f !important;
    font-size: 11.8px !important;
    line-height: 1.35 !important;
    font-weight: 720 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-text strong {
    color: #334155 !important;
    font-weight: 850 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed #step-revisao .review-neo-footer {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

@media (max-width: 767px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-card {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-inner {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-title {
        font-size: 13px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-text {
        font-size: 11.5px !important;
    }
}
/* MD REVIEW CONTEXTUAL PREMIUM CARD END */
/* MD REVIEW DESKTOP FOOTER TOP PADDING FINAL START */
/*
    Ajuste final de respiro entre o card contextual e os botões no desktop.

    Diagnóstico:
    - margin-top não gerou efeito visual suficiente neste layout;
    - o respiro correto precisa ser aplicado como padding-top na sessão dos botões;
    - este bloco fica no final do CSS para vencer a cascata.

    Escopo:
    - somente desktop/tablet;
    - somente modo review_fullscreen;
    - mobile permanece inalterado.
*/

@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed #step-revisao .review-neo-footer {
        margin-top: 0 !important;
        padding-top: 30px !important;
        box-sizing: border-box !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed #step-revisao .review-neo-dock {
        margin-top: 0 !important;
    }
}

@media (min-width: 1280px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active.md-review-context-card-installed #step-revisao .review-neo-footer {
        padding-top: 34px !important;
    }
}
/* MD REVIEW DESKTOP FOOTER TOP PADDING FINAL END */
/* MD REVIEW DESKTOP ADJACENT CONTEXT CARD SPACING START */
/*
    Espaçamento final entre o card "Dados da reserva" e o card "Pronto para confirmar".

    Diagnóstico:
    - margin-top genérico no card contextual não teve efeito suficiente;
    - a estrutura correta é atacar a relação direta entre:
      .review-v2-panel + .md-review-context-card

    Solução:
    - usar seletor adjacente altamente específico;
    - aplicar margin-top no card contextual quando ele vem logo após o painel de dados;
    - preservar mobile aprovado.
*/

@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel + .md-review-context-card {
        margin-top: 30px !important;
    }
}

@media (min-width: 1280px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-v2-panel + .md-review-context-card {
        margin-top: 34px !important;
    }
}
/* MD REVIEW DESKTOP ADJACENT CONTEXT CARD SPACING END */
/* MD REVIEW FINAL MICROCOPY POLISH START */
/*
    Polimento visual final do card contextual da revisão.

    Por que existe:
    - o layout já está aprovado;
    - este ajuste apenas reduz peso visual do card e melhora leitura;
    - mobile aprovado é preservado.
*/

@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-card {
        padding: 11px 14px !important;
        border-color: rgba(191, 219, 254, 0.54) !important;
        background:
            linear-gradient(135deg, rgba(239, 246, 255, 0.58), rgba(255, 255, 255, 0.90)) !important;
        box-shadow: 0 12px 34px -34px rgba(15, 23, 42, 0.28) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        background: rgba(43, 150, 230, 0.07) !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-title {
        font-size: 13.5px !important;
        line-height: 1.18 !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .md-review-context-text {
        font-size: 11.5px !important;
        line-height: 1.32 !important;
    }
}
/* MD REVIEW FINAL MICROCOPY POLISH END */

/* MD REVIEW CONFIRM BUTTON LOADING GUARD START */
/*
    Estado visual de carregamento do botão Confirmar reserva.

    Por que existe:
    - evita sensação de tela parada durante a criação da reserva;
    - reduz chance de clique duplo;
    - melhora segurança operacional com integrações externas.

    Escopo:
    - somente review_fullscreen;
    - não altera backend, payload, banco, Salesforce, Calendar ou e-mail.
*/

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit.md-confirm-loading,
body.md-review-fullscreen-preview.md-review-fullscreen-active .review-neo-submit.md-confirm-loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit.md-confirm-loading *,
body.md-review-fullscreen-preview.md-review-fullscreen-active .review-neo-submit.md-confirm-loading * {
    opacity: 0 !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit.md-confirm-loading::before,
body.md-review-fullscreen-preview.md-review-fullscreen-active .review-neo-submit.md-confirm-loading::before {
    content: "Confirmando reserva..." !important;
    position: absolute !important;
    inset: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    letter-spacing: -0.01em !important;
}

body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit.md-confirm-loading::after,
body.md-review-fullscreen-preview.md-review-fullscreen-active .review-neo-submit.md-confirm-loading::after {
    content: "" !important;
    position: absolute !important;
    right: calc(50% - 118px) !important;
    top: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-top: -7px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, 0.45) !important;
    border-top-color: #ffffff !important;
    animation: mdConfirmSpin 0.75s linear infinite !important;
}

@keyframes mdConfirmSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* MD REVIEW CONFIRM BUTTON LOADING GUARD END */
/* MD REVIEW DESKTOP BUTTONS FINAL WIDTH START */
/*
    Ajuste final da largura dos botões da revisão fullscreen no desktop.

    Decisão de UX:
    - o botão Confirmar reserva estava largo demais e competia com a tela;
    - a largura agora fica mais próxima do botão Revisar agendamento usado nas etapas anteriores;
    - o conjunto Voltar + Confirmar reserva fica centralizado;
    - o mobile aprovado não é alterado.

    Escopo:
    - somente desktop/tablet;
    - somente review_fullscreen;
    - não altera HTML, JS, backend, banco ou integrações.
*/

@media (min-width: 768px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        width: auto !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;

        display: grid !important;
        grid-template-columns: 150px 330px !important;
        gap: 14px !important;

        justify-content: center !important;
        justify-items: stretch !important;
        align-items: center !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back {
        width: 150px !important;
        max-width: 150px !important;
        min-width: 150px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
        width: 330px !important;
        max-width: 330px !important;
        min-width: 330px !important;
    }
}

@media (min-width: 1280px) {
    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-dock {
        grid-template-columns: 155px 340px !important;
        gap: 14px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-back {
        width: 155px !important;
        max-width: 155px !important;
        min-width: 155px !important;
    }

    body.md-review-fullscreen-preview.md-review-fullscreen-active #step-revisao .review-neo-submit {
        width: 340px !important;
        max-width: 340px !important;
        min-width: 340px !important;
    }
}
/* MD REVIEW DESKTOP BUTTONS FINAL WIDTH END */