/* ========================================
   FIX PARA BOTÕES ONBOARDING MOBILE
   ======================================== */

/* Garantir que os botões sejam sempre visíveis */
.actions-section {
    position: relative;
    z-index: 10;
    background: transparent;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* Ajustes específicos para mobile */
@media (max-width: 768px) {
    .onboarding-content {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .welcome-section {
        flex-shrink: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    .steps-section {
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .steps-grid {
        justify-content: center !important;
        padding: 0.25rem !important;
        align-items: stretch !important;
    }

    .step-card {
        height: 50px !important;
    }

    .actions-section {
        flex-shrink: 0 !important;
        margin-top: 0.5rem !important;
        padding: 0.5rem 0 !important;
    }
}

@media (max-width: 480px) {
    .steps-grid {
        justify-content: center !important;
        align-items: stretch !important;
    }

    .step-card {
        height: 45px !important;
    }

    .actions-section {
        margin-top: 0.25rem !important;
        padding: 0.25rem 0 !important;
    }
}

@media (max-width: 360px) {
    .steps-grid {
        justify-content: center !important;
        align-items: stretch !important;
    }

    .step-card {
        height: 45px !important;
    }

    .actions-section {
        margin-top: 0.125rem !important;
        padding: 0.125rem 0 !important;
    }
}

/* Para telas muito baixas */
@media (max-height: 600px) {
    .steps-grid {
        justify-content: center !important;
    }

    .actions-section {
        margin-top: 0.25rem !important;
        padding: 0.25rem 0 !important;
    }
}

@media (max-height: 500px) {
    .steps-grid {
        justify-content: center !important;
    }

    .actions-section {
        margin-top: 0.125rem !important;
        padding: 0.125rem 0 !important;
    }
}

/* Garantir que os botões tenham tamanho adequado */
.modernButton {
    min-height: 44px !important;
    min-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Layout otimizado para 3 cards */
.steps-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
}

.step-card {
    height: 60px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Layout otimizado sem scroll */
.steps-grid {
    overflow: visible !important;
}

/* Garantir que o container principal não tenha scroll */
.onboarding-container {
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Ajuste para dispositivos com notch */
@supports (padding-top: env(safe-area-inset-top)) {
    .onboarding-container {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}