/* ═══════════════════════════════════════════════════════════
   DISHMART — Premium 3D Design System
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts loaded in base.html (Inter) ───────────────── */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --primary:        #1d4ed8;
  --primary-dark:   #1e3a8a;
  --primary-light:  #eff6ff;
  --accent:         #ef4444;
  --gold:           #f59e0b;
  --sidebar-w:      240px;

  /* Layered shadows */
  --sh-xs:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --sh-sm:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --sh-md:  0 10px 30px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.07);
  --sh-lg:  0 20px 50px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.09);
  --sh-xl:  0 32px 80px rgba(0,0,0,.18), 0 16px 32px rgba(0,0,0,.10);
  --sh-glow:0 0 40px rgba(29,78,216,.30), 0 0 80px rgba(29,78,216,.15);

  /* Transitions */
  --tr:     all .35s cubic-bezier(.4,0,.2,1);
  --tr-fast:all .18s cubic-bezier(.4,0,.2,1);
  --tr-bounce: all .45s cubic-bezier(.34,1.56,.64,1);
}

/* ── Base ───────────────────────────────────────────────────── */
*  { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: #f0f4ff;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--primary); color: #fff; }

.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }

/* ── Top bar ────────────────────────────────────────────────── */
.top-bar {
  background: var(--primary-dark);
  color: rgba(255,255,255,.85);
  padding: 7px 0;
  font-size: .82rem;
  letter-spacing: .01em;
}
@media (max-width: 767.98px) { .top-bar { display: none; } }

/* ── Navbar — glassmorphism on scroll ───────────────────────── */
.navbar.bg-primary {
  background: linear-gradient(90deg, #0f2470 0%, var(--primary) 60%, #1e40af 100%) !important;
  box-shadow: 0 2px 20px rgba(15,36,112,.35);
  transition: var(--tr);
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar.scrolled {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background: rgba(15,36,112,.88) !important;
  box-shadow: var(--sh-lg);
  padding-top: 6px;
  padding-bottom: 6px;
}
.navbar-brand { transition: var(--tr); }
.navbar-brand:hover { transform: scale(1.06); }
.nav-link { font-weight: 500; letter-spacing: .01em; transition: var(--tr-fast); }
.nav-link:hover { opacity: .85; transform: translateY(-1px); }
.nav-cart-btn { position: relative; }

@media (max-width: 991.98px) {
  .navbar .d-flex.me-3 { width: 100%; margin-top: 8px; }
  .navbar-collapse .d-flex { flex-wrap: wrap; gap: 8px; }
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px;
  background: #050d2a;
  color: #fff;
}

/* Animated gradient mesh */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(29,78,216,.65) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(99,102,241,.45) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 60% 80%, rgba(239,68,68,.25) 0%, transparent 50%);
  animation: meshMove 10s ease-in-out infinite alternate;
}
@keyframes meshMove {
  0%   { opacity: 1; transform: scale(1)   rotate(0deg);   }
  100% { opacity: .9; transform: scale(1.05) rotate(2deg); }
}

/* Floating orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.hero-orb-1 {
  width: 500px; height: 500px;
  background: rgba(29,78,216,.35);
  top: -180px; right: -100px;
  animation: orbFloat 8s ease-in-out infinite;
}
.hero-orb-2 {
  width: 300px; height: 300px;
  background: rgba(239,68,68,.25);
  bottom: -80px; left: 10%;
  animation: orbFloat 11s ease-in-out infinite reverse;
}
.hero-orb-3 {
  width: 200px; height: 200px;
  background: rgba(245,158,11,.20);
  top: 30%; right: 20%;
  animation: orbFloat 7s ease-in-out infinite 2s;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-20px) scale(1.05); }
  66%      { transform: translate(-20px,15px) scale(.96); }
}

/* Floating icon */
.hero-icon-wrap {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  opacity: .12;
  pointer-events: none;
  animation: iconFloat 6s ease-in-out infinite;
}
.hero-icon-wrap i { font-size: 22rem; color: #fff; }
.hero-icon-wrap svg { width: 360px; height: 360px; }

/* Steam puff animation */
.kw-steam ellipse { animation: steamRise 3s ease-in-out infinite; transform-origin: center; }
.kw-steam ellipse:nth-child(1) { animation-delay: 0s;   }
.kw-steam ellipse:nth-child(2) { animation-delay: .5s;  }
.kw-steam ellipse:nth-child(3) { animation-delay: 1s;   }
@keyframes steamRise {
  0%   { opacity: .8; transform: translateY(10px) scale(.8); }
  50%  { opacity: .4; transform: translateY(-15px) scale(1.1); }
  100% { opacity: 0;  transform: translateY(-30px) scale(1.3); }
}
.kw-pan { animation: panRock 5s ease-in-out infinite; transform-origin: center; }
@keyframes panRock {
  0%,100% { transform: translate(50px,170px) rotate(-18deg); }
  50%     { transform: translate(54px,165px) rotate(-15deg); }
}
.kw-plate { animation: plateGlow 4s ease-in-out infinite; }
@keyframes plateGlow {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.15); }
}
@keyframes iconFloat {
  0%,100% { transform: translateY(-50%) rotate(-5deg); }
  50%     { transform: translateY(calc(-50% - 20px)) rotate(3deg); }
}

/* Glowing grid lines */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero .container { position: relative; z-index: 2; }
.hero h1 {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #fff 0%, #bfdbfe 60%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,.75);
  font-weight: 400;
}
.hero .btn-light {
  background: #fff;
  color: var(--primary);
  border: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 0 rgba(255,255,255,0);
  transition: var(--tr-bounce);
  font-weight: 700;
}
.hero .btn-light:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--sh-xl);
}
.hero .btn-outline-light {
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: var(--tr-bounce);
  font-weight: 600;
}
.hero .btn-outline-light:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  transform: translateY(-3px);
}

/* Hero responsive */
@media (max-width: 991.98px) { .hero-icon-wrap { display: none; } }
@media (max-width: 767.98px) {
  .hero { padding: 60px 0 50px; }
  .hero h1 { font-size: 2.1rem; }
  .hero .lead { font-size: .95rem; }
}
@media (max-width: 575.98px) {
  .hero { padding: 44px 0 38px; }
  .hero h1 { font-size: 1.75rem; }
  .hero .btn { font-size: .9rem; padding: 9px 20px; }
  .hero .btn + .btn { margin-top: 8px; }
}

/* ── Features strip ─────────────────────────────────────────── */
.features-strip {
  background: #fff;
  border-bottom: 1px solid #e8edf5;
  box-shadow: var(--sh-sm);
}
.feature-item {
  padding: 22px 16px;
  text-align: center;
  transition: var(--tr);
  border-radius: 12px;
  cursor: default;
}
.feature-item:hover { background: var(--primary-light); transform: translateY(-2px); }
.feature-item i { font-size: 1.9rem; }
.feature-item p { font-size: .82rem; font-weight: 600; margin: 6px 0 0; letter-spacing: .01em; }

/* ── Section titles ─────────────────────────────────────────── */
.section-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
  letter-spacing: -.02em;
}
.section-divider {
  width: 52px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  border-radius: 4px;
  margin-bottom: 32px;
}
@media (max-width: 575.98px) {
  .section-title { font-size: 1.4rem; }
  .section-divider { margin-bottom: 22px; }
}

/* ── Category cards ─────────────────────────────────────────── */
.category-card {
  background: #fff;
  border-radius: 20px;
  padding: 26px 12px 20px;
  text-align: center;
  transition: var(--tr-bounce);
  border: 2px solid #e8edf5;
  cursor: pointer;
  text-decoration: none;
  color: #334155;
  display: block;
  box-shadow: var(--sh-xs);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
}
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-light), transparent);
  opacity: 0;
  transition: var(--tr);
}
.category-card:hover {
  border-color: var(--primary);
  box-shadow: 0 16px 40px rgba(29,78,216,.18), 0 4px 12px rgba(29,78,216,.10);
  color: var(--primary);
  transform: translateY(-8px) scale(1.03);
}
.category-card:hover::before { opacity: 1; }
.category-card i {
  font-size: 2.2rem;
  color: var(--primary);
  display: block;
  transition: var(--tr-bounce);
  position: relative;
}
.category-card:hover i { transform: scale(1.25) rotateY(15deg); }
.category-card span {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  font-size: .88rem;
  position: relative;
}
@media (max-width: 575.98px) {
  .category-card { padding: 16px 8px; border-radius: 14px; }
  .category-card i { font-size: 1.7rem; }
  .category-card span { font-size: .78rem; margin-top: 6px; }
}

