@layer components {
  /* ============================================================
     پریچهر — سیستم شیشه (Liquid Glass)
     هفت سطح بلور + دو لایه‌ی شبه‌عنصری + fallback + حالت تیره
     قاعده: شیشه فقط روی عناصر شناور و روکش‌ها. هرگز روی ده‌ها کارت.
     ============================================================ */

  /* ------------------------------------------------------------
     پایه‌ی مشترک همه‌ی سطوح
     :where() یعنی وزن صفر — کلاس‌های کاربردی Tailwind همیشه برنده‌اند
     ------------------------------------------------------------ */
  :where(.glass, .glass-chip, .glass-panel, .glass-menu, .glass-sheet, .glass-deep) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  /* محتوای داخل شیشه حتماً باید بالای دو لایه بنشیند */
  :where(.glass, .glass-chip, .glass-panel, .glass-menu, .glass-sheet, .glass-deep) > :where(*) {
    position: relative;
    z-index: 1;
  }

  /* لایه‌ی اول: درخشش از بالا به پایین */
  .glass::before,
  .glass-chip::before,
  .glass-panel::before,
  .glass-menu::before,
  .glass-sheet::before,
  .glass-deep::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.10) 40%,
      transparent 100%
    );
  }

  /* لایه‌ی دوم: هایلایت گنبدی بالا + ته‌رنگ برند در پایین */
  .glass::after,
  .glass-chip::after,
  .glass-panel::after,
  .glass-menu::after,
  .glass-sheet::after,
  .glass-deep::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.28), transparent 55%),
      radial-gradient(80% 60% at 85% 120%, color-mix(in oklch, var(--brand-600) 8%, transparent), transparent 50%);
  }

  /* ------------------------------------------------------------
     سطح ۴ — نسخه‌ی اصلی (Signature Glass)
     هدر شناور · نوار ناوبری پایین · toast
     ------------------------------------------------------------ */
  :where(.glass) {
    -webkit-backdrop-filter: blur(20px) saturate(1.85);
    backdrop-filter: blur(20px) saturate(1.85);
    background: rgba(255, 255, 255, 0.38);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--pc-radius-full);
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.05),
      inset 0 0.5px rgba(255, 255, 255, 0.9),
      inset 0 -0.5px rgba(255, 255, 255, 0.25);
  }

  /* ------------------------------------------------------------
     سطح ۲ — تراشه / دکمه‌ی کوچک روی تصویر / سبد روی کارت محصول
     ------------------------------------------------------------ */
  :where(.glass-chip) {
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    background: rgba(255, 255, 255, 0.88);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--pc-radius-full);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .glass-chip::before { background: linear-gradient(rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.08) 45%, transparent 100%); }

  /* ------------------------------------------------------------
     سطح ۳ — پنل فوتر / هدر منوی دسته‌بندی
     ------------------------------------------------------------ */
  :where(.glass-panel) {
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    background: rgba(255, 255, 255, 0.78);
    border: 0.5px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--pc-radius-xl);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  }

  /* ------------------------------------------------------------
     سطح ۵ — منوی دسته‌بندی تمام‌صفحه
     ------------------------------------------------------------ */
  :where(.glass-menu) {
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    background: rgba(255, 255, 255, 0.72);
    border: 0.5px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--pc-radius-3xl);
    box-shadow: var(--pc-shadow-lg);
  }

  /* ------------------------------------------------------------
     سطح ۶ — مودال و bottom-sheet
     ------------------------------------------------------------ */
  :where(.glass-sheet) {
    -webkit-backdrop-filter: blur(24px) saturate(1.35);
    backdrop-filter: blur(24px) saturate(1.35);
    background: rgba(255, 255, 255, 0.93);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--pc-radius-2xl);
    box-shadow: var(--pc-shadow-overlay);
  }

  /* ------------------------------------------------------------
     سطح ۷ — جست‌وجوی تمام‌صفحه و کشوی سبد (+ گرادیان رادیال برند در بالا)
     ------------------------------------------------------------ */
  :where(.glass-deep) {
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    backdrop-filter: blur(28px) saturate(1.4);
    background: rgba(255, 255, 255, 0.9);
    border: 0.5px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--pc-radius-3xl);
    box-shadow: var(--pc-shadow-overlay);
  }
  .glass-deep::after {
    background:
      radial-gradient(120% 60% at 50% -10%, color-mix(in oklch, var(--brand-600) 14%, transparent), transparent 55%),
      radial-gradient(80% 60% at 85% 120%, color-mix(in oklch, var(--brand-600) 8%, transparent), transparent 50%);
  }

  /* ------------------------------------------------------------
     سطح ۱ — پشت‌زمینه‌ی تیره‌ی مودال (scrim)
     ------------------------------------------------------------ */
  :where(.glass-scrim) {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(12, 12, 12, 0.45);
  }
  :where(.glass-scrim-strong) {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: rgba(12, 12, 12, 0.5);
  }

  /* ------------------------------------------------------------
     کمکی‌ها
     ------------------------------------------------------------ */
  .glass-square { border-radius: var(--pc-radius-md); }
  .glass-pill { border-radius: var(--pc-radius-full); }

  /* آیتم فعال نوار پایین */
  .glass-active-item {
    background: color-mix(in oklch, var(--primary) 14%, transparent);
    box-shadow: inset 0 0.5px rgba(255, 255, 255, 0.55);
  }

  /* ------------------------------------------------------------
     حالت تیره
     ------------------------------------------------------------ */
  .dark .glass {
    background: color-mix(in oklch, var(--brand-950) 55%, transparent);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 0.5px rgba(255, 255, 255, 0.18),
      inset 0 -0.5px rgba(255, 255, 255, 0.06);
  }
  .dark .glass-chip { background: color-mix(in oklch, var(--brand-950) 82%, transparent); border-color: rgba(255,255,255,0.14); }
  .dark .glass-panel { background: color-mix(in oklch, var(--brand-950) 70%, transparent); border-color: rgba(255,255,255,0.10); }
  .dark .glass-menu { background: color-mix(in oklch, var(--brand-950) 68%, transparent); border-color: rgba(255,255,255,0.10); }
  .dark .glass-sheet { background: color-mix(in oklch, var(--brand-950) 88%, transparent); border-color: rgba(255,255,255,0.12); }
  .dark .glass-deep { background: color-mix(in oklch, var(--brand-950) 84%, transparent); border-color: rgba(255,255,255,0.12); }

  .dark .glass::before,
  .dark .glass-chip::before,
  .dark .glass-panel::before,
  .dark .glass-menu::before,
  .dark .glass-sheet::before,
  .dark .glass-deep::before {
    background: linear-gradient(
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 40%,
      transparent 100%
    );
  }

  /* ته‌رنگ برند در حالت تیره پررنگ‌تر */
  .dark .glass::after,
  .dark .glass-chip::after,
  .dark .glass-panel::after,
  .dark .glass-menu::after,
  .dark .glass-sheet::after {
    background:
      radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.10), transparent 55%),
      radial-gradient(80% 60% at 85% 120%, color-mix(in oklch, var(--brand-500) 22%, transparent), transparent 55%);
  }
  .dark .glass-deep::after {
    background:
      radial-gradient(120% 60% at 50% -10%, color-mix(in oklch, var(--brand-500) 26%, transparent), transparent 58%),
      radial-gradient(80% 60% at 85% 120%, color-mix(in oklch, var(--brand-500) 16%, transparent), transparent 50%);
  }
  .dark .glass-scrim { background: rgba(6, 6, 12, 0.6); }

  /* ------------------------------------------------------------
     Fallback — مرورگر بدون backdrop-filter
     ------------------------------------------------------------ */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass       { background: rgba(255, 255, 255, 0.92); }
    .glass-chip  { background: rgba(255, 255, 255, 0.96); }
    .glass-panel { background: rgba(255, 255, 255, 0.95); }
    .glass-menu  { background: rgba(255, 255, 255, 0.96); }
    .glass-sheet { background: rgba(255, 255, 255, 0.98); }
    .glass-deep  { background: rgba(255, 255, 255, 0.98); }
    .glass-scrim { background: rgba(12, 12, 12, 0.6); }

    .dark .glass,
    .dark .glass-chip,
    .dark .glass-panel,
    .dark .glass-menu,
    .dark .glass-sheet,
    .dark .glass-deep { background: var(--surface); }
  }

  /* ------------------------------------------------------------
     شفافیت کم‌شده — شیشه به سطح مات تبدیل می‌شود
     ------------------------------------------------------------ */
  @media (prefers-reduced-transparency: reduce) {
    .glass, .glass-chip, .glass-panel, .glass-menu, .glass-sheet, .glass-deep {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: var(--surface);
      border-color: var(--border);
    }
    .glass::before, .glass::after,
    .glass-chip::before, .glass-chip::after,
    .glass-panel::before, .glass-panel::after,
    .glass-menu::before, .glass-menu::after,
    .glass-sheet::before, .glass-sheet::after,
    .glass-deep::before, .glass-deep::after { display: none; }
    .glass-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12,12,12,0.7); }
  }

  /* حلقه‌ی فوکوس روی شیشه باید واضح باشد */
  .glass :focus-visible,
  .glass-chip :focus-visible,
  .glass-panel :focus-visible,
  .glass-menu :focus-visible,
  .glass-sheet :focus-visible,
  .glass-deep :focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: var(--pc-radius-xs);
  }

}