/* ==========================================================================
   HEVELY HONY — عسل بهشتی
   تم: کهکشانی + عسل (Cosmic Honey)
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* -- Color tokens -- */
  --void:        #06040f;
  --void-2:      #0a0620;
  --deep:        #0d0821;
  --deep-2:      #150c30;
  --nebula:      #2a1458;
  --nebula-2:    #4c2a8c;
  --nebula-glow: rgba(122, 74, 214, .35);

  --honey:       #e8a33d;
  --honey-light: #f4c878;
  --honey-deep:  #b97a22;
  --honey-glow:  rgba(232, 163, 61, .28);

  --star:        #f6f2ff;
  --star-dim:    rgba(246, 242, 255, .64);
  --star-faint:  rgba(246, 242, 255, .38);

  --glass:        rgba(255, 255, 255, .045);
  --glass-2:      rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .1);
  --glass-border-hi: rgba(232, 163, 61, .4);

  --danger:  #e8615f;
  --success: #6fbf8b;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-full: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior: smooth; }

body{
  font-family: 'Vazirmatn', -apple-system, sans-serif;
  background: var(--void);
  color: var(--star);
  line-height: 1.75;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--honey); color: var(--void); }

::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: var(--void); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--honey), var(--nebula-2)); border-radius: 8px; }

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input{ font-family: inherit; }

:focus-visible{ outline: 2px solid var(--honey); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   STARFIELD CANVAS (fixed cosmic backdrop, shared by every page)
   ========================================================================== */
#starfield{
  position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(76, 42, 140, .35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 30%, rgba(232, 163, 61, .12), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(42, 20, 88, .5), transparent 60%),
    var(--void);
}

