/* ============================================================
   CHITECH GADGETS — theme.css
   Uses html[data-theme="light"] (specificity 0,1,1) to beat
   each page's inline :root block (0,1,0).
   ============================================================ */

/* ── UNIFIED NAV — same across every page ─────────────────────
   These rules sit in theme.css (loaded on all pages before the
   inline <style> block) but use !important to win regardless of
   order, ensuring a pixel-identical header on every page.
   ─────────────────────────────────────────────────────────────*/

/* Nav bar */
nav {
  height: 68px !important;
  padding: 0 2.5rem !important;
  background: rgba(7,8,15,0.95) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Logo */
.logo {
  font-weight: 800 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.03em !important;
  color: var(--white) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
/* New image logo */
.logo-img {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}
/* Hide old emoji icon everywhere */
.logo-icon { display: none !important; }

/* Mobile logo sizing */
@media(max-width:768px){
  .logo-img { width: 34px !important; height: 34px !important; border-radius: 8px !important; }
  .logo { font-size: 1rem !important; gap: 7px !important; }
}

/* Nav user menu — always visible */
.nav-user-menu { display: flex !important; align-items: center; position: relative; }

/* Avatar button — no border/background, clean icon only */
.nav-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--white) !important;
  padding: 0.45rem 0.6rem !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: 'Urbanist', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  transition: all .2s !important;
}
.nav-user-btn:hover { background: var(--surface2) !important; }

/* Avatar circle */
.nav-avatar {
  width: 26px !important;
  height: 26px !important;
  background: var(--blue) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  color: #fff !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

/* Cart badge */
.cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--bg) !important;
}

/* Nav links */
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { color: var(--muted2); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--white); }

/* ── GLOBAL MOBILE NAV NORMALISATION (all pages) ───────────── */
/* Hamburger button — hidden on desktop, shown on mobile */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;z-index:210;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--white,#f0f4ff);border-radius:2px;transition:all .25s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

