/* Barra de progresso visual na tela de espera */
.nox-progress-bar-status {
    width: 100%;
    max-width: 340px;
    margin: 24px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.nox-progress-bar-outer {
    width: 100%;
    height: 12px;
    background: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}
.nox-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--nox-primary), var(--nox-secondary));
    border-radius: 8px;
    transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.nox-progress-bar-label {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

/* Ícones estáticos abaixo da ampulheta */
.nox-progress-static-icons {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}
.nox-progress-static-icons img {
    width: 38px;
    height: 38px;
    opacity: 0.85;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.07));
}
/* Garante que a seleção de produtos não seja afetada por grid herdado dos exemplos */
.nox-product-selection {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 24px;
    justify-content: center;
    align-items: flex-start;
}

.nox-product-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
    max-width: 220px;
    position: relative;
    margin-top: 24px;
}
/* Wrapper para hover sincronizado de card e check */

.nox-product-card-hover-wrapper:hover .nox-product-card:not(.selected) {
    /* Aplica apenas o efeito de box-shadow na cor do template */
    border-color: var(--nox-secondary);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(var(--nox-secondary-rgb), 0.15);
}

.nox-product-card-hover-wrapper:hover .nox-product-check-above:not(.nox-check-selected) {
    border: none !important;
    box-shadow: none !important;
    transform: translateX(-50%) scale(1.08) !important;
}

@media (max-width: 767px) {
    .nox-product-card-wrapper {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        max-width: 80%;
        margin-top: 16px;
    }

    .nox-product-card-check-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .nox-product-check-above {
        position: relative !important;
        margin-left: 12px !important;
        margin-top: 0;
        left: 50px !important;
        top: auto !important;
        transform: none;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }

    .nox-onboarding-mobile-spacer {
        display: block;
        width: 100%;
        height: 40px;
        pointer-events: none;
        background: transparent;
    }

    /* Botões avançar/voltar fixos no mobile */
    #onboarding-back-btn,
    .nox-onboarding-back-btn {
        position: fixed !important;
        left: 16px;
        bottom: 16px;
        z-index: 1100;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }

    #onboarding-next-btn,
    .nox-onboarding-next-btn {
        position: fixed !important;
        right: 16px;
        bottom: 16px;
        z-index: 1100;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    }
    /* Garante que botões não fiquem sobrepostos ao teclado virtual */
    @media (pointer: coarse) {
        #onboarding-back-btn,
        .nox-onboarding-back-btn,
        #onboarding-next-btn,
        .nox-onboarding-next-btn {
            bottom: 24px;
        }
    }
}
/* Check padrão abaixo da imagem de cada produto */
.nox-product-check-above {
    position: absolute;
    top: -42px; /* aumenta a distância do card */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: transparent;
    border-radius: 50%;
    border: none !important;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .nox-product-check-above:hover {
        border: none !important;
        box-shadow: none !important;
        transform: translateX(-50%) scale(1.08) !important;
        transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s !important;
    }

    /* Não aplica hover se o check estiver selecionado */
    .nox-product-check-above.nox-check-selected:hover {
        border: none !important;
        box-shadow: none !important;
        transform: translateX(-50%) scale(1) !important;
        transition: none !important;
    }

    .nox-product-check-above i {
        font-size: 2.1rem;
        color: #ccc;
        transition: color 0.2s;
    }

.nox-product-card.selected ~ .nox-product-check-above i {
    color: var(--nox-primary) !important;
}

.nox-product-card.selected {
    box-shadow: 0 0 0 3px #00c2cb33;
    border: 2px solid #00c2cb;
}
/* ========================================================================
   NoxMob - Estilos do Processo de Onboarding
   ======================================================================== */

/* Variáveis CSS para cores dinâmicas baseadas no template selecionado */
:root {
    --nox-primary: #0FBBCD; /* Cor institucional NoxMob (padrão antes da seleção) */
    --nox-primary-rgb: 15, 187, 205;
    --nox-secondary: #92153F;
    --nox-secondary-rgb: 146, 21, 63;
}

/* Transições suaves para mudanças de cor */
.nox-product-card,
.nox-product-card.selected,
.dx-stepper-step-indicator,
.dx-button,
.nox-sms-modal *,
.nox-onboarding-submit-btn,
.nox-onboarding-next-btn,
.nox-info-card {
    transition: border-color 0.5s ease, background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

/* Container principal do onboarding */
#onboarding-container {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background-color: #ffffff;
    overflow: visible; /* Alterado de 'hidden' para permitir tooltips de validação */
    padding: 0;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%) scale(0.95);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1000; /* Aumentado para garantir visibilidade */
}

    #onboarding-container.active {
        opacity: 1;
        top: 0 !important;
        height: 100vh !important;
        transform: translateY(0) scale(1) !important;
        pointer-events: auto;
        border-radius: 0;
        overflow: hidden; /* Mantém hidden apenas quando ativo para evitar scroll */
    }