.orbit-decor{ position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.orbit-ring{
  position: absolute; border: 1px solid rgba(232, 163, 61, .08);
  border-radius: 50%; top: 50%; left: 50%;
}
.orbit-ring.r1{ width: 900px; height: 900px; margin: -450px 0 0 -450px; animation: spin 140s linear infinite; }
.orbit-ring.r2{ width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-color: rgba(122,74,214,.1); animation: spin 200s linear infinite reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  padding: 1.1rem 6%;
  display: flex; align-items: center; justify-content: space-between;
  transition: var(--ease) .4s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled{
  background: rgba(6, 4, 15, .78);
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--glass-border);
}
.brand{ display: flex; align-items: center; gap: .7rem; }
.brand-mark{
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--honey-light), var(--honey) 55%, var(--honey-deep) 100%);
  box-shadow: 0 0 22px var(--honey-glow), inset -4px -4px 8px rgba(0,0,0,.35);
  position: relative; flex-shrink: 0;
}
.brand-mark::after{
  content: ''; position: absolute; inset: -7px;
  border: 1px solid rgba(232,163,61,.35); border-radius: 50%;
}
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .en{
  font-family: 'Vazirmatn', sans-serif; font-weight: 800; font-size: 1.15rem;
  letter-spacing: .04em; color: var(--star);
  background: linear-gradient(90deg, var(--star), var(--honey-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand-text .fa{ font-size: .72rem; color: var(--star-faint); margin-top: 2px; }

.navbar-menu{ display: flex; align-items: center; gap: 2.4rem; }
.navbar-menu a{
  font-size: .95rem; color: var(--star-dim); position: relative; padding: .3rem 0;
  transition: color .3s;
}
.navbar-menu a:hover{ color: var(--honey-light); }
.navbar-menu a::after{
  content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 1px;
  background: var(--honey); transition: width .35s var(--ease);
}
.navbar-menu a:hover::after{ width: 100%; }

.navbar-actions{ display: flex; align-items: center; gap: .8rem; }
.mobile-toggle{ display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.mobile-toggle span{ width: 22px; height: 2px; background: var(--star); transition: .3s; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.9rem; border-radius: var(--r-full);
  font-size: .95rem; font-weight: 600; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  position: relative; overflow: hidden;
}
.btn-honey{
  background: linear-gradient(135deg, var(--honey-light), var(--honey) 60%, var(--honey-deep));
  color: #221305; box-shadow: 0 8px 30px var(--honey-glow);
}
.btn-honey:hover{ transform: translateY(-2px); box-shadow: 0 12px 40px var(--honey-glow); }
.btn-ghost{
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--star);
}
.btn-ghost:hover{ border-color: var(--glass-border-hi); background: var(--glass-2); }
.btn-block{ width: 100%; }
.btn[disabled]{ opacity: .5; pointer-events: none; }

.btn-honey .ripple, .btn-ghost .ripple{
  position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.35);
  animation: rip .6s ease-out; pointer-events: none;
}
@keyframes rip{ to{ transform: scale(4); opacity: 0; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height: 100vh; display: flex; align-items: center;
  padding: 8rem 6% 4rem; gap: 4rem; position: relative;
}
.hero-content{ flex: 1; max-width: 620px; }
.hero-kicker{
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--honey-light); font-size: .85rem; margin-bottom: 1.6rem;
}
.hero-kicker .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 10px var(--honey); }
.hero h1{
  font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight: 800; line-height: 1.28;
  margin-bottom: 1.5rem; color: var(--star);
}
.hero h1 em{
  font-style: normal;
  background: linear-gradient(120deg, var(--honey-light), var(--honey));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p{ font-size: 1.08rem; color: var(--star-dim); max-width: 46ch; margin-bottom: 2.3rem; }
.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-stats{ display: flex; gap: 2.4rem; flex-wrap: wrap; }
.hero-stats div strong{ display: block; font-size: 1.6rem; font-weight: 800; color: var(--honey-light); }
.hero-stats div span{ font-size: .84rem; color: var(--star-faint); }

.hero-visual{ flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 460px; }
.orbit-system{ position: relative; width: 420px; height: 420px; }
.orbit-system .ring{
  position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(232,163,61,.25);
}
.orbit-system .ring.r-out{ animation: spin 40s linear infinite; }
.orbit-system .ring.r-mid{ inset: 45px; border-color: rgba(122,74,214,.3); animation: spin 26s linear infinite reverse; }
.orbit-system .ring.r-in{ inset: 90px; border-color: rgba(246,242,255,.12); }
.orbit-system .moon{
  position: absolute; width: 14px; height: 14px; border-radius: 50%; top: -7px; left: calc(50% - 7px);
  background: radial-gradient(circle at 35% 30%, #fff, var(--honey));
  box-shadow: 0 0 14px var(--honey);
}
.jar{
  position: absolute; inset: 0; margin: auto; width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  animation: float 6s ease-in-out infinite;
}
.jar svg{ width: 100%; height: 100%; filter: drop-shadow(0 20px 50px rgba(232,163,61,.35)); }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }

/* ==========================================================================
   CONSTELLATION DIVIDER
   ========================================================================== */
.constellation{ display: flex; justify-content: center; padding: 2.5rem 0; opacity: .5; }

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section{ padding: 6rem 6%; position: relative; }
.section-head{ max-width: 640px; margin-bottom: 3.2rem; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; margin-bottom: .9rem; }
.section-head p{ color: var(--star-dim); font-size: 1.03rem; }
.section-head .tag{ color: var(--honey-light); font-size: .9rem; margin-bottom: .8rem; display: block; }

.animate-on-scroll{ opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.animate-on-scroll.visible{ opacity: 1; transform: none; }

/* ==========================================================================
   PROCESS STEPS (real sequence -> numbered)
   ========================================================================== */
.steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.step-card{
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md);
  padding: 1.8rem; position: relative;
}
.step-card .num{
  font-size: 2.2rem; font-weight: 800; color: transparent;
  -webkit-text-stroke: 1.5px var(--honey); opacity: .55; line-height: 1; margin-bottom: .9rem;
}
.step-card h3{ font-size: 1.05rem; margin-bottom: .5rem; }
.step-card p{ color: var(--star-faint); font-size: .9rem; }

/* ==========================================================================
   PRODUCT GRID
   ========================================================================== */
.products-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.pcard{
  background: linear-gradient(160deg, var(--glass-2), var(--glass));
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  padding: 1.6rem; position: relative; overflow: hidden; transition: border-color .4s, transform .4s var(--ease);
}
.pcard::before{
  content: ''; position: absolute; top: -60%; left: -20%; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--nebula-glow), transparent 70%); pointer-events: none;
}
.pcard:hover{ transform: translateY(-6px); border-color: var(--glass-border-hi); }
.pcard .hex{
  position: absolute; top: 1.4rem; left: 1.4rem; width: 34px; height: 30px;
  background: var(--honey); opacity: .12;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.pcard .pmedia{
  height: 170px; border-radius: var(--r-md); margin-bottom: 1.2rem;
  background: radial-gradient(circle at 30% 30%, rgba(232,163,61,.28), rgba(42,20,88,.5));
  display: flex; align-items: center; justify-content: center;
}
.pcard .pmedia svg{ width: 76px; height: 76px; }
.pcard .badge{
  position: absolute; top: 1.4rem; left: 1.4rem; background: var(--honey); color: #221305;
  font-size: .72rem; font-weight: 700; padding: .3rem .7rem; border-radius: var(--r-full);
}
.pcard h3{ font-size: 1.12rem; margin-bottom: .4rem; }
.pcard .desc{ color: var(--star-faint); font-size: .87rem; margin-bottom: 1.1rem; min-height: 2.6em; }
.pcard .prow{ display: flex; align-items: center; justify-content: space-between; }
.pcard .price{ font-weight: 800; color: var(--honey-light); font-size: 1.15rem; }
.pcard .price small{ color: var(--star-faint); font-weight: 400; font-size: .78rem; margin-right: .3rem; }
.pcard .addbtn{
  width: 42px; height: 42px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center; transition: .3s;
}
.pcard .addbtn:hover{ background: var(--honey); border-color: var(--honey); }
.pcard .addbtn:hover svg{ stroke: #221305; }
.pcard .addbtn svg{ width: 18px; height: 18px; stroke: var(--star); transition: .3s; }

/* ==========================================================================
   TRUST / TESTIMONIAL STRIP
   ========================================================================== */
.trust-strip{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.trust-card{ border-radius: var(--r-md); padding: 1.8rem; background: var(--glass); border: 1px solid var(--glass-border); }
.trust-card .stars{ color: var(--honey); font-size: .9rem; margin-bottom: .9rem; letter-spacing: 2px; }
.trust-card p{ color: var(--star-dim); font-size: .93rem; margin-bottom: 1.1rem; }
.trust-card .who{ display: flex; align-items: center; gap: .7rem; }
.trust-card .avatar{ width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--nebula-2), var(--honey)); }
.trust-card .who strong{ font-size: .87rem; display: block; }
.trust-card .who span{ font-size: .76rem; color: var(--star-faint); }

/* ==========================================================================
   NEWSLETTER / CTA BAND
   ========================================================================== */
.cta-band{
  margin: 2rem 6%; padding: 3.4rem 3rem; border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(42,20,88,.7), rgba(232,163,61,.14));
  border: 1px solid var(--glass-border-hi);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.cta-band h3{ font-size: 1.5rem; margin-bottom: .5rem; }
.cta-band p{ color: var(--star-dim); max-width: 40ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{ padding: 4.5rem 6% 2rem; border-top: 1px solid var(--glass-border); margin-top: 3rem; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.footer-heading{ font-size: .92rem; margin-bottom: 1.1rem; color: var(--star); }
.footer-links li{ margin-bottom: .7rem; }
.footer-links a{ color: var(--star-faint); font-size: .88rem; transition: color .3s; }
.footer-links a:hover{ color: var(--honey-light); }
.footer-about p{ color: var(--star-faint); font-size: .88rem; max-width: 34ch; margin-top: .8rem; }
.footer-bottom{
  display: flex; justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--glass-border);
  font-size: .82rem; color: var(--star-faint); flex-wrap: wrap; gap: .8rem;
}

/* ==========================================================================
   AUTH / OTP CARD (shared shell for login/verify)
   ========================================================================== */
.auth-shell{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 1.5rem 3rem; }
.auth-card{
  width: 100%; max-width: 420px; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); padding: 2.6rem 2.2rem; backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  position: relative;
}
.auth-card::before{
  content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--honey), transparent);
}
.auth-head{ text-align: center; margin-bottom: 2rem; }
.auth-head .brand-mark{ margin: 0 auto 1.1rem; }
.auth-head h1{ font-size: 1.35rem; font-weight: 800; margin-bottom: .5rem; }
.auth-head p{ color: var(--star-faint); font-size: .87rem; }

