/* ============================================================
   BeachParty — Mondo 2000 · Tel Aviv
   Retro riviera beach-club. RTL Hebrew.
   ============================================================ */

:root{
  --cream:      #FBF1DF;
  --cream-2:    #F7E6CD;
  --paper:      #FFF9EF;
  --pink:       #F2A3C0;
  --pink-soft:  #F6BFD3;
  --pink-deep:  #E06A99;
  --magenta:    #D63E78;
  --orange:     #F0832F;
  --orange-2:   #ED6F2C;
  --yellow:     #F3C73F;
  --green:      #7CA86A;
  --green-deep: #4E7A4A;
  --ink:        #3A2620;   /* warm brown — our "black" (no real black) */
  --ink-soft:   #6B4E44;

  --shadow:     0 18px 40px -22px rgba(58,38,32,.45);
  --shadow-sm:  0 8px 22px -14px rgba(58,38,32,.5);

  --maxw: 540px;

  --serif:  "Suez One", Georgia, serif;
  --fashion:"Bodoni Moda", Georgia, serif;
  --body:   "Assistant", system-ui, sans-serif;
  --mono:   "DM Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  overflow-x:hidden;
  /* faint speckled paper warmth */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(240,131,47,.05), transparent 25%),
    radial-gradient(circle at 88% 72%, rgba(242,163,192,.07), transparent 30%);
}

/* ---- the centered "invite" column ---- */
.page{
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--paper);
  box-shadow:0 0 60px -20px rgba(58,38,32,.35);
  overflow:hidden;
  position:relative;
}

/* generic section padding */
.sec{ padding:64px 26px; position:relative; }
.sec--tight{ padding:46px 26px; }

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3{ margin:0; font-weight:400; line-height:1.02; }
p{ margin:0; }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
  direction:ltr;
}
.eyebrow.he{ font-family:var(--body); font-weight:800; font-size:17px;
  letter-spacing:.06em; direction:rtl; }

.kicker-he{ font-family:var(--serif); }

.script{
  font-family:var(--fashion);
  font-style:italic;
  font-weight:500;
}

/* big hero wordmark — cream paint outline so it lifts off the stripes */
.hero-word{
  font-family:var(--fashion); font-style:italic; font-weight:700;
  display:block; line-height:.92;
  font-size:clamp(62px,18vw,108px);
  text-shadow:
    3px 0 0 var(--paper), -3px 0 0 var(--paper),
    0 3px 0 var(--paper), 0 -3px 0 var(--paper),
    3px 3px 0 var(--paper), -3px -3px 0 var(--paper),
    3px -3px 0 var(--paper), -3px 3px 0 var(--paper),
    0 6px 0 rgba(58,38,32,.16);
}
/* soft cream halo behind the whole hero copy block */
.hero-glow{ position:relative; }
.hero-glow::before{
  content:""; position:absolute; left:50%; top:48%;
  width:118%; height:92%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(251,241,223,.92) 0%, rgba(251,241,223,.7) 42%, transparent 72%);
  z-index:-1; filter:blur(4px);
}

/* ============================================================
   CANDY STRIPES
   ============================================================ */
.stripes{
  background-image:repeating-linear-gradient(
     -68deg,
     var(--pink) 0 30px,
     var(--cream) 30px 60px,
     var(--orange) 60px 90px,
     var(--cream) 90px 120px);
  background-size:170px 170px;
}
@media (prefers-reduced-motion: no-preference){
  .stripes{ animation:slideStripes 14s linear infinite; }
}
@keyframes slideStripes{
  to{ background-position:170px 0; }
}
.stripes--pink{
  background-image:repeating-linear-gradient(
     -68deg,
     var(--pink) 0 26px,
     var(--pink-soft) 26px 52px);
  background-size:147px 147px;
}
.stripes--orange{
  background-image:repeating-linear-gradient(
     90deg,
     var(--orange) 0 22px,
     var(--pink) 22px 44px);
  background-size:88px 88px;
}