/* Painel esquerdo com formulário */
.nox-onboarding-left-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    padding: 20px;
    overflow: visible; /* Alterado para permitir tooltips */
    box-sizing: border-box;
}

/* Painel direito com dual-video (retaguarda + pdv) - proporção 9:16 */
.nox-onboarding-right-panel {
    position: relative;
    width: 56.25vh; /* Proporção 9:16: altura * (1080/1920) */
    max-width: 45%; /* Limite máximo para telas muito largas */
    height: 100%;
    overflow: hidden;
    border-radius: 10px 0 0 10px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column; /* Layout vertical para dual-video */
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 20px;

    /* Background gradient padrão (Gestão) - vinho/magenta */
    background: radial-gradient(ellipse at center, #8B1045 0%, #6B0D35 50%, #4A0925 100%);
}

/* Background gradient para template Gourmet - vermelho escuro */
.nox-onboarding-right-panel.nox-template-gourmet {
    background: radial-gradient(ellipse at center, #d00000 0%, #a00000 50%, #700000 100%);
}

/* Background gradient para template Varejo - ciano/turquesa */
.nox-onboarding-right-panel.nox-template-varejo {
    background: radial-gradient(ellipse at center, #0FBBCD 0%, #0A8A99 50%, #065966 100%);
}

/* Background gradient para template Fácil - laranja */
.nox-onboarding-right-panel.nox-template-facil {
    background: radial-gradient(ellipse at center, #ED7203 0%, #C45F02 50%, #8A4302 100%);
}

/* Background gradient para template Gestão/Geral - vinho/magenta (padrão) */
.nox-onboarding-right-panel.nox-template-geral,
.nox-onboarding-right-panel.nox-template-gestao {
    background: radial-gradient(ellipse at center, #891042 0%, #6B0D35 50%, #4A0925 100%);
}

#onboarding-container.active .nox-onboarding-right-panel {
    border-radius: 0;
}

/* Imagem estática do produto (SVG) */
.nox-onboarding-static-image {
    position: absolute;
    width: 70%;
    height: auto;
    max-height: 80%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    transform: translateX(100%);
    opacity: 0;
}

/* Imagem entrando (vindo da direita) */
.nox-onboarding-static-image.slide-in-right {
    transform: translateX(0);
    opacity: 1;
}

/* Imagem saindo (para a direita) */
.nox-onboarding-static-image.slide-out-right {
    transform: translateX(100%);
    opacity: 0;
}

/* ========================================
   Seções de Vídeo Dual (Retaguarda + PDV)
   ======================================== */

/* Logo NOX no topo do painel */
.nox-onboarding-panel-logo {
    width: 120px;
    height: auto;
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* Logo branca */
    opacity: 0.95;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Logo centralizada (quando vídeos estão ocultos nos passos 2-5) */
.nox-onboarding-panel-logo--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    margin-bottom: 0;
    opacity: 0.8;
}

/* Seção de vídeo (retaguarda ou pdv) */
.nox-onboarding-video-section {
    position: relative;
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Proporção específica para retaguarda (16:9) */
.nox-onboarding-video-section--retaguarda .nox-onboarding-video-section__content {
    aspect-ratio: 16 / 9;
}

/* Proporção específica para PDV (16:9 também - ajustado para evitar bordas pretas) */
.nox-onboarding-video-section--pdv .nox-onboarding-video-section__content {
    aspect-ratio: 16 / 9;
}

/* Header com título (FORA do vídeo, não overlay) */
.nox-onboarding-video-section__header {
    width: 100%;
    padding: 0;
    text-align: center;
}

/* Título do vídeo - maiúsculas, bold, branco */
.nox-onboarding-video-section__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* Container do vídeo - bordas arredondadas, flutuante */
.nox-onboarding-video-section__content {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    background: #000;
}

/* Vídeo dual - preenche o container */
.nox-onboarding-video--dual {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Separador visual - símbolo + */
.nox-onboarding-video-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 40px;
    font-weight: 300;
    color: #ffffff;
    opacity: 0.8;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}

/* Conteúdo do separador (símbolo +) */
.nox-onboarding-video-separator::before {
    content: '+';
}

/* Estados de loading */
.nox-onboarding-video--dual.nox-video-loading {
    opacity: 0;
}

.nox-onboarding-video--dual.nox-video-ready {
    animation: nox-video-fade-in 0.5s ease forwards;
}

/* Animação de fade-in para vídeos */
@keyframes nox-video-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Imagem de fundo vertical (1080x1920 - formato 9:16) */
.nox-onboarding-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
    transform: translateX(0);
}

/* Vídeo deslizando para fora (esquerda) */
.nox-onboarding-video.slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
}

/* Vídeo deslizando para dentro (da esquerda) */
.nox-onboarding-video.slide-in-left {
    transform: translateX(0);
    opacity: 1;
}

/* Texto sobre a imagem lateral */
.nox-onboarding-lateral-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    z-index: 5;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    width: 90%;
    transition: opacity 0.3s ease;
}

.nox-lateral-text-line {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

.nox-lateral-text-bold {
    font-weight: 700;
    font-size: 24px;
    margin-top: 5px;
}

/* Overlay escuro sobre o vídeo */
.nox-onboarding-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

/* Conteúdo promocional */
.nox-onboarding-promo-content {
    text-align: center;
    color: #ffffff;
    max-width: 420px;
}

.nox-onboarding-promo-logo {
    width: 95px;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.nox-onboarding-promo-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nox-onboarding-promo-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 32px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nox-onboarding-promo-subtitle {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 28px 0;
    opacity: 0.95;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    line-height: 1.4;
}

.nox-onboarding-promo-guarantee {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
}

#login-container {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    max-width: 500px;
    width: 500px;
}

    /* Conteúdo do login */
    #login-container > *:not(#onboarding-container) {
        transition: opacity 0.3s ease;
        opacity: 1;
    }

    /* Oculta conteúdo do login quando expandido */
    #login-container.compressed > *:not(#onboarding-container) {
        opacity: 0;
        pointer-events: none;
    }

    /* Login expandido para acomodar onboarding */
    #login-container.compressed {
        max-width: 900px;
        width: 900px;
    }

    /* Animação de retorno do login */
    #login-container.returning {
        animation: fadeInLogin 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

