/* =========================================================================
   liquid-glass.css v2 — True iOS 26 Liquid Glass (Control Center style)
   ———————————————————————————————————————————————
   Key physics:
     1. Vivid ambient blobs in background → colour shows through the glass
     2. Heavy blur (25px) + saturate(180%) → frosted refraction
     3. Specular edge (top-left white line) → glass thickness illusion
     4. Layered shadows (near + far) → cards float off the surface
     5. Spring-physics interactions → liquid feel on every touch
   ========================================================================= */

/* ── CSS custom properties ─────────────────────────────────────────────── */
:root {
  /* Glass recipe */
  --lg-blur:         25px;
  --lg-saturate:     180%;
  --lg-bg:           rgba(255,255,255,0.22);   /* true translucency */
  --lg-bg-mid:       rgba(255,255,255,0.42);
  --lg-bg-strong:    rgba(255,255,255,0.60);
  --lg-border:       rgba(255,255,255,0.45);
  --lg-border-inner: rgba(255,255,255,0.80);   /* specular highlight */
  --lg-shadow-near:  0 2px 8px  rgba(0,0,0,0.08);
  --lg-shadow-far:   0 20px 48px rgba(0,0,0,0.16);
  --lg-shadow-modal: 0 40px 96px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.12);

  /* Geometry */
  --lg-radius-sm: 1rem;
  --lg-radius:    1.5rem;
  --lg-radius-lg: 1.75rem;
  --lg-radius-xl: 2.25rem;

  /* Accents (vibrant iOS palette) */
  --accent-blue:    #007AFF;
  --accent-green:   #34C759;
  --accent-teal:    #5AC8FA;
  --accent-violet:  #5856D6;
  --accent-pink:    #FF2D55;
  --accent-amber:   #FF9F0A;

  /* Ink */
  --brand-ink: #0f172a;

  /* Animation springs */
  --spring:        cubic-bezier(.16,.84,.44,1);
  --spring-bounce: cubic-bezier(.34,1.56,.64,1);
  --spring-snappy: cubic-bezier(.42,0,.28,1.5);
}

/* ── Vivid ambient background ───────────────────────────────────────────── */
body {
  font-family: 'Noto Sans Lao Looped', 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
  /* Layered vivid gradient — colours bleed through the glass */
  background:
    radial-gradient(ellipse 90% 70% at 15% 0%,   rgba(96,165,250,0.38)  0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 85% 110%,  rgba(167,139,250,0.30) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 75% 10%,   rgba(52,211,153,0.22)  0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 30% 80%,   rgba(251,146,60,0.18)  0%, transparent 55%),
    linear-gradient(155deg, #e8f4ff 0%, #f0f4ff 40%, #f5f0ff 70%, #fff0f8 100%);
}

/* ── Core Liquid Glass surface ──────────────────────────────────────────── */
.glass-card {
  /* Translucent glass fill */
  background: var(--lg-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(1.06);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(1.06);

  /* Specular edges: gradient border — bright top-left (light source), dim bottom-right */
  border: 1px solid var(--lg-border);

  /* Float shadow */
  box-shadow:
    var(--lg-shadow-near),
    var(--lg-shadow-far),
    0 1px 0 0 var(--lg-border-inner) inset,   /* top specular line */
    1px 0 0 0 rgba(255,255,255,0.60) inset;   /* left specular line */

  border-radius: var(--lg-radius-lg);
  position: relative;
  overflow: hidden;
}

/* Top-left glass sheen overlay */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.14) 35%,
    rgba(255,255,255,0.00) 55%,
    rgba(255,255,255,0.06) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.glass-card > * { position: relative; z-index: 1; }

/* ── Header: thicker frosted bar ────────────────────────────────────────── */
.glass-header {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(30px) saturate(200%) brightness(1.05);
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.05);
  border-bottom: 1px solid rgba(255,255,255,0.50);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.80) inset,
    0 6px 20px rgba(0,0,0,0.06);
}