@media(max-width:768px){
  /* Nav container */
  nav{height:56px !important;padding:0 0.75rem !important}

  /* Show hamburger */
  .hamburger{display:flex !important}

  /* Hide desktop nav links */
  nav .nav-links{display:none !important}
  nav .nav-search{display:none !important}

  /* Mobile nav dropdown */
  nav .nav-links.open{
    display:flex !important;flex-direction:column;
    position:fixed;top:56px;left:0;right:0;
    background:rgba(7,8,15,0.98);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border,#1e2235);
    padding:0.5rem 0 1rem;z-index:205;
  }
  html[data-theme="light"] nav .nav-links.open{background:rgba(255,255,255,0.98) !important}
  nav .nav-links.open li a{
    display:block;padding:0.75rem 1.5rem;font-size:1rem;
    border-bottom:1px solid var(--border,#1e2235);
    color:var(--muted2,#9ca3af);text-decoration:none;
  }

  /* Cart button — compact icon only */
  .cart-nav{
    padding:0 !important;width:40px !important;height:40px !important;
    background:transparent !important;border:none !important;
    font-size:1.2rem !important;display:flex !important;
    align-items:center !important;justify-content:center !important;
    position:relative;
  }
  .cart-text{display:none !important}
  .cart-badge{top:-4px !important;right:-4px !important;width:16px !important;height:16px !important;font-size:8px !important}

  /* Sign In button — compact */
  #nav-signin{font-size:0.78rem !important;padding:0.35rem 0.7rem !important;display:inline-flex !important}

  /* User menu compact */
  .nav-user-btn{padding:0.4rem !important;background:transparent !important;border:none !important;width:40px !important;height:40px !important}
  #nav-user-name,.nav-chevron{display:none !important}
  .nav-avatar{width:28px !important;height:28px !important;font-size:0.7rem !important}
  .user-dropdown{display:none}
  .user-dropdown.open{display:block !important}

  /* Logo */
  .logo{font-size:1rem !important;gap:6px !important}
  .logo-icon{width:24px !important;height:24px !important;font-size:0.8rem !important}

  /* Announce bar */
  .announce{padding:0.3rem 0.8rem !important;font-size:0.72rem !important}
}

/* ── CSS VARIABLE OVERRIDES ────────────────────────────────── */
html[data-theme="light"] {
  --bg:       #f5f6fa;
  --surface:  #ffffff;
  --surface2: #f0f1f6;
  --surface3: #e8eaf0;
  --white:    #111827;
  --muted:    #9ca3af;
  --muted2:   #6b7280;
  --border:   #e5e7eb;
  --border2:  #d1d5db;
  --text:     #111827;
}

/* ── BODY ──────────────────────────────────────────────────── */
html[data-theme="light"] body {
  background: #f5f6fa;
  color: #111827;
}

/* ── NAV ───────────────────────────────────────────────────── */
html[data-theme="light"] nav {
  background: rgba(255,255,255,0.97) !important;
  border-bottom-color: #e5e7eb;
}
html[data-theme="light"] .nav-links a { color: #6b7280; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color: #111827; }
html[data-theme="light"] .nav-btn {
  background: #f0f1f6;
  border-color: #d1d5db;
  color: #4b5563;
}
html[data-theme="light"] .nav-btn:hover { color: #111827; border-color: #9ca3af; }
html[data-theme="light"] .nav-search {
  background: #f0f1f6;
  border-color: #d1d5db;
  color: #111827;
}
html[data-theme="light"] .nav-search::placeholder { color: #9ca3af; }
html[data-theme="light"] .nav-user-btn {
  background: #f0f1f6;
  border-color: #d1d5db;
  color: #111827;
}
html[data-theme="light"] .user-dropdown {
  background: #fff;
  border-color: #d1d5db;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
html[data-theme="light"] .dd-item { color: #4b5563; }
html[data-theme="light"] .dd-item:hover { background: #f0f1f6; color: #111827; }
html[data-theme="light"] .dd-divider { background: #e5e7eb; }
html[data-theme="light"] .cart-badge { border-color: #f5f6fa; }

/* ── MOBILE NAV / SEARCH ─────────────────────────────────────── */
html[data-theme="light"] .nav-links.open {
  background: rgba(255,255,255,0.98) !important;
  border-bottom-color: #e5e7eb;
}
html[data-theme="light"] .mobile-search-bar {
  background: #fff;
  border-bottom-color: #e5e7eb;
}
html[data-theme="light"] .mobile-search-bar input {
  background: #f0f1f6;
  border-color: #d1d5db;
  color: #111827;
}
html[data-theme="light"] .mobile-search-bar input::placeholder { color: #9ca3af; }

/* ── HERO ───────────────────────────────────────────────────── */
html[data-theme="light"] .hero { background: #f5f6fa; }
html[data-theme="light"] .hero-bg {
  background: radial-gradient(ellipse 80% 60% at 70% 50%,rgba(37,99,235,0.07) 0%,transparent 65%),
              radial-gradient(ellipse 40% 40% at 20% 80%,rgba(59,130,246,0.04) 0%,transparent 60%);
}
html[data-theme="light"] .hero-grid-lines { opacity: 0.1; }
html[data-theme="light"] .hero h1 { color: #111827; }
html[data-theme="light"] .hero-sub { color: #6b7280; }

/* ── HERO LAPTOP CARD ──────────────────────────────────────── */
html[data-theme="light"] .hero-laptop-card { background: #fff; border-color: #d1d5db; }
html[data-theme="light"] .hlc-img { background: #f0f1f6; }
html[data-theme="light"] .hlc-name { color: #111827; }
html[data-theme="light"] .hlc-price { color: #111827; }

/* ── SECTIONS ───────────────────────────────────────────────── */
html[data-theme="light"] .section-title { color: #111827; }
html[data-theme="light"] .section-sub { color: #6b7280; }
html[data-theme="light"] .section-eyebrow { color: #2563eb; }

/* ── PRODUCT CARDS ─────────────────────────────────────────── */
html[data-theme="light"] .pcard { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .pcard:hover {
  border-color: #2563eb;
  box-shadow: 0 16px 48px rgba(37,99,235,0.1);
}
html[data-theme="light"] .pcard-img { background: #f0f1f6; }
html[data-theme="light"] .pcard-img::after {
  background: linear-gradient(to top, #fff, transparent);
}
html[data-theme="light"] .pcard-name { color: #111827; }
html[data-theme="light"] .pcard-price { color: #111827; }
html[data-theme="light"] .chip { background: #f0f1f6; border-color: #d1d5db; color: #4b5563; }

/* ── FILTER TABS ────────────────────────────────────────────── */
html[data-theme="light"] .ftab { background: #fff; border-color: #d1d5db; color: #4b5563; }
html[data-theme="light"] .ftab:hover,
html[data-theme="light"] .ftab.active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* ── WHY CARDS ──────────────────────────────────────────────── */
html[data-theme="light"] .why-card { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .why-title { color: #111827; }
html[data-theme="light"] .why-desc { color: #6b7280; }

/* ── WHY SECTION BAND ───────────────────────────────────────── */
html[data-theme="light"] [style*="background:var(--surface)"] { background: #fff !important; }

/* ── PROMO BANNER ───────────────────────────────────────────── */
html[data-theme="light"] .promo { background: #fff; border-color: #d1d5db; }
html[data-theme="light"] .promo-left h2 { color: #111827; }
html[data-theme="light"] .promo-left p { color: #6b7280; }
html[data-theme="light"] .tnum { background: #f0f1f6; border-color: #d1d5db; color: #111827; }

/* ── NEWSLETTER ─────────────────────────────────────────────── */
html[data-theme="light"] .newsletter { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .newsletter h2 { color: #111827; }
html[data-theme="light"] .newsletter p { color: #6b7280; }
html[data-theme="light"] .nl-input { background: #f5f6fa; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .nl-input::placeholder { color: #9ca3af; }

/* ── FOOTER ──────────────────────────────────────────────────── */
html[data-theme="light"] footer { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .footer-bottom { border-color: #e5e7eb; }
html[data-theme="light"] footer ul a { color: #6b7280; }
html[data-theme="light"] footer ul a:hover { color: #111827; }
html[data-theme="light"] .footer-bottom p,
html[data-theme="light"] .footer-links-row a { color: #9ca3af; }
html[data-theme="light"] .footer-brand p { color: #9ca3af; }
html[data-theme="light"] .soc-btn { background: #f0f1f6; border-color: #d1d5db; color: #6b7280; }
html[data-theme="light"] .soc-btn:hover { color: #111827; border-color: #9ca3af; }

/* ── SHOP PAGE ──────────────────────────────────────────────── */
html[data-theme="light"] .page-header { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .page-header h1 { color: #111827; }
html[data-theme="light"] .page-header p { color: #6b7280; }
html[data-theme="light"] .breadcrumb,
html[data-theme="light"] .breadcrumb a { color: #9ca3af; }
html[data-theme="light"] .shop-layout { background: transparent; }
html[data-theme="light"] .sidebar { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .sidebar-section { border-color: #e5e7eb; }
html[data-theme="light"] .sidebar-title { color: #9ca3af; }
html[data-theme="light"] .check-item label { color: #6b7280; }
html[data-theme="light"] .check-item:hover label { color: #111827; }
html[data-theme="light"] .price-input,
html[data-theme="light"] .sort-select { background: #f5f6fa; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .result-count { color: #6b7280; }
html[data-theme="light"] .result-count strong { color: #111827; }
html[data-theme="light"] .view-btn { background: #fff; border-color: #d1d5db; color: #6b7280; }
html[data-theme="light"] .view-btn.active,
html[data-theme="light"] .view-btn:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="light"] .pgrid.list-view .pcard-img { background: #f0f1f6; }
html[data-theme="light"] .empty h3 { color: #111827; }
html[data-theme="light"] .page-btn { background: #fff; border-color: #d1d5db; color: #6b7280; }
html[data-theme="light"] .page-btn:hover,
html[data-theme="light"] .page-btn.active { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="light"] .filter-toggle-mobile { background: #fff; border-color: #d1d5db; color: #111827; }

/* ── CART PAGE ──────────────────────────────────────────────── */
html[data-theme="light"] .steps-bar { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .step-label { color: #9ca3af; }
html[data-theme="light"] .step.active .step-label { color: #111827; }
html[data-theme="light"] .col-title { color: #111827; }
html[data-theme="light"] .cart-item-card { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .summary-box { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .qty-btn { background: #f0f1f6; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .promo-input { background: #f5f6fa; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .summary-row { border-color: #e5e7eb; }

/* ── CHECKOUT PAGE ──────────────────────────────────────────── */
html[data-theme="light"] .form-section { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .checkout-input,
html[data-theme="light"] .checkout-select { background: #f5f6fa; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .delivery-option { background: #fff; border-color: #d1d5db; }
html[data-theme="light"] .delivery-option.selected { border-color: #2563eb; background: rgba(37,99,235,0.04); }
html[data-theme="light"] .bank-card { background: #f5f6fa; border-color: #d1d5db; }
html[data-theme="light"] .order-summary-box { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .order-item-row { border-color: #e5e7eb; }

/* ── SIGN IN PAGE ───────────────────────────────────────────── */
html[data-theme="light"] .main-grid { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .left-panel {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
}
html[data-theme="light"] .left-panel h2,
html[data-theme="light"] .left-panel p { color: #1e3a5f; }
html[data-theme="light"] .right-panel { background: #fff; }
html[data-theme="light"] .auth-input { background: #f5f6fa; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .auth-input::placeholder { color: #9ca3af; }
html[data-theme="light"] .auth-tab { color: #6b7280; }
html[data-theme="light"] .auth-tab.active { color: #111827; border-color: #2563eb; }

/* ── CONTACT PAGE ───────────────────────────────────────────── */
html[data-theme="light"] .contact-card { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .contact-input,
html[data-theme="light"] .contact-textarea,
html[data-theme="light"] .contact-select { background: #f5f6fa; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .faq-item { background: #fff; border-color: #e5e7eb; }

/* ── REVIEWS PAGE ───────────────────────────────────────────── */
html[data-theme="light"] .review-card { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .rating-summary-box { background: #fff; border-color: #e5e7eb; }

/* ── ABOUT PAGE ─────────────────────────────────────────────── */
html[data-theme="light"] .about-stat-card,
html[data-theme="light"] .team-card,
html[data-theme="light"] .value-card { background: #fff; border-color: #e5e7eb; }

/* ── PROFILE SIDEBAR HERO ────────────────────────────────────── */
html[data-theme="light"] .profile-hero {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%) !important;
}
html[data-theme="light"] .profile-name { color: #111827 !important; }
html[data-theme="light"] .profile-email { color: #6b7280 !important; }
html[data-theme="light"] .profile-badge {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.2);
  color: #059669;
}
html[data-theme="light"] .profile-sidebar { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .snav-item { color: #6b7280; }
html[data-theme="light"] .snav-item:hover { background: #f0f1f6; color: #111827; }
html[data-theme="light"] .snav-item.active {
  background: rgba(37,99,235,0.08);
  color: #2563eb;
  border-color: rgba(37,99,235,0.2);
}
html[data-theme="light"] .snav-divider { background: #e5e7eb; }

/* ── PROFILE MAIN ────────────────────────────────────────────── */
html[data-theme="light"] .section-card { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .card-title { color: #111827; }
html[data-theme="light"] .edit-btn { background: #f0f1f6; border-color: #d1d5db; color: #6b7280; }
html[data-theme="light"] .edit-btn:hover { color: #111827; border-color: #9ca3af; }
html[data-theme="light"] .field-val { color: #111827; background: #f5f6fa; }
html[data-theme="light"] .field-input { color: #111827; background: #f5f6fa; border-color: #d1d5db; }
html[data-theme="light"] .field-input::placeholder { color: #9ca3af; }
html[data-theme="light"] .order-card { background: #f5f6fa; border-color: #d1d5db; }
html[data-theme="light"] .order-ref { color: #111827; }
html[data-theme="light"] .order-total { color: #111827; }
html[data-theme="light"] .order-btn { background: #fff; border-color: #d1d5db; color: #6b7280; }
html[data-theme="light"] .address-card { background: #f5f6fa; border-color: #d1d5db; }
html[data-theme="light"] .address-info p { color: #111827; }
html[data-theme="light"] .theme-row { border-color: #e5e7eb; }
html[data-theme="light"] .theme-icon { background: #f0f1f6; border-color: #d1d5db; }
html[data-theme="light"] .theme-label { color: #111827; }
html[data-theme="light"] .sec-icon { background: #f0f1f6; border-color: #d1d5db; }
html[data-theme="light"] .sec-label { color: #111827; }
html[data-theme="light"] .security-row { border-color: #e5e7eb; }
html[data-theme="light"] .modal { background: #fff; border-color: #d1d5db; }
html[data-theme="light"] .modal h3 { color: #111827; }
html[data-theme="light"] .modal-input { background: #f5f6fa; border-color: #d1d5db; color: #111827; }
html[data-theme="light"] .modal-input::placeholder { color: #9ca3af; }

/* ── UPLOAD RECEIPT PAGE ─────────────────────────────────────── */
html[data-theme="light"] .receipt-card { background: #fff; border-color: #e5e7eb; }
html[data-theme="light"] .upload-zone { background: #f5f6fa; border-color: #d1d5db; }

/* ── TOAST ───────────────────────────────────────────────────── */
html[data-theme="light"] .toast {
  background: #fff;
  border-color: #2563eb;
  color: #111827;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}