@keyframes fadeInLogin {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Botão fechar */
/* Botão fechar */
.nox-onboarding-close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

    .nox-onboarding-close-btn:hover {
        background-color: #f5f5f5;
        color: #333;
    }

/* Container do conteúdo rolável */
.nox-onboarding-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin-bottom: 10px;
}

    /* Customização da scrollbar */
    .nox-onboarding-content::-webkit-scrollbar {
        width: 8px;
    }

    .nox-onboarding-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .nox-onboarding-content::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }

        .nox-onboarding-content::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

/* Stepper customizado */
#onboarding-stepper {
    margin-bottom: 20px;
}

    /* Bloqueia cliques em todos os itens do stepper */
    #onboarding-stepper .dx-item {
        pointer-events: none !important;
        cursor: default !important;
    }

.dx-stepper .dx-item {
    font-weight: 500;
}

    .dx-stepper .dx-item.dx-state-selected {
        color: var(--nox-primary) !important;
    }

/* Sobrescreve cor do indicador de progresso do stepper DevExtreme */
#onboarding-stepper .dx-stepper-step-indicator {
    border-top-color: var(--nox-primary) !important;
}

#onboarding-stepper .dx-item.dx-state-selected .dx-icon {
    color: var(--nox-primary) !important;
}

/* Cores do stepper - sobrescreve dx.light.css e dx.material themes */

/* Passo selecionado - CLASSES CORRETAS do DevExtreme Material */
#onboarding-stepper .dx-step.dx-step-selected .dx-step-indicator {
    color: #fff !important;
    border-color: var(--nox-primary) !important;
    background-color: var(--nox-primary) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nox-primary), 0 0 0 8px #fff !important;
}

