/**
 * mobile-fix.css — Correções responsivas para o site Aquarium Amazon
 * Inclua APÓS o style.css: <link rel="stylesheet" href="assets/css/mobile-fix.css">
 * 
 * Problemas corrigidos:
 *  1. Header cramped no mobile — search bar oculta no topo, visível no menu
 *  2. Classes do Mobile Menu sem CSS (mobile-menu-top, mobile-menu-close-btn, etc.)
 *  3. section-title com white-space:nowrap causando overflow
 *  4. Hero title letra enorme + letter-spacing excessivo no celular
 *  5. Product card footer apertado em telas < 380px
 *  6. Header padding inadequado entre 481px–767px
 *  7. WhatsApp float não conflita com conteúdo no mobile
 *  8. body overflow-x bloqueado (evita scroll horizontal)
 */

/* ============================================================
   0. Prevent horizontal scroll globally
   ============================================================ */
html, body {
  overflow-x: hidden;
}

/* ============================================================
   1. Header — ocultar search bar no topo em mobile
      (a busca já está duplicada dentro do mobile-menu)
   ============================================================ */
@media (max-width: 767px) {
  .header-search {
    display: none !important;
  }

  /* Ajusta padding do inner para não ficar sufocado */
  .header-top-inner {
    padding: 0.5rem 1rem;
    gap: 0.75rem;
  }

  /* Logo menor em mobile médio (481–767) */
  .header-logo {
    max-width: 160px;
    height: 52px;
  }
  .header-logo img {
    max-height: 52px;
    max-width: 160px;
  }
}

/* Faixa 481–640: já não tem o logo encolhendo, mas padding ainda grande */
@media (max-width: 640px) and (min-width: 481px) {
  .header-top-inner {
    padding: 0.5rem 0.875rem;
    gap: 0.6rem;
  }
}

/* ============================================================
   2. Mobile Menu — classes ausentes no style.css original
   ============================================================ */

/* Cabeçalho do menu (título + botão fechar) */
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.mobile-menu-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--branco);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Botão fechar do menu (classe usada no HTML: mobile-menu-close-btn) */
.mobile-menu-close-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--cinza2);
  background: transparent;
  color: var(--cinza);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s;
}
.mobile-menu-close-btn:hover {
  border-color: var(--verde);
  color: var(--verde);
}

/* Bloco de login no menu mobile */
.mobile-menu-login {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #111;
  border: 1px solid #222;
  cursor: pointer;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s;
}
.mobile-menu-login:hover {
  border-color: var(--verde);
}
.mobile-menu-login svg {
  color: var(--verde);
  flex-shrink: 0;
}
.mobile-menu-login-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.mobile-menu-login-text small {
  font-size: 0.75rem;
  color: var(--cinza);
  font-family: 'Exo 2', sans-serif;
}
.mobile-menu-login-text strong {
  font-size: 0.95rem;
  color: var(--branco);
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
}

/* Título de seção dentro do menu mobile */
.mobile-menu-section-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cinza);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}

/* Botão Atendimento no menu mobile */
.mobile-menu-atendimento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  color: var(--cinza);
  font-family: 'Exo 2', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #1a1a1a;
  transition: all 0.2s;
}
.mobile-menu-atendimento:hover {
  border-color: var(--verde);
  color: var(--verde);
}
.mobile-menu-atendimento svg {
  flex-shrink: 0;
}

/* ============================================================
   3. section-title — remove white-space:nowrap no mobile
   ============================================================ */
@media (max-width: 640px) {
  .section-title {
    white-space: normal;
    font-size: 1.4rem;
    letter-spacing: 2px;
  }
  .section-header {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}

/* ============================================================
   4. Hero slide — título e letra menor no mobile
   ============================================================ */
@media (max-width: 480px) {
  .hero-slide-title {
    font-size: 2rem;
    letter-spacing: 3px;
  }
  .hero-slide-sub {
    font-size: 1.1rem;
  }
  .hero-slide-desc {
    font-size: 0.875rem;
  }
  .hero-slide-content {
    padding: 1.75rem 1.25rem;
  }
  .hero-slide-btn {
    font-size: 0.82rem;
    padding: 0.7rem 1.25rem;
    letter-spacing: 1.5px;
  }
}

/* ============================================================
   5. Product card footer — apertado em telas muito pequenas
   ============================================================ */
@media (max-width: 380px) {
  .product-card-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .product-card-qty {
    width: 100%;
    justify-content: center;
  }
  .product-card-qty .qty-btn {
    flex: 1;
    max-width: 48px;
  }
  .product-card-qty .qty-input {
    flex: 1;
    max-width: 60px;
  }
  .product-card-add-btn {
    width: 100%;
    flex: none;
  }
  .product-card-body {
    padding: 0.75rem;
  }
}

/* ============================================================
   6. Checkout — empilha corretamente no mobile
   ============================================================ */
@media (max-width: 767px) {
  .checkout-layout {
    gap: 1.5rem;
    padding-bottom: 5rem; /* espaço para WhatsApp float */
  }
  .checkout-card {
    padding: 1.25rem 1rem;
  }
}

/* ============================================================
   7. WhatsApp float — ajuste para não cobrir conteúdo
   ============================================================ */
@media (max-width: 767px) {
  .whatsapp-float {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }
  .whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
  /* Espaço no rodapé para o botão flutuante não cobrir conteúdo */
  .footer {
    padding-bottom: calc(2rem + 56px);
  }
}

/* ============================================================
   8. Modal — cabe melhor em telas pequenas
   ============================================================ */
@media (max-width: 480px) {
  .modal-overlay {
    padding: 0.5rem;
    align-items: flex-end; /* sobe do rodapé no celular */
  }
  .modal {
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .modal-body {
    padding: 1.25rem 1rem;
  }
  .modal-header {
    padding: 1rem;
  }
}

/* ============================================================
   9. Cart drawer — ocupa mais espaço em telas pequenas
   ============================================================ */
@media (max-width: 480px) {
  .cart-drawer {
    width: 100vw;
    max-width: 100vw;
    right: -100vw;
  }
}

/* ============================================================
   10. Catalog — sidebar e toolbar no mobile
   ============================================================ */
@media (max-width: 640px) {
  .catalog-toolbar {
    gap: 0.5rem;
  }
  .catalog-sort .form-select {
    min-width: 130px;
    font-size: 0.82rem;
  }
  .catalog-results-count {
    font-size: 0.78rem;
  }
}

/* ============================================================
   11. Produto detalhe — galeria de miniaturas touch-friendly
   ============================================================ */
@media (max-width: 480px) {
  .product-gallery-thumb {
    width: 56px;
    height: 56px;
  }
  .product-info {
    gap: 0.5rem;
  }
}

/* ============================================================
   12. Nav bar horizontal com scroll em mobile (já existe, garante)
   ============================================================ */
@media (max-width: 767px) {
  .header-nav-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .header-nav-inner {
    padding: 0 0.75rem;
  }
  .nav-bar-link {
    padding: 0.6rem 0.875rem;
    font-size: 0.75rem;
  }
}

/* ============================================================
   13. Paginação — botões menores no mobile
   ============================================================ */
@media (max-width: 480px) {
  .pagination {
    gap: 0.25rem;
  }
  .pagination-btn {
    min-width: 34px;
    height: 34px;
    font-size: 0.8rem;
  }
}

/* ============================================================
   14. Footer mobile — espaçamento melhorado
   ============================================================ */
@media (max-width: 640px) {
  .footer {
    padding: 2rem 0 1rem;
  }
  .footer-main {
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .footer-description {
    max-width: 100%;
  }
}