/* ── Product cards ──────────────────────────────────────────── */
.product-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  transition: var(--tr);
  border: 1px solid #e8edf5;
  height: 100%;
  box-shadow: var(--sh-xs);
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}
/* Shine sweep effect */
.product-card::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%);
  transform: rotate(25deg);
  transition: none;
  opacity: 0;
  pointer-events: none;
}
.product-card:hover::after {
  animation: shineSweep .55s ease forwards;
}
@keyframes shineSweep {
  0%   { opacity: 1; left: -60%; }
  100% { opacity: 0; left: 130%; }
}
.product-card:hover {
  box-shadow: 0 20px 50px rgba(29,78,216,.15), 0 8px 20px rgba(0,0,0,.08);
}
.product-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: var(--tr);
}
.product-card:hover img { transform: scale(1.06); }
.product-card .card-body { padding: 16px; }
.product-card .price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--primary);
}
.product-card .stock-badge { font-size: .70rem; font-weight: 600; }

@media (max-width: 575.98px) {
  .product-card { border-radius: 14px; }
  .product-card img { height: 155px; }
  .product-card .price { font-size: .95rem; }
  .product-card .card-body { padding: 10px; }
  .product-card .fw-600 { font-size: .83rem; }
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(29,78,216,.40);
  font-weight: 600;
  letter-spacing: .01em;
  transition: var(--tr-bounce) !important;
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
  opacity: 0;
  transition: var(--tr-fast);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(29,78,216,.50) !important;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(1px) scale(.98) !important; }

.btn-outline-primary {
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  font-weight: 600;
  transition: var(--tr-bounce) !important;
}
.btn-outline-primary:hover {
  background: var(--primary) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(29,78,216,.35) !important;
}

/* Touch-friendly */
@media (max-width: 767.98px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
}

/* ── Cart ───────────────────────────────────────────────────── */
.cart-item {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid #e8edf5;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: var(--sh-xs);
  transition: var(--tr);
}
.cart-item:hover { box-shadow: var(--sh-md); transform: translateX(3px); }
.cart-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
}
.cart-summary {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid #e8edf5;
  box-shadow: var(--sh-sm);
}
@media (max-width: 575.98px) {
  .cart-item { padding: 12px; gap: 10px; }
  .cart-item img { width: 66px; height: 66px; }
}

/* ── Checkout ───────────────────────────────────────────────── */
.checkout-form {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  border: 1px solid #e8edf5;
  box-shadow: var(--sh-sm);
}
@media (max-width: 575.98px) { .checkout-form { padding: 18px; } }

/* ── Product detail ─────────────────────────────────────────── */
.product-detail-img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--sh-lg);
}

/* ── Quantity input ─────────────────────────────────────────── */
.qty-input { width: 60px; text-align: center; }