.field{ margin-bottom: 1.3rem; }
.field label{ display: block; font-size: .84rem; color: var(--star-dim); margin-bottom: .55rem; }
.field input{
  width: 100%; padding: .95rem 1.1rem; border-radius: var(--r-sm);
  background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--star);
  font-size: 1rem; transition: border-color .3s, background .3s;
}
.field input:focus{ border-color: var(--honey); background: rgba(255,255,255,.06); }
.field .hint{ font-size: .76rem; color: var(--star-faint); margin-top: .5rem; }

.otp-row{ display: flex; gap: .6rem; justify-content: space-between; direction: ltr; margin-bottom: .6rem; }
.otp-row input{
  width: 100%; aspect-ratio: 1; text-align: center; font-size: 1.4rem; font-weight: 700;
  border-radius: var(--r-sm); background: rgba(255,255,255,.04); border: 1px solid var(--glass-border); color: var(--star);
  transition: border-color .3s, transform .2s;
}
.otp-row input:focus{ border-color: var(--honey); transform: translateY(-2px); }
.otp-row input.filled{ border-color: var(--glass-border-hi); }

.otp-timer{ text-align: center; font-size: .84rem; color: var(--star-faint); margin: 1.1rem 0 1.6rem; }
.otp-timer button{ color: var(--honey-light); font-weight: 600; }
.otp-timer button[disabled]{ color: var(--star-faint); }