/* tiny scalloped / ric-rac divider */
.scallop{ height:18px; width:100%;
  background:
   radial-gradient(circle at 9px -3px, transparent 11px, var(--paper) 11px);
  background-size:18px 18px; background-position:0 0;
}

/* ============================================================
   DISCO BALL  (pure CSS)
   ============================================================ */
.disco-wrap{ position:relative; display:grid; place-items:center; }
.disco{
  --d:120px;
  width:var(--d); height:var(--d); border-radius:50%;
  position:relative;
  background:
    radial-gradient(circle at 50% 50%, #e9eef2 0%, #aeb9c2 55%, #6f7d88 100%);
  box-shadow:
    inset -10px -12px 22px rgba(40,50,60,.55),
    inset 8px 8px 18px rgba(255,255,255,.6),
    0 22px 30px -18px rgba(58,38,32,.5);
  overflow:hidden;
}
.disco::before{   /* mirror facets */
  content:""; position:absolute; inset:0; border-radius:50%;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.55) 0 1px, rgba(40,55,70,.28) 1px 2px, transparent 2px 13px),
    repeating-linear-gradient(90deg, rgba(40,55,70,.5)    0 2px, transparent 2px 13px),
    conic-gradient(from 0deg,
      rgba(242,163,192,.85), rgba(243,199,63,.8), rgba(124,168,106,.8),
      rgba(122,180,230,.85), rgba(242,120,170,.8), rgba(242,163,192,.85));
  background-size:13px 13px, 13px 13px, 100% 100%;
  mix-blend-mode:screen;
  opacity:.95;
}
.disco::after{   /* glossy hotspot */
  content:""; position:absolute; width:34%; height:24%;
  left:18%; top:14%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95), transparent 70%);
  filter:blur(1px);
}
@media (prefers-reduced-motion: no-preference){
  .disco::before{ animation:spinBall 9s linear infinite; }
}
@keyframes spinBall{ to{ transform:rotate(360deg); } }

.disco-string{ width:2px; height:30px;
  background:linear-gradient(var(--ink-soft), transparent); margin:0 auto -2px; }
/* sparkle glints cast around the ball */
.glints{ position:absolute; inset:-30px; pointer-events:none; }
.glint{ position:absolute; width:10px; height:10px; opacity:.0;
  background:
    linear-gradient(var(--yellow),var(--yellow)) center/100% 2px no-repeat,
    linear-gradient(var(--yellow),var(--yellow)) center/2px 100% no-repeat;
  animation:twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:0; transform:scale(.4);} 50%{opacity:.9; transform:scale(1);} }

/* ============================================================
   COCKTAIL UMBRELLA  (pure CSS, ref #3)
   ============================================================ */
.umbrella{ --u:62px; position:relative; width:var(--u); height:var(--u);
  display:inline-block; filter:drop-shadow(0 7px 7px rgba(58,38,32,.2)); }
.umbrella .top{
  position:absolute; inset:0; border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
     var(--green) 0 30deg, #fff 30deg 60deg);
  box-shadow:inset 0 0 0 2px var(--green-deep),
             inset 0 -3px 9px rgba(58,38,32,.18);
}
.umbrella .top::after{ content:""; position:absolute; inset:0;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
     transparent 0 29.2deg, rgba(78,122,74,.55) 29.2deg 30deg);
  /* faint radial dome shading */
  box-shadow:inset 6px 6px 14px rgba(255,255,255,.5); }
.umbrella .hub{ position:absolute; top:calc(50% - 5px); left:calc(50% - 5px);
  width:10px; height:10px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 2.5px var(--green-deep); z-index:2; }
