/* ============================================================
   MHDCommerce — Responsividade do Modal de Login
   Arquivo: wwwroot/css/responsive-login.css
   Carregar DEPOIS de login.css
   ============================================================ */

/* ════════════════════════════════════════════
   MOBILE — até 768px
   No celular o modal cola no rodapé e ocupa a largura toda
   (padrão "bottom sheet"), mais confortável pro polegar.
   ════════════════════════════════════════════ */
@media (max-width: 768px) {
    .login-overlay { padding: 0; align-items: flex-end; }

    .login-modal {
        max-width: none; max-height: 94vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        transform: translateY(100%);
    }
    .login-overlay.open .login-modal { transform: translateY(0); }

    .login-head { padding: 24px 22px 0; }
    .login-body { padding: 20px 22px 28px; }
    .login-title { font-size: 22px; }

    /* Alvos de toque maiores */
    .field-input { height: 52px; }
    .btn-entrar { height: 54px; }
    .social-btn { height: 52px; }
}

/* ════════════════════════════════════════════
   MOBILE PEQUENO — até 380px
   ════════════════════════════════════════════ */
@media (max-width: 380px) {
    .login-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .social-btn { font-size: 14px; }
}