.demo-note{
  margin-top: 1.4rem; padding: .9rem 1rem; border-radius: var(--r-sm);
  background: rgba(232,163,61,.08); border: 1px dashed rgba(232,163,61,.35);
  font-size: .8rem; color: var(--honey-light); text-align: center;
}

.toast{
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--deep-2); border: 1px solid var(--glass-border-hi); border-radius: var(--r-full);
  padding: .9rem 1.6rem; font-size: .87rem; z-index: 999; opacity: 0; pointer-events: none;
  transition: .4s var(--ease); box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

.auth-switch{ text-align: center; margin-top: 1.6rem; font-size: .87rem; color: var(--star-faint); }
.auth-switch a{ color: var(--honey-light); font-weight: 600; }

/* ==========================================================================
   ADMIN SHELL
   ========================================================================== */
.admin-body{ display: flex; min-height: 100vh; }
.admin-sidebar{
  width: 264px; flex-shrink: 0; background: var(--void-2); border-left: 1px solid var(--glass-border);
  padding: 1.6rem 1.2rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; z-index: 100;
}
.admin-brand{ display: flex; align-items: center; gap: .7rem; padding: .6rem .4rem 1.6rem; }
.admin-nav{ display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.admin-nav a{
  display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: var(--r-sm);
  color: var(--star-dim); font-size: .92rem; transition: .25s;
}
.admin-nav a svg{ width: 18px; height: 18px; opacity: .8; flex-shrink: 0; }
.admin-nav a:hover{ background: var(--glass); color: var(--star); }
.admin-nav a.active{ background: linear-gradient(90deg, rgba(232,163,61,.18), transparent); color: var(--honey-light); border-inline-start: 2px solid var(--honey); }
.admin-nav .group-label{ font-size: .74rem; color: var(--star-faint); margin: 1.1rem .9rem .4rem; }
.admin-user{
  display: flex; align-items: center; gap: .7rem; padding: .8rem; border-radius: var(--r-sm);
  background: var(--glass); border: 1px solid var(--glass-border); margin-top: 1rem;
}
.admin-user .avatar{ width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--nebula-2), var(--honey)); flex-shrink: 0; }
.admin-user strong{ font-size: .84rem; display: block; }
.admin-user span{ font-size: .74rem; color: var(--star-faint); }
.admin-user button{ margin-inline-start: auto; color: var(--star-faint); }

.admin-main{ flex: 1; min-width: 0; }
.admin-topbar{
  position: sticky; top: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2rem; background: rgba(6,4,15,.7); backdrop-filter: blur(16px); border-bottom: 1px solid var(--glass-border);
}
.admin-topbar h1{ font-size: 1.25rem; font-weight: 800; }
.admin-topbar .path{ font-size: .8rem; color: var(--star-faint); margin-top: .2rem; }
.admin-content{ padding: 2rem; }

.stat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-bottom: 2rem; }
.stat-card{
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 1.5rem;
  position: relative; overflow: hidden;
}
.stat-card::after{
  content: ''; position: absolute; top: -40%; right: -20%; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, var(--honey-glow), transparent 70%);
}
.stat-card .label{ font-size: .83rem; color: var(--star-faint); margin-bottom: .7rem; }
.stat-card .value{ font-size: 1.7rem; font-weight: 800; margin-bottom: .5rem; }
.stat-card .delta{ font-size: .78rem; }
.stat-card .delta.up{ color: var(--success); }
.stat-card .delta.down{ color: var(--danger); }

