/* style.css — Vula Market*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --blue-deep:   #0d1b4b;
  --blue-dark:   #1e3a8a;
  --blue:        #1d4ed8;
  --blue-mid:    #2563eb;
  --blue-light:  #3b82f6;
  --sky:         #0ea5e9;
  --sky-dark:    #0284c7;
  --sky-light:   #bae6fd;
  --rose:        #f43f5e;
  --slate:       #64748b;
  --slate-light: #94a3b8;
  --surface:     #f8fafc;
  --surface-2:   #eff6ff;
  --border:      #dbeafe;
  --white:       #ffffff;
  --radius:      .75rem;
  --radius-sm:   .5rem;
  --radius-lg:   1rem;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow:      0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:   0 20px 40px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08);
  --transition:  .22s cubic-bezier(.4,0,.2,1);
  --gold:        var(--sky);
}

/* Base*/
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--surface);
  color: var(--blue-deep);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition), color var(--transition);
}
main { flex: 1; }

a { color: var(--blue-mid); transition: color var(--transition); }
a:hover { color: var(--sky-dark); }

/* Override Bootstrap primary to Blue*/
.btn-primary        { background: var(--blue-mid); border-color: var(--blue-mid); color: #fff; }
.btn-primary:hover  { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-primary:focus  { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 0 0 .25rem rgba(37,99,235,.3); }

.btn-warning        { background: var(--sky); border-color: var(--sky); color: #fff; font-weight: 600; }
.btn-warning:hover  { background: var(--sky-dark); border-color: var(--sky-dark); color: #fff; }

.btn-outline-primary { color: var(--blue-mid); border-color: var(--blue-mid); }
.btn-outline-primary:hover { background: var(--blue-mid); border-color: var(--blue-mid); color: #fff; }

.text-primary { color: var(--blue-mid) !important; }
.bg-primary   { background-color: var(--blue-mid) !important; }

/* Navbar*/
.main-navbar {
  background: var(--blue-deep) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: .6rem 0;
}
.main-navbar .navbar-brand {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  color: #fff !important;
}
.main-navbar .navbar-brand span { color: var(--sky); }
.main-navbar .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500;
  transition: color var(--transition);
}
.main-navbar .nav-link:hover { color: var(--sky) !important; }

.main-navbar .search-bar {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 2rem;
  color: #fff;
  padding: .45rem 1.1rem;
  transition: background var(--transition), border-color var(--transition);
}
.main-navbar .search-bar::placeholder { color: rgba(255,255,255,.5); }
.main-navbar .search-bar:focus {
  background: rgba(255,255,255,.16);
  border-color: var(--sky);
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,165,233,.25);
  color: #fff;
}
.main-navbar .search-wrap { position: relative; flex: 1; max-width: 520px; }
.main-navbar .search-wrap .search-btn {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  background: var(--sky); border: none; border-radius: 2rem;
  padding: .3rem .9rem; color: #fff; font-weight: 600;
  font-size: .85rem; transition: background var(--transition);
}
.main-navbar .search-wrap .search-btn:hover { background: var(--sky-dark); }

.navbar-icon-btn {
  position: relative; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm);
  color: rgba(255,255,255,.85) !important; padding: .4rem .65rem;
  transition: all var(--transition); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.navbar-toggler.navbar-icon-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.navbar-toggler.navbar-icon-btn:focus { box-shadow: none; outline: none; }
.navbar-icon-btn:hover { background: rgba(14,165,233,.2); border-color: var(--sky); color: var(--sky) !important; }
.navbar-icon-btn .badge {
  position: absolute; top: -.4rem; right: -.4rem;
  background: var(--rose); color: #fff; font-size: .65rem;
  padding: .18rem .38rem; border-radius: 99px; min-width: 18px;
}

.user-menu-toggle {
  display: flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); padding: .35rem .75rem;
  color: rgba(255,255,255,.9) !important; font-weight: 500; font-size: .875rem;
  transition: all var(--transition); text-decoration: none;
}
.user-menu-toggle:hover { background: rgba(14,165,233,.15); border-color: var(--sky); color: var(--sky) !important; }
.user-menu-toggle img { border: 2px solid rgba(255,255,255,.2); }

.dropdown-menu {
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .4rem;
}
.dropdown-item {
  border-radius: var(--radius-sm); padding: .5rem .9rem;
  font-size: .875rem; font-weight: 500; transition: all var(--transition);
}
.dropdown-item:hover { background: var(--surface-2); color: var(--blue-deep); }

/* Category navigation bar*/
.cat-nav {
  background: var(--blue-dark);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky; top: 58px; z-index: 999;
}
.cat-nav-inner {
  display: flex; align-items: stretch; overflow-x: auto;
  scrollbar-width: none; gap: 0;
}
.cat-nav-inner::-webkit-scrollbar { display: none; }

.cat-nav-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem 1.1rem; color: rgba(255,255,255,.72);
  text-decoration: none; font-size: .82rem; font-weight: 500;
  white-space: nowrap; border-bottom: 2px solid transparent;
  transition: all var(--transition); position: relative;
}
.cat-nav-item i { font-size: 1rem; transition: transform var(--transition); }
.cat-nav-item::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--sky);
  transform: scaleX(0); transition: transform var(--transition);
  transform-origin: center;
}
.cat-nav-item:hover {
  color: var(--sky);
  background: rgba(14,165,233,.1);
}
.cat-nav-item:hover::after { transform: scaleX(1); }
.cat-nav-item:hover i { transform: scale(1.2); }
.cat-nav-item.active { color: var(--sky); }
.cat-nav-item.active::after { transform: scaleX(1); }