#onboarding-stepper .dx-step.dx-step-selected .dx-step-caption {
    color: rgba(0, 0, 0, .87) !important;
    font-weight: 500 !important;
}

#onboarding-stepper .dx-step.dx-step-selected .dx-step-text {
    font-weight: 500 !important;
}

/* Passo completado */
#onboarding-stepper .dx-step.dx-step-completed .dx-step-indicator {
    color: #fff !important;
    border-color: var(--nox-primary) !important;
    background-color: var(--nox-primary) !important;
}

/* Estado hover em passo selecionado */
#onboarding-stepper .dx-step.dx-state-hover.dx-step-selected .dx-step-indicator {
    background-color: var(--nox-primary) !important;
    border-color: var(--nox-primary) !important;
}

/* Estado focused em passo selecionado */
#onboarding-stepper .dx-step.dx-state-focused.dx-step-selected .dx-step-indicator,
#onboarding-stepper .dx-stepper.dx-state-focused .dx-step-selected .dx-step-indicator {
    background-color: var(--nox-primary) !important;
    border-color: var(--nox-primary) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--nox-primary), 0 0 0 8px #fff !important;
}

#onboarding-stepper .dx-stepper.dx-state-focused .dx-step-selected.dx-state-focused .dx-step-indicator {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--nox-primary-rgb), 0.7), 0 0 0 8px #fff !important;
}

/* Container dos passos */
.nox-onboarding-step {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

    .nox-onboarding-step.active {
        display: block;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.nox-onboarding-step-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

    .nox-onboarding-step-title i {
        color: var(--nox-secondary);
    }

    .nox-onboarding-step-title.nox-step-title-small {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 30px;
    }

.nox-onboarding-step-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Formulários dentro dos passos */
.nox-onboarding-form {
    width: 100%;
}

    .nox-onboarding-form .dx-field-item-label-text {
        font-weight: 500;
        color: #333;
    }

    .nox-onboarding-form .dx-texteditor {
        margin-bottom: 15px;
    }

/* Cards de exemplos */
.nox-onboarding-exemplos {
    margin: 24px 0;
}

.nox-onboarding-exemplos-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .nox-onboarding-exemplos-list {
        grid-template-columns: 1fr 1fr;
    }
}

.nox-exemplo-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    transition: none;
    margin-bottom: 0;
}

.nox-exemplo-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
}

    .nox-exemplo-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.nox-exemplo-content {
    flex: 1;
}

.nox-exemplo-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 6px 0;
}

.nox-exemplo-description {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Footer com botões de navegação */
.nox-onboarding-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

    /* Garante alinhamento à direita quando há apenas um grupo de botões visível */
    .nox-onboarding-footer > div:last-child {
        margin-left: auto;
    }

/* Container do checkbox acima do footer */
.nox-onboarding-checkbox-container {
    padding: 15px 0;
    margin-top: 10px;
    display: none; /* Oculto por padrão, mostra apenas no passo 2 */
}

/* Estilo do checkbox de exemplos */
.nox-onboarding-checkbox-exemplos {
    display: flex;
    justify-content: center;
}

    .nox-onboarding-checkbox-exemplos .dx-checkbox {
        font-size: 14px;
    }

    .nox-onboarding-checkbox-exemplos .dx-checkbox-text {
        color: #333;
        font-weight: 500;
    }

    /* Aplica cores do template ao checkbox quando selecionado */
    .nox-onboarding-checkbox-exemplos .dx-checkbox-checked .dx-checkbox-icon {
        background-color: var(--nox-primary) !important;
        border-color: var(--nox-primary) !important;
    }

    .nox-onboarding-checkbox-exemplos .dx-checkbox:hover .dx-checkbox-icon {
        border-color: var(--nox-primary) !important;
    }

/* Botões pequenos e consistentes */
.nox-onboarding-back-btn .dx-button,
.nox-onboarding-next-btn .dx-button,
.nox-onboarding-submit-btn .dx-button,
#onboarding-back-btn .dx-button,
#onboarding-next-btn .dx-button,
#onboarding-submit-btn .dx-button {
    min-width: 40px !important;
    height: 40px !important;
}

    /* ==========================================================================
   Botões de Navegação - Cores Dinâmicas
   ========================================================================== */

    /* Sobrescreve cores dos botões DevExtreme para usar variáveis dinâmicas */
    #onboarding-back-btn .dx-button.dx-button-default,
    #onboarding-next-btn .dx-button.dx-button-default,
    #onboarding-submit-btn .dx-button.dx-button-default {
        background-color: var(--nox-primary) !important;
        border-color: var(--nox-primary) !important;
    }

        #onboarding-back-btn .dx-button.dx-button-default:hover,
        #onboarding-next-btn .dx-button.dx-button-default:hover,
        #onboarding-submit-btn .dx-button.dx-button-default:hover {
            background-color: rgba(var(--nox-primary-rgb), 0.85) !important;
            border-color: rgba(var(--nox-primary-rgb), 0.85) !important;
        }

        #onboarding-back-btn .dx-button.dx-button-default:active,
        #onboarding-next-btn .dx-button.dx-button-default:active,
        #onboarding-submit-btn .dx-button.dx-button-default:active {
            background-color: rgba(var(--nox-primary-rgb), 0.75) !important;
            border-color: rgba(var(--nox-primary-rgb), 0.75) !important;
        }