.panel{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 1.6rem; margin-bottom: 1.6rem; }
.panel-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; gap: 1rem; flex-wrap: wrap; }
.panel-head h2{ font-size: 1.05rem; font-weight: 700; }

.bars{ display: flex; align-items: flex-end; gap: .9rem; height: 180px; }
.bars .bar{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: .6rem; justify-content: flex-end; height: 100%; }
.bars .bar .fill{
  width: 100%; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--honey-light), var(--honey-deep));
  transition: height 1s var(--ease);
}
.bars .bar .lbl{ font-size: .74rem; color: var(--star-faint); }

table{ width: 100%; border-collapse: collapse; }
th, td{ padding: .9rem .7rem; text-align: right; font-size: .87rem; border-bottom: 1px solid var(--glass-border); }
th{ color: var(--star-faint); font-weight: 600; font-size: .78rem; }
tr:last-child td{ border-bottom: none; }
.row-thumb{ width: 38px; height: 38px; border-radius: 9px; background: radial-gradient(circle at 30% 30%, var(--honey-light), var(--nebula)); flex-shrink: 0; }
.cell-prod{ display: flex; align-items: center; gap: .7rem; }
.pill{ font-size: .74rem; padding: .3rem .7rem; border-radius: var(--r-full); display: inline-block; }
.pill.ok{ background: rgba(111,191,139,.15); color: var(--success); }
.pill.pending{ background: rgba(232,163,61,.15); color: var(--honey-light); }
.pill.cancel{ background: rgba(232,97,95,.15); color: var(--danger); }
.icon-btn{ width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-2); border: 1px solid var(--glass-border); transition: .25s; }
.icon-btn:hover{ border-color: var(--glass-border-hi); }
.icon-btn svg{ width: 15px; height: 15px; }
.actions-cell{ display: flex; gap: .5rem; }

.modal-backdrop{
  position: fixed; inset: 0; background: rgba(6,4,15,.7); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1.5rem;
}
.modal-backdrop.show{ display: flex; }
.modal{
  width: 100%; max-width: 480px; background: var(--deep-2); border: 1px solid var(--glass-border-hi);
  border-radius: var(--r-lg); padding: 2rem; max-height: 85vh; overflow-y: auto;
}
.modal h2{ font-size: 1.1rem; margin-bottom: 1.4rem; }
.modal .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-actions{ display: flex; gap: .8rem; margin-top: 1.4rem; }

.admin-mobile-toggle{ display: none; }

/* ==========================================================================
   HERO SLIDER (real uploaded images)
   ========================================================================== */
.hero-slider{
  position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 6%;
}
.slider-frame{
  position: relative; border-radius: var(--r-lg); overflow: hidden; height: 62vh; min-height: 320px; max-height: 560px;
  border: 1px solid var(--glass-border); box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.slide{
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); display: flex; align-items: flex-end;
}
.slide.active{ opacity: 1; z-index: 2; }
.slide img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  filter: saturate(1.05);
}
.slide::before{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6,4,15,.92) 0%, rgba(6,4,15,.35) 55%, rgba(6,4,15,.05) 100%);
}
.slide-caption{ position: relative; z-index: 1; padding: 2.4rem 2.6rem; max-width: 560px; }
.slide-caption .tag{ color: var(--honey-light); font-size: .85rem; display: block; margin-bottom: .6rem; }
.slide-caption h2{ font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800; margin-bottom: .6rem; }
.slide-caption p{ color: var(--star-dim); font-size: .95rem; margin-bottom: 1.2rem; }

.slider-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; background: rgba(6,4,15,.55); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center; transition: .3s;
  backdrop-filter: blur(8px);
}
.slider-arrow:hover{ border-color: var(--glass-border-hi); background: rgba(6,4,15,.8); }
.slider-arrow.prev{ right: 1rem; }
.slider-arrow.next{ left: 1rem; }
.slider-arrow svg{ width: 18px; height: 18px; }

