/* MixFlix Universal Responsive Core */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Reset Global para Responsividade */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Fix para Androids sem DPI alta / Telas pequenas */
@media screen and (max-width: 380px) {
    :root {
        font-size: 14px; /* Reduz escala base */
    }
    
    .container-box, .card, .login-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto !important;
    }

    .input-field, .btn-primary, button {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* Garantir que nada seja cortado verticalmente */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Ajustes de Safe Area para iOS e Androids novos */
.header, header {
    padding-top: var(--safe-top) !important;
}

.bottom-nav, footer {
    padding-bottom: var(--safe-bottom) !important;
}

/* Correção específica para o Login cortado */
.tv-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 10px 15px !important;
    gap: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.container-box {
    width: 100% !important;
    max-width: 448px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.card {
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 1024px) {
    .tv-layout {
        flex-direction: row !important;
        padding: 40px !important;
    }
}

.card {
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 auto !important;
}

/* Ajuste de inputs para mobile */
input, select, textarea {
    font-size: 16px !important; /* Evita zoom automático no iOS */
}

/* Scroll suave universal */
* {
    scroll-behavior: smooth;
}

/* Esconder scrollbar em touch devices mas manter funcional */
@media (hover: none) {
    ::-webkit-scrollbar {
        display: none;
    }
    * {
        scrollbar-width: none;
    }
}