/* jaspayaja v31 — frosted-glass look for Beranda (/), Checkout (/checkout/*) and Pembayaran (/payment/*).
 * Active only while <html> has .jg-on (set by jp-glass.js per route). Unlayered rules win over Tailwind's layered utilities. */
html.jg-on {
  --jg-glass: color-mix(in oklab, var(--card) 58%, transparent);
  --jg-glass-strong: color-mix(in oklab, var(--card) 76%, transparent);
  --jg-line: color-mix(in oklab, #ffffff 60%, transparent);
  --jg-inset: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --jg-shadow: 0 12px 32px -14px rgba(124, 58, 237, 0.22), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  --jg-shadow-hover: 0 26px 50px -20px rgba(124, 58, 237, 0.42), 0 0 0 1px rgba(167, 139, 250, 0.35);
  --jg-blob-op: 0.34;
  --jg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html.jg-on.dark {
  --jg-glass: color-mix(in oklab, var(--card) 52%, transparent);
  --jg-glass-strong: color-mix(in oklab, var(--card) 72%, transparent);
  --jg-line: rgba(255, 255, 255, 0.09);
  --jg-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --jg-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.75);
  --jg-shadow-hover: 0 26px 56px -20px rgba(168, 85, 247, 0.5), 0 0 26px -8px rgba(6, 182, 212, 0.35);
  --jg-blob-op: 0.42;
}

/* ---------- ambient background ---------- */
#jg-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }
html.jg-on #jg-bg { display: block; }
html.jg-on body { background: var(--background); }
html.jg-on #root { position: relative; z-index: 1; }
html.jg-on #root > div.min-h-svh { background: transparent; }
html.jg-on .bg-ambient::before { display: none; }
#jg-bg .jg-mesh {
  position: absolute; inset: -20%;
  background:
    radial-gradient(38% 32% at 12% 10%, rgba(168, 85, 247, 0.32), transparent 70%),
    radial-gradient(34% 30% at 88% 14%, rgba(236, 72, 153, 0.22), transparent 70%),
    radial-gradient(42% 38% at 70% 92%, rgba(6, 182, 212, 0.22), transparent 70%),
    radial-gradient(38% 38% at 8% 80%, rgba(37, 99, 235, 0.18), transparent 70%);
  background-size: 140% 140%;
  animation: jg-mesh 28s ease-in-out infinite alternate;
}
#jg-bg i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--jg-blob-op); will-change: transform; }
#jg-bg .jg-b1 { width: 520px; height: 520px; top: -160px; left: -140px; background: #a855f7; animation: jg-a 24s ease-in-out infinite; }
#jg-bg .jg-b2 { width: 460px; height: 460px; top: 18%; right: -160px; background: #ec4899; animation: jg-b 28s ease-in-out infinite; }
#jg-bg .jg-b3 { width: 420px; height: 420px; bottom: -160px; left: 32%; background: #06b6d4; animation: jg-c 32s ease-in-out infinite; opacity: calc(var(--jg-blob-op) * 0.8); }
#jg-bg .jg-b4 { width: 320px; height: 320px; top: 52%; left: -100px; background: #2563eb; animation: jg-b 36s ease-in-out infinite reverse; opacity: calc(var(--jg-blob-op) * 0.6); }
@keyframes jg-mesh { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 30% 100%; } }
@keyframes jg-a { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(130px, 90px) scale(1.12); } 66% { transform: translate(40px, 170px) scale(0.92); } }
@keyframes jg-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-150px, 130px) scale(1.15); } }
@keyframes jg-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(170px, -130px) scale(1.1); } }

