/* ============================================================
   CHITECH GADGETS — mobile.css
   Drop this file in your chitechgadgets folder and add:
     <link rel="stylesheet" href="mobile.css"/>
   to EVERY page, just before </head>
   ============================================================ */

/* ─── GLOBAL RESETS FOR MOBILE ─────────────────────────── */
@media (max-width: 768px) {
  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  img { max-width: 100%; height: auto; }

  /* ─── NAV ──────────────────────────────────────────────── */
  nav {
    padding: 0 1rem !important;
    height: auto !important;
    flex-wrap: wrap;
    gap: 0;
    position: relative;
  }

  /* Logo stays on the left */
  .logo {
    font-size: 1.1rem !important;
    padding: 0.75rem 0;
    z-index: 201;
  }

  /* Hide desktop nav links; show hamburger instead */
  .nav-links {
    display: none !important;
    flex-direction: column;
    width: 100%;
    background: rgba(7, 8, 15, 0.98);
    border-top: 1px solid var(--border, #1e2030);
    padding: 0.5rem 0 1rem;
    gap: 0 !important;
    order: 3;
  }
  .nav-links.open { display: flex !important; }
  .nav-links li { list-style: none; width: 100%; }
  .nav-links li a {
    display: block;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    border-radius: 0;
    border-bottom: 1px solid var(--border, #1e2030);
  }

  /* Hamburger button */
  .nav-hamburger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 201;
  }
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white, #fff);
    border-radius: 2px;
    transition: all 0.25s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  /* Right side: compact */
  .nav-right {
    display: flex;
    align-items: center;
    gap: 6px !important;
    flex-shrink: 0;
  }
  .nav-search { display: none !important; }         /* hide search bar in nav */
  #nav-signin { font-size: 0.78rem !important; padding: 0.35rem 0.7rem !important; }
  .nav-user-btn { padding: 0.35rem 0.6rem !important; }
  #nav-user-name { display: none; }                 /* show only avatar on mobile */
  .nav-chevron { display: none; }
  .cart-nav { font-size: 0.78rem !important; padding: 0.35rem 0.7rem !important; }

  /* User dropdown full-width on mobile */
  .user-dropdown {
    right: 0 !important;
    left: auto !important;
    min-width: 200px !important;
  }

  /* ─── HERO SECTION ─────────────────────────────────────── */
  .hero {
    padding: 2rem 1rem !important;
    flex-direction: column !important;
    text-align: center;
  }
  .hero-content { max-width: 100% !important; }
  .hero h1, .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    line-height: 1.25 !important;
  }
  .hero p, .hero-sub { font-size: 0.9rem !important; }
  .hero-btns, .hero-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: center;
  }
  .hero-btns a, .hero-btns button,
  .hero-actions a, .hero-actions button {
    width: 100%;
    max-width: 280px;
    text-align: center;
    justify-content: center;
  }
  .hero-card, .hero-visual {
    display: none !important; /* hide large hero card on mobile */
  }

  /* ─── STATS BAR ─────────────────────────────────────────── */
  .stats-bar, .stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    padding: 1rem !important;
  }
  .stat-item { text-align: center; }

  /* ─── SECTION TITLES ────────────────────────────────────── */
  .section-title, h2 {
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
  }

  /* ─── CATEGORY FILTER / FILTER TABS ────────────────────── */
  .filter-tabs, .cat-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.4rem !important;
    padding: 0 1rem 0.5rem !important;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar,
  .cat-tabs::-webkit-scrollbar { display: none; }
  .filter-tab, .cat-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    font-size: 0.78rem !important;
    padding: 0.4rem 0.9rem !important;
    white-space: nowrap;
  }

  /* ─── PRODUCT GRID (index + shop) ──────────────────────── */
  .products-grid, .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 0 0.75rem !important;
  }
  .product-card {
    padding: 0.85rem !important;
  }
  .product-card .product-emoji,
  .product-card .prod-img { font-size: 2.2rem !important; }
  .product-card h3, .prod-name {
    font-size: 0.82rem !important;
    line-height: 1.3;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card .product-price,
  .prod-price { font-size: 0.9rem !important; }
  .product-card .add-btn, .add-to-cart-btn {
    font-size: 0.78rem !important;
    padding: 0.5rem !important;
  }

  /* ─── SHOP PAGE LAYOUT ──────────────────────────────────── */
  .shop-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }

  /* Sidebar: collapsible on mobile */
  .sidebar, .filters-sidebar {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    position: static !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #1e2030) !important;
    padding: 0 !important;
    display: none;                         /* hidden by default; toggle shows */
  }
  .sidebar.open, .filters-sidebar.open { display: block !important; }

  /* "Filters" toggle button — shown only on mobile */
  .mobile-filter-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface, #0f1120);
    border: 1px solid var(--border, #1e2030);
    color: var(--white, #fff);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0.75rem 0.75rem 0;
  }

  .shop-main { padding: 0.75rem !important; }
  .shop-topbar {
    flex-direction: column !important;
    gap: 0.6rem !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin-bottom: 0.75rem !important;
  }
  .sort-select, .view-toggle { font-size: 0.82rem !important; }

  /* Active filters row — wrap */
  .active-filters {
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }
  .filter-tag { font-size: 0.72rem !important; padding: 0.25rem 0.6rem !important; }

  /* ─── BRANDS TICKER ─────────────────────────────────────── */
  .brands { padding: 0.75rem 0 !important; }
  .brand-pill { font-size: 0.7rem !important; }

  /* ─── FLASH SALE / PROMO BANNER ─────────────────────────── */
  .flash-banner, .promo-banner {
    padding: 1.5rem 1rem !important;
    text-align: center;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .countdown {
    justify-content: center !important;
    font-size: 0.85rem !important;
  }
  .countdown-block { min-width: 44px !important; padding: 0.4rem !important; }
  .countdown-num { font-size: 1.4rem !important; }

  /* ─── WHY CHITECH / FEATURES GRID ───────────────────────── */
  .features-grid, .why-grid, .trust-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
    padding: 0 0.75rem !important;
  }
  .feature-card, .trust-card { padding: 1rem !important; }

  /* ─── NEWSLETTER ─────────────────────────────────────────── */
  .newsletter { padding: 2rem 1rem !important; }
  .newsletter h2 { font-size: 1.3rem !important; }
  .newsletter-form {
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  .newsletter-form input, .newsletter-form button {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
  }

  /* ─── FOOTER ─────────────────────────────────────────────── */
  footer { padding: 2rem 1rem !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .footer-brand { grid-column: 1 / -1; }
  footer h4 { font-size: 0.85rem !important; }
  footer li, footer a { font-size: 0.8rem !important; }
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center;
    font-size: 0.75rem !important;
  }

  /* ─── CART PAGE ──────────────────────────────────────────── */
  .cart-layout {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  .cart-items { width: 100% !important; }
  .cart-summary {
    width: 100% !important;
    position: static !important;
  }
  .cart-item {
    flex-direction: column !important;
    gap: 0.6rem !important;
    padding: 1rem !important;
  }
  .cart-item-img { font-size: 2.5rem !important; }
  .cart-item-details { width: 100% !important; }
  .qty-controls { justify-content: flex-start !important; }
  .promo-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .promo-row input, .promo-row button { width: 100% !important; }
  .reco-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }

  /* ─── CHECKOUT PAGE ──────────────────────────────────────── */
  .checkout-layout {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  .checkout-form-col, .checkout-summary-col {
    width: 100% !important;
  }
  .form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .delivery-options {
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  .bank-card { padding: 1rem !important; }
  .place-btn { font-size: 0.9rem !important; padding: 0.9rem !important; }

  /* ─── SIGN IN PAGE ───────────────────────────────────────── */
  .auth-container, .signin-container {
    flex-direction: column !important;
    min-height: unset !important;
  }
  .auth-visual, .signin-visual {
    display: none !important;   /* hide decorative side panel */
  }
  .auth-card, .signin-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1rem !important;
    border-radius: 0 !important;
    min-height: 100dvh !important;
  }
  .auth-tabs { gap: 0.5rem !important; }
  .auth-tab { font-size: 0.85rem !important; padding: 0.5rem 1rem !important; }

  /* ─── PROFILE PAGE ───────────────────────────────────────── */
  .profile-layout {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 1rem !important;
  }
  .profile-sidebar {
    width: 100% !important;
    position: static !important;
  }
  .profile-sidebar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    padding: 0.75rem !important;
  }
  .profile-nav-item {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    padding: 0.5rem !important;
  }
  .profile-main { width: 100% !important; }
  .profile-section { padding: 1.25rem 1rem !important; }
  .profile-info-grid {
    grid-template-columns: 1fr !important;
  }
  .order-card {
    padding: 1rem !important;
  }
  .order-card-header {
    flex-direction: column !important;
    gap: 0.4rem !important;
    align-items: flex-start !important;
  }
  .order-items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ─── CONTACT PAGE ───────────────────────────────────────── */
  .contact-layout {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 1.5rem !important;
  }
  .contact-info, .contact-form {
    width: 100% !important;
  }
  .contact-info-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ─── UPLOAD RECEIPT PAGE ────────────────────────────────── */
  .receipt-container {
    padding: 1rem !important;
    max-width: 100% !important;
  }
  .upload-zone {
    padding: 1.5rem 1rem !important;
  }

  /* ─── REVIEWS PAGE ───────────────────────────────────────── */
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .rating-summary {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1.25rem 1rem !important;
  }

  /* ─── ABOUT PAGE ─────────────────────────────────────────── */
  .about-hero {
    padding: 2.5rem 1rem !important;
    text-align: center;
  }
  .about-grid, .team-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
  .about-story {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1.5rem 1rem !important;
  }

  /* ─── PAGE HEADERS (contact / shop titles) ───────────────── */
  .page-header {
    padding: 2rem 1rem !important;
  }
  .page-header h1 { font-size: 1.6rem !important; }

  /* ─── GENERIC SECTIONS ────────────────────────────────────── */
  section { padding: 2.5rem 0.75rem !important; }
  .container, .section-inner { padding: 0 0.75rem !important; }
}

/* ─── EXTRA SMALL SCREENS (< 400px) ───────────────────────── */
@media (max-width: 400px) {
  .products-grid, .product-grid {
    grid-template-columns: 1fr !important;
  }
  .features-grid, .why-grid, .trust-grid {
    grid-template-columns: 1fr !important;
  }
  .about-grid, .team-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-info-cards {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .stats-bar, .stats {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─── TABLET (769px – 1024px) ─────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .products-grid, .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .features-grid, .why-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  nav { padding: 0 1.5rem !important; }
  .sidebar, .filters-sidebar { min-width: 220px !important; }

  /* Hide hamburger on tablet+ */
  .nav-hamburger { display: none !important; }
  .nav-links { display: flex !important; flex-direction: row !important; }
}

/* ─── HAMBURGER: always hidden on desktop ─────────────────── */
@media (min-width: 769px) {
  .nav-hamburger { display: none !important; }
  .mobile-filter-toggle { display: none !important; }
  .sidebar, .filters-sidebar { display: block !important; }
}