/* ── Frosted modal ──────────────────────────────────────────────────────── */
.glass-modal {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--lg-shadow-modal);
  box-shadow: var(--lg-shadow-modal),
              0 1px 0 rgba(255,255,255,0.85) inset,
              1px 0 0 rgba(255,255,255,0.65) inset;
}

/* ── Liquid Glass Badge / Pill (Control Center button style) ───────────── */
/* Base pill */
.liquid-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .9rem;
  border-radius: 100px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .02em;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 1px 4px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.75) inset;
  transition: transform .2s var(--spring-bounce), box-shadow .2s ease, background .2s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.liquid-pill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  border-radius: 100px 100px 0 0;
  background: linear-gradient(rgba(255,255,255,0.40), rgba(255,255,255,0));
  pointer-events: none;
}
.liquid-pill:active { transform: scale(.92); }

/* Variants */
.pill-ready   { background: rgba(209,250,229,0.65); color: #065f46; border-color: rgba(167,243,208,0.55); }
.pill-low     { background: rgba(255,237,213,0.65); color: #7c2d12; border-color: rgba(253,186,116,0.45); }
.pill-out     { background: rgba(254,226,226,0.65); color: #991b1b; border-color: rgba(252,165,165,0.45); }
.pill-indigo  { background: rgba(224,231,255,0.70); color: #3730a3; border-color: rgba(199,210,254,0.55); }
.pill-slate   { background: rgba(241,245,249,0.70); color: #475569; border-color: rgba(203,213,225,0.50); }
.pill-vibrant-blue   { background: rgba(0,122,255,0.85); color: #fff; border-color: rgba(255,255,255,0.35); box-shadow: 0 4px 16px rgba(0,122,255,0.40), 0 1px 0 rgba(255,255,255,0.40) inset; }
.pill-vibrant-green  { background: rgba(52,199,89,0.85); color: #fff; border-color: rgba(255,255,255,0.35); box-shadow: 0 4px 16px rgba(52,199,89,0.35), 0 1px 0 rgba(255,255,255,0.40) inset; }
.pill-vibrant-red    { background: rgba(255,45,85,0.85); color: #fff; border-color: rgba(255,255,255,0.35); box-shadow: 0 4px 16px rgba(255,45,85,0.35), 0 1px 0 rgba(255,255,255,0.40) inset; }

/* Legacy aliases kept for backward compat */
/* badge-stock-* and badge-keyboard map to liquid-pill classes in JS 

/* ── Liquid Button (Control Center round/capsule button) ────────────────── */
.btn-press {
  transition:
    transform .18s var(--spring-bounce),
    box-shadow .22s ease,
    background-color .18s ease,
    filter .18s ease;
  position: relative;
  overflow: hidden;
}
.btn-press::after {
  /* specular ripple on active */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.btn-press:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.14), 0 1px 0 rgba(255,255,255,0.70) inset;
  filter: brightness(1.04);
}
.btn-press:active {
  transform: scale(.91);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  filter: brightness(.97);
}
.btn-press:active::after { opacity: 1; }

/* ── Vibrant accent buttons (iOS blue, green, dark) ────────────────────── */
.btn-vibrant-blue {
  background: linear-gradient(160deg, #3b9cff 0%, #007AFF 100%);
  box-shadow: 0 6px 20px rgba(0,122,255,0.38), 0 1px 0 rgba(255,255,255,0.45) inset;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-vibrant-blue:hover {
  background: linear-gradient(160deg, #5aaeff 0%, #1d8eff 100%);
  box-shadow: 0 8px 28px rgba(0,122,255,0.48);
}
.btn-vibrant-dark {
  background: linear-gradient(160deg, #2c3a50 0%, #0f172a 100%);
  box-shadow: 0 6px 20px rgba(15,23,42,0.35), 0 1px 0 rgba(255,255,255,0.12) inset;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.btn-glass-light {
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,0.80) inset;
  color: var(--brand-ink);
}
.btn-glass-light:hover {
  background: rgba(255,255,255,0.70);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10), 0 1px 0 rgba(255,255,255,0.90) inset;
}

/* ── Product cards ──────────────────────────────────────────────────────── */
.product-card {
  animation: fadeInUp .5s var(--spring) both;
  transition:
    transform .4s var(--spring),
    box-shadow .4s ease;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow:
    0 32px 64px rgba(0,0,0,0.18),
    0 4px 12px rgba(0,0,0,0.08),
    0 1px 0 rgba(255,255,255,0.80) inset;
}
.product-card:hover .card-img { transform: scale(1.10); }
.card-img { transition: transform .75s var(--spring); }
#productGrid { animation: gridFade .4s ease both; }

/* ── Modal backdrop ─────────────────────────────────────────────────────── */
.modal-backdrop-fade {
  animation: fadeIn .22s ease both;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  background: rgba(15,23,42,0.40);
}
.modal-pop { animation: modalPop .38s var(--spring) both; }

/* ── Form input glass ───────────────────────────────────────────────────── */
.input-glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(203,213,225,0.50);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-glass:focus {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,122,255,0.45);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.14);
  outline: none;
}

/* ── Skeleton shimmer ───────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(226,232,240,0.70) 25%,
    rgba(203,213,225,0.90) 37%,
    rgba(226,232,240,0.70) 63%);
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
}

/* ── Ripple ─────────────────────────────────────────────────────────────── */
.ripple-relative { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  transform: scale(0);
  animation: rippleAnim .6s var(--spring);
  pointer-events: none;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast-item {
  opacity: 0;
  transform: translateY(-18px) scale(.92);
  transition: opacity .3s var(--spring), transform .3s var(--spring);
  background: rgba(15,23,42,0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.12) inset;
  border-radius: 1rem;
}
.toast-item.toast-show { opacity: 1; transform: translateY(0) scale(1); }
.toast-item.toast-hide { opacity: 0; transform: translateY(-12px) scale(.94); }

/* ── Border radius helpers ──────────────────────────────────────────────── */
.rounded-2xl-custom { border-radius: var(--lg-radius); }
.rounded-3xl-custom { border-radius: var(--lg-radius-xl); }

/* ── Loader rings ───────────────────────────────────────────────────────── */
.loader-ring {
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(203,213,225,0.45);
  border-top-color: var(--brand-ink);
  animation: spin .7s linear infinite;
}
.loader-ring-sm {
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:spin .6s linear infinite;
  display:inline-block;
}

/* ── Misc utilities ─────────────────────────────────────────────────────── */
.cat-btn { transition: all .3s var(--spring); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scrollbar-none::-webkit-scrollbar { display:none; }
.scrollbar-none { -ms-overflow-style:none; scrollbar-width:none; }
.fade-swap { transition: opacity .22s ease; }
.fade-swap.fading { opacity: 0; }
.price-pulse { animation: pulseSoft .5s ease; }

/* ── Zoom viewer ────────────────────────────────────────────────────────── */
@keyframes zoomViewerIn { from{opacity:0} to{opacity:1} }
#imageZoomViewer.show  { display:block; animation:zoomViewerIn .2s ease both; }
#zoomViewerStage       { cursor:zoom-in; }
#zoomViewerStage.zoomed { cursor:grab; }
#zoomViewerStage.zoomed.dragging { cursor:grabbing; }
#zoomImg               { transform-origin:0 0; transition:transform .06s linear; }
#zoomImg.no-transition { transition:none; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeInUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes modalPop  { from{opacity:0;transform:scale(.90) translateY(18px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes shimmer   { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes gridFade  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes pulseSoft { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes rippleAnim{ to{transform:scale(1);opacity:0} }
@keyframes bubbleIn  { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }

/* ── Mobile 2-column compact card adaptation ──────────────────────────────
   New card template uses p-3/px-3 + whitespace-nowrap on price already;
   these rules handle remaining edge cases for <640px screens.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
  #productGrid, #loading { gap: .6rem; }

  /* Card rounding */
  #productGrid .product-card { border-radius: 1.2rem; }

  /* Title */
  #productGrid .product-card h3 { font-size: .72rem; }

  /* Status badge */
  #productGrid .liquid-pill { font-size: .50rem; padding: .16rem .5rem; }

  /* Arrow button */
  #productGrid .product-card .w-7 { width: 1.6rem; height: 1.6rem; }
}

@media (max-width: 374px) {
  #productGrid { gap: .4rem; }
  #productGrid .product-card h3 { font-size: .65rem; }
  #productGrid .product-card .text-sm { font-size: .78rem; }
}


/* ── Zoom viewer ────────────────────────────────────────────────────────── */
@keyframes zoomViewerIn { from{opacity:0} to{opacity:1} }
#imageZoomViewer.show  { display:block; animation:zoomViewerIn .2s ease both; }
#zoomViewerStage       { cursor:zoom-in; }
#zoomViewerStage.zoomed { cursor:grab; }
#zoomViewerStage.zoomed.dragging { cursor:grabbing; }
#zoomImg               { transform-origin:0 0; transition:transform .06s linear; }
#zoomImg.no-transition { transition:none; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeInUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes modalPop  { from{opacity:0;transform:scale(.90) translateY(18px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes shimmer   { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes gridFade  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes pulseSoft { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes rippleAnim{ to{transform:scale(1);opacity:0} }
@keyframes bubbleIn  { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }

/* ── Mobile 2-column compact card adaptation ──────────────────────────────
   Targets screens narrower than 640px (sm breakpoint).
   Cards are already in a 2-col grid; this block scales internal elements
   down so everything fits without overflow.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
  /* Tighten the grid gap */
  #productGrid, #loading {
    gap: .6rem;
  }

  /* Card: tighter rounding, glass still fully active */
  #productGrid .product-card {
    border-radius: 1.25rem;
  }

  /* Body of card: reduce internal padding */
  #productGrid .product-card .p-4 {
    padding: .6rem .65rem;
  }
  #productGrid .product-card .p-4.pt-3 {
    padding: .5rem .65rem .6rem;
  }

  /* Category · keyboard meta — hide to save vertical space */
  #productGrid .product-card .text-\[10px\].uppercase {
    display: none;
  }

  /* Title: smaller, allow 2 lines on narrow col */
  #productGrid .product-card h3 {
    font-size: .72rem;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* MacBook specs line: one size smaller */
  #productGrid .product-card .text-\[11px\] {
    font-size: .6rem;
    margin-top: .25rem;
  }

  /* Price section */
  #productGrid .product-card .text-lg {  /* price number */
    font-size: .9rem;
  }
  #productGrid .product-card .text-\[10px\].text-slate-400 { /* currency label */
    font-size: .55rem;
  }

  /* Arrow button: smaller */
  #productGrid .product-card .w-9.h-9 {
    width: 1.75rem;
    height: 1.75rem;
  }

  /* Status badge (liquid-pill): compact */
  #productGrid .liquid-pill {
    font-size: .52rem;
    padding: .18rem .55rem;
  }

  /* Color / palette badge: hide to keep header clean */
  #productGrid .product-card .shrink-0.text-\[9px\] {
    display: none;
  }
}

/* Tighten grid gap on very small phones */
@media (max-width: 374px) {
  #productGrid { gap: .4rem; }
  #productGrid .product-card .p-4 { padding: .5rem .55rem; }
  #productGrid .product-card h3 { font-size: .65rem; }
  #productGrid .product-card .text-lg { font-size: .8rem; }
}