/* assets/css/mobile.css — Mobile-First Navigation & Responsive Rules */

/* =========================================
   BOTTOM MOBILE NAVIGATION BAR (Fixed)
   ========================================= */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  z-index: 1400;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 10.5px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  height: 100%;
  transition: var(--transition);
}

.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  margin-bottom: 3px;
  transition: transform 0.2s ease;
}

.bottom-nav-item.active, .bottom-nav-item:hover {
  color: var(--primary-rose);
}

.bottom-nav-item.active svg {
  transform: translateY(-2px);
  stroke-width: 2.3;
}

.bottom-nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--primary-rose);
  color: #FFF;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* =========================================
   MOBILE HAMBURGER DRAWER
   ========================================= */
.mobile-menu-drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 2500;
}
.mobile-menu-drawer-overlay.active {
  display: block;
}

.mobile-menu-drawer {
  position: fixed;
  top: 0;
  left: -320px;
  width: 290px;
  height: 100%;
  background: #FFF;
  z-index: 2501;
  box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}
.mobile-menu-drawer.active {
  left: 0;
}

.mobile-drawer-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-cream);
}
.mobile-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dark);
}

.mobile-nav-links {
  padding: 16px 0;
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  border-bottom: 1px solid #F6F3F0;
}
.mobile-nav-link:hover {
  background: var(--primary-pink-light);
  color: var(--primary-rose);
}
.mobile-nav-link.highlight {
  color: var(--primary-rose);
}

/* =========================================
   STICKY MOBILE BUY BAR (Product Page)
   ========================================= */
.sticky-mobile-buy-bar {
  display: none;
  position: fixed;
  bottom: 64px;
  left: 0;
  width: 100%;
  background: #FFF;
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1390;
  align-items: center;
  gap: 10px;
}
.sticky-mobile-buy-bar .price-info {
  flex: 1;
}
.sticky-mobile-buy-bar .price-info .p-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.sticky-mobile-buy-bar .price-info .p-orig {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.sticky-mobile-buy-bar .btn-sticky-buy {
  background: #1A1A1A;
  color: #FFF;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* =========================================
   RESPONSIVE BREAKPOINTS (TABLET: <= 1024px)
   ========================================= */
@media (max-width: 1024px) {
  /* 3 Products per row on Tablet */
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .category-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-title {
    font-size: 38px !important;
  }

  /* Storefront Core Layouts on Tablet */
  .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .cart-page-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .catalog-layout {
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
  }
  .product-detail-layout {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .auth-layout {
    grid-template-columns: 1fr !important;
    max-width: 520px !important;
  }
  .account-dashboard-layout {
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
  }
  .contact-layout {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .form-grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  .form-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-4col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .grid-sidebar-main, .grid-main-sidebar {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================
   RESPONSIVE BREAKPOINTS (MOBILE: <= 768px)
   ========================================= */
@media (max-width: 768px) {
  body {
    padding-bottom: 74px !important; /* Safety clearance for mobile bottom bar */
  }
  .mobile-bottom-nav {
    display: grid !important;
  }
  .main-nav {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: flex !important;
  }
  .header-actions .action-icon-btn.hide-mobile {
    display: none !important;
  }
  .site-header {
    height: 64px !important;
  }
  .header-inner {
    height: 64px !important;
    gap: 8px !important;
  }
  .site-logo {
    gap: 8px !important;
    max-width: calc(100vw - 135px) !important;
  }
  .site-logo-img {
    height: 38px !important;
    max-width: 175px !important;
    object-fit: contain !important;
  }
  .header-brand-emblem {
    height: 38px !important;
    width: 38px !important;
    object-fit: contain !important;
  }
  .site-logo .brand-name {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }
  .site-logo .brand-subtitle {
    font-size: 8px !important;
    letter-spacing: 1.2px !important;
  }
  .hero-section {
    min-height: 420px !important;
  }
  .hero-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }
  .hero-subtitle {
    font-size: 13.5px !important;
    margin-bottom: 18px !important;
  }
  .btn-primary, .btn-secondary {
    padding: 12px 20px !important;
    font-size: 12.5px !important;
  }
  
  /* Prevent iOS zoom on inputs */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* 2 Products per row on Mobile */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-card {
    border-radius: var(--radius-sm) !important;
  }
  .product-info {
    padding: 10px !important;
  }
  .product-name {
    font-size: 12.5px !important;
    height: 34px !important;
    line-height: 1.3 !important;
  }
  .discount-price {
    font-size: 14.5px !important;
  }
  .product-card-actions {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .btn-card-cart, .btn-card-buy {
    font-size: 11px !important;
    padding: 7px 4px !important;
  }
  
  /* 3 Categories per row on Mobile */
  .category-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .category-name {
    font-size: 11px !important;
  }
  .category-card-body {
    padding: 8px 4px !important;
  }
  
  /* Storefront Core Layouts Collapse to 1 Column */
  .checkout-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .cart-page-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .catalog-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .product-detail-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 40px !important;
  }
  .auth-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    max-width: 100% !important;
  }
  .account-dashboard-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  /* Universal Responsive Form Grids */
  .form-grid-2,
  .form-grid-3,
  .form-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .grid-2col,
  .grid-3col,
  .grid-4col,
  .grid-sidebar-main,
  .grid-main-sidebar {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Order Tracking Stepper (Wrap 3x2 on Mobile) */
  .track-stepper-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    row-gap: 24px !important;
  }

  /* Stories & Video */
  .stories-reel-wrapper {
    flex-direction: column !important;
    padding: 20px 14px !important;
  }
  .reel-video-container {
    width: 220px !important;
    height: 360px !important;
  }
  .stories-content-side {
    text-align: center !important;
  }
  
  /* Flash Sale Banner */
  .flash-sale-card {
    min-height: 440px !important;
  }
  .flash-sale-content {
    padding: 24px 16px !important;
  }
  .flash-sale-title {
    font-size: 26px !important;
  }
  
  /* Reviews */
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  .whatsapp-floating-btn {
    bottom: 76px !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .whatsapp-floating-btn svg {
    width: 26px !important;
    height: 26px !important;
  }
}

/* =========================================
   EXTRA SMALL MOBILE (<= 480px)
   ========================================= */
@media (max-width: 480px) {
  .site-header {
    height: 58px !important;
  }
  .header-inner {
    height: 58px !important;
    gap: 6px !important;
  }
  .site-logo {
    gap: 6px !important;
    max-width: calc(100vw - 120px) !important;
  }
  .site-logo-img {
    height: 32px !important;
    max-width: 145px !important;
  }
  .header-brand-emblem {
    height: 32px !important;
    width: 32px !important;
  }
  .site-logo .brand-name {
    font-size: 14px !important;
    letter-spacing: 0.6px !important;
  }
  .site-logo .brand-subtitle {
    display: none !important;
  }
  .product-grid {
    gap: 8px !important;
  }
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .track-stepper-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 20px !important;
  }
  .payment-badges {
    justify-content: center !important;
  }
  .auth-card-unified {
    padding: 24px 18px !important;
  }
  .auth-tab-btn {
    padding: 9px 8px !important;
    font-size: 11.5px !important;
  }
  .footer-bottom {
    text-align: center !important;
    justify-content: center !important;
  }
}