/* ---------- glass primitive: every card on these pages ---------- */
html.jg-on main [data-slot="card"],
html.jg-on main [data-testid^="flash-card-"] {
  background-color: var(--jg-glass) !important;
  border: 1px solid var(--jg-line);
  box-shadow: var(--jg-shadow), var(--jg-inset);
  --tw-ring-color: transparent;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-radius: 22px;
  transition: transform 0.45s var(--jg-ease), box-shadow 0.45s var(--jg-ease), border-color 0.3s;
}
html.jg-on main [data-testid^="product-card-"]:hover,
html.jg-on main [data-testid^="flash-card-"]:hover {
  transform: translateY(-6px);
  box-shadow: var(--jg-shadow-hover), var(--jg-inset);
  border-color: rgba(167, 139, 250, 0.55);
}
/* keep brand-tinted border on product cards when present */
html.jg-on main [data-testid^="product-card-"] { border-color: color-mix(in oklab, var(--brand, #a855f7) 30%, var(--jg-line)); }
/* shine sweep on hover */
html.jg-on main [data-testid^="product-card-"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.16) 45%, transparent 60%);
  transform: translateX(-120%); transition: transform 0.9s var(--jg-ease);
}
html.jg-on main [data-testid^="product-card-"]:hover::after { transform: translateX(120%); }

/* inner muted blocks (price boxes, breakdowns, notes) */
html.jg-on main .bg-muted\/60,
html.jg-on main .bg-muted\/50,
html.jg-on main .bg-muted {
  background-color: color-mix(in oklab, var(--muted) 45%, transparent) !important;
  border: 1px solid var(--jg-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html.jg-on main .bg-card\/50 { background-color: var(--jg-glass) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* inputs: frosted fields with gradient focus glow */
html.jg-on main input[data-slot="input"],
html.jg-on main input.border-input {
  background-color: var(--jg-glass-strong) !important;
  border-color: var(--jg-line) !important;
  border-radius: 12px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s var(--jg-ease), border-color 0.25s;
}
html.jg-on main input[data-slot="input"]:focus,
html.jg-on main input.border-input:focus {
  border-color: rgba(167, 139, 250, 0.7) !important;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.16), 0 10px 26px -12px rgba(236, 72, 153, 0.55);
}

/* chips, payment methods, variant options */
html.jg-on main [data-testid^="category-chip-"]:not(.btn-gradient),
html.jg-on main [data-testid^="pm-"],
html.jg-on main .jp-vp-opt {
  background-color: var(--jg-glass) !important;
  border-color: var(--jg-line) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s var(--jg-ease), box-shadow 0.3s, border-color 0.25s, background-color 0.25s;
}
html.jg-on main [data-testid^="category-chip-"]:hover,
html.jg-on main [data-testid^="pm-"]:hover,
html.jg-on main .jp-vp-opt:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(168, 85, 247, 0.7); }
html.jg-on main [data-testid^="pm-"][aria-pressed="true"],
html.jg-on main [data-testid^="pm-"].border-primary,
html.jg-on main .jp-vp-opt.jp-vp-on {
  border-color: rgba(167, 139, 250, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.35), 0 14px 30px -14px rgba(168, 85, 247, 0.75), var(--jg-inset);
}

/* main CTA buttons get a moving gradient sheen */
html.jg-on main [data-testid="btn-create-order"],
html.jg-on main [data-testid="home-cta-register"] {
  transition: transform 0.3s var(--jg-ease), box-shadow 0.3s;
}
html.jg-on main [data-testid="btn-create-order"]:hover:not(:disabled),
html.jg-on main [data-testid="home-cta-register"]:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(192, 38, 211, 0.8); }

/* brand marquee strip */
html.jg-on main [data-testid="brand-marquee"] { border-color: var(--jg-line); }

/* ---------- footer: one floating glass panel ---------- */
html.jg-on #root footer {
  position: relative; z-index: 1;
  width: calc(100% - 28px); max-width: 1280px; margin: 40px auto 24px;
  border: 1px solid var(--jg-line) !important; border-radius: 28px;
  background: var(--jg-glass);
  box-shadow: var(--jg-shadow), var(--jg-inset);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
html.jg-on #root footer > div:last-child { border-color: var(--jg-line); }
html.jg-on #root footer a { transition: color 0.2s, transform 0.3s var(--jg-ease); display: inline-block; }
html.jg-on #root footer a:hover { transform: translateX(3px); }

/* ---------- reveal on scroll (set by jp-glass.js) ---------- */
html.jg-on .jg-reveal { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 0.8s var(--jg-ease), transform 0.8s var(--jg-ease); }
html.jg-on .jg-reveal.jg-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  #jg-bg .jg-mesh, #jg-bg i { animation: none; }
  html.jg-on .jg-reveal { opacity: 1; transform: none; transition: none; }
  html.jg-on main [data-testid^="product-card-"]::after { display: none; }
  html.jg-on main [data-slot="card"], html.jg-on main [data-testid^="flash-card-"] { transition: none; }
}