/* Cards informativos */
.nox-info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid var(--nox-secondary);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.nox-info-card-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .nox-info-card-title i {
        color: var(--nox-secondary);
    }

.nox-info-card-content {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.nox-product-card {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    height: 320px;
    min-height: 300px;
    max-height: 300px;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    /*    .nox-product-card:hover {
        border-color: var(--nox-secondary);
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(var(--nox-secondary-rgb), 0.15);
    }*/

    .nox-product-card.selected {
        border-color: var(--nox-primary);
        background: linear-gradient(135deg, rgba(var(--nox-primary-rgb), 0.05) 0%, rgba(var(--nox-primary-rgb), 0.05) 100%);
        box-shadow: 0 4px 12px rgba(var(--nox-primary-rgb), 0.2);
    }

.nox-product-image {
    margin-bottom: 15px;
}

    .nox-product-image img {
        max-width: 100%;
        height: auto;
        max-height: 80px;
        object-fit: contain;
    }

.nox-product-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

    .nox-product-features li {
        padding: 6px 10px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 12px;
        color: #495057;
    }

        .nox-product-features li:last-child {
            border-bottom: none;
        }

        .nox-product-features li:before {
            content: '\f00c';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: var(--nox-secondary);
            margin-right: 8px;
            font-size: 11px;
        }

/* Estilos responsivos para mobile */
@media (max-width: 767px) {
    #onboarding-container {
        flex-direction: column;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
    }

    .nox-onboarding-left-panel {
        width: 100%;
        padding: 20px;
    }

    .nox-onboarding-right-panel {
        display: none;
    }

    .nox-onboarding-title {
        font-size: 20px;
    }

    .nox-onboarding-step-title {
        font-size: 18px;
    }

    .nox-onboarding-footer {
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
    }

        .nox-onboarding-footer > div {
            width: auto;
            flex: 0 0 auto;
        }

    /* Garante que botão Voltar fique à esquerda */
    #onboarding-back-btn {
        order: 1;
    }

    /* Garante que botões Próximo/Criar Conta fiquem à direita */
    #onboarding-next-btn,
    #onboarding-submit-btn {
        order: 2;
    }

    .nox-product-selection {
        flex-direction: column;
        gap: 15px;
        margin: 20px 0;
    }

    .nox-product-card {
        max-width: 100%;
        min-width: 100%;
    }

    /* No mobile, ocupa tela inteira */
    #onboarding-container.active {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        max-height: 100%;
        z-index: 1000;
        border-radius: 0;
    }
}

/* Tablets e telas médias */
@media (min-width: 768px) and (max-width: 991px) {
    .nox-product-card {
        flex: 1 1 45%;
        max-width: 45%;
    }

    .nox-product-features li {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Estilos para desktop */
@media (min-width: 768px) {
    #login-container {
        max-height: 600px;
        height: 600px;
        min-height: 600px;
    }

    /* Ajuste do layout quando onboarding está ativo */
    .nox-login-keyboard-avoiding-view {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 50px;
        gap: 0;
        position: relative;
    }

        .nox-login-keyboard-avoiding-view.onboarding-active .promotional-content {
            display: none !important;
        }
}

/* Estados de loading */
.nox-onboarding-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 40px;
    color: #666;
}

.nox-onboarding-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--nox-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mensagens de sucesso */
.nox-success-message {
    text-align: center;
    padding: 40px 20px;
}