/* ── Responsive table wrapper ───────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Order success ──────────────────────────────────────────── */
.success-icon { font-size: 5rem; color: var(--primary); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  background: linear-gradient(160deg, #050d2a 0%, #0f172a 100%);
  color: rgba(255,255,255,.55);
  padding: 56px 0 28px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #60a5fa, var(--accent));
}
.footer h5, .footer h6 { color: #fff; font-weight: 700; }
.footer .text-muted { color: rgba(255,255,255,.5) !important; }
.footer a.text-muted {
  transition: var(--tr-fast);
  text-decoration: none;
}
.footer a.text-muted:hover { color: #60a5fa !important; padding-left: 4px; }
@media (max-width: 575.98px) { .footer { padding: 36px 0 24px; } }

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left  { opacity: 0; transform: translateX(-36px); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
.reveal-right { opacity: 0; transform: translateX(36px);  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
.reveal-left.revealed,
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* Stagger delays */
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ── Partner brands marquee ─────────────────────────────────── */
.brands-track-wrap {
  overflow: hidden;
  position: relative;
}
.brands-track-wrap::before,
.brands-track-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.brands-track-wrap::before { left: 0;  background: linear-gradient(to right, #fff, transparent); }
.brands-track-wrap::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }
.brands-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: brandScroll 30s linear infinite;
}
.brands-track:hover { animation-play-state: paused; }
@keyframes brandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 30px;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  background: #f8faff;
  min-width: 136px;
  transition: var(--tr-bounce);
  cursor: default;
}
.brand-item:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 12px 32px rgba(29,78,216,.14);
  border-color: var(--primary);
  background: var(--primary-light);
}
.brand-name {
  font-weight: 700;
  font-size: .95rem;
  color: #1e293b;
  letter-spacing: .02em;
}

/* ── Products page filter bar (mobile) ──────────────────────── */
.category-pills {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  padding-bottom: 4px;
  gap: 8px;
  scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.category-pills a {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 24px;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid #dee2e6;
  color: #555;
  white-space: nowrap;
  transition: var(--tr-fast);
}
.category-pills a.active,
.category-pills a:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(29,78,216,.30);
}
@media (max-width: 767.98px) {
  .category-pills { display: flex; }
  .products-sidebar { display: none; }
}

/* ════════════════════════════════════════════════════════════
   ADMIN — Premium 3D
   ════════════════════════════════════════════════════════════ */

.admin-body { font-family: 'Inter', 'Segoe UI', sans-serif; }

/* ── Admin layout ───────────────────────────────────────────── */
.admin-sidebar {
  background: linear-gradient(180deg, #0f2470 0%, var(--primary-dark) 100%);
  min-height: 100vh;
  width: var(--sidebar-w);
  position: fixed;
  top: 0; left: 0;
  padding-top: 20px;
  z-index: 1050;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 24px rgba(15,36,112,.25);
}
.admin-sidebar .brand {
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  padding: 16px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  letter-spacing: -.01em;
}
.admin-sidebar .nav-link {
  color: rgba(255,255,255,.70);
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .94rem;
  font-weight: 500;
  border-radius: 10px;
  margin: 2px 8px;
  transition: var(--tr-fast);
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.14);
  padding-left: 26px;
}
.admin-sidebar .close-btn {
  display: none;
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 1.1rem;
}
.admin-content {
  margin-left: var(--sidebar-w);
  padding: 28px;
  min-height: 100vh;
  background: #f0f4ff;
}
.admin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1040;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.admin-overlay.show { display: block; }
.admin-mobile-toggle {
  display: none;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 1.1rem;
  cursor: pointer;
  align-items: center;
  gap: 6px;
  transition: var(--tr-fast);
}
.admin-mobile-toggle:hover { background: var(--primary-dark); }

@media (max-width: 991.98px) {
  .admin-sidebar { transform: translateX(calc(-1 * var(--sidebar-w))); }
  .admin-sidebar.sidebar-open { transform: translateX(0); box-shadow: 6px 0 40px rgba(0,0,0,.40); }
  .admin-sidebar .close-btn { display: block; }
  .admin-content { margin-left: 0; padding: 16px; }
  .admin-mobile-toggle { display: flex !important; }
}

/* ── Stat cards ─────────────────────────────────────────────── */
.stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  border: none;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  transition: var(--tr);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--primary), #60a5fa);
  border-radius: 4px 0 0 4px;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.stat-card .number { font-size: 2.1rem; font-weight: 800; color: var(--primary); }

@media (max-width: 575.98px) {
  .stat-card { padding: 16px; }
  .stat-card .number { font-size: 1.6rem; }
}

/* ── Form controls ──────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: 10px;
  border: 1.5px solid #dbe4f0;
  padding: 10px 14px;
  font-size: .93rem;
  transition: var(--tr-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.15);
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert {
  border-radius: 14px;
  border: none;
  font-weight: 500;
  box-shadow: var(--sh-xs);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge { border-radius: 8px; font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] body { background: #060c1e; color: #e2e8f0; }
[data-theme="dark"] .top-bar { background: #030712; }

[data-theme="dark"] .bg-white,
[data-theme="dark"] .product-card,
[data-theme="dark"] .cart-item,
[data-theme="dark"] .cart-summary,
[data-theme="dark"] .checkout-form,
[data-theme="dark"] .category-card,
[data-theme="dark"] .stat-card {
  background: #111827 !important;
  border-color: #1f2d4a !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .category-card:hover { border-color: var(--primary) !important; color: #93c5fd !important; }
[data-theme="dark"] .category-card::before { background: linear-gradient(135deg, rgba(29,78,216,.15), transparent); }
[data-theme="dark"] .category-card i { color: #93c5fd; }
[data-theme="dark"] .text-muted { color: #64748b !important; }
[data-theme="dark"] .section-title { color: #f1f5f9; }

[data-theme="dark"] section.py-5.bg-white,
[data-theme="dark"] .py-4.bg-white,
[data-theme="dark"] .features-strip { background: #0d1526 !important; }

[data-theme="dark"] .navbar.bg-primary {
  background: linear-gradient(90deg, #030a1c, #0f1f50, #0f2470) !important;
}
[data-theme="dark"] .footer { background: linear-gradient(160deg, #020510, #050d2a); }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #1a2540;
  border-color: #1f2d4a;
  color: #e2e8f0;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: #1f2d4a;
  border-color: var(--primary);
  color: #e2e8f0;
  box-shadow: 0 0 0 3px rgba(29,78,216,.25);
}
[data-theme="dark"] .form-control::placeholder { color: #3d5278; }

[data-theme="dark"] .table { color: #e2e8f0; border-color: #1f2d4a; }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-hover tbody tr:hover {
  background: #1a2540 !important;
  color: #e2e8f0 !important;
}
[data-theme="dark"] .btn-light {
  background: #1a2540;
  border-color: #1f2d4a;
  color: #e2e8f0;
}
[data-theme="dark"] .btn-light:hover { background: #1f2d4a; color: #fff; }
[data-theme="dark"] .btn-outline-secondary { border-color: #1f2d4a; color: #64748b; }
[data-theme="dark"] .alert { background: #111827; border-color: #1f2d4a; color: #e2e8f0; }
[data-theme="dark"] .shadow-sm { box-shadow: 0 2px 16px rgba(0,0,0,.50) !important; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom { border-color: #1f2d4a !important; }
[data-theme="dark"] .admin-content { background: #060c1e; }
[data-theme="dark"] .admin-sidebar { background: linear-gradient(180deg, #020a25, #0b1840); }
[data-theme="dark"] .input-group-text { background: #1a2540; border-color: #1f2d4a; color: #64748b; }
[data-theme="dark"] hr { border-color: #1f2d4a; }
[data-theme="dark"] .breadcrumb-item a { color: #60a5fa; }
[data-theme="dark"] .category-pills a { border-color: #1f2d4a; color: #64748b; background: #111827; }
[data-theme="dark"] .category-pills a.active,
[data-theme="dark"] .category-pills a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

[data-theme="dark"] .brands-track-wrap::before { background: linear-gradient(to right, #060c1e, transparent); }
[data-theme="dark"] .brands-track-wrap::after  { background: linear-gradient(to left,  #060c1e, transparent); }
[data-theme="dark"] .brand-item { background: #111827; border-color: #1f2d4a; }
[data-theme="dark"] .brand-name { color: #e2e8f0; }
[data-theme="dark"] .brand-item:hover { border-color: var(--primary); background: rgba(29,78,216,.12); }

[data-theme="dark"] .feature-item:hover { background: rgba(29,78,216,.12); }
[data-theme="dark"] .product-card { background: #111827 !important; border-color: #1f2d4a !important; }
[data-theme="dark"] .product-detail-img { box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* ════════════════════════════════════════════════════════════
   8D IMMERSIVE ANIMATIONS
   ════════════════════════════════════════════════════════════ */

/* ── Page loader ────────────────────────────────────────────── */
#pageLoader {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #0f2470 0%, #050d2a 80%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .7s cubic-bezier(.4,0,.2,1), visibility .7s;
}
#pageLoader.hidden { opacity: 0; visibility: hidden; }
.loader-spinner {
  width: 70px; height: 70px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: #60a5fa;
  border-right-color: #ef4444;
  border-radius: 50%;
  animation: loaderSpin 1.1s linear infinite;
  position: relative;
}
.loader-spinner::after {
  content: '';
  position: absolute; inset: 6px;
  border: 2px solid transparent;
  border-bottom-color: rgba(96,165,250,.5);
  border-radius: 50%;
  animation: loaderSpin .8s linear infinite reverse;
}
.loader-text {
  margin-top: 22px;
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: .3em;
  text-shadow: 0 0 24px rgba(96,165,250,.6);
  animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Scroll progress bar ────────────────────────────────────── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 50%, #ef4444 100%);
  z-index: 9999;
  box-shadow: 0 0 12px rgba(29,78,216,.7);
  transition: width .12s cubic-bezier(.4,0,.2,1);
}

/* ── Magnetic button base ───────────────────────────────────── */
.magnetic {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1) !important;
  will-change: transform;
}

