/* ============================================================
   glass.css — Visage Theory "Liquid Glass" layer
   Additive overlay on top of styles.css. Loaded AFTER styles.css.
   Pure CSS + SVG (no JS) → CSP-safe (style-src 'unsafe-inline' ok).
   Goal: Apple iOS-26 liquid-glass material over a soft periwinkle
   mesh, while preserving Visage's layout, Lato type and periwinkle
   identity. Nothing is removed — only surfaces are re-materialised.
   ============================================================ */

:root{
  --glass-radius: 20px;
  --glass-tint: 255, 255, 255;          /* light glass base */
  --glass-edge: rgba(255,255,255,.72);  /* specular border */
  --peri-deep: #6d4bd8;                 /* legible periwinkle for text/scores */
  --glass-shadow:
      0 18px 48px -22px rgba(70,54,130,.45),
      0 4px 12px -6px rgba(70,54,130,.18);
}

/* ---------- 1. Rich background canvas (so glass has something to refract) ---------- */
html{ background:#f6f4ff; }
body{ background:transparent; position:relative; }
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(55% 48% at 12% 14%, rgba(178,196,232,.60) 0%, transparent 60%),
    radial-gradient(44% 44% at 88% 10%, rgba(244,214,205,.55) 0%, transparent 58%),
    radial-gradient(48% 54% at 84% 78%, rgba(186,205,255,.50) 0%, transparent 60%),
    radial-gradient(62% 60% at 22% 94%, rgba(226,224,255,.70) 0%, transparent 62%),
    linear-gradient(160deg,#fbfaff 0%,#eef3ff 100%);
}
/* gentle drifting blobs for liveliness (respects reduced-motion) */
body::after{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(28% 28% at 30% 30%, rgba(157,123,255,.20), transparent 70%),
    radial-gradient(26% 26% at 72% 64%, rgba(120,170,255,.18), transparent 70%);
  animation: glassDrift 26s ease-in-out infinite alternate;
}
@keyframes glassDrift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(2%,-2%,0) scale(1.08)} }
@media (prefers-reduced-motion: reduce){ body::after{ animation:none } }

/* ---------- 2. Liquid-glass material primitive ---------- */
/* Applied to content surfaces. Frosted enough to keep text crisp. */
.tile,
.mini-card,
.phone-screen,
.reserve-card,
.scorecard-card,
.sc-card,
.panel,
.card,
.glass{
  position:relative;
  background: rgba(var(--glass-tint), .58) !important;
  -webkit-backdrop-filter: blur(20px) saturate(168%);
  backdrop-filter: blur(20px) saturate(168%);
  border:1px solid var(--glass-edge) !important;
  box-shadow:
      var(--glass-shadow),
      inset 0 1px 1px rgba(255,255,255,.92),
      inset 0 -18px 34px -24px rgba(120,130,180,.30) !important;
  border-radius: var(--glass-radius) !important;
  overflow:hidden;
}
/* top-left specular sheen on glass surfaces */
.tile::before,
.mini-card::before,
.phone-screen::before,
.reserve-card::before,
.panel::before,
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(125deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 20%, rgba(255,255,255,0) 42%);
  mix-blend-mode:screen;
}
.tile > *, .mini-card > *, .phone-screen > *, .reserve-card > *, .panel > *{ position:relative; z-index:1; }

/* ---------- 3. Navbar → clear floating glass ---------- */
.nav{
  background: rgba(255,255,255,.42) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow: 0 8px 30px -18px rgba(70,54,130,.35);
}
.nav .wrap{ position:relative; }
/* logo mark gets a glassy ink chip */
.brand .mark{
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 10px -4px rgba(19,19,19,.5);
}

/* ---------- 4. Buttons ---------- */
/* Primary: glossy "ink glass" — stays high-contrast for conversion */
.btn-primary{
  background:
     linear-gradient(180deg, rgba(40,38,58,.96), rgba(19,19,19,.96)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
     0 10px 26px -10px rgba(70,54,130,.55),
     inset 0 1px 1px rgba(255,255,255,.45),
     inset 0 -8px 16px -10px rgba(0,0,0,.5) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-primary:hover{ transform:translateY(-2px); }
/* Secondary: clear liquid glass */
.btn-secondary{
  background: rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border:1px solid var(--glass-edge) !important;
  box-shadow: 0 8px 22px -14px rgba(70,54,130,.4), inset 0 1px 1px rgba(255,255,255,.9) !important;
}

/* ---------- 5. Pills, chips, badges, store badges ---------- */
.pill-eyebrow{
  background: rgba(253,232,149,.55) !important;     /* keep butter, now translucent */
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 4px 12px -8px rgba(120,100,30,.35);
}
.chip{
  background: rgba(232,238,247,.55) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.6);
}
.chip.solid{ background: rgba(182,197,224,.7) !important; }
.store-badge{
  background: linear-gradient(180deg, rgba(40,38,58,.95), rgba(19,19,19,.95)) !important;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 24px -12px rgba(70,54,130,.5), inset 0 1px 1px rgba(255,255,255,.35);
}

/* ---------- 6. Phone mockup → glass slab ---------- */
.phone{
  border-color: rgba(20,20,28,.85) !important;
  box-shadow: 0 40px 80px -36px rgba(70,54,130,.6), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.phone-screen{ background: rgba(255,255,255,.42) !important; }
/* score ring sits on glass — give the number legible periwinkle */
.ring .num{ color: var(--peri-deep) !important; }

/* ---------- 7. Footer → frosted shelf ---------- */
footer{
  background: rgba(255,255,255,.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.6);
}

/* ---------- 8. Inputs → inset glass ---------- */
input[type="email"], input[type="text"], select, textarea{
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border:1px solid var(--glass-edge) !important;
}

/* ---------- 9. Section dividers softened (brutal lines → hairlines) ---------- */
.section, section{ border-color: rgba(120,120,150,.12) !important; }

/* ---------- 9b. SVG refraction — liquid-displaced specular sheen ---------- */
/* The ::before sheen layers carry no text, so feDisplacementMap can wobble
   them into a true "liquid glass" edge without warping any content. */
.tile::before,
.mini-card::before,
.phone-screen::before,
.reserve-card::before,
.panel::before,
.glass::before{
  filter: url(#lg-sheen);
}
/* the phone screen is a glassy slab over the mesh — give it a stronger refract */
.phone-screen::before{ filter: url(#lg-refract); }
@supports not (filter: url(#lg-sheen)){ .tile::before,.mini-card::before,.phone-screen::before{ filter:none; } }

/* ---------- 10. Mobile: lighten blur cost ---------- */
@media (max-width: 720px){
  .tile,.mini-card,.phone-screen,.panel,.glass,.nav,footer{
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* real Visage logo as the brand mark */
img.mark{width:38px !important;height:38px !important;object-fit:cover;background:transparent !important;border-radius:10px;padding:0 !important;display:inline-block;vertical-align:middle;box-shadow:0 4px 12px -4px rgba(70,54,130,.35)}