.nox-success-icon {
    font-size: 64px;
    color: #28a745;
    margin-bottom: 20px;
    animation: scaleIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

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

.nox-success-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.nox-success-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}
/* ========================================================================
   Indicadores de Validação (CNPJ e CEP)
   ======================================================================== */

/* Container do indicador customizado */
.cnpj-validation-indicator,
.cep-validation-indicator {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10;
}

    /* Estado: Pendente (cinza) */
    .cnpj-validation-indicator.pending i,
    .cep-validation-indicator.pending i {
        color: #ccc;
        font-size: 12px;
        opacity: 0.5;
    }

    /* Estado: Carregando (azul, girando) */
    .cnpj-validation-indicator.loading i,
    .cep-validation-indicator.loading i {
        color: #007bff;
        font-size: 16px;
        animation: spinIndicator 1s linear infinite;
    }

    /* Estado: Sucesso (verde) */
    .cnpj-validation-indicator.success i,
    .cep-validation-indicator.success i {
        color: #28a745;
        font-size: 18px;
        animation: successPulse 0.5s ease-out;
    }

    /* Estado: Erro (vermelho) */
    .cnpj-validation-indicator.error i,
    .cep-validation-indicator.error i {
        color: #dc3545;
        font-size: 18px;
        animation: errorShake 0.5s ease-out;
    }

/* Animação de rotação para loading */
@keyframes spinIndicator {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animação de pulso para sucesso */
@keyframes successPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animação de shake para erro */
@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Posicionamento relativo no container do textbox */
.dx-texteditor {
    position: relative;
}

/* ========================================================================
   Botão de Mostrar/Ocultar Senha
   ======================================================================== */

/* Aplica cor secundária do template ao botão e ícone de olho da senha */
#onboarding-form-step5 .dx-button.dx-button-has-icon {
    background-color: transparent !important;
    border-color: transparent !important;
    transition: all 0.2s ease;
    border-radius: 6px !important;
}

    #onboarding-form-step5 .dx-button.dx-button-has-icon .dx-icon {
        color: #333 !important;
        transition: all 0.2s ease;
    }

    #onboarding-form-step5 .dx-button.dx-button-has-icon:hover {
        background-color: rgba(var(--nox-secondary-rgb), 0.1) !important;
    }


    #onboarding-form-step5 .dx-button.dx-button-has-icon:active {
        transform: scale(1.0);
        background-color: rgba(var(--nox-secondary-rgb), 0.2) !important;
    }

/* ========================================================================
   Campos Readonly (preenchidos pela API)
   ======================================================================== */

/* Estilo visual para campos readonly */
.nox-field-readonly {
    opacity: 0.7;
}

    .nox-field-readonly .dx-texteditor-input,
    .nox-field-readonly input {
        background-color: #f5f5f5 !important;
        color: #666 !important;
        cursor: not-allowed !important;
    }

    .nox-field-readonly .dx-textbox,
    .nox-field-readonly .dx-selectbox {
        background-color: #f5f5f5 !important;
    }

    .nox-field-readonly.dx-state-readonly .dx-texteditor-input {
        background-color: #f5f5f5 !important;
        border-color: #e0e0e0 !important;
    }

/* ========================================================================
   Modal de Confirmação SMS
   ======================================================================== */

/* Container principal do modal SMS */
.nox-sms-modal {
    padding: 20px;
    text-align: center;
}