/* ── Counter ───────────────────────────────────────────────── */
.counter { font-variant-numeric: tabular-nums; }

/* ── Confetti dot ───────────────────────────────────────────── */
.confetti-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  will-change: transform, opacity;
}

/* ── 3D rotate on scroll ────────────────────────────────────── */
.rotate-scroll {
  transition: transform .8s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}

/* ── Text shimmer (premium look) ────────────────────────────── */
.text-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(147,197,253,1) 30%,
    rgba(255,255,255,1) 60%,
    rgba(147,197,253,1) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 3s linear infinite;
}
@keyframes shimmerSweep { to { background-position: 200% center; } }

/* ── Floating elements (subtle) ─────────────────────────────── */
.float-y { animation: floatY 4s ease-in-out infinite; }
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* ── Hero orbs become mouse-reactive (set via JS) ──────────── */
.hero-orb { transition: transform .4s cubic-bezier(.4,0,.2,1); }

/* Dark mode: keep loader colors */
[data-theme="dark"] #pageLoader {
  background: radial-gradient(ellipse at center, #050d2a 0%, #000208 80%);
}

/* ── Phone / Email tap-to-call links ───────────────────────── */
.phone-link, .email-link {
  display: inline-flex;
  align-items: center;
  transition: var(--tr-fast);
  position: relative;
}
.phone-link:hover, .email-link:hover {
  color: var(--primary) !important;
  transform: translateX(3px);
}
.phone-link:hover::after, .email-link:hover::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  right: 0;
  height: 1px;
  background: var(--primary);
  animation: linkUnderline .3s ease-out forwards;
}
@keyframes linkUnderline {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.top-bar a:hover { opacity: .85; }
.footer a:hover { color: #60a5fa !important; }
[data-theme="dark"] .phone-link:hover,
[data-theme="dark"] .email-link:hover { color: #60a5fa !important; }

/* Disable cursor: none on inputs */
input, textarea, button, select, a, [contenteditable] { cursor: pointer; }
input[type="text"], input[type="email"], input[type="tel"], textarea { cursor: text; }

/* ════════════════════════════════════════════════════════════
   ADMIN — Premium 3D upgrade
   ════════════════════════════════════════════════════════════ */

/* Sidebar — glassy gradient + glow */
.admin-sidebar {
  background: linear-gradient(180deg, #050d2a 0%, #0f2470 60%, #1d4ed8 130%) !important;
  box-shadow: 6px 0 40px rgba(15,36,112,.45);
  border-right: 1px solid rgba(255,255,255,.06);
}
.admin-sidebar::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(96,165,250,.4), transparent);
  pointer-events: none;
}
.admin-sidebar .brand {
  background: linear-gradient(90deg, transparent, rgba(96,165,250,.10), transparent);
  letter-spacing: -.01em;
}
.admin-sidebar .nav-link {
  position: relative;
}
.admin-sidebar .nav-link::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transition: var(--tr);
}
.admin-sidebar .nav-link.active::before,
.admin-sidebar .nav-link:hover::before { opacity: 1; }

/* Content area — soft gradient bg */
.admin-content {
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(29,78,216,.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(239,68,68,.05) 0%, transparent 60%),
    #f0f4ff;
}

/* Admin header bar */
.admin-content > .d-flex.justify-content-between:first-child {
  background: #fff;
  padding: 16px 22px;
  border-radius: 16px;
  box-shadow: var(--sh-sm);
  margin-bottom: 24px !important;
}
.admin-content > .d-flex.justify-content-between:first-child h5 {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Premium stat cards — 3D + gradient + hover lift */
.admin-content .stat-card {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  border: none;
  box-shadow: var(--sh-md);
  position: relative;
  overflow: hidden;
  transition: var(--tr-bounce);
  transform-style: preserve-3d;
}
.admin-content .stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--primary), #60a5fa);
  border-radius: 4px 0 0 4px;
}
.admin-content .stat-card::after {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(29,78,216,.08), transparent 70%);
  pointer-events: none;
}
.admin-content .stat-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 50px rgba(29,78,216,.18), 0 10px 24px rgba(0,0,0,.08);
}
.admin-content .stat-card .number {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -.02em;
}
.admin-content .stat-card[style*="f5a623"] .number {
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.admin-content .stat-card[style*="0dcaf0"] .number {
  background: linear-gradient(135deg, #06b6d4, #67e8f9) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* White content cards inside admin */
.admin-content .bg-white {
  border-radius: 18px !important;
  box-shadow: var(--sh-md);
  border: none !important;
  transition: var(--tr);
}
.admin-content .bg-white:hover { box-shadow: var(--sh-lg); }

/* Admin tables */
.admin-content .table {
  border-radius: 12px;
  overflow: hidden;
}
.admin-content .table thead th {
  background: linear-gradient(180deg, #f8faff, #eef2ff) !important;
  color: #475569;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 2px solid #e8edf5;
  padding: 14px 12px;
}
.admin-content .table tbody td {
  padding: 14px 12px;
  vertical-align: middle;
  border-color: #f1f5fb;
}
.admin-content .table-hover tbody tr {
  transition: var(--tr-fast);
}
.admin-content .table-hover tbody tr:hover {
  background: linear-gradient(90deg, rgba(29,78,216,.04), transparent) !important;
  transform: scale(1.005);
}

/* Admin badges */
.admin-content .badge {
  padding: 6px 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 8px;
}

/* Admin login — premium glass card */
body[style*="linear-gradient(135deg"] {
  background:
    radial-gradient(ellipse 70% 60% at 20% 30%, rgba(96,165,250,.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(239,68,68,.20) 0%, transparent 60%),
    linear-gradient(135deg, #050d2a 0%, #0f2470 60%, #1d4ed8 100%) !important;
}
.login-card {
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 16px 40px rgba(29,78,216,.30) !important;
  border-radius: 24px !important;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — Admin + all remaining white spots
   ════════════════════════════════════════════════════════════ */

[data-theme="dark"] .admin-content {
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(29,78,216,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(239,68,68,.08) 0%, transparent 60%),
    #060c1e !important;
}
[data-theme="dark"] .admin-content > .d-flex.justify-content-between:first-child {
  background: #111827;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
[data-theme="dark"] .admin-content > .d-flex.justify-content-between:first-child h5 {
  background: linear-gradient(135deg, #f1f5f9, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .admin-sidebar {
  background: linear-gradient(180deg, #020716 0%, #050d2a 60%, #0b1c52 130%) !important;
  box-shadow: 6px 0 40px rgba(0,0,0,.7);
}
[data-theme="dark"] .admin-content .stat-card {
  background: #111827;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
[data-theme="dark"] .admin-content .stat-card:hover {
  box-shadow: 0 24px 50px rgba(29,78,216,.30), 0 10px 24px rgba(0,0,0,.5);
}
[data-theme="dark"] .admin-content .table thead th {
  background: linear-gradient(180deg, #161f38, #111827) !important;
  color: #94a3b8;
  border-bottom-color: #1f2d4a;
}
[data-theme="dark"] .admin-content .table tbody td { border-color: #1f2d4a; }
[data-theme="dark"] .admin-content .table-hover tbody tr:hover {
  background: linear-gradient(90deg, rgba(29,78,216,.15), transparent) !important;
}
[data-theme="dark"] .admin-content .bg-white { background: #111827 !important; }
[data-theme="dark"] .admin-content .bg-white:hover { box-shadow: 0 16px 48px rgba(0,0,0,.6); }

/* Login dark */
[data-theme="dark"] .login-card {
  background: rgba(17,24,39,.92) !important;
  border-color: rgba(96,165,250,.15);
  color: #e2e8f0;
}
[data-theme="dark"] .login-card .text-muted { color: #64748b !important; }

/* Fix every lingering white surface */
[data-theme="dark"] .table { background: transparent !important; }
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { background-color: transparent !important; color: #e2e8f0; }
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light th,
[data-theme="dark"] .table-light td {
  background: #161f38 !important;
  color: #94a3b8 !important;
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover,
[data-theme="dark"] .tooltip-inner,
[data-theme="dark"] .offcanvas { background: #111827 !important; color: #e2e8f0; border-color: #1f2d4a; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: #1f2d4a; }
[data-theme="dark"] .badge.bg-light { background: #1a2540 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .badge.bg-warning { background: #92400e !important; color: #fde68a !important; }
[data-theme="dark"] .badge.bg-info    { background: #155e75 !important; color: #a5f3fc !important; }
[data-theme="dark"] .badge.bg-success { background: #14532d !important; color: #bbf7d0 !important; }
[data-theme="dark"] .badge.bg-danger  { background: #7f1d1d !important; color: #fecaca !important; }
[data-theme="dark"] .btn-close { filter: invert(1) brightness(1.5); }
[data-theme="dark"] .alert-success { background: #052e1a !important; color: #86efac !important; border-color: #14532d !important; }
[data-theme="dark"] .alert-danger  { background: #2e0606 !important; color: #fca5a5 !important; border-color: #7f1d1d !important; }
[data-theme="dark"] .alert-info    { background: #052e36 !important; color: #67e8f9 !important; border-color: #155e75 !important; }
[data-theme="dark"] .alert-warning { background: #3a2706 !important; color: #fde68a !important; border-color: #92400e !important; }

/* Bootstrap card / list group / pagination dark coverage */
[data-theme="dark"] .card,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .page-link,
[data-theme="dark"] .pagination .page-link {
  background: #111827 !important;
  color: #e2e8f0 !important;
  border-color: #1f2d4a !important;
}
[data-theme="dark"] .page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Section/page backgrounds — kill any pure white that slipped through */
[data-theme="dark"] .bg-light { background: #0d1526 !important; }
[data-theme="dark"] body main,
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid { background: transparent; }
[data-theme="dark"] section { background: transparent; }
[data-theme="dark"] .checkout-form,
[data-theme="dark"] .cart-summary { background: #111827 !important; color: #e2e8f0; }

/* Fix Bootstrap text utilities */
[data-theme="dark"] .text-dark { color: #e2e8f0 !important; }
[data-theme="dark"] .text-body { color: #e2e8f0 !important; }
[data-theme="dark"] .text-black { color: #f1f5f9 !important; }

/* Inputs grouped */
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-select option {
  background: #1a2540;
  color: #e2e8f0;
}

/* Top bar admin reveal token */
.admin-content .text-muted { color: #64748b !important; }
[data-theme="dark"] .admin-content .text-muted { color: #64748b !important; }