.slider-dots{ position: absolute; bottom: 1.1rem; right: 50%; transform: translateX(50%); z-index: 3; display: flex; gap: .5rem; }
.slider-dots button{ width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: .3s; }
.slider-dots button.active{ width: 22px; border-radius: 5px; background: var(--honey); }

/* ==========================================================================
   ADMIN FILE INPUT / IMAGE PREVIEW
   ========================================================================== */
.file-drop{
  border: 1px dashed var(--glass-border-hi); border-radius: var(--r-md);
  padding: 1.4rem; text-align: center; cursor: pointer; position: relative;
  background: rgba(255,255,255,.02); transition: .3s;
}
.file-drop:hover{ background: rgba(255,255,255,.04); }
.file-drop input[type=file]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop .drop-label{ font-size: .85rem; color: var(--star-dim); }
.file-drop .drop-hint{ font-size: .76rem; color: var(--star-faint); margin-top: .3rem; }
.img-preview{
  width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--r-sm); margin-bottom: .8rem;
  border: 1px solid var(--glass-border); display: none;
}
.img-preview.show{ display: block; }
.thumb-img{ width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--nebula); }
.alert{ padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .87rem; margin-bottom: 1.2rem; }
.alert-error{ background: rgba(232,97,95,.12); border: 1px solid rgba(232,97,95,.35); color: #ffb3b1; }
.alert-success{ background: rgba(111,191,139,.12); border: 1px solid rgba(111,191,139,.35); color: #a6e3bd; }
.alert-info{ background: rgba(232,163,61,.1); border: 1px dashed rgba(232,163,61,.4); color: var(--honey-light); }

/* ==========================================================================
   CART BADGE / NAV ICON
   ========================================================================== */
.icon-link{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-border); transition: .3s; }
.icon-link:hover{ border-color: var(--glass-border-hi); background: var(--glass-2); }
.icon-link svg{ width: 19px; height: 19px; }
.cart-badge{
  position: absolute; top: -4px; left: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--honey); color: #221305; font-size: .68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--void);
}

/* ==========================================================================
   FILTER BAR (search + category)
   ========================================================================== */
.filter-bar{ display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-bar input, .filter-bar select{
  padding: .8rem 1.1rem; border-radius: var(--r-full); background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--star); font-size: .9rem;
}
.filter-bar input{ flex: 1; min-width: 200px; }
.filter-bar select{ min-width: 150px; }
.filter-bar input:focus, .filter-bar select:focus{ border-color: var(--honey); }
.filter-chip{
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: var(--r-full);
  background: rgba(232,163,61,.12); border: 1px solid rgba(232,163,61,.35); font-size: .82rem; color: var(--honey-light);
}
.filter-chip a{ color: var(--star-faint); font-weight: 700; }

/* ==========================================================================
   CART / CHECKOUT TABLES
   ========================================================================== */
.cart-table{ width: 100%; border-collapse: collapse; }
.cart-table td{ padding: 1.1rem .7rem; border-bottom: 1px solid var(--glass-border); vertical-align: middle; }
.cart-table tr:last-child td{ border-bottom: none; }
.cart-prod{ display: flex; align-items: center; gap: 1rem; }
.cart-prod .thumb{ width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; background: radial-gradient(circle at 30% 30%, var(--honey-light), var(--nebula)); flex-shrink: 0; }
.cart-prod strong{ display: block; font-size: .95rem; margin-bottom: .2rem; }
.cart-prod span{ font-size: .8rem; color: var(--star-faint); }

.qty-stepper{ display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--glass-border); border-radius: var(--r-full); overflow: hidden; }
.qty-stepper button{ width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--star-dim); transition: .25s; }
.qty-stepper button:hover{ background: var(--glass-2); color: var(--honey-light); }
.qty-stepper input{ width: 40px; text-align: center; background: transparent; border: none; color: var(--star); font-size: .92rem; }

.cart-summary{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 1.6rem; position: sticky; top: 6rem; }
.cart-summary .row{ display: flex; justify-content: space-between; font-size: .92rem; color: var(--star-dim); margin-bottom: .8rem; }
.cart-summary .row.total{ color: var(--star); font-weight: 800; font-size: 1.1rem; border-top: 1px solid var(--glass-border); padding-top: 1rem; margin-top: .4rem; }
.cart-summary .row.total .price-val{ color: var(--honey-light); }

