/* ============================================
   MOBILE RESPONSIVE - متجر العوفي
   Full mobile compatibility for all pages
   ============================================ */

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
table { width: 100%; }

/* ===== HEADER ===== */
@media (max-width: 768px) {
  .header-inner {
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
  .logo img { height: 36px !important; }

  /* ===== NEWS TICKER SPEED ===== */
  .promo-bar .marquee-wrap {
    animation-duration: 10s !important;
  }

  /* ===== MOBILE STORE NAME BAR ===== */
  .mobile-store-name {
    background: linear-gradient(135deg, var(--primary, #7c3aed) 0%, #9f57f5 100%);
    padding: 8px 16px;
    text-align: center;
    animation: storeBarEntrance 0.7s ease-out both;
  }

  .mobile-store-name-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .mobile-store-title {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #fff 0%, #f9e4ff 40%, #fbbf24 60%, #f9e4ff 80%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: storeNameShimmer 3s linear infinite;
  }

  .mobile-store-icon {
    font-size: 16px;
    display: inline-block;
  }

  @keyframes storeBarEntrance {
    0%   { opacity: 0; transform: translateY(-100%); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes storeNameShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
  }

  @keyframes iconSpin {
    0%, 90%, 100% { transform: rotate(0deg) scale(1); }
    95%            { transform: rotate(20deg) scale(1.2); }
  }

  /* ===== MOBILE LOGO NAME ANIMATION ===== */
  .logo span {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    background: linear-gradient(90deg,
      var(--primary, #7c3aed) 0%,
      #a855f7 30%,
      #f59e0b 50%,
      #a855f7 70%,
      var(--primary, #7c3aed) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoShimmer 3s linear infinite, logoEntrance 0.6s ease-out both;
  }

  .logo-icon {
    animation: logoIconPulse 2.5s ease-in-out infinite, logoEntrance 0.4s ease-out both;
  }

  @keyframes logoShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
  }

  @keyframes logoEntrance {
    0%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes logoIconPulse {
    0%, 100% { box-shadow: 0 4px 12px var(--primary-glow, rgba(124,58,237,0.4)); }
    50%       { box-shadow: 0 4px 20px rgba(168, 85, 247, 0.7), 0 0 0 4px rgba(168,85,247,0.15); }
  }
  .main-nav { display: none !important; }
  .search-bar { flex: 1 !important; min-width: 0 !important; }
  .search-bar input {
    font-size: 14px !important;
    padding: 8px 12px !important;
    height: 38px !important;
  }
  /* Only show dark toggle in header on mobile — hide wishlist/cart/account (they're in bottom nav) */
  .header-icons { gap: 4px !important; }
  .header-icons a.icon-btn { display: none !important; }
  .header-icons button.icon-btn:not(.dark-toggle) { display: none !important; }
  .icon-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
  .header-sticky { top: 0 !important; }
}

/* ===== BOTTOM NAV ANIMATIONS ===== */
@keyframes navPop {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-8px) scale(1.18); }
  70%  { transform: translateY(-4px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes navBadgePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.25); }
}

/* ===== BOTTOM NAV ===== */
@media (max-width: 768px) {
  .bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    z-index: 1000 !important;
    padding: 6px 10px 8px !important;
    box-shadow: 0 -4px 20px rgba(37,99,235,0.10) !important;
  }
  /* The inner wrapper is the actual flex container */
  .bottom-nav-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .bottom-nav-item {
    flex: 1 !important;
    max-width: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    gap: 3px !important;
    color: #6b7280 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    padding: 4px 2px !important;
    transition: color 0.2s ease !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  .bottom-nav-item i {
    font-size: 22px !important;
    transition: transform 0.2s ease !important;
    display: block !important;
  }
  /* Tap animation */
  .bottom-nav-item:active i {
    animation: navPop 0.35s ease forwards !important;
  }
  /* Active state */
  .bottom-nav-item.active {
    color: #2563eb !important;
  }
  .bottom-nav-item.active i {
    color: #2563eb !important;
  }
  /* Active dot indicator */
  .bottom-nav-item.active::after {
    content: '' !important;
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    background: #2563eb !important;
    border-radius: 50% !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* Cart badge pulse */
  .bottom-nav-item .badge,
  .bottom-nav-item .cart-nav-badge {
    animation: navBadgePulse 1.8s ease-in-out infinite !important;
  }
  /* Middle cart button (3rd item) raised blue style */
  .bottom-nav-inner > *:nth-child(3) {
    background: #2563eb !important;
    color: #fff !important;
    border-radius: 16px !important;
    padding: 8px 6px !important;
    margin-top: -18px !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.40) !important;
    max-width: 64px !important;
  }
  .bottom-nav-inner > *:nth-child(3) i {
    color: #fff !important;
    font-size: 24px !important;
  }
  .bottom-nav-inner > *:nth-child(3)::after {
    display: none !important;
  }
  body { padding-bottom: 70px !important; }
  .float-btns { bottom: 80px !important; }
}

/* ===== HERO SLIDER ===== */
@media (max-width: 768px) {
  .hero-slider { margin: 0 8px 12px !important; border-radius: 12px !important; }
  .slide-img, .slide-placeholder { height: 200px !important; border-radius: 12px !important; }
  .slide-content { padding: 16px !important; }
  .slide-title { font-size: 20px !important; line-height: 1.3 !important; }
  .slide-subtitle { font-size: 13px !important; }
  .slide-btn { padding: 8px 16px !important; font-size: 13px !important; }
}

/* ===== CATEGORIES GRID ===== */
@media (max-width: 768px) {
  .cats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .cat-card { padding: 12px 8px !important; }
  .cat-icon { font-size: 28px !important; }
  .cat-name { font-size: 12px !important; }
}
@media (max-width: 400px) {
  .cats-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ===== PRODUCTS GRID ===== */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 8px !important;
  }
  .product-card { border-radius: 12px !important; }
  .product-img-wrap { height: 160px !important; }
  .product-img-wrap img { height: 160px !important; object-fit: cover !important; }
  .product-body { padding: 10px !important; }
  .product-name { font-size: 13px !important; line-height: 1.3 !important; margin-bottom: 6px !important; }
  .product-price { font-size: 14px !important; }
  .product-footer {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .product-footer .btn-cart,
  .product-footer .btn-buy-now {
    width: 100% !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    justify-content: center !important;
  }
  .badge-new, .badge-hot, .badge-sale { font-size: 10px !important; padding: 2px 6px !important; }
}

/* ===== TRUST BAR ===== */
@media (max-width: 768px) {
  .trust-bar {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .trust-item { padding: 10px 8px !important; }
  .trust-icon { font-size: 20px !important; }
  .trust-title { font-size: 12px !important; }
  .trust-sub { font-size: 11px !important; }
}

/* ===== SECTION TITLES ===== */
@media (max-width: 768px) {
  .section-title { font-size: 18px !important; }
  .section-header { margin-bottom: 16px !important; }
  .container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ===== PRODUCT PAGE ===== */
@media (max-width: 768px) {
  .col-md-5, .col-md-7 { width: 100% !important; }
  .row.g-4 { --bs-gutter-x: 12px !important; }
  .gallery-main-img {
    height: 280px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  .gallery-thumbs { gap: 8px !important; margin-top: 10px !important; }
  .gallery-thumb {
    width: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
  }
  .product-detail-title { font-size: 18px !important; }
  .product-detail-price { font-size: 22px !important; }
  .size-options { flex-wrap: wrap !important; gap: 8px !important; }
  .size-btn { padding: 8px 14px !important; font-size: 14px !important; }
  .color-options { flex-wrap: wrap !important; gap: 8px !important; }
  .add-to-cart-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }
  .buy-now-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }
  .product-tabs .nav-tabs { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .product-tabs .nav-link { white-space: nowrap !important; font-size: 13px !important; }
}

/* ===== CART PAGE ===== */
@media (max-width: 768px) {
  .col-md-8, .col-md-4 { width: 100% !important; }
  .cart-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .cart-item img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  .cart-item .flex-grow-1 { min-width: 0 !important; }
  .input-group { width: 110px !important; }
  .cart-summary { margin-top: 16px !important; }
  .cart-total { font-size: 18px !important; }
}

/* ===== CHECKOUT PAGE ===== */
@media (max-width: 768px) {
  .checkout-form { padding: 16px !important; }
  .checkout-form .row { --bs-gutter-x: 8px !important; }
  .checkout-form .col-md-6 { width: 100% !important; }
  .payment-methods { flex-direction: column !important; gap: 8px !important; }
  .payment-method-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
  .shipping-zone { font-size: 13px !important; }
  .place-order-btn {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
  }
}

/* ===== ACCOUNT PAGE ===== */
@media (max-width: 768px) {
  .col-md-4 { width: 100% !important; }
  .loyalty-card { padding: 16px !important; }
  .account-menu { display: flex !important; overflow-x: auto !important; gap: 8px !important; padding-bottom: 8px !important; }
  .account-menu a { white-space: nowrap !important; padding: 8px 14px !important; font-size: 13px !important; }
  .order-row { flex-direction: column !important; gap: 8px !important; }
}

/* ===== FLASH DEALS PAGE ===== */
@media (max-width: 768px) {
  .deals-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .deal-timer { font-size: 12px !important; }
  .deal-timer span { padding: 4px 6px !important; font-size: 14px !important; }
}

/* ===== FOOTER ===== */
@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 16px !important;
  }
  .footer-logo { margin-bottom: 12px !important; }
  .footer-links { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .footer-bottom { font-size: 12px !important; padding: 12px !important; text-align: center !important; }
  .footer-social { justify-content: center !important; }
}

/* ===== FORMS ===== */
@media (max-width: 768px) {
  .form-control, .form-select {
    font-size: 16px !important; /* prevents zoom on iOS */
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }
  .btn-lg { padding: 12px 20px !important; font-size: 15px !important; }
  .btn { border-radius: 10px !important; }
  label { font-size: 13px !important; }
}

/* ===== TABLES ===== */
@media (max-width: 768px) {
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .table { min-width: 500px !important; font-size: 13px !important; }
  .table td, .table th { padding: 8px !important; white-space: nowrap !important; }
}

/* ===== MODALS ===== */
@media (max-width: 768px) {
  .modal-dialog { margin: 8px !important; max-width: calc(100% - 16px) !important; }
  .modal-content { border-radius: 16px !important; }
  .modal-header { padding: 14px 16px !important; }
  .modal-body { padding: 16px !important; }
  .modal-footer { padding: 12px 16px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .modal-footer .btn { flex: 1 !important; min-width: 120px !important; }
}

/* ===== CART SIDEBAR ===== */
@media (max-width: 768px) {
  .cart-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== POPUP / BANNERS ===== */
@media (max-width: 768px) {
  .popup-banner {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin: 0 16px !important;
    padding: 20px 16px !important;
  }
  .popup-title { font-size: 20px !important; }
  .popup-code { font-size: 22px !important; }
}

/* ===== PROMO SECTIONS ===== */
@media (max-width: 768px) {
  .promo-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .promo-card { border-radius: 12px !important; padding: 20px !important; }
  .promo-title { font-size: 18px !important; }
}

/* ===== SEARCH RESULTS ===== */
@media (max-width: 768px) {
  .search-dropdown {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 0 12px 12px !important;
  }
  .search-result-item { padding: 10px 12px !important; font-size: 13px !important; }
}

/* ===== BREADCRUMB ===== */
@media (max-width: 768px) {
  .breadcrumb { font-size: 12px !important; flex-wrap: wrap !important; }
  .breadcrumb-item + .breadcrumb-item::before { padding: 0 4px !important; }
}

/* ===== CONTACT PAGE ===== */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .contact-map { height: 250px !important; }
}

/* ===== LOGIN / REGISTER ===== */
@media (max-width: 768px) {
  .auth-card {
    margin: 16px !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .auth-title { font-size: 22px !important; }
}

/* ===== FLOATING BUTTONS ===== */
@media (max-width: 768px) {
  .float-btns {
    right: 12px !important;
    bottom: 75px !important;
    gap: 8px !important;
  }
  .float-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
  }
}

/* ===== COMPARE PAGE ===== */
@media (max-width: 768px) {
  .compare-table { font-size: 12px !important; }
  .compare-table th, .compare-table td { padding: 8px 6px !important; }
}

/* ===== ORDER TRACKING ===== */
@media (max-width: 768px) {
  .tracking-steps { flex-direction: column !important; align-items: flex-start !important; }
  .tracking-step { width: 100% !important; flex-direction: row !important; gap: 12px !important; }
  .tracking-line { width: 2px !important; height: 30px !important; margin: 0 0 0 20px !important; }
}

/* ===== WISHLIST PAGE ===== */
@media (max-width: 768px) {
  .wishlist-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

/* ===== FAQs PAGE ===== */
@media (max-width: 768px) {
  .accordion-button { font-size: 14px !important; padding: 12px 16px !important; }
  .accordion-body { font-size: 13px !important; padding: 12px 16px !important; }
}

/* ===== GENERAL FIXES ===== */
@media (max-width: 768px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
  h4 { font-size: 15px !important; }
  .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .mb-4 { margin-bottom: 1rem !important; }
  .card { border-radius: 12px !important; }
  .card-body { padding: 16px !important; }
  .alert { font-size: 14px !important; padding: 12px 14px !important; }
  .badge { font-size: 11px !important; }

  /* Fix overflow */
  .row { overflow-x: hidden !important; }
  section { overflow-x: hidden !important; }
}

/* ===== TOUCH TARGETS ===== */
@media (max-width: 768px) {
  a, button, .btn, input[type="submit"], input[type="button"] {
    min-height: 40px;
  }
  .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== DARK MODE MOBILE ===== */
/* Bottom nav — outside media query for max reliability */
html[data-theme="dark"] .bottom-nav {
  background: #1e1e2e !important;
  border-top-color: #333 !important;
}
html[data-theme="dark"] .bottom-nav-item { color: #aaa !important; }
html[data-theme="dark"] .bottom-nav-item.active { color: #60a5fa !important; }

/* ===================================================
   MOBILE ADDITIONS v2 - Hamburger, Filter, More Pages
   =================================================== */

/* ===== HAMBURGER BUTTON ===== */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.2s;
  order: -1;
}
@media (max-width: 768px) {
  .hamburger-btn { display: flex !important; }
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text, #1f2937);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== MOBILE MENU OVERLAY ===== */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open {
  display: block;
  opacity: 1;
}

/* ===== MOBILE MENU DRAWER ===== */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100%;
  background: #fff;
  z-index: 1200;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
}
.mobile-menu-drawer.open { right: 0; }
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #1a56db, #2563eb);
  color: #fff;
}
.mobile-menu-title { font-size: 16px; font-weight: 700; }
.mobile-menu-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  flex: 1;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.2s, color 0.2s;
}
.mobile-menu-link:hover,
.mobile-menu-link:active {
  background: #eff6ff;
  color: #2563eb;
}
.mobile-menu-link i {
  width: 20px;
  text-align: center;
  color: #2563eb;
  font-size: 15px;
}

/* Dark mode drawer */
html[data-theme="dark"] .mobile-menu-drawer { background: #1e1e2e; }
html[data-theme="dark"] .mobile-menu-link { color: #e5e7eb; border-bottom-color: #333; }
html[data-theme="dark"] .mobile-menu-link:hover { background: #2d2d3f; color: #60a5fa; }
html[data-theme="dark"] .hamburger-btn span { background: #e5e7eb; }

/* ===== PRODUCTS FILTER TOGGLE ===== */
@media (max-width: 768px) {
  .mobile-filter-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    cursor: pointer;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .mobile-filter-toggle i { color: #2563eb; }
  .filter-toggle-arrow { font-size: 11px; color: #6b7280; }

  /* Filter sidebar hidden by default on mobile */
  #filterSidebar {
    display: none !important;
  }
  #filterSidebar.filter-open {
    display: block !important;
    animation: catFadeUp 0.3s ease forwards;
  }
}
@media (min-width: 769px) {
  .mobile-filter-toggle { display: none !important; }
  #filterSidebar { display: block !important; }
}

/* ===== LOYALTY PAGE ===== */
@media (max-width: 768px) {
  .loyalty-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }
  .points-big { font-size: 42px !important; }
  .loyalty-history-item { padding: 12px !important; }
}

/* ===== INVOICE PAGE ===== */
@media (max-width: 768px) {
  .invoice-header { flex-direction: column !important; gap: 12px !important; }
  .invoice-table { font-size: 12px !important; }
  .invoice-table td, .invoice-table th { padding: 6px 8px !important; }
  .invoice-total { font-size: 18px !important; }
  .col-6 { width: 100% !important; }
  .print-btn { width: 100% !important; margin-top: 12px !important; }
}

/* ===== BRANDS PAGE ===== */
@media (max-width: 768px) {
  .brand-card { padding: 16px 10px !important; }
  .brand-logo { height: 50px !important; object-fit: contain !important; }
  .brand-name { font-size: 12px !important; }
}

/* ===== GIFT CARDS PAGE ===== */
@media (max-width: 768px) {
  .gift-card-item { border-radius: 12px !important; padding: 14px !important; }
  .gift-card-value { font-size: 22px !important; }
}

/* ===== NEW ARRIVALS / BESTSELLERS / FLASH DEALS pages ===== */
@media (max-width: 768px) {
  .page-hero { padding: 24px 16px !important; }
  .page-hero h1 { font-size: 22px !important; }
}

/* ===== CATEGORIES FULL PAGE ===== */
@media (max-width: 768px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .category-page-card { padding: 16px 10px !important; }
}

/* ===== REGISTER PAGE ===== */
@media (max-width: 768px) {
  .register-card, .login-card {
    margin: 12px !important;
    padding: 20px 16px !important;
  }
  .register-title { font-size: 20px !important; }
  .social-login-btns { flex-direction: column !important; }
  .social-login-btns .btn { width: 100% !important; }
}

/* ===== TRACK ORDER PAGE ===== */
@media (max-width: 768px) {
  .track-form { padding: 16px !important; }
  .track-input { font-size: 16px !important; /* prevent iOS zoom */ }
}

/* ===== PRIVACY / TERMS / SHIPPING PAGES ===== */
@media (max-width: 768px) {
  .policy-content { padding: 16px !important; font-size: 14px !important; line-height: 1.7 !important; }
  .policy-content h2 { font-size: 18px !important; }
  .policy-content h3 { font-size: 15px !important; }
}

/* ===== COMPARE PAGE ===== */
@media (max-width: 768px) {
  .compare-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .compare-table { min-width: 480px !important; }
}

/* ===== CHATBOT PAGE ===== */
@media (max-width: 768px) {
  .chatbot-container { height: calc(100vh - 130px) !important; border-radius: 0 !important; }
  .chat-input-area { padding: 8px 12px !important; }
  .chat-input { font-size: 16px !important; }
}

/* ===== SEARCH BAR MOBILE ===== */
@media (max-width: 480px) {
  .search-wrap {
    position: relative !important;
    flex: 1 !important;
  }
  .search-wrap input {
    width: 100% !important;
    font-size: 14px !important;
  }
  .search-results {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 0 0 12px 12px !important;
    z-index: 9999 !important;
  }
}

/* ===== PAGINATION MOBILE ===== */
@media (max-width: 768px) {
  .pagination { flex-wrap: wrap !important; gap: 4px !important; justify-content: center !important; }
  .page-link { padding: 6px 10px !important; font-size: 13px !important; min-width: 36px !important; }
}

/* ===== PRODUCT CARD HOVER - DISABLE ON TOUCH ===== */
@media (hover: none) and (pointer: coarse) {
  .product-overlay { display: none !important; }
  .product-img-wrap:hover img { transform: none !important; }
}

/* ===== GENERAL SCROLL FIX ===== */
@media (max-width: 768px) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; max-width: 100vw; }
  * { max-width: 100%; }
  img { height: auto !important; }
}

/* ===== DRAWER DARK MODE TOGGLE ===== */
.drawer-theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  margin: 8px 16px 16px;
  border-radius: 12px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.2);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
}
.drawer-theme-toggle:active {
  background: rgba(124,58,237,0.16);
}
.drawer-theme-toggle .dark-icon {
  font-size: 18px;
  color: var(--primary, #7c3aed);
  width: 20px;
  text-align: center;
  transition: transform 0.4s ease;
}
.drawer-theme-toggle:active .dark-icon {
  transform: rotate(30deg);
}
.drawer-theme-toggle span {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #1a1a2e);
}
/* Toggle switch visuals */
.drawer-theme-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #d1d5db;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}
html[data-theme="dark"] .drawer-theme-switch {
  background: var(--primary, #7c3aed);
}
.drawer-theme-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  right: 3px;
  transition: transform 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
html[data-theme="dark"] .drawer-theme-knob {
  transform: translateX(-20px);
}

/* ===== MOBILE DARK MODE - COMPREHENSIVE ===== */
/* Note: NOT wrapped in media query — dark mode must fire on all screens */

  /* Page background */
  html[data-theme="dark"] body,
  html[data-theme="dark"] main,
  html[data-theme="dark"] .page-wrapper,
  html[data-theme="dark"] .container,
  html[data-theme="dark"] section {
    background: #0f172a !important;
    color: #e5e7eb !important;
  }

  /* Product cards */
  html[data-theme="dark"] .product-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
  }
  html[data-theme="dark"] .product-card .product-name,
  html[data-theme="dark"] .product-card .product-title,
  html[data-theme="dark"] .product-card h3,
  html[data-theme="dark"] .product-card h4 {
    color: #f1f5f9 !important;
  }
  html[data-theme="dark"] .product-card .product-price,
  html[data-theme="dark"] .product-card .price {
    color: #60a5fa !important;
  }
  html[data-theme="dark"] .product-card .product-brand,
  html[data-theme="dark"] .product-card .brand {
    color: #94a3b8 !important;
  }
  html[data-theme="dark"] .product-card .product-img-wrap,
  html[data-theme="dark"] .product-card .img-wrap {
    background: #1e293b !important;
  }

  /* Filter & sidebar */
  html[data-theme="dark"] .filter-section,
  html[data-theme="dark"] .mobile-filter-panel,
  html[data-theme="dark"] .filter-panel,
  html[data-theme="dark"] .filter-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
  }
  html[data-theme="dark"] .filter-section h6,
  html[data-theme="dark"] .filter-section label,
  html[data-theme="dark"] .filter-panel label {
    color: #cbd5e1 !important;
  }

  /* Bootstrap cards */
  html[data-theme="dark"] .card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
  }
  html[data-theme="dark"] .card-header {
    background: #162032 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
  }
  html[data-theme="dark"] .card-body,
  html[data-theme="dark"] .card-footer {
    background: #1e293b !important;
    color: #e5e7eb !important;
  }

  /* Inputs & selects */
  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] .form-control,
  html[data-theme="dark"] .form-select {
    background: #162032 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
  }

  /* Banners & sections */
  html[data-theme="dark"] .hero-section,
  html[data-theme="dark"] .section-header,
  html[data-theme="dark"] .page-header,
  html[data-theme="dark"] .page-title-bar {
    background: #1e293b !important;
    color: #f1f5f9 !important;
  }

  /* Tables */
  html[data-theme="dark"] table,
  html[data-theme="dark"] .table {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
  }
  html[data-theme="dark"] .table th,
  html[data-theme="dark"] .table td {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #2d3748 !important;
  }
  html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #162032 !important;
    color: #e5e7eb !important;
  }

  /* Cart & checkout */
  html[data-theme="dark"] .cart-item,
  html[data-theme="dark"] .cart-summary,
  html[data-theme="dark"] .order-summary {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
  }

  /* Breadcrumb */
  html[data-theme="dark"] .breadcrumb,
  html[data-theme="dark"] .breadcrumb-item,
  html[data-theme="dark"] .breadcrumb-item a {
    background: transparent !important;
    color: #94a3b8 !important;
  }
  html[data-theme="dark"] .breadcrumb-item.active {
    color: #60a5fa !important;
  }

  /* Badges & tags */
  html[data-theme="dark"] .badge-new,
  html[data-theme="dark"] .product-badge {
    background: #1e40af !important;
    color: #bfdbfe !important;
  }

  /* Headings & text */
  html[data-theme="dark"] h1, html[data-theme="dark"] h2,
  html[data-theme="dark"] h3, html[data-theme="dark"] h4,
  html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: #f1f5f9 !important;
  }
  html[data-theme="dark"] p, html[data-theme="dark"] span,
  html[data-theme="dark"] li, html[data-theme="dark"] td {
    color: #cbd5e1 !important;
  }
  html[data-theme="dark"] a {
    color: #60a5fa !important;
  }

  /* Section backgrounds */
  html[data-theme="dark"] .categories-section,
  html[data-theme="dark"] .featured-section,
  html[data-theme="dark"] .bestsellers-section,
  html[data-theme="dark"] .new-arrivals-section {
    background: #0f172a !important;
  }

  /* Category cards */
  html[data-theme="dark"] .category-card {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
  }
  html[data-theme="dark"] .category-card span,
  html[data-theme="dark"] .category-name {
    color: #e5e7eb !important;
  }

  /* Empty/placeholder boxes */
  html[data-theme="dark"] .no-image-placeholder,
  html[data-theme="dark"] .product-img-placeholder {
    background: linear-gradient(135deg, #1e293b, #2d1b4e) !important;
  }

  /* Alerts */
  html[data-theme="dark"] .alert-info {
    background: #1e3a5f !important;
    color: #bfdbfe !important;
    border-color: #1e40af !important;
  }
  html[data-theme="dark"] .alert-success {
    background: #14532d !important;
    color: #bbf7d0 !important;
  }
  html[data-theme="dark"] .alert-warning {
    background: #78350f !important;
    color: #fde68a !important;
  }