/* Hero banner*/
.hero-banner {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-dark) 60%, #162b6e 100%);
  color: #fff;
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(14,165,233,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(59,130,246,.1) 0%, transparent 60%);
}
.hero-banner::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0; height: 60px;
  background: var(--surface);
  clip-path: ellipse(55% 100% at 50% 100%);
}
.hero-banner .container { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(14,165,233,.15); border: 1px solid rgba(14,165,233,.35);
  color: var(--sky-light); border-radius: 99px;
  padding: .3rem .9rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 1.2rem;
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -.03em;
}
.hero-title span { color: var(--sky); }
.hero-search {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3rem; overflow: hidden;
  display: flex; max-width: 580px; margin: 0 auto;
}
.hero-search input {
  background: transparent; border: none; color: #fff;
  padding: .9rem 1.4rem; flex: 1; font-size: .95rem;
}
.hero-search input::placeholder { color: rgba(255,255,255,.45); }
.hero-search input:focus { outline: none; }
.hero-search button {
  background: var(--sky); border: none;
  padding: .9rem 1.6rem; color: #fff;
  font-weight: 700; font-size: .9rem; white-space: nowrap;
  transition: background var(--transition);
}
.hero-search button:hover { background: var(--sky-dark); }
.hero-trust {
  display: flex; justify-content: center; gap: 2rem;
  margin-top: 2rem; flex-wrap: wrap;
}
.hero-trust-item {
  display: flex; align-items: center; gap: .45rem;
  color: rgba(255,255,255,.6); font-size: .82rem;
}
.hero-trust-item i { color: var(--sky); }

/* Section headings*/
.section-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sky-dark);
  display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem;
}
.section-label::before {
  content: ''; width: 24px; height: 2px; background: var(--sky);
  border-radius: 99px;
}
.section-title {
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--blue-deep);
}

/* Category chips (home grid)*/
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .75rem;
}
.cat-chip {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem; padding: 1.1rem .75rem;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius); text-decoration: none;
  color: var(--blue-dark); font-size: .8rem; font-weight: 600;
  text-align: center; transition: all var(--transition);
  cursor: pointer; position: relative; overflow: hidden;
}
.cat-chip::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(37,99,235,.06));
  opacity: 0; transition: opacity var(--transition);
}
.cat-chip:hover {
  border-color: var(--sky);
  color: var(--blue-deep);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(14,165,233,.18);
}
.cat-chip:hover::before { opacity: 1; }
.cat-chip:hover .cat-chip-icon { background: var(--sky); color: #fff; transform: scale(1.1); }
.cat-chip-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--surface-2); display: flex; align-items: center;
  justify-content: center; font-size: 1.25rem; color: var(--blue-mid);
  transition: all var(--transition);
}
.cat-chip-count { font-size: .68rem; color: var(--slate); font-weight: 400; }

/* Product cards*/
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: transparent;
}
.product-card .product-thumb {
  width: 100%; height: 200px; min-height: 200px;
  object-fit: cover; background: var(--surface-2); display: block;
  transition: transform .4s ease;
}
.product-card:hover .product-thumb { transform: scale(1.04); }
.product-card .thumb-wrap { overflow: hidden; }