/* Descrição do modal */
.nox-sms-description {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Número de telefone destacado */
.nox-sms-phone {
    font-size: 18px;
    color: var(--nox-primary);
    margin-bottom: 30px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Ícone de lápis para editar telefone (SVG) */
.nox-sms-edit-icon {
    width: 30px;
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px;
    border-radius: 6px;
    vertical-align: middle;
}

    .nox-sms-edit-icon:hover {
        background-color: rgba(var(--nox-secondary-rgb), 0.1);
    }

    .nox-sms-edit-icon:active {
        transform: scale(1.0);
        background-color: rgba(var(--nox-secondary-rgb), 0.2);
        filter: drop-shadow(0 0 3px var(--nox-secondary));
    }

/* Container dos inputs de dígitos */
.nox-sms-inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    transition: transform 0.1s ease;
}

    /* Animação de erro (shake) */
    .nox-sms-inputs.shake-error {
        animation: shakeError 0.5s ease;
    }

@keyframes shakeError {
    0%, 100% {
        transform: translateX(0);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Input individual de dígito */
.nox-sms-digit {
    width: 60px;
    height: 70px;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    background-color: #fff;
    color: #333;
    /* Remove setas de número no Chrome, Safari, Edge, Opera */
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

    /* Remove setas de número no Firefox */
    .nox-sms-digit::-webkit-outer-spin-button,
    .nox-sms-digit::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Focus no input */
    .nox-sms-digit:focus {
        border-color: var(--nox-primary);
        box-shadow: 0 0 0 3px rgba(var(--nox-primary-rgb), 0.15);
        transform: scale(1.05);
    }

    /* Input preenchido */
    .nox-sms-digit:valid {
        border-color: var(--nox-primary);
        background-color: rgba(var(--nox-primary-rgb), 0.05);
    }

/* Container do link de reenvio */
.nox-sms-resend {
    margin-top: 15px;
    font-size: 14px;
    min-height: 20px;
    text-align: center;
}

/* Texto do timer (countdown) */
.nox-sms-countdown {
    color: #666;
    font-weight: 500;
    display: inline-block;
}

/* Link de reenvio */
.nox-sms-resend-link {
    color: var(--nox-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
    font-weight: 500;
}

    .nox-sms-resend-link:hover {
        color: rgba(var(--nox-primary-rgb), 0.8);
        text-decoration: underline;
    }

    /* Link desabilitado durante countdown */
    .nox-sms-resend-link.disabled {
        color: #ccc;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Countdown de reenvio */
#resend-countdown {
    font-weight: 600;
}

/* Responsividade para mobile - SMS */
@media (max-width: 576px) {
    .nox-sms-modal {
        padding: 15px;
    }

    .nox-sms-digit {
        width: 50px;
        height: 60px;
        font-size: 28px;
    }

    .nox-sms-inputs {
        gap: 8px;
    }

    .nox-sms-description {
        font-size: 14px;
    }

    .nox-sms-phone {
        font-size: 16px;
    }
}

/* Modal DevExtreme customizado */
/* Remove a barra colorida do header em dialogs de confirmação, mas mantém o título */
.dx-dialog .dx-popup-title {
    background-color: transparent !important;
    color: #333 !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Estilo customizado apenas para popups SMS (não para dialogs de confirmação) */
.dx-overlay-content.dx-popup-normal:not(.dx-dialog) .dx-popup-title {
    background-color: var(--nox-primary);
    color: white;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
}

.dx-popup-bottom.dx-toolbar {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
}

/* Botões do modal */
.dx-popup-bottom .dx-button {
    min-width: 100px;
}

    .dx-popup-bottom .dx-button.dx-button-default {
        background-color: var(--nox-primary);
        border-color: var(--nox-primary);
    }

        .dx-popup-bottom .dx-button.dx-button-default:hover {
            background-color: rgba(var(--nox-primary-rgb), 0.85);
            border-color: rgba(var(--nox-primary-rgb), 0.85);
        }

/* ==========================================================================
   ONBOARDING - Botões de Navegação
   ========================================================================== */

#onboarding-back-btn .dx-button.dx-button-default.dx-button-mode-contained,
#onboarding-next-btn .dx-button.dx-button-default.dx-button-mode-contained,
#onboarding-submit-btn .dx-button.dx-button-default.dx-button-mode-contained {
    background-color: var(--nox-primary) !important;
    border-color: var(--nox-primary) !important;
}

    #onboarding-back-btn .dx-button.dx-button-default.dx-button-mode-contained:hover,
    #onboarding-next-btn .dx-button.dx-button-default.dx-button-mode-contained:hover,
    #onboarding-submit-btn .dx-button.dx-button-default.dx-button-mode-contained:hover {
        background-color: rgba(var(--nox-primary-rgb), 0.85) !important;
        border-color: rgba(var(--nox-primary-rgb), 0.85) !important;
    }

    #onboarding-back-btn .dx-button.dx-button-default.dx-button-mode-contained:active,
    #onboarding-next-btn .dx-button.dx-button-default.dx-button-mode-contained:active,
    #onboarding-submit-btn .dx-button.dx-button-default.dx-button-mode-contained:active {
        background-color: rgba(var(--nox-primary-rgb), 0.75) !important;
        border-color: rgba(var(--nox-primary-rgb), 0.75) !important;
    }

/* Sobrescreve explicitamente o dx.light.css */
.dx-button.dx-button-default.dx-button-mode-contained#onboarding-back-btn,
.dx-button.dx-button-default.dx-button-mode-contained#onboarding-next-btn,
.dx-button.dx-button-default.dx-button-mode-contained#onboarding-submit-btn,
#onboarding-back-btn > .dx-button.dx-button-default,
#onboarding-next-btn > .dx-button.dx-button-default,
#onboarding-submit-btn > .dx-button.dx-button-default {
    background-color: var(--nox-primary) !important;
    border-color: var(--nox-primary) !important;
}

/* ==========================================================================
   ONBOARDING - SelectBox de Segmentos
   ========================================================================== */

/* Borda do SelectBox quando focado */
#onboarding-container .dx-selectbox.dx-state-focused,
#onboarding-container .dx-textbox.dx-state-focused {
    border-color: var(--nox-primary) !important;
}

/* Botão do dropdown */
#onboarding-container .dx-dropdowneditor-button {
    color: var(--nox-primary) !important;
}

    #onboarding-container .dx-dropdowneditor-button:hover {
        background-color: rgba(var(--nox-primary-rgb), 0.1) !important;
    }