.checkout-grid{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: start; }
.empty-state{ text-align: center; padding: 5rem 1rem; color: var(--star-faint); }
.empty-state svg{ width: 56px; height: 56px; margin-bottom: 1.2rem; opacity: .5; }

/* ==========================================================================
   ORDER STATUS PAGES (success / failed)
   ========================================================================== */
.status-shell{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6rem 1.5rem 3rem; text-align: center; }
.status-card{ max-width: 460px; width: 100%; }
.status-icon{ width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1.6rem; display: flex; align-items: center; justify-content: center; }
.status-icon.ok{ background: radial-gradient(circle, rgba(111,191,139,.25), transparent 70%); border: 1px solid rgba(111,191,139,.4); }
.status-icon.fail{ background: radial-gradient(circle, rgba(232,97,95,.25), transparent 70%); border: 1px solid rgba(232,97,95,.4); }
.status-icon svg{ width: 38px; height: 38px; }
.status-card h1{ font-size: 1.5rem; font-weight: 800; margin-bottom: .8rem; }
.status-card p{ color: var(--star-dim); margin-bottom: 1.8rem; }
.status-meta{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-md); padding: 1.2rem; margin-bottom: 1.8rem; text-align: right; font-size: .87rem; }
.status-meta .row{ display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--glass-border); color: var(--star-dim); }
.status-meta .row:last-child{ border-bottom: none; }
.status-actions{ display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   SINGLE PRODUCT PAGE
   ========================================================================== */
.product-detail{ display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.product-detail .media{
  aspect-ratio: 1; border-radius: var(--r-lg); background: radial-gradient(circle at 30% 30%, rgba(232,163,61,.28), rgba(42,20,88,.5));
  display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--glass-border);
}
.product-detail .media svg{ width: 40%; height: 40%; }
.product-detail .media img{ width: 100%; height: 100%; object-fit: cover; }
.product-detail .info .cat-tag{ color: var(--honey-light); font-size: .85rem; margin-bottom: .8rem; display: block; }
.product-detail .info h1{ font-size: 2rem; font-weight: 800; margin-bottom: 1rem; }
.product-detail .info .price-big{ font-size: 1.7rem; font-weight: 800; color: var(--honey-light); margin-bottom: 1.4rem; }
.product-detail .info .price-big small{ color: var(--star-faint); font-weight: 400; font-size: .85rem; }
.product-detail .info .desc{ color: var(--star-dim); margin-bottom: 1.8rem; line-height: 2; }
.product-detail .info .stock-line{ font-size: .88rem; margin-bottom: 1.6rem; }
.product-detail .buy-row{ display: flex; gap: 1rem; align-items: center; }

.related-strip{ margin-top: 4rem; }

/* ==========================================================================
   ORDER DETAIL (customer + admin)
   ========================================================================== */
.order-meta-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 1.6rem; }
.order-meta-grid .item{ background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-sm); padding: 1rem 1.2rem; }
.order-meta-grid .item .k{ font-size: .78rem; color: var(--star-faint); margin-bottom: .3rem; }
.order-meta-grid .item .v{ font-size: .92rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .hero{ flex-direction: column; text-align: center; padding-top: 7rem; }
  .hero-content{ max-width: 100%; }
  .hero-actions, .hero-stats{ justify-content: center; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .products-grid{ grid-template-columns: repeat(2, 1fr); }
  .trust-strip{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .stat-grid{ grid-template-columns: repeat(2, 1fr); }
  .admin-sidebar{ position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform .35s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.5); }
  .admin-sidebar.open{ transform: translateX(0); }
  .admin-mobile-toggle{ display: inline-flex; }
  .checkout-grid{ grid-template-columns: 1fr; }
  .cart-summary{ position: static; }
  .product-detail{ grid-template-columns: 1fr; }
  .order-meta-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .navbar-menu{ display: none; }
  .mobile-toggle{ display: flex; }
  .steps{ grid-template-columns: 1fr; }
  .products-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .cta-band{ flex-direction: column; text-align: center; }
  .stat-grid{ grid-template-columns: 1fr; }
  .modal .field-row{ grid-template-columns: 1fr; }
  .orbit-system{ width: 300px; height: 300px; }
  .otp-row input{ font-size: 1.1rem; }
  .cart-prod{ flex-direction: column; align-items: flex-start; gap: .5rem; }
  .status-meta .row{ flex-direction: column; gap: .2rem; }
}