.product-card .badge-condition {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  background: var(--surface-2) !important; color: var(--slate) !important;
  border: 1px solid var(--border); padding: .2rem .55rem;
}
.product-card .price {
  font-size: 1.1rem; font-weight: 800; color: var(--blue-deep);
  letter-spacing: -.02em;
}
.product-card .original-price {
  font-size: .8rem; text-decoration: line-through; color: var(--slate-light);
}
.quick-deal-badge {
  position: absolute; top: .55rem; left: .55rem;
  background: var(--rose); color: #fff;
  font-size: .68rem; font-weight: 700; padding: .22rem .6rem;
  border-radius: 99px; letter-spacing: .04em; z-index: 2;
}
.fav-btn {
  position: absolute; top: .55rem; right: .55rem;
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
  border: 1px solid var(--border); border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: all var(--transition);
}
.fav-btn:hover { background: #fff; border-color: var(--rose); transform: scale(1.1); }
.fav-btn.active i { color: var(--rose); }

/* Quick deal strip*/
.deals-strip {
  background: linear-gradient(135deg, var(--blue-deep) 0%, #162b6e 100%);
  padding: 2.5rem 0;
  position: relative; overflow: hidden;
}
.deals-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 120% at 90% 50%, rgba(14,165,233,.15) 0%, transparent 60%);
}

/* Auth cards*/
.auth-card {
  max-width: 480px; margin: 3rem auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.auth-card .auth-header {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-dark));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 2rem; text-align: center; color: #fff;
}

