/* mobile.css — Regras exclusivas para celular, carregado por último */

/* ── AUTH GATE MOBILE ────────────────────────────────────────────── */
@media screen and (max-width: 820px) {
  /* Esconde imagem lateral e ocupa tela toda */
  .auth-gate {
    grid-template-columns: 1fr !important;
    background: #fbf8f4 !important;
  }
  .auth-visual { display: none !important; }

  /* Painel do formulário ocupa toda a tela */
  .auth-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 20px 40px !important;
    margin: 0 !important;
    min-height: 100vh !important;
    justify-content: flex-start !important;
    background: #fff !important;
    overflow-y: auto !important;
  }

  /* Logo menor */
  .auth-logo { width: 110px !important; }
  .auth-brand-row { margin-bottom: 20px !important; }

  /* Título menor */
  .auth-main-title { font-size: 24px !important; margin: 6px 0 6px !important; }
  .auth-main-copy { font-size: 12px !important; margin-bottom: 16px !important; }

  /* Tabs lado a lado */
  .auth-tabs {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .auth-tabs button { min-height: 58px !important; padding: 8px 10px !important; }
  .auth-tabs strong { font-size: 12px !important; }
  .auth-tabs small { font-size: 8px !important; }

  /* Formulário mais compacto */
  .auth-form-section { padding: 16px !important; }
  .auth-form-section form { gap: 10px !important; }
  .auth-field input { min-height: 44px !important; font-size: 14px !important; }

  /* Botão de enviar */
  .auth-submit { min-height: 48px !important; font-size: 11px !important; border-radius: 10px !important; }

  /* Botão fechar */
  .auth-gate-close { display: grid !important; place-items: center !important; }

  /* Botões redefinir/recuperar */
  .forgot-password { font-size: 11px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   CORREÇÕES RESPONSIVAS — problemas identificados em notebooks
   ════════════════════════════════════════════════════════════════════ */

/* ── BUG 1: Footer — 5 filhos em grid de 4 colunas (1051-1365px)
   O media query do styles.css muda para 4 cols mas o footer tem 5 filhos,
   fazendo o último cair sozinho numa nova linha. ─────────────────────── */
@media screen and (min-width: 1051px) and (max-width: 1365px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .footer-brand {
    grid-column: 1 / -1 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding: 40px max(5vw,28px) 30px !important;
  }
  .footer-col {
    border-right: 1px solid rgba(255,255,255,.07) !important;
  }
  .footer-col:last-child {
    border-right: none !important;
  }
}

/* ── BUG 2: Auth gate — transborda verticalmente em altura ≤800px
   Ex: notebook 1366×768. O formulário fica cortado pela viewport. ────── */
@media screen and (max-height: 800px) and (min-width: 821px) {
  .auth-gate {
    overflow-y: auto !important;
    align-items: start !important;
  }
  .auth-panel {
    align-self: start !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
  }
}

/* ── BUG 3: Modal de produto — overflow em 820-900px
   Duas colunas precisam de 810px mínimo, mas a viewport pode ter menos.
   Mudando para 1 coluna em ≤960px resolve com margem segura. ─────────── */
@media screen and (max-width: 960px) {
  .product-modal {
    grid-template-columns: 1fr !important;
    width: min(600px, 96vw) !important;
  }
  .product-modal-media,
  .modal-carousel {
    min-height: 300px !important;
    max-height: 380px !important;
  }
  .product-modal > img {
    min-height: 300px !important;
    max-height: 380px !important;
  }
  .product-modal > div {
    padding: 28px 22px 22px !important;
  }
}

/* ── BUG 4: Modal de produto — min-height:650px em telas de 768px altura
   A mídia toma quase toda a viewport antes mesmo do conteúdo aparecer. ── */
@media screen and (max-height: 800px) {
  .product-modal-media,
  .modal-carousel {
    min-height: min(400px, 45vh) !important;
  }
}

/* ── MELHORIA: Notebooks 1121-1365px — gap menor no header e welcome row ─ */
@media screen and (min-width: 1121px) and (max-width: 1365px) {
  .store-header {
    gap: 14px !important;
  }
  .welcome-row {
    grid-template-columns: 220px minmax(0,1fr) 205px !important;
  }
}

/* ── MELHORIA: Faixa 821-1000px — sidebar menor na welcome row ─────────── */
@media screen and (min-width: 821px) and (max-width: 1000px) {
  .welcome-row {
    grid-template-columns: 195px 1fr !important;
  }
  .category-menu {
    min-width: 0 !important;
  }
  .category-menu strong {
    font-size: 11px !important;
  }
  .category-menu small {
    font-size: 9px !important;
  }
}


/* ── TOPBAR ─────────────────────────────────────────────────────── */


@media screen and (max-width:900px){
  .topbar { background:#1d1510 !important; }
  .topbar * { color:rgba(255,255,255,.85) !important; }
  .limeira-weather small,.limeira-clock small { color:rgba(255,255,255,.5) !important; }
  .lang-btn { color:rgba(255,255,255,.55) !important; }
  .lang-btn.active { color:#fff !important; background:linear-gradient(135deg,#c4864a,#7a3e18) !important; }
  .theme-toggle { color:rgba(255,255,255,.85) !important; border-color:rgba(255,255,255,.2) !important; }
}

/* ── RELÓGIO VISÍVEL NO CELULAR (sem o label "Horário de Limeira") ── */
@media screen and (max-width:760px){
  .limeira-clock { display:flex !important; }
  .limeira-clock small { display:none !important; }
}

/* ── PRODUTOS: 1 POR LINHA ──────────────────────────────────────── */
@media screen and (max-width:600px){
  .product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .product-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .product-image { height: 260px !important; }
  .product-info { padding: 14px !important; }
  .product-info h3 { font-size: 16px !important; min-height: auto !important; }
  .product-prices strong { font-size: 20px !important; }
  .product-actions { grid-template-columns: 1fr auto !important; gap: 8px !important; }
  .product-actions button { min-height: 42px !important; font-size: 10px !important; border-radius: 10px !important; }
  .discount-pct { font-size: 10px !important; padding: 3px 8px !important; }
}

/* ── MODAL CONTA: TELA CHEIA CENTRALIZADA ───────────────────────── */
@media screen and (max-width:700px){
  #accountModal {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
  }
  #accountModal.active { display: flex !important; }
  .account-modal {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    overflow: visible !important;
    max-height: none !important;
  }
  .account-modal-side {
    width: 100% !important;
    min-height: auto !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .account-side-brand { display: none !important; }
  .account-large-avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; margin: 0 !important; flex-shrink: 0 !important; }
  .account-modal-side h2 { font-size: 16px !important; margin: 0 !important; }
  .account-modal-side p, .account-side-greeting, .account-side-help { display: none !important; }
  .account-side-nav { flex-direction: row !important; gap: 6px !important; margin: 0 0 0 auto !important; }
  .account-side-nav button { min-height: 34px !important; font-size: 10px !important; padding: 0 12px !important; border-radius: 8px !important; }
  .account-side-nav button svg { display: none !important; }
  .account-modal-content {
    width: 100% !important;
    padding: 16px !important;
    max-height: none !important;
    overflow-y: visible !important;
    flex: 1 !important;
  }
  .profile-hero {
    margin: -16px -16px 20px !important;
    padding: 20px 16px 0 !important;
  }
  #accountDisplayNameContent { font-size: 16px !important; }
  .profile-hero-avatar { width: 48px !important; height: 48px !important; font-size: 20px !important; }
  .profile-hero-stats { margin: 0 -16px !important; }
  .profile-quick-actions { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  .pqa-card small, .pqa-arrow { display: none !important; }
  .pqa-card { padding: 12px !important; gap: 10px !important; }
  .pqa-card strong { font-size: 11px !important; }
  .profile-edit-section { padding: 14px !important; }
}