/* =======================================
   Premium "Liquid Glass" theme (Apple/Tesla vibe)
   Frosted translucency, soft reflections, animated aurora,
   and a punchier background pop.
======================================= */
:root {
  --bg-top: #f7f8fa;
  --bg-mid: #ffffff;
  --bg-bot: #f5f7fb;

  --ink-900: #0a0a0a;
  --ink-800: #1a1a1a;
  --ink-600: #2a2a2a;
  --ink-400: #6b7280;
  --ink-200: #e5e7eb;

  --brand: #cc0000;
  --brand-600: #b30000;

  --pink-neon: 236,72,153; /* pink-500 */
  --blue-neon: 59,130,246; /* blue-500 */
  --cyan-neon: 6,182,212;  /* cyan-500 */

  --neon-strength: 1;

  /* Glass tuning */
  --glass-bg: 255,255,255;
  --glass-alpha: .55;
  --glass-border: rgba(255,255,255,.55);
  --glass-shadow: 0 20px 50px rgba(15, 23, 42, .1);

  /* Motion linkage from JS */
  --stage-x: 0px;
  --stage-y: 0px;
}

/* Utility */
.hidden { display: none !important; }
.bg-paper { background: #fff; }
.text-ink { color: var(--ink-900); }

html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica Neue, Arial, sans-serif;
  color: var(--ink-900);
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 44%, var(--bg-bot) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { -webkit-tap-highlight-color: transparent; }

/* =======================================================
   Ambient stack: gradient, aurora ribbons, grain, vignette
   (all gently tied to --stage-x/--stage-y)
======================================================= */
.ambient,
.ambient-shift,
.aurora-a,
.aurora-b,
.grain,
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: -3; }

.ambient {
  z-index: -5;
  background:
    radial-gradient(1400px 700px at 50% -12%, rgba(255,0,127,0.08), transparent 62%),
    radial-gradient(1100px 600px at 112% -6%, rgba(204,0,0,0.10), transparent 65%),
    radial-gradient(1200px 600px at -10% -4%, rgba(59,130,246,.08), transparent 62%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 40%, var(--bg-bot) 100%);
  transform: translate(var(--stage-x), var(--stage-y));
}

/* Liquid aurora ribbons */
.aurora-a, .aurora-b {
  z-index: -4;
  mix-blend-mode: screen;
  opacity: .32;
  filter: blur(14px) saturate(110%);
  will-change: transform, opacity;
}
.aurora-a {
  background:
    radial-gradient(50% 70% at 20% 30%, rgba(var(--blue-neon),.35), transparent 60%),
    radial-gradient(60% 60% at 80% 10%, rgba(var(--pink-neon),.28), transparent 65%),
    radial-gradient(40% 60% at 50% 70%, rgba(var(--cyan-neon),.28), transparent 65%);
  animation: auroraFloatA 22s ease-in-out infinite;
  transform: translate(calc(var(--stage-x) * .4), calc(var(--stage-y) * .4));
}
.aurora-b {
  background:
    radial-gradient(60% 70% at 20% 80%, rgba(var(--pink-neon),.22), transparent 60%),
    radial-gradient(60% 60% at 75% 60%, rgba(var(--blue-neon),.22), transparent 65%);
  animation: auroraFloatB 26s ease-in-out infinite;
  transform: translate(calc(var(--stage-x) * .2), calc(var(--stage-y) * .2));
}
@keyframes auroraFloatA {
  0%,100% { transform: translate(0,0) scale(1); opacity:.28; }
  50%     { transform: translate(-2%, -1.5%) scale(1.05); opacity:.36; }
}
@keyframes auroraFloatB {
  0%,100% { transform: translate(0,0) scale(1); opacity:.26; }
  50%     { transform: translate(1.5%, -2%) scale(1.06); opacity:.34; }
}