/* Cart*/
.cart-item-img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Order status badges*/
.status-pending   { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.status-paid      { background: #cffafe; color: #164e63; border: 1px solid #a5f3fc; }
.status-confirmed { background: #dbeafe; color: #1e3a8a; border: 1px solid #bfdbfe; }
.status-shipped   { background: #e0f2fe; color: #0c4a6e; border: 1px solid #bae6fd; }
.status-delivered { background: #e0f2fe; color: #0c4a6e; border: 1px solid #bae6fd; }
.status-completed { background: #dbeafe; color: #1e3a8a; border: 1px solid #bfdbfe; font-weight: 600; }
.status-cancelled { background: #fee2e2; color: #7f1d1d; border: 1px solid #fecaca; }
.status-disputed  { background: #fde8d8; color: #7c2d12; border: 1px solid #fed7aa; }
.status-refunded  { background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }

/* Gallery*/
.gallery-main {
  width: 100%; height: 380px; object-fit: contain;
  background: var(--surface-2); border-radius: var(--radius);
}
.gallery-thumb {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-sm); cursor: pointer;
  border: 2px solid transparent; transition: border-color var(--transition);
}
.gallery-thumb.active,
.gallery-thumb:hover { border-color: var(--sky); }

/* Rating stars*/
.stars { color: var(--sky); letter-spacing: -.05em; }

/* Seller badges*/
.seller-badge-none     { color: var(--slate); }
.seller-badge-bronze   { color: #cd7f32; }
.seller-badge-silver   { color: #94a3b8; }
.seller-badge-gold     { color: var(--sky); }
.seller-badge-platinum { color: #818cf8; }
.seller-badge-diamond  { color: #67e8f9; }

/* Admin sidebar*/
.admin-sidebar {
  min-height: calc(100vh - 60px);
  background: var(--white);
  border-right: 1px solid var(--border);
}
.admin-sidebar .nav-link {
  color: var(--slate); border-radius: var(--radius-sm);
  padding: .6rem 1rem; font-size: .875rem; font-weight: 500;
  transition: all var(--transition);
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  background: var(--surface-2); color: var(--blue-deep);
}
.admin-sidebar .nav-link.active {
  font-weight: 600;
  border-left: 3px solid var(--sky);
}

/* Pagination*/
.page-link { color: var(--blue-mid); border-color: var(--border); }
.page-item.active .page-link {
  background: var(--blue-mid); border-color: var(--blue-mid);
}
.page-link:hover { background: var(--surface-2); color: var(--blue-deep); }

/* Cards (generic)*/
.card { border: 1px solid var(--border); border-radius: var(--radius); }
.card.border-0 { border: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* Form controls*/
.form-control:focus, .form-select:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 .2rem rgba(14,165,233,.2);
}

/* Utilities*/
.text-price { color: var(--blue-deep); font-weight: 700; }
.text-sky   { color: var(--sky-dark); }
.bg-blue    { background: var(--blue-deep); }
.bg-surface { background: var(--surface-2); }
.divider-sky { border-color: var(--sky) !important; opacity: .25; }

/* Footer*/
.site-footer {
  background: var(--blue-deep);
  color: rgba(255,255,255,.7);
}
.site-footer .footer-top {
  padding: 4rem 0 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-footer .footer-brand { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.site-footer .footer-brand span { color: var(--sky); }
.site-footer .footer-tagline { color: rgba(255,255,255,.5); font-size: .875rem; line-height: 1.6; }
.site-footer .footer-heading {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sky);
  margin-bottom: 1.1rem;
}
.site-footer .footer-links { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-links li { margin-bottom: .55rem; }
.site-footer .footer-links a {
  color: rgba(255,255,255,.55); text-decoration: none;
  font-size: .875rem; transition: color var(--transition);
  display: flex; align-items: center; gap: .45rem;
}
.site-footer .footer-links a:hover { color: var(--sky); }
.site-footer .footer-links a i { font-size: .8rem; }

.footer-social a {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: 1rem;
  transition: all var(--transition); text-decoration: none;
}
.footer-social a:hover { background: var(--sky); border-color: var(--sky); color: #fff; transform: translateY(-2px); }

.footer-stat {
  text-align: center; padding: 1.2rem;
  background: rgba(255,255,255,.04); border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.07);
}
.footer-stat .stat-num { font-size: 1.5rem; font-weight: 800; color: var(--sky); }
.footer-stat .stat-label { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: .15rem; }

.footer-payment-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); padding: .35rem .8rem;
  font-size: .78rem; color: rgba(255,255,255,.65);
}
.footer-payment-badge i { color: var(--sky); }

.footer-newsletter input {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: #fff; padding: .55rem 1rem; font-size: .875rem; flex: 1;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,.35); }
.footer-newsletter input:focus { outline: none; border-color: var(--sky); background: rgba(255,255,255,.1); }
.footer-newsletter button {
  background: var(--sky); border: none; color: #fff; font-weight: 600;
  padding: .55rem 1.1rem; font-size: .875rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: background var(--transition);
}
.footer-newsletter button:hover { background: var(--sky-dark); }

.site-footer .footer-bottom {
  padding: 1.25rem 0;
  background: rgba(0,0,0,.2);
}
.footer-bottom-text { font-size: .8rem; color: rgba(255,255,255,.35); }

/* Responsive — tablet and mobile (< 992px) */
@media (max-width: 991.98px) {

  /* Collapsed navbar panel gets the same navy background */
  .main-navbar .navbar-collapse {
    background: var(--blue-deep);
    border-top: 1px solid rgba(255,255,255,.1);
    padding: .8rem 0 1.1rem;
    margin-top: .3rem;
  }

  /* Search bar fills full width inside the collapse */
  .main-navbar .search-wrap {
    max-width: 100% !important;
    margin: 0 0 .6rem !important;
  }

  /* Nav list stacks vertically */
  .main-navbar .navbar-nav {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .2rem !important;
    margin-top: 0 !important;
  }

  /* Icon buttons fill the row */
  .main-navbar .navbar-nav .nav-item { width: 100%; }
  .navbar-icon-btn { width: 100%; justify-content: flex-start; }

  /* User toggle fills the row */
  .user-menu-toggle { width: 100%; }

  /* Dropdown inside mobile collapse — dark themed, static position */
  .main-navbar .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100%;
    margin: .35rem 0 0 !important;
    padding: .3rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
  }
  .main-navbar .dropdown-menu .dropdown-item {
    color: rgba(255,255,255,.82);
    border-radius: var(--radius-sm);
  }
  .main-navbar .dropdown-menu .dropdown-item:hover {
    background: rgba(14,165,233,.15);
    color: #fff;
  }
  .main-navbar .dropdown-menu .px-3.py-2 { color: #fff; }
  .main-navbar .dropdown-menu .text-muted { color: rgba(255,255,255,.5) !important; }
  .main-navbar .dropdown-menu .fw-semibold { color: #fff; }
  .main-navbar .dropdown-menu .dropdown-divider { border-color: rgba(255,255,255,.12); }

  /* Auth buttons stretch full width */
  .main-navbar .btn-outline-light,
  .main-navbar .btn-warning {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: .25rem;
  }

  /* Category nav sticky top matches mobile navbar height (~52px) */
  .cat-nav { top: 52px; }
}

/* Small phones (< 576px) */
@media (max-width: 575.98px) {
  .product-card .product-thumb { height: 155px; min-height: 155px; }
  .gallery-main { height: 230px; }
  .hero-banner { padding: 2.5rem 0 3.5rem; }
  .cat-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .hero-trust { gap: 1rem; }
  .hero-title { letter-spacing: -.02em; }
  .section-title { font-size: 1.25rem; }
  .footer-stat .stat-num { font-size: 1.25rem; }
  .hero-search { border-radius: 2rem; }
  .auth-card { margin: 1.5rem auto; }
}

/* Dark mode toggle button */
.dark-mode-btn {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.85) !important;
  cursor: pointer;
  padding: .4rem .65rem;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.dark-mode-btn:hover {
  background: rgba(14,165,233,.2) !important;
  border-color: var(--sky) !important;
  color: var(--sky) !important;
}

/* === Dark mode === */
[data-theme="dark"] {
  color-scheme: dark;
  --surface:   #0f172a;
  --surface-2: #1e293b;
  --border:    #334155;
  --white:     #1e293b;
}
[data-theme="dark"] body             { background: #0f172a; color: #cbd5e1; }
[data-theme="dark"] .section-title   { color: #e2e8f0; }
[data-theme="dark"] .text-price,
[data-theme="dark"] .product-card .price { color: #e2e8f0; }

[data-theme="dark"] .product-card,
[data-theme="dark"] .card            { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .cat-chip        { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .cat-chip-icon   { background: #293548; color: var(--sky); }
[data-theme="dark"] .cat-chip-count  { color: #94a3b8; }

[data-theme="dark"] .dropdown-menu   { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .dropdown-item   { color: #cbd5e1; }
[data-theme="dark"] .dropdown-item:hover { background: #293548; color: #e2e8f0; }

[data-theme="dark"] .admin-sidebar   { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .admin-sidebar .nav-link { color: #94a3b8; }
[data-theme="dark"] .admin-sidebar .nav-link:hover,
[data-theme="dark"] .admin-sidebar .nav-link.active { background: #293548; color: #e2e8f0; }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .form-control::placeholder { color: #64748b; }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background: #293548; color: #e2e8f0; }

[data-theme="dark"] .table           { color: #cbd5e1; border-color: #334155; }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: #334155; }
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light { --bs-table-bg: #1e293b; background: #1e293b !important; color: #e2e8f0 !important; }

[data-theme="dark"] .page-link       { background: #1e293b; border-color: #334155; color: var(--sky); }
[data-theme="dark"] .page-link:hover { background: #293548; color: #e2e8f0; }
[data-theme="dark"] .page-item.disabled .page-link { background: #1e293b; border-color: #334155; color: #64748b; }

[data-theme="dark"] .modal-content   { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer    { border-color: #334155; }

[data-theme="dark"] .alert-info      { background: rgba(14,165,233,.12);  border-color: rgba(14,165,233,.3);  color: #bae6fd; }
[data-theme="dark"] .alert-success   { background: rgba(34,197,94,.12);   border-color: rgba(34,197,94,.3);   color: #bbf7d0; }
[data-theme="dark"] .alert-warning   { background: rgba(234,179,8,.12);   border-color: rgba(234,179,8,.3);   color: #fef08a; }
[data-theme="dark"] .alert-danger    { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.3);   color: #fecaca; }
[data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(1); }

[data-theme="dark"] hr               { border-color: #334155; }
[data-theme="dark"] .text-muted      { color: #94a3b8 !important; }
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light        { background-color: #1e293b !important; }
[data-theme="dark"] .border          { border-color: #334155 !important; }

[data-theme="dark"] .fav-btn         { background: rgba(30,41,59,.9); border-color: #334155; }
[data-theme="dark"] .gallery-main    { background: #1e293b; }
[data-theme="dark"] .product-card .badge-condition { background: #293548 !important; color: #94a3b8 !important; border-color: #334155; }

[data-theme="dark"] .status-pending   { background: rgba(30,64,175,.2);  color: #93c5fd;  border-color: rgba(59,130,246,.3); }
[data-theme="dark"] .status-paid      { background: rgba(8,145,178,.2);  color: #67e8f9;  border-color: rgba(34,211,238,.3); }
[data-theme="dark"] .status-confirmed { background: rgba(30,58,138,.2);  color: #93c5fd;  border-color: rgba(59,130,246,.3); }
[data-theme="dark"] .status-shipped   { background: rgba(12,74,110,.2);  color: #7dd3fc;  border-color: rgba(56,189,248,.3); }
[data-theme="dark"] .status-delivered { background: rgba(12,74,110,.2);  color: #7dd3fc;  border-color: rgba(56,189,248,.3); }
[data-theme="dark"] .status-completed { background: rgba(30,58,138,.2);  color: #93c5fd;  border-color: rgba(59,130,246,.3); }
[data-theme="dark"] .status-cancelled { background: rgba(127,29,29,.2);  color: #fca5a5;  border-color: rgba(248,113,113,.3); }
[data-theme="dark"] .status-disputed  { background: rgba(124,45,18,.2);  color: #fdba74;  border-color: rgba(251,146,60,.3); }
[data-theme="dark"] .status-refunded  { background: rgba(51,65,85,.2);   color: #cbd5e1;  border-color: rgba(100,116,139,.3); }