/* Overlay do dropdown (popup) */
.dx-overlay-content.dx-popup-normal.dx-selectbox-popup-wrapper .dx-list-item.dx-state-hover {
    background-color: rgba(var(--nox-primary-rgb), 0.1) !important;
}

.dx-overlay-content.dx-popup-normal.dx-selectbox-popup-wrapper .dx-list-item.dx-state-focused {
    background-color: rgba(var(--nox-primary-rgb), 0.15) !important;
}

.dx-overlay-content.dx-popup-normal.dx-selectbox-popup-wrapper .dx-list-item-selected {
    background-color: rgba(var(--nox-primary-rgb), 0.2) !important;
    color: var(--nox-primary) !important;
    font-weight: 500;
}

/* ==========================================================================
   ONBOARDING - Tela de Progresso
   ========================================================================== */

.nox-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 400px;
}

.nox-progress-animation {
    margin-bottom: 40px;
}

.nox-spinner {
    width: 80px;
    height: 80px;
    border: 8px solid rgba(var(--nox-secondary-rgb), 0.1);
    border-top: 8px solid var(--nox-primary);
    border-bottom: 8px solid var(--nox-secondary);
    border-radius: 50%;
    animation: nox-spin 1.2s linear infinite;
}

@keyframes nox-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.nox-progress-title h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--nox-primary);
    margin-bottom: 20px;
    text-align: center;
}

.nox-progress-description {
    max-width: 500px;
    text-align: center;
}

.nox-progress-description p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* ==========================================================================
   ONBOARDING - Tela de Sucesso
   ========================================================================== */

.nox-success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    min-height: 400px;
    text-align: center;
}

.nox-success-icon {
    margin-bottom: 30px;
}

.nox-success-icon i {
    font-size: 80px;
    color: #28a745;
    animation: nox-check-bounce 0.6s ease-out;
}

@keyframes nox-check-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.nox-success-title h3 {
    font-size: 28px;
    font-weight: 600;
    color: var(--nox-primary);
    margin-bottom: 20px;
}

.nox-success-description {
    max-width: 500px;
}

.nox-success-description p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* ==========================================================================
   MODAL DE TERMOS DE USO
   ========================================================================== */

/* Remove scroll da modal dos termos especificamente */
.nox-termos-modal .dx-popup-content {
    overflow: hidden !important;
}

/* Remove overflow auto do scrollable container apenas na modal dos termos */
.nox-termos-modal .dx-popup-content-scrollable {
    overflow: hidden !important;
}

/* Garante que o iframe ocupe todo o espaço disponível com scroll */
.nox-termos-modal .dx-popup-content iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    overflow: auto;
}

/* Estilo dos botões no footer da modal de termos */
.dx-popup-bottom .dx-button.dx-button-default {
    background-color: var(--nox-primary) !important;
    border-color: var(--nox-primary) !important;
}

.dx-popup-bottom .dx-button.dx-button-default:hover {
    background-color: rgba(var(--nox-primary-rgb), 0.85) !important;
    border-color: rgba(var(--nox-primary-rgb), 0.85) !important;
}