.ambient-shift {
  z-index: -3;
  mix-blend-mode: screen;
  opacity: .25;
  background: radial-gradient(900px 600px at 50% 20%, rgba(120,180,255,0.12), transparent 65%);
  animation: ambientShift 14s ease-in-out infinite;
  transform: translate(calc(var(--stage-x) * .15), calc(var(--stage-y) * .15));
}
@keyframes ambientShift {
  0%, 100% { opacity: .22; transform: translate(0,0); }
  50% { opacity: .34; transform: translate(0, -8px); }
}

.grain {
  z-index: -2;
  opacity: .10;
  mix-blend-mode: soft-light;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.09"/></svg>');
}
.vignette {
  z-index: -1;
  background: radial-gradient(1200px 600px at 50% 10%, transparent 55%, rgba(0,0,0,.08));
}

/***** Typography *****/
.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }

/***** Logo hover aura *****/
.logo-glow { transition: filter .4s ease; }
@media (hover:hover) {
  .logo-glow:hover { filter: drop-shadow(0 8px 28px rgba(236,72,153,.25)); }
}

/***** Headline sheen *****/
.headline {
  position: relative;
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #111 0, #555 50%, #111 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.headline::after {
  content: "";
  position: absolute; inset: 0 auto 0 -20%;
  width: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity: 0;
  animation: headSheen 10s ease-in-out infinite;
}
@keyframes headSheen {
  0%, 85% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  92% { opacity: .9; transform: translateX(260%) skewX(-18deg); }
  100% { opacity: 0; transform: translateX(260%) skewX(-18deg); }
}

/***** Scripture glow *****/
.scripture-glow {
  position: relative;
  animation: neonBreath 6s ease-in-out infinite;
}
.scripture-glow::before {
  content: "";
  position: absolute;
  inset: -6px -10px;
  background:
    radial-gradient(36rem 12rem at 50% 60%, rgba(var(--pink-neon),0.18), transparent 70%),
    radial-gradient(30rem 10rem at 50% 30%, rgba(var(--blue-neon),0.10), transparent 70%);
  filter: blur(28px);
  z-index: -1;
}
@keyframes neonBreath {
  0%, 100% { text-shadow: 0 0 8px rgba(var(--pink-neon),0.45), 0 0 2px rgba(var(--blue-neon),0.2); }
  50% { text-shadow: 0 0 20px rgba(var(--pink-neon),0.78), 0 0 8px rgba(var(--blue-neon),0.35); }
}

/***** Focus line *****/
.focus-line {
  height: 1px; width: 0;
  background: radial-gradient(60% 200% at 50% 50%, rgba(var(--pink-neon),0.7), transparent 70%);
  filter: drop-shadow(0 0 12px rgba(var(--pink-neon),0.5));
  transition: width .52s ease;
  animation: linePulse 6s ease-in-out infinite;
}
body.loaded .focus-line { width: 78%; }
@keyframes linePulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(var(--pink-neon),0.5)); }
  50% { filter: drop-shadow(0 0 22px rgba(var(--pink-neon),0.85)); }
}

/***** Coming Soon wave *****/
.coming-soon {
  font-size: 1rem;
  letter-spacing: .22em;
  color: #111;
  text-shadow:
    0 0 10px rgba(var(--pink-neon), 0.15),
    0 0 18px rgba(var(--pink-neon), 0.12);
}
@media (min-width: 480px) { .coming-soon { font-size: 1.05rem; } }
@media (min-width: 768px) { .coming-soon { font-size: 1.15rem; } }
.coming-soon span {
  display: inline-block;
  will-change: transform, opacity, text-shadow;
  animation: waveBreathe 2.6s ease-in-out infinite;
}
.coming-soon span:nth-child(1){animation-delay:0s;}
.coming-soon span:nth-child(2){animation-delay:.07s;}
.coming-soon span:nth-child(3){animation-delay:.14s;}
.coming-soon span:nth-child(4){animation-delay:.21s;}
.coming-soon span:nth-child(5){animation-delay:.28s;}
.coming-soon span:nth-child(6){animation-delay:.35s;}
.coming-soon span:nth-child(8){animation-delay:.49s;}
.coming-soon span:nth-child(9){animation-delay:.56s;}
.coming-soon span:nth-child(10){animation-delay:.63s;}
.coming-soon span:nth-child(11){animation-delay:.70s;}
@keyframes waveBreathe {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: .75;
    text-shadow:
      0 0 8px rgba(var(--pink-neon),0.25),
      0 0 16px rgba(var(--pink-neon),0.18);
  }
  50% {
    transform: translateY(-8px) scale(1.06);
    opacity: 1;
    text-shadow:
      0 0 14px rgba(var(--pink-neon),0.45),
      0 0 28px rgba(var(--pink-neon),0.35);
  }
}
@media (prefers-reduced-motion: reduce){
  .coming-soon span{ animation: none; }
}

/* =======================================================
   Liquid Glass Surfaces
======================================================= */
.glass-card,
.sheet-card {
  background: linear-gradient(180deg,
    rgba(var(--glass-bg), calc(var(--glass-alpha) + .08)) 0%,
    rgba(var(--glass-bg), var(--glass-alpha)) 100%);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  position: relative;
}

/* Soft inner highlight ring */
.glass-card::before,
.sheet-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 18%),
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity: .55;
}

/* Edge gloss */
.glass-card::after,
.sheet-card::after {
  content: "";
  position: absolute; inset: 1px;
  border-radius: calc(20px - 1px);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    inset 0 10px 20px rgba(255,255,255,.20);
  pointer-events: none;
  opacity: .6;
}

/***** Containers / cards spacing *****/
.glass-card { padding: 1.25rem; }
.elevate { box-shadow: 0 18px 48px rgba(0,0,0,.10); }

/* Hover lift for interactive glass */
@media (hover:hover) {
  .glass-card:hover { transform: translateY(-2px); transition: transform .15s ease; }
}

/* =======================================================
   Payment Sheet
======================================================= */
.sheet {
  position: fixed; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(4,7,12,.45);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.hidden{display:none;}
.sheet-backdrop{position:absolute;inset:0;}

.sheet-card{
  border-radius:24px 24px 0 0;
  max-width:520px; width:100%;
  transform:translateY(100%);
  transition:transform .34s ease, box-shadow .2s ease;
  max-height: min(90vh, 720px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}
.sheet-card.pop{transform:translateY(0);}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.sheet-close{background:none;border:none;font-size:1.5rem;cursor:pointer; color:#111;}

.summary-rows{margin-bottom:1rem;}
.summary-rows .row{display:flex;justify-content:space-between;padding:.25rem 0;}
.summary-rows .total{font-weight:700;}

.segmented{
  display:flex;
  border:1px solid rgba(255,255,255,.4);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:1rem;
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(12px);
}
.segmented .seg{
  flex:1;
  padding:.55rem .8rem; min-height:44px;
  text-align:center; cursor:pointer;
  background: transparent;
  border-right:1px solid rgba(255,255,255,.35);
  color:#111;
}
.segmented .seg:last-child{border-right:none;}
.segmented .seg.on{
  background: rgba(17,17,17,.9);
  color: #fff;
}

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

.paybtn{
  display:block; width:100%;
  padding:.85rem 1rem; margin:.35rem 0;
  border-radius:14px; font-weight:600;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  transition:.2s; white-space:normal; line-height:1.2; color:#111;
}
.paybtn:hover{ background: rgba(255,255,255,.7); }
.paybtn.apple{color:#000;}
.paybtn.gpay{color:#111;}
.paybtn.cashapp{color:#10b981;}
.paybtn.afterpay{color:#059669;}
.paybtn.bank{color:#111;}

.sheet-actions{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;}
.actions-total{font-weight:600;}

/***** Toast *****/
.toast{
  position:fixed;left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  background: rgba(17,17,17,.9);
  backdrop-filter: blur(10px);
  color:#fff;border-radius:999px;padding:.7rem 1rem;z-index:200;opacity:0;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.toast.show{opacity:1;transition:.25s;}

/***** Form UI *****/
.label { font-size: .875rem; color: #111; font-weight: 600; }
.input {
  width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  padding: .78rem .95rem;
  font-size: 1rem;
  outline: none;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.input:focus {
  border-color: #111;
  box-shadow: 0 0 0 5px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.05);
  background: rgba(255,255,255,1);
}
.checkbox { width: 1rem; height: 1rem; accent-color: rgb(236,72,153); }
.help { font-size: .78rem; color: var(--ink-400); }
.error { font-size: .78rem; color: #cc0000; margin-top: .25rem; }
.currency-prefix { position: absolute; inset: 0 auto 0 .6rem; display: flex; align-items: center; color: var(--ink-400); }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.chip {
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: .45rem .8rem;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  font-size: .92rem;
  transition: transform .06s ease, background .2s, box-shadow .2s;
}
.chip:hover { transform: translateY(-1px); }
.chip.on {
  background: rgba(17,17,17,.95);
  color: #fff;
  border-color: rgba(17,17,17,.95);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/***** Buttons *****/
.btn-primary {
  background: linear-gradient(180deg, #111, #0b0b0b);
  color: #fff;
  border-radius: 999px;
  padding: .9rem 1.1rem;
  font-weight: 700;
  transition: transform .06s ease, background .2s, box-shadow .2s;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}
.btn-primary:hover { transform: translateY(-1px); background: #000; box-shadow: 0 18px 36px rgba(0,0,0,.18); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: rgba(255,255,255,.8);
  color: #111;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  padding: .8rem 1.05rem;
  font-weight: 600;
  transition: transform .06s ease, background .2s, box-shadow .2s;
  backdrop-filter: blur(6px);
}
.btn-secondary:hover { transform: translateY(-1px); background: rgba(255,255,255,1); box-shadow: 0 10px 24px rgba(0,0,0,.10); }

.link { font-size: .9rem; color: #111; }
.link.subtle { opacity: .85; }
.link.subtle:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/***** Elevations & transitions on load *****/
.fade-up{opacity:0;transform:translateY(8px);transition:.55s;}
body.loaded .fade-up{opacity:1;transform:translateY(0);}
.slide-in-left{opacity:0;transform:translateX(-64px);transition:.7s;}
body.loaded .slide-in-left{opacity:1;transform:translateX(0);}

/***** Dev panel & language *****/
.devpanel{
  position:fixed;right:12px;bottom:12px;
  background: rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.6);
  border-radius:12px;padding:.6rem .8rem;font-size:.85rem;z-index:999;
  backdrop-filter: blur(8px);
}

/* Language: translucent glassy box with subtle border/blur + chevron */
.lang-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background:
    rgba(255,255,255,.62)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%236b7280' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5'/></svg>")
    no-repeat right .6rem center;
  background-size: 1rem;

  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);

  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 8px 20px rgba(0,0,0,.06),
    inset 0 0 0 1px rgba(255,255,255,.22);
  border-radius: 12px;

  padding: .45rem 2rem .45rem .7rem;
  color: inherit;
  cursor: pointer;
  font-size: .9rem;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lang-select:hover {
  background: rgba(255,255,255,.75)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%236b7280' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5'/></svg>")
    no-repeat right .6rem center;
}
.lang-select:focus { outline: none; }
.lang-select:focus-visible {
  box-shadow:
    0 0 0 4px rgba(0,0,0,.06),
    0 10px 24px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.25);
  border-color: rgba(17,17,17,.25);
}
@supports (-webkit-touch-callout: none) {
  .lang-select { background-color: rgba(255,255,255,.62) !important; }
}

/***** Raise header / logo area (masthead tweak) *****/
main { padding-top: 2rem; }
header { margin-top: -1.5rem; }
header img.logo-glow { height: 6.5rem; }

/* Super-small phones: stack MM/YY & CVC */
@media (max-width: 360px) {
  #panel-card .grid { grid-template-columns: 1fr !important; }
}

/* ===== Override: disable ambient lighting + grain/vignette (super-minimal) ===== */
.ambient,
.aurora-a,
.aurora-b,
.ambient-shift,
.grain,
.vignette {
  display: none !important;
}