.umbrella .stick{ position:absolute; top:50%; left:calc(50% - 1.5px);
  width:3px; height:calc(var(--u) * .72); border-radius:0 0 2px 2px;
  background:linear-gradient(#caa46a,#a9824f);
  transform-origin:top center; z-index:1; }

.umbrella-row{ display:flex; gap:14px; justify-content:center; align-items:flex-start; }
.umbrella.tilt-l{ transform:rotate(-16deg); }
.umbrella.tilt-r{ transform:rotate(14deg); }

/* ============================================================
   CHIPS / BUTTONS / FORM
   ============================================================ */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  font-weight:700; font-size:14px; letter-spacing:.02em;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); box-shadow:var(--shadow-sm);
}
.chip--pink{ background:var(--pink); border-color:var(--magenta); color:var(--magenta); }
.chip--orange{ background:var(--orange); border-color:var(--ink); color:#fff; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px 22px; border:none; cursor:pointer;
  font-family:var(--body); font-weight:800; font-size:17px; letter-spacing:.01em;
  border-radius:16px; color:#fff; background:var(--magenta);
  box-shadow:0 10px 0 -2px var(--pink-deep), var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 0 -2px var(--pink-deep), var(--shadow); }
.btn:active{ transform:translateY(4px); box-shadow:0 4px 0 -2px var(--pink-deep), var(--shadow-sm); }
.btn--ghost{ background:transparent; color:var(--magenta);
  box-shadow:inset 0 0 0 2px var(--magenta); font-weight:700; }
.btn--ghost:hover{ box-shadow:inset 0 0 0 2px var(--magenta); background:rgba(214,62,120,.06); }
.btn--sun{ background:var(--orange); box-shadow:0 10px 0 -2px #c9621f, var(--shadow); }
.btn--sun:hover{ box-shadow:0 12px 0 -2px #c9621f, var(--shadow); }
.btn--sun:active{ box-shadow:0 4px 0 -2px #c9621f, var(--shadow-sm); }

.field{ margin-bottom:14px; text-align:right; }
.field label{ display:block; font-weight:700; font-size:13px; margin-bottom:6px;
  color:var(--ink-soft); }
.field input, .field select{
  width:100%; padding:14px 16px; font-family:var(--body); font-size:16px;
  color:var(--ink); background:#fff;
  border:2px solid var(--cream-2); border-radius:13px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus{
  border-color:var(--pink-deep); box-shadow:0 0 0 4px rgba(224,106,153,.18); }
.field input::placeholder{ color:#c7b39f; }

.helper{ font-size:13px; color:var(--ink-soft); }
.err{ color:var(--magenta); font-size:13px; font-weight:700; margin-top:4px; min-height:0; }

/* ============================================================
   UTILITY
   ============================================================ */
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:10px; }
.stack > * + *{ margin-top:18px; }
.mw{ max-width:420px; margin-inline:auto; }
.hr-dot{ display:flex; gap:8px; justify-content:center; align-items:center; color:var(--orange); }
.hr-dot span{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.hr-dot::before,.hr-dot::after{ content:""; height:2px; width:46px;
  background:repeating-linear-gradient(90deg,currentColor 0 5px, transparent 5px 10px); }

/* ============================================================
   BIRTHDAY
   ============================================================ */
.bday-name{
  font-family:var(--serif);
  font-size:clamp(34px,10vw,52px);
  line-height:.94; color:var(--ink);
  text-shadow:2px 2px 0 var(--paper);
}
.bday-amp{ font-family:var(--fashion); font-style:italic; font-size:26px; color:var(--magenta); }

/* three birthday portraits */
.bday-people{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  margin:30px 0 6px; align-items:start; }
.person{ margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; }
.pic-ring{ width:100%; max-width:148px; border-radius:50%; padding:5px; background:#fff;
  box-shadow:0 0 0 4px var(--ring), var(--shadow); }
.pic-ring image-slot{ display:block; width:100%; aspect-ratio:1; }
.ring-pink{ --ring:var(--pink-deep); }
.ring-green{ --ring:var(--green); }
.ring-orange{ --ring:var(--orange); }
.person .nm{ font-family:var(--serif); font-size:clamp(14px,4vw,18px);
  line-height:1.06; margin-top:12px; color:var(--ink); }
.person .nick{ display:block; font-family:var(--fashion); font-style:italic;
  font-weight:500; font-size:10.5px; line-height:1.15; color:var(--magenta);
  margin:3px auto; max-width:13ch; text-wrap:balance; }
.person .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-soft); margin-top:4px; direction:ltr; }

/* ============================================================
   MANIFESTO  (poem)
   ============================================================ */
.manifesto{ max-width:420px; margin-inline:auto; }
.manifesto p{ font-family:var(--body); font-weight:600;
  font-size:clamp(16px,4.5vw,19px); line-height:1.65; color:var(--ink); }
.manifesto p + p{ margin-top:2px; }
.manifesto .em{ color:var(--magenta); }
.manifesto .punch{ font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,7vw,32px); line-height:1.08; color:var(--magenta);
  margin-top:18px; }
.manifesto-tag{ font-family:var(--serif); font-size:clamp(19px,5.4vw,25px);
  color:var(--orange); margin-top:14px; }

/* ============================================================
   PROGRAM  (the bill)
   ============================================================ */
.bills{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:12px; max-width:380px; margin-inline:auto; }
.bills li{ display:flex; align-items:center; gap:14px; text-align:right;
  background:var(--paper); border:2px solid var(--cream-2); border-radius:15px;
  padding:15px 18px; font-family:var(--serif); font-size:clamp(17px,4.8vw,21px);
  color:var(--ink); box-shadow:var(--shadow-sm); }
.bills .bill-emoji{ font-size:25px; flex:0 0 auto; line-height:1; }
.kiddush{ margin-top:22px; font-weight:700; color:var(--ink-soft); font-size:16px; }

/* ============================================================
   RSVP FINE PRINT
   ============================================================ */
.finehint{ text-align:center; margin-top:22px; }
.finehint .badges{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin-bottom:14px; }
.finehint .free{ font-family:var(--serif); font-size:clamp(18px,5vw,22px);
  color:var(--ink); }
.finehint .free b{ color:var(--magenta); font-weight:400; }
.finehint .fine{ font-weight:600; color:var(--ink-soft); font-size:13px;
  max-width:330px; margin:12px auto 0; line-height:1.5; }

/* ============================================================
   STEPPER  (stories-style flow)
   ============================================================ */
.stage{ position:fixed; inset:0; background:var(--ink);
  display:flex; z-index:1; }
.frame{ position:relative; width:100%; max-width:var(--maxw); height:100%;
  margin:auto; background:var(--paper); display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 0 80px -10px rgba(0,0,0,.6); }

/* top chrome — progress */
.chrome-top{ flex:0 0 auto; padding:14px 16px 10px;
  background:var(--paper); border-bottom:1px solid rgba(58,38,32,.08); z-index:3; }
.segs{ display:flex; gap:6px; }
.seg{ flex:1; height:5px; border-radius:3px; background:var(--cream-2); overflow:hidden; }
.seg .fill{ display:block; height:100%; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--orange),var(--magenta));
  transition:width .45s cubic-bezier(.4,0,.2,1); }
.seg.done .fill{ width:100%; }
.seg.cur{ box-shadow:0 0 0 2px rgba(214,62,120,.25); }
.steplabel{ text-align:center; margin-top:9px; font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; color:var(--ink-soft); }
.steplabel .num{ color:var(--magenta); }

/* steps viewport */
.steps{ position:relative; flex:1 1 auto; min-height:0; }
.step{ position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:none; }
.step.is-active{ display:block; }
.step.is-active .step-inner{ animation:stepRise .4s ease both; }
@keyframes stepRise{ from{ transform:translateY(12px); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){
  .step.is-active .step-inner{ animation:none; }
}
.step-inner{ min-height:100%; display:flex; flex-direction:column;
  justify-content:center; padding:38px 26px; box-sizing:border-box; }

/* bottom chrome — nav */
.nav{ flex:0 0 auto; display:flex; gap:12px; align-items:center;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:var(--paper); border-top:1px solid rgba(58,38,32,.1); z-index:3; }
.navbtn{ flex:0 0 auto; cursor:pointer; font-family:var(--body); font-weight:700;
  font-size:15px; color:var(--ink-soft); background:transparent;
  border:2px solid var(--cream-2); border-radius:13px; padding:13px 18px;
  transition:opacity .15s, border-color .15s, color .15s; }
.navbtn:hover{ border-color:var(--pink-deep); color:var(--magenta); }
.navbtn:disabled{ opacity:.3; cursor:default; pointer-events:none; }
.nav .next{ flex:1 1 auto; width:auto; }

/* required promise checkboxes */
.promises{ margin:6px 0 14px; display:flex; flex-direction:column; gap:11px; text-align:right; }
.promise{ display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  font-size:14px; color:var(--ink); font-weight:600; line-height:1.45; }
.promise input{ flex:0 0 auto; width:22px; height:22px; margin:1px 0 0;
  accent-color:var(--magenta); cursor:pointer; }

/* ticket count toggle + second guest */
.ticket-toggle{ display:flex; gap:10px; }
.ticket-toggle .tk{ flex:1; position:relative; cursor:pointer; }
.ticket-toggle .tk input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.ticket-toggle .tk span{ display:flex; align-items:center; justify-content:center; gap:6px;
  padding:14px 8px; border:2px solid var(--cream-2); border-radius:13px;
  font-weight:700; font-size:14px; color:var(--ink-soft); background:#fff;
  transition:border-color .15s, color .15s, box-shadow .15s, background .15s; }
.ticket-toggle .tk input:checked + span{ border-color:var(--magenta); color:var(--magenta);
  background:rgba(214,62,120,.06); box-shadow:0 0 0 3px rgba(214,62,120,.14); }
.ticket-toggle .tk input:focus-visible + span{ box-shadow:0 0 0 3px rgba(224,106,153,.3); }
.guest2{ margin-bottom:14px; padding-top:16px; border-top:2px dashed var(--cream-2); }
.guest2 .g2-title{ font-family:var(--serif); font-size:17px; color:var(--ink);
  margin-bottom:12px; text-align:right; }

/* approved pass — barcode arrives via app link */
.pass-linkwrap{ text-align:center; padding:24px 18px 8px; }
.pass-check{ font-size:42px; line-height:1; }
.pass-msg{ font-size:15px; color:var(--ink-soft); font-weight:600;
  margin:10px auto 16px; max-width:270px; line-height:1.5; }
.pass-linkwrap .btn{ max-width:none; }

/* background-music toggle */
.music-btn{ position:absolute; left:14px; bottom:86px; z-index:6;
  width:46px; height:46px; border-radius:50%; border:2px solid var(--ink);
  background:var(--paper); color:var(--ink); font-size:18px; cursor:pointer;
  box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .2s, color .2s; }
.music-btn:hover{ transform:scale(1.06); }
.music-btn.on{ background:var(--magenta); color:#fff; border-color:var(--magenta);
  animation:musicPulse 1.5s ease-in-out infinite; }
@keyframes musicPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(214,62,120,.45); }
  50%{ box-shadow:0 0 0 9px rgba(214,62,120,0); } }

/* compact countdown inside a step */
.step .cd-cell{ min-width:60px; padding:12px 5px; }
.step .cd-cell b{ font-size:30px; }

/* ============================================================
   RUN SHEET
   ============================================================ */
.runsheet{ background:var(--cream); border:2px solid var(--cream-2);
  border-radius:20px; padding:8px 20px; box-shadow:var(--shadow-sm); }
.rs-row{ display:flex; align-items:center; gap:14px; padding:16px 0; }
.rs-row + .rs-row{ border-top:2px dashed var(--cream-2); }
.rs-time{ font-family:var(--serif); font-size:26px; color:var(--magenta);
  min-width:64px; text-align:center; direction:ltr; }
.rs-line{ flex:0 0 8px; height:8px; border-radius:50%; background:var(--orange); }
.rs-label{ font-weight:700; font-size:17px; color:var(--ink); }

.venue{ margin-top:26px; text-align:center; padding:26px 20px;
  background:var(--cream); border-radius:20px; border:2px solid var(--cream-2);
  box-shadow:var(--shadow-sm); }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.cd{ display:flex; gap:10px; justify-content:center; }
.cd-cell{ background:var(--paper); border-radius:16px; padding:14px 6px;
  min-width:68px; box-shadow:var(--shadow-sm); border:2px solid rgba(58,38,32,.12); }
.cd-cell b{ display:block; font-family:var(--serif); font-size:34px;
  color:var(--ink); line-height:1; direction:ltr; font-variant-numeric:tabular-nums; }
.cd-cell span{ display:block; margin-top:6px; font-size:12px; font-weight:700;
  color:var(--ink-soft); letter-spacing:.04em; }

/* ============================================================
   DRESS CODE — no black / no white
   ============================================================ */
.rule{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px; }
.rule-no{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px;
  color:var(--ink); position:relative; }
.rule-no .sw{ width:30px; height:30px; border-radius:8px; position:relative; }
.sw--black{ background:#2b2b2b; }
.sw--white{ background:#fff; border:2px solid var(--cream-2); }
.rule-no::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:3px;
  background:var(--magenta); transform:rotate(-8deg); border-radius:3px; }
.rule-x{ color:var(--orange); font-weight:800; }

/* ============================================================
   PHOTO GRID
   ============================================================ */
.photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:460px;
  margin-inline:auto; grid-auto-rows:120px; }
.photo-grid .ph{ width:100%; height:100%; }
.photo-grid .ph.tall{ grid-row:span 2; }
image-slot{ display:block; }

/* ============================================================
   RSVP CARD + STEPS
   ============================================================ */
.card{ background:var(--paper); border-radius:24px; padding:22px;
  box-shadow:var(--shadow); border:2px solid rgba(58,38,32,.08); }
.step-pill{ flex:1; text-align:center; font-size:11px; font-weight:700; padding:7px 4px;
  border-radius:999px; background:var(--cream); color:var(--ink-soft); white-space:nowrap; }
.step-pill.on{ background:var(--magenta); color:#fff; }
.step-pill.done{ background:var(--green); color:#fff; }

.pend-icon{ font-size:46px; }
.pend-bar{ height:8px; border-radius:999px; background:var(--cream-2); overflow:hidden; margin-top:18px; }
.pend-bar span{ display:block; height:100%; width:40%; border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--magenta)); }
@media (prefers-reduced-motion: no-preference){
  .pend-bar span{ animation:slideBar 1.8s ease-in-out infinite; }
}
@keyframes slideBar{ 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }

/* ============================================================
   BEACH PASS
   ============================================================ */
.pass{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
  background:var(--paper); border:2px solid rgba(58,38,32,.1); }
.pass-top{ display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  background:repeating-linear-gradient(-68deg, var(--magenta) 0 18px, var(--pink-deep) 18px 36px); }
.pass-qr{ display:grid; place-items:center; padding:22px 0 6px; }
.pass-qr canvas{ border-radius:14px; box-shadow:var(--shadow-sm); }
.pass-meta{ display:flex; justify-content:space-around; gap:8px; padding:14px 16px 4px; }
.pass-meta > div{ text-align:center; }
.pass-meta span{ display:block; font-size:11px; color:var(--ink-soft); font-weight:700; }
.pass-meta b{ display:block; font-size:16px; color:var(--ink); margin-top:2px; }
.pass-foot{ text-align:center; padding:14px; margin-top:6px; font-weight:700; font-size:13px;
  color:var(--ink-soft); border-top:2px dashed var(--cream-2); }