/* ==========================================================================
   VANTIX — Stylesheet
   Fonts, base theme, glass/UI utilities, drawers, checkout stepper, micro-interactions
   ========================================================================== */

@font-face {
  font-family: 'Kalameh';
  src: url('./fonts/Kalameh-Thin.woff2') format('woff2'),
       url('./fonts/Kalameh-Thin.ttf') format('truetype');
  font-weight: 100 300;
  font-display: swap;
}
@font-face {
  font-family: 'Kalameh';
  src: url('./fonts/Kalameh-Regular.woff2') format('woff2'),
       url('./fonts/Kalameh-Regular.ttf') format('truetype');
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: 'Kalameh';
  src: url('./fonts/Kalameh-Bold.woff2') format('woff2'),
       url('./fonts/Kalameh-Bold.ttf') format('truetype');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'Kalameh';
  src: url('./fonts/Kalameh-Black.woff2') format('woff2'),
       url('./fonts/Kalameh-Black.ttf') format('truetype');
  font-weight: 800 900;
  font-display: swap;
}

  * { font-family: 'Kalameh', 'Vazirmatn', sans-serif; }
  html { scroll-behavior: smooth; }
  body {
    background-color: #081210;
    letter-spacing: -.01em;
  }
  .font-thin-kalameh { font-family: 'Kalameh', 'Vazirmatn', sans-serif; font-weight: 200; }
  .font-black-kalameh { font-family: 'Kalameh', 'Vazirmatn', sans-serif; font-weight: 900; }

  /* ============ تنظیم اوزان کالامه در سراسر سایت ============ */
  /* عنوان‌ها و قیمت‌ها: وزن بولد/بلک واقعی فونت کالامه */
  .font-black { font-weight: 900; }
  .font-extrabold { font-weight: 800; }
  .font-bold { font-weight: 700; }
  /* متن‌های توضیحی و کم‌رنگ: وزن نازک/لایت واقعی فونت کالامه */
  p.text-teal-100\/60, p.text-teal-100\/50, p.text-teal-100\/40, p.text-teal-100\/30,
  span.text-teal-100\/60, span.text-teal-100\/50, span.text-teal-100\/40, span.text-teal-100\/30,
  div.text-teal-100\/60, div.text-teal-100\/50, div.text-teal-100\/40, div.text-teal-100\/30 {
    font-weight: 300;
  }

  /* ============ سیستم کشوی کناری (منو و سبد خرید) ============ */
  .drawer-root {
    transition: visibility 0s linear .6s;
  }
  .drawer-root.drawer-open { transition: visibility 0s linear 0s; }

  .drawer-overlay {
    background: rgba(4, 12, 10, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .drawer-root.drawer-open .drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Panel: GPU-accelerated slide, no reliance on Tailwind's translate-x-full anymore.
     Both drawers share this base; .drawer-panel--right flips direction for the cart.
     Custom spring-like bezier (slight overshoot on entry, no overshoot on exit) for a native-app feel. */
  .drawer-panel {
    max-width: 350px;
    box-shadow: -24px 0 60px rgba(0,0,0,.35);
    transform: translate3d(100%, 0, 0);
    transition: transform .62s cubic-bezier(0.19, 1.08, 0.24, 1.01);
    will-change: transform;
    backface-visibility: hidden;
  }
  .drawer-panel--right {
    box-shadow: 24px 0 60px rgba(0,0,0,.35);
    transform: translate3d(-100%, 0, 0);
  }
  .drawer-root.drawer-open .drawer-panel {
    transition: transform .62s cubic-bezier(0.19, 1.08, 0.24, 1.01);
    transform: translate3d(0, 0, 0);
  }
  .drawer-root:not(.drawer-open) .drawer-panel {
    transition: transform .45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body.drawer-locked {
    overflow: hidden;
  }
  body.drawer-locked #siteHeader,
  body.drawer-locked main,
  body.drawer-locked footer {
    filter: blur(2px) saturate(.85);
    transition: filter .5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #siteHeader, main, footer { transition: filter .5s cubic-bezier(0.16, 1, 0.3, 1); }

  /* ---- Staggered entrance for menu/cart items ---- */
  .drawer-stagger-item {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(0, 22px, 0) scale(.96);
    transition: opacity .5s cubic-bezier(0.19, 1.08, 0.24, 1.01),
                transform .5s cubic-bezier(0.19, 1.08, 0.24, 1.01),
                filter .4s ease-out;
    transition-delay: 0s;
  }
  .drawer-root.drawer-open .drawer-stagger-item {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
  /* Stagger step: ~55ms per item via CSS custom property, up to 14 items covered */
  .drawer-stagger-item:nth-child(1)  { --stagger-i: 1; }
  .drawer-stagger-item:nth-child(2)  { --stagger-i: 2; }
  .drawer-stagger-item:nth-child(3)  { --stagger-i: 3; }
  .drawer-stagger-item:nth-child(4)  { --stagger-i: 4; }
  .drawer-stagger-item:nth-child(5)  { --stagger-i: 5; }
  .drawer-stagger-item:nth-child(6)  { --stagger-i: 6; }
  .drawer-stagger-item:nth-child(7)  { --stagger-i: 7; }
  .drawer-stagger-item:nth-child(8)  { --stagger-i: 8; }
  .drawer-stagger-item:nth-child(9)  { --stagger-i: 9; }
  .drawer-stagger-item:nth-child(10) { --stagger-i: 10; }
  .drawer-stagger-item:nth-child(11) { --stagger-i: 11; }
  .drawer-stagger-item:nth-child(12) { --stagger-i: 12; }
  .drawer-stagger-item:nth-child(13) { --stagger-i: 13; }
  .drawer-stagger-item:nth-child(14) { --stagger-i: 14; }
  .drawer-root.drawer-open .drawer-stagger-item {
    transition-delay: calc(.09s + (var(--stagger-i, 1) - 1) * .06s);
  }
  .drawer-root:not(.drawer-open) .drawer-stagger-item {
    transition-delay: 0s;
    transition-duration: .25s;
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer-panel, .drawer-overlay, .drawer-stagger-item {
      transition-duration: .01ms !important;
      transition-delay: 0s !important;
    }
  }

  .bg-pixel {
    background-image:
      linear-gradient(rgba(6,15,13,.9), rgba(6,15,13,.96)),
      repeating-linear-gradient(0deg, #10241f 0 2px, transparent 2px 40px),
      repeating-linear-gradient(90deg, #10241f 0 2px, transparent 2px 40px);
  }
  .bg-noise { background: repeating-conic-gradient(#10201c 0% 25%, #0c1a16 0% 50%) 50% / 14px 14px; }

  .glass {
    background: linear-gradient(180deg, rgba(20,45,40,.55), rgba(10,25,22,.55));
    border: 1px solid rgba(45,212,191,.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .pill { background: rgba(10,30,27,.7); border: 1px solid rgba(45,212,191,.35); }
  .glow-text { text-shadow: 0 0 20px rgba(45,212,191,.5), 0 0 60px rgba(45,212,191,.15); }

  .btn-primary {
    background: linear-gradient(90deg,#14b8a6,#5eead4);
    box-shadow: 0 8px 30px -6px rgba(20,184,166,.6);
    transition: filter .2s ease, transform .2s ease;
  }
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-primary:active { transform: scale(.97); }

  .card-hover { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .card-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(45,212,191,.6);
    box-shadow: 0 20px 45px -20px rgba(20,184,166,.5);
  }

  .divider-teal { background: linear-gradient(90deg, #2dd4bf, transparent); }

  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #0a1512; }
  ::-webkit-scrollbar-thumb { background: #14555077; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #1a6b63; }

  @keyframes fadeInUp { from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
  .reveal { opacity: 0; }
  .reveal.in-view { animation: fadeInUp .7s ease forwards; }

  @keyframes toastIn { from{opacity:0; transform:translateY(-16px) scale(.95);} to{opacity:1; transform:translateY(0) scale(1);} }
  .toast-anim { animation: toastIn .3s ease forwards; }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #2dd4bf; outline-offset: 2px; border-radius: 8px;
  }

  .page { display: none; }
  .page.active { display: block; }

  /* ===== Checkout stepper ===== */
  .stepper-wrap { max-width: 640px; margin: 0 auto 3rem; position: relative; }
  .stepper-track { position: absolute; top: 19px; right: 0; left: 0; height: 3px; background: rgba(45,212,191,.15); border-radius: 3px; }
  .stepper-fill { position: absolute; top: 19px; right: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #14b8a6, #5eead4); border-radius: 3px; transition: width .6s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 12px rgba(45,212,191,.5); }
  .stepper-row { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
  .step-item { display: flex; flex-direction: column; align-items: center; gap: .6rem; flex: 1; }
  .step-node { width: 40px; height: 40px; border-radius: 50%; background: #0a1512; border: 3px solid rgba(45,212,191,.2); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem; color: rgba(204,251,241,.35); transition: all .5s cubic-bezier(.34,1.56,.64,1); position: relative; }
  .step-item.active .step-node { border-color: #2dd4bf; color: #2dd4bf; box-shadow: 0 0 0 6px rgba(45,212,191,.18); transform: scale(1.08); }
  .step-item.done .step-node { background: #14b8a6; border-color: #14b8a6; color: #052e2b; }
  .step-label { font-size: .72rem; font-weight: 700; color: rgba(204,251,241,.3); text-align: center; transition: color .4s ease; max-width: 90px; }
  .step-item.active .step-label { color: #5eead4; }
  .step-item.done .step-label { color: rgba(204,251,241,.6); }
  .step-check { width: 18px; height: 18px; opacity: 0; transform: scale(.4); transition: all .3s cubic-bezier(.34,1.56,.64,1) .1s; position: absolute; }
  .step-num { transition: opacity .2s ease; }
  .step-item.done .step-check { opacity: 1; transform: scale(1); }
  .step-item.done .step-num { opacity: 0; }

  .step-panel { display: none; }
  .step-panel.active { display: block; animation: panelIn .5s cubic-bezier(.22,1,.36,1); }
  @keyframes panelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }

  /* ===== Custom checkbox with check-mark draw animation ===== */
  .ck-row { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; user-select: none; }
  .ck-box { position: relative; width: 26px; height: 26px; border-radius: 9px; border: 2px solid rgba(45,212,191,.35); background: rgba(10,30,27,.6); flex-shrink: 0; transition: all .3s cubic-bezier(.34,1.56,.64,1); margin-top: 2px; }
  .ck-box svg { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; color: #052e2b; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s ease .05s; }
  .ck-row input { display: none; }
  .ck-row input:checked + .ck-box { background: #2dd4bf; border-color: #2dd4bf; transform: scale(1.05); }
  .ck-row input:checked + .ck-box svg { stroke-dashoffset: 0; }

  /* ===== Field error ===== */
  .field-err { font-size: .78rem; color: #f87171; margin-top: .4rem; display: flex; align-items: center; gap: .35rem; opacity: 0; max-height: 0; overflow: hidden; transition: all .3s ease; }
  .field-err.show { opacity: 1; max-height: 30px; }
  .field-input.err { border-color: rgba(248,113,113,.6) !important; }

  /* ===== Upload zone ===== */
  .upload-zone { border: 2px dashed rgba(45,212,191,.3); border-radius: 1.25rem; padding: 2.2rem 1.2rem; text-align: center; cursor: pointer; transition: all .35s ease; position: relative; }
  .upload-zone:hover, .upload-zone.drag { border-color: #2dd4bf; background: rgba(45,212,191,.06); }
  .upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .file-preview { display: none; align-items: center; gap: 1rem; background: rgba(20,184,166,.1); border: 1px solid rgba(45,212,191,.3); border-radius: 1.1rem; padding: .9rem 1.1rem; margin-top: 1rem; animation: itemIn .4s ease; }
  .file-preview.show { display: flex; }

  /* ===== Ripple + fly-to-cart ===== */
  .btn-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: rippleAnim .6s ease forwards; pointer-events: none; }
  @keyframes rippleAnim { to { transform: scale(3); opacity: 0; } }
  .fly-badge { position: fixed; z-index: 200; border-radius: 14px; pointer-events: none; transition: all .7s cubic-bezier(.34,1.56,.64,1); }
  .cart-badge-bump { animation: badgeBump .4s cubic-bezier(.34,1.56,.64,1); }
  @keyframes badgeBump { 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }
  .add-btn.added { background: linear-gradient(90deg,#10b981,#34d399) !important; }

  /* ===== پروفایل / ورود کاربر ===== */
  .profile-icon-btn { transition: border-color .25s ease, background .25s ease, transform .2s ease; }
  .profile-icon-btn:active { transform: scale(.93); }

  .profile-badge {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #34d399;
    border: 2px solid #08211c;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #052e2b;
    transform: scale(0);
    opacity: 0;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  }
  .profile-badge.show { transform: scale(1); opacity: 1; }

  /* آیکون چشم برای نمایش/مخفی کردن رمز عبور */
  #passwordToggleBtn svg { transition: opacity .2s ease, transform .2s ease; }
  #passwordToggleBtn:active svg { transform: scale(.85); }

  /* ===== صفحه قوانین رول‌پلی ===== */
  .rule-card { position: relative; overflow: hidden; }
  .rule-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(45,212,191,.08), transparent 60%);
    pointer-events: none;
  }
  .rule-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; height: 2.5rem; padding: 0 .6rem;
    font-weight: 900; font-size: .95rem; color: #052e2b;
    background: linear-gradient(135deg, #2dd4bf, #5eead4);
    border-radius: 12px;
    box-shadow: 0 6px 18px -6px rgba(45,212,191,.5);
  }
  .rule-callout {
    background: linear-gradient(135deg, rgba(45,212,191,.12), rgba(20,184,166,.04));
    border: 1px solid rgba(45,212,191,.3);
  }

  /* ===== مودال قوانین اکانت ===== */
  .modal-root {
    visibility: hidden;
    transition: visibility 0s linear .4s;
  }
  .modal-root.modal-open {
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
  .modal-overlay {
    background: rgba(4, 12, 10, .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .modal-root.modal-open .modal-overlay { opacity: 1; }
  .modal-panel {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.97);
    transition: opacity .4s cubic-bezier(0.19, 1.08, 0.24, 1.01),
                transform .4s cubic-bezier(0.19, 1.08, 0.24, 1.01);
  }
  .modal-root.modal-open .modal-panel {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }