/* Function invite page styles. Everything is scoped under .invite so it
   never collides with the dashboard / builder UI we build later.
   Fonts (--font-anton, --font-outfit) are self-hosted via next/font. */

.invite{
  --navy:#0a1633; --red:#ff3b5c; --gold:#ffcf5c; --teal:#37e0c8;
  --cream:#fef6e9; --muted:#a9b6d6;
  --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.12);
  --glow1:rgba(255,59,92,.25); --glow2:rgba(55,224,200,.18);
  --base1:#070f25; --base2:#060c1f;
  font-family:var(--font-outfit),system-ui,sans-serif;
  color:var(--cream);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--glow1), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, var(--glow2), transparent 60%),
    linear-gradient(180deg,var(--base1) 0%, var(--navy) 40%, var(--base2) 100%);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow:clip;
}
.invite *{box-sizing:border-box}

/* Aurora: three slow-drifting color fields in the event theme's own hues,
   glowing through the glass cards above. Transform-only animation, stilled
   under prefers-reduced-motion. */
.invite .aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.invite .aurora i{position:absolute;border-radius:50%;width:72vmax;height:72vmax;will-change:transform}
.invite .aurora i:nth-child(1){
  left:-18vmax;top:-24vmax;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--red) 30%, transparent), transparent 72%);
  animation:aurDrift1 34s ease-in-out infinite alternate;
}
.invite .aurora i:nth-child(2){
  right:-24vmax;top:8vmax;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--teal) 24%, transparent), transparent 72%);
  animation:aurDrift2 46s ease-in-out infinite alternate;
}
.invite .aurora i:nth-child(3){
  left:6vmax;bottom:-30vmax;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--gold) 20%, transparent), transparent 72%);
  animation:aurDrift3 58s ease-in-out infinite alternate;
}
@keyframes aurDrift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vmax,10vmax,0) scale(1.18)}}
@keyframes aurDrift2{from{transform:translate3d(0,0,0) scale(1.12)}to{transform:translate3d(-12vmax,14vmax,0) scale(.94)}}
@keyframes aurDrift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(10vmax,-12vmax,0) scale(1.22)}}
@media (prefers-reduced-motion: reduce){.invite .aurora i{animation:none}}

/* Effects: host-chosen ambient particles (custom.effect), colored by the theme.
   Fixed to the viewport on the live invite; absolute (clipped) inside the
   builder's phone-mockup preview. Transform/opacity only. */
.invite .fx{position:fixed;inset:0;z-index:2;pointer-events:none}
.invite.is-preview .fx{position:absolute}
.invite .fx i{position:absolute;will-change:transform,opacity}

/* Confetti — festive multi-color, mixed rectangle / circle / strip shapes, spinning
   as it falls (iMessage-style, not tied to the 2-color theme). */
.invite .fx-confetti i{
  top:-8vh;left:calc(var(--i) * 3.9%);
  width:9px;height:14px;border-radius:2px;
  background:#ff3b3b;opacity:.9;
  animation:fxFall 7.2s linear infinite;
  animation-delay:calc(var(--i) * -0.62s);
}
.invite .fx-confetti i:nth-child(7n){background:#2e9bff}
.invite .fx-confetti i:nth-child(7n+1){background:#35d07f}
.invite .fx-confetti i:nth-child(7n+2){background:#ffe14d}
.invite .fx-confetti i:nth-child(7n+3){background:#a855f7}
.invite .fx-confetti i:nth-child(7n+4){background:#ff9f1c}
.invite .fx-confetti i:nth-child(7n+5){background:#22d3ee}
.invite .fx-confetti i:nth-child(7n+6){background:#ff5fa2}
.invite .fx-confetti i:nth-child(3n){border-radius:50%;width:9px;height:9px}   /* circles */
.invite .fx-confetti i:nth-child(4n){width:6px;height:15px}                     /* thin strips */
.invite .fx-confetti i:nth-child(odd){animation-name:fxFallSway}
.invite .fx-confetti i:nth-child(3n+1){animation-duration:8.6s}
.invite .fx-confetti i:nth-child(3n+2){animation-duration:6.1s}
@keyframes fxFall{to{transform:translate3d(3vw,110vh,0) rotate(540deg)}}
@keyframes fxFallSway{to{transform:translate3d(-4vw,110vh,0) rotate(-460deg)}}

/* Sparkle — glint flares: a bright core with thin crossing light rays that flash
   and rotate a quarter-turn (lens-sparkle look). Core + rays scale together. */
.invite .fx-sparkle i{
  left:calc(3% + var(--i) * 6.8%);top:12%;
  width:4px;height:4px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px 2px color-mix(in srgb, var(--gold) 75%, transparent);
  opacity:0;animation:fxGlint 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -0.37s);
}
.invite .fx-sparkle i::before,.invite .fx-sparkle i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.invite .fx-sparkle i::before{width:1.5px;height:24px;background:linear-gradient(transparent,rgba(255,255,255,.95),transparent)}
.invite .fx-sparkle i::after{width:24px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent)}
.invite .fx-sparkle i:nth-child(4n){top:38%}
.invite .fx-sparkle i:nth-child(4n+1){top:62%}
.invite .fx-sparkle i:nth-child(4n+2){top:86%;box-shadow:0 0 8px 2px color-mix(in srgb, var(--teal) 65%, transparent)}
.invite .fx-sparkle i:nth-child(4n+3){top:26%}
.invite .fx-sparkle i:nth-child(3n){width:6px;height:6px}
@keyframes fxGlint{0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(90deg)}}

/* --- Expanded effect set. All variation is index-derived (var(--i)) or
   nth-child so SSR and the client render identical markup (no Math.random).
   Emoji effects render a glyph; the rest are theme-colored CSS shapes. --- */
.invite .fx-hearts i{font-style:normal;line-height:1}

/* Hearts — emoji floating up from the bottom */
.invite .fx-hearts i{
  left:calc(2% + var(--i) * 6.6%);bottom:-8vh;font-size:20px;
  animation:fxRise 4.6s linear infinite;animation-delay:calc(var(--i) * -0.53s);
}
.invite .fx-hearts i:nth-child(odd){animation-name:fxRiseSway;animation-duration:5.6s}
.invite .fx-hearts i:nth-child(3n){font-size:14px}
.invite .fx-hearts i:nth-child(3n+2){font-size:26px}

/* Snow — soft, out-of-focus flakes with depth: varied size, blur and opacity so
   some read near (big/soft) and some far (small/faint), gently swaying down. */
.invite .fx-snow i{
  top:-6vh;left:calc(var(--i) * 4.3%);width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #fff, rgba(255,255,255,.6) 46%, rgba(255,255,255,0) 72%);
  opacity:.9;animation:fxFall 9.5s linear infinite;animation-delay:calc(var(--i) * -0.7s);
}
.invite .fx-snow i:nth-child(odd){animation-name:fxFallSway;animation-duration:12s}
.invite .fx-snow i:nth-child(3n){width:6px;height:6px;opacity:.7}
.invite .fx-snow i:nth-child(3n+2){width:16px;height:16px;filter:blur(1.5px);opacity:.8}
.invite .fx-snow i:nth-child(5n){filter:blur(3px);opacity:.5}

/* Bubbles — outlined circles floating up */
.invite .fx-bubbles i{
  bottom:-8vh;left:calc(2% + var(--i) * 5.3%);width:16px;height:16px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.6);background:rgba(255,255,255,.06);
  animation:fxRise 5.6s ease-in infinite;animation-delay:calc(var(--i) * -0.6s);
}
.invite .fx-bubbles i:nth-child(odd){animation-name:fxRiseSway}
.invite .fx-bubbles i:nth-child(3n){width:24px;height:24px}
.invite .fx-bubbles i:nth-child(3n+1){width:10px;height:10px}

/* Stars — crisp 4-point sparkle stars (CSS clip-path) twinkling + rotating, in
   white / gold / theme-teal, scattered across the field with a soft glow. */
.invite .fx-stars i{
  left:calc(3% + var(--i) * 6.4%);top:8%;width:18px;height:18px;background:#fff;
  clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--gold) 80%,transparent));
  opacity:0;animation:fxStar 3s ease-in-out infinite;animation-delay:calc(var(--i) * -0.4s);
}
.invite .fx-stars i:nth-child(2n){background:color-mix(in srgb,var(--gold) 85%,#fff);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 85%,transparent))}
.invite .fx-stars i:nth-child(3n){background:color-mix(in srgb,var(--teal) 72%,#fff);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--teal) 78%,transparent))}
.invite .fx-stars i:nth-child(4n){top:30%;width:12px;height:12px}
.invite .fx-stars i:nth-child(4n+1){top:54%;width:22px;height:22px}
.invite .fx-stars i:nth-child(4n+2){top:74%;width:14px;height:14px}
.invite .fx-stars i:nth-child(4n+3){top:90%}
@keyframes fxStar{0%,100%{opacity:0;transform:scale(.3) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(45deg)}}

/* Embers — warm sparks rising, themed */
.invite .fx-embers i{
  bottom:-4vh;left:calc(2% + var(--i) * 4.6%);width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 6px 1px #ff7a1a;
  animation:fxRise 3.8s linear infinite;animation-delay:calc(var(--i) * -0.42s);
}
.invite .fx-embers i:nth-child(3n){background:#ff7a1a}
.invite .fx-embers i:nth-child(3n+1){background:var(--red)}
.invite .fx-embers i:nth-child(odd){animation-name:fxRiseSway;animation-duration:4.6s}

/* Balloons — big glossy multi-color balloons surging up the screen with knots +
   strings, iMessage-style. Each <i> is the balloon body; ::before is the knot,
   ::after the string. Colored per-balloon via --balloon (nth-child), not themed. */
.invite .fx-balloons i{
  left:calc(1% + var(--i) * 6.1%);bottom:-24vh;
  width:44px;height:56px;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;
  background:radial-gradient(circle at 34% 27%, rgba(255,255,255,.6), rgba(255,255,255,0) 45%), var(--balloon,#ff3b3b);
  box-shadow:inset -6px -9px 13px rgba(0,0,0,.18);
  animation:fxBalloonRise 9s ease-in-out infinite;animation-delay:calc(var(--i) * -1.05s);
}
.invite .fx-balloons i::before{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:7px;transform:translateX(-50%);border-radius:0 0 3px 3px;background:var(--balloon,#ff3b3b);filter:brightness(.82)}
.invite .fx-balloons i::after{content:"";position:absolute;left:50%;top:100%;margin-top:5px;width:1.5px;height:44px;transform:translateX(-50%);background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.06))}
.invite .fx-balloons i:nth-child(7n){--balloon:#ff3b3b}
.invite .fx-balloons i:nth-child(7n+1){--balloon:#2e9bff}
.invite .fx-balloons i:nth-child(7n+2){--balloon:#35d07f}
.invite .fx-balloons i:nth-child(7n+3){--balloon:#ffe14d}
.invite .fx-balloons i:nth-child(7n+4){--balloon:#a855f7}
.invite .fx-balloons i:nth-child(7n+5){--balloon:#ff9f1c}
.invite .fx-balloons i:nth-child(7n+6){--balloon:#ff5fa2}
.invite .fx-balloons i:nth-child(3n){width:58px;height:73px;animation-duration:11s}
.invite .fx-balloons i:nth-child(3n+1){width:36px;height:46px;animation-duration:7.6s}
.invite .fx-balloons i:nth-child(even){animation-name:fxBalloonSway}
@keyframes fxBalloonRise{0%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-66vh) rotate(2deg)}100%{transform:translateY(-140vh) rotate(-1deg)}}
@keyframes fxBalloonSway{0%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(3.2vw,-66vh) rotate(-2deg)}100%{transform:translate(-2.4vw,-140vh) rotate(1deg)}}

/* Petals — cherry-blossom petals: a notched SVG-masked silhouette (scales cleanly
   at any size), soft pink gloss gradient + a faint center vein (::after, clipped by
   the mask), depth-of-field variance, tumbling in 3D (scaleX flips it edge-on as it
   spins) while it drifts down. Pink by nature, not themed. */
.invite .fx-petals i{
  --petal:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M50%2096%20C18%2090%206%2062%2014%2040%20C18%2028%2030%2018%2040%2020%20C45%2021%2048%2026%2050%2034%20C52%2026%2055%2021%2060%2020%20C70%2018%2082%2028%2086%2040%20C94%2062%2082%2090%2050%2096%20Z'%20fill='black'/%3E%3C/svg%3E");
  top:-6vh;left:calc(2% + var(--i) * 5.9%);width:19px;height:18px;
  background:radial-gradient(circle at 34% 26%, #fff4f8, #ffa9cd 55%, #ff86b6);
  -webkit-mask:var(--petal) center/100% 100% no-repeat;mask:var(--petal) center/100% 100% no-repeat;
  opacity:.94;
  animation:fxPetalFall 6.8s linear infinite;animation-delay:calc(var(--i) * -0.7s);
}
.invite .fx-petals i::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,transparent 45%,rgba(255,255,255,.5) 50%,transparent 55%)}
.invite .fx-petals i:nth-child(2n){background:radial-gradient(circle at 34% 26%, #fff7fb, #ffbcd8 55%, #ff97c1)}
.invite .fx-petals i:nth-child(4n){background:radial-gradient(circle at 34% 26%, #ffeef4, #f2a9c8 55%, #e58fb6)}
.invite .fx-petals i:nth-child(3n){width:13px;height:12px;opacity:.82}
.invite .fx-petals i:nth-child(3n+2){width:25px;height:23px;animation-duration:8.6s}
.invite .fx-petals i:nth-child(5n){filter:blur(1px);opacity:.72}
@keyframes fxPetalFall{
  0%{transform:translate(0,0) rotate(0deg) scaleX(1)}
  25%{transform:translate(3vw,29vh) rotate(130deg) scaleX(.35)}
  50%{transform:translate(6vw,58vh) rotate(220deg) scaleX(.9)}
  75%{transform:translate(1.5vw,87vh) rotate(330deg) scaleX(.4)}
  100%{transform:translate(-3vw,116vh) rotate(460deg) scaleX(1)}
}

/* Fireflies — green glows wandering and pulsing */
.invite .fx-fireflies i{
  left:calc(6% + var(--i) * 5.2%);top:14%;width:5px;height:5px;border-radius:50%;
  background:#c8ff8a;box-shadow:0 0 8px 2px #7fff5a;
  animation:fxDrift 4.6s ease-in-out infinite;animation-delay:calc(var(--i) * -0.5s);
}
.invite .fx-fireflies i:nth-child(3n){top:44%}
.invite .fx-fireflies i:nth-child(3n+1){top:66%}
.invite .fx-fireflies i:nth-child(4n){top:84%}

/* Rain — thin streaks falling fast, themed */
.invite .fx-rain i{
  top:-6vh;left:calc(var(--i) * 3.9%);width:2px;height:16px;border-radius:2px;
  background:linear-gradient(color-mix(in srgb,var(--teal) 80%,#fff),transparent);opacity:.55;
  animation:fxRainFall 1.1s linear infinite;animation-delay:calc(var(--i) * -0.14s);
}
.invite .fx-rain i:nth-child(odd){animation-duration:.9s}
.invite .fx-rain i:nth-child(3n){height:22px}

/* Bokeh — dreamy defocused light orbs: soft radial discs + a ring variant, varied
   blur for depth, slowly floating up and drifting while they swell and fade. Themed. */
.invite .fx-bokeh i{
  left:calc(var(--i) * 8.4%);top:calc(12% + var(--i) * 6%);width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--red) 55%,transparent), color-mix(in srgb,var(--red) 30%,transparent) 46%, transparent 68%);
  filter:blur(3px);
  animation:fxBokehFloat 9s ease-in-out infinite;animation-delay:calc(var(--i) * -0.7s);
}
.invite .fx-bokeh i:nth-child(3n){background:radial-gradient(circle, color-mix(in srgb,var(--teal) 55%,transparent), transparent 66%);width:78px;height:78px;filter:blur(5px)}
.invite .fx-bokeh i:nth-child(3n+1){background:radial-gradient(circle, color-mix(in srgb,var(--gold) 55%,transparent), transparent 64%);width:36px;height:36px;filter:blur(2px)}
.invite .fx-bokeh i:nth-child(5n){background:radial-gradient(circle, transparent 40%, color-mix(in srgb,var(--gold) 60%,transparent) 56%, transparent 72%)}
.invite .fx-bokeh i:nth-child(4n){filter:blur(8px);opacity:.7}
.invite .fx-bokeh i:nth-child(even){animation-name:fxBokehFloat2}

@keyframes fxRise{to{transform:translate3d(0,-120vh,0)}}
@keyframes fxRiseSway{50%{transform:translate3d(3vw,-60vh,0)}to{transform:translate3d(-2vw,-120vh,0)}}
@keyframes fxDrift{0%{opacity:.2}25%{opacity:1}50%{transform:translate3d(4vw,-3vh,0);opacity:.5}75%{opacity:1}100%{transform:translate3d(-2vw,2vh,0);opacity:.2}}
@keyframes fxRainFall{to{transform:translateY(122vh)}}
@keyframes fxBokehFloat{0%,100%{transform:translate(0,0) scale(.85);opacity:.35}50%{transform:translate(3vw,-9vh) scale(1.18);opacity:.85}}
@keyframes fxBokehFloat2{0%,100%{transform:translate(0,0) scale(1.05);opacity:.4}50%{transform:translate(-3vw,-10vh) scale(1.28);opacity:.8}}

@media (prefers-reduced-motion: reduce){.invite .fx{display:none}}

/* theme: function / brand — pink · violet · cyan, the Function gradient */
.invite[data-theme="function"]{
  --navy:#140d29; --red:#ff2e88; --teal:#22d3ee; --gold:#ffd76a;
  --glow1:rgba(255,46,136,.28); --glow2:rgba(168,85,247,.22);
  --base1:#0b0716; --base2:#080510;
}
/* Brand trio in the drifting aurora: pink, cyan, then violet (the --grad mid). */
.invite[data-theme="function"] .aurora i:nth-child(1){background:radial-gradient(closest-side, color-mix(in srgb, #ff2e88 32%, transparent), transparent 72%)}
.invite[data-theme="function"] .aurora i:nth-child(2){background:radial-gradient(closest-side, color-mix(in srgb, #22d3ee 26%, transparent), transparent 72%)}
.invite[data-theme="function"] .aurora i:nth-child(3){background:radial-gradient(closest-side, color-mix(in srgb, #a855f7 28%, transparent), transparent 72%)}

/* theme: summer / day party */
.invite[data-theme="summer"]{
  --navy:#0a2b27; --red:#ff7a1a; --teal:#13d0c1; --gold:#ffd54a;
  --glow1:rgba(255,122,26,.28); --glow2:rgba(19,208,193,.20);
  --base1:#08221f; --base2:#06140f;
}
/* theme: night / club */
.invite[data-theme="night"]{
  --navy:#160a2e; --red:#b14bff; --teal:#ff4d9d; --gold:#ffd54a;
  --glow1:rgba(177,75,255,.30); --glow2:rgba(255,77,157,.18);
  --base1:#0c0620; --base2:#080414;
}
/* theme: sunset / golden hour */
.invite[data-theme="sunset"]{
  --navy:#3a1533; --red:#ff5a5f; --teal:#ffb84d; --gold:#ffd27a;
  --glow1:rgba(255,90,95,.32); --glow2:rgba(255,184,77,.22);
  --base1:#2a0f2b; --base2:#180a1c;
}
/* theme: miami / neon */
.invite[data-theme="miami"]{
  --navy:#0a1f3a; --red:#ff2e88; --teal:#22d3ee; --gold:#7af9ff;
  --glow1:rgba(255,46,136,.30); --glow2:rgba(34,211,238,.22);
  --base1:#071427; --base2:#04101f;
}
/* theme: noir / black & gold */
.invite[data-theme="noir"]{
  --navy:#141414; --red:#f0c667; --teal:#d4af6a; --gold:#f0c667;
  --cream:#f6f1e6; --muted:#a99f86;
  --glow1:rgba(240,198,103,.14); --glow2:rgba(240,198,103,.06);
  --base1:#0c0c0c; --base2:#060606;
}
/* noir uses a light CTA, so its label needs dark ink for contrast */
.invite[data-theme="noir"]{ --cta-ink:#171204; }
/* theme: aqua / ocean */
.invite[data-theme="aqua"]{
  --navy:#0a2740; --red:#1fb6ff; --teal:#2ee6c9; --gold:#7af9ff;
  --glow1:rgba(31,182,255,.30); --glow2:rgba(46,230,201,.20);
  --base1:#071a2e; --base2:#04101f;
}
/* theme: candy / pastel pop */
.invite[data-theme="candy"]{
  --navy:#2a1140; --red:#ff5fa2; --teal:#c07bff; --gold:#ffd36e;
  --glow1:rgba(255,95,162,.30); --glow2:rgba(192,123,255,.22);
  --base1:#1e0b30; --base2:#140720;
}
/* theme: cyber / neon grid */
.invite[data-theme="cyber"]{
  --navy:#12082a; --red:#f637ec; --teal:#22ffd3; --gold:#c6ff3d;
  --glow1:rgba(246,55,236,.28); --glow2:rgba(34,255,211,.22);
  --base1:#0a0420; --base2:#050212;
}
/* theme: ember / fire */
.invite[data-theme="ember"]{
  --navy:#2b0f10; --red:#ff5a1f; --teal:#ffab3d; --gold:#ffd15c;
  --glow1:rgba(255,90,31,.32); --glow2:rgba(255,140,50,.20);
  --base1:#1e0a0a; --base2:#120505;
}
/* theme: ice / frost — a cool, light palette; dark ink on its bright CTA */
.invite[data-theme="ice"]{
  --navy:#16324d; --red:#5cc8ff; --teal:#a9e8ff; --gold:#e8f6ff;
  --glow1:rgba(92,200,255,.26); --glow2:rgba(169,232,255,.18);
  --base1:#0c2136; --base2:#08131f; --cta-ink:#0a1b2b;
}
/* Elegant wedding accent palettes. Dark bases so they also read on standard/flyer
   invites; the .is-wedding skin below swaps the base to a light ivory ground. */
.invite[data-theme="champagne"]{
  --navy:#2a2416; --red:#c9a227; --teal:#b08d57; --gold:#e6c976;
  --glow1:rgba(201,162,39,.22); --glow2:rgba(230,201,118,.16);
  --base1:#1c1810; --base2:#12100a; --cta-ink:#241c05;
}
.invite[data-theme="blush"]{
  --navy:#2e1c22; --red:#d98a9e; --teal:#c9a3b0; --gold:#e6c976;
  --glow1:rgba(217,138,158,.22); --glow2:rgba(230,201,118,.16);
  --base1:#231419; --base2:#170d11; --cta-ink:#2a121a;
}
.invite[data-theme="sage"]{
  --navy:#1e2a20; --red:#7c9473; --teal:#a3b899; --gold:#d8c98a;
  --glow1:rgba(124,148,115,.22); --glow2:rgba(216,201,138,.16);
  --base1:#161f17; --base2:#0e150f; --cta-ink:#14210f;
}
/* Garden: a watercolor-floral background. Blush + sage accents; in the Weddings &
   Events (light) layout the ::before swaps to the floral image (below). */
.invite[data-theme="garden"]{
  --navy:#22291f; --red:#cf7f93; --teal:#8aa17f; --gold:#e0c07a;
  --glow1:rgba(207,127,147,.22); --glow2:rgba(138,161,127,.18);
  --base1:#161d14; --base2:#0f140d; --cta-ink:#3a2a2e;
}

.invite .wrap{max-width:520px;margin:0 auto;padding:0 0 120px;position:relative;z-index:1}
.invite .stripes{height:6px;background:repeating-linear-gradient(90deg,var(--red) 0 22px,#fff 22px 44px,#2a6df4 44px 66px)}
.invite[data-theme="summer"] .stripes,
.invite[data-theme="night"] .stripes,
.invite[data-theme="sunset"] .stripes,
.invite[data-theme="miami"] .stripes,
.invite[data-theme="noir"] .stripes,
.invite[data-theme="aqua"] .stripes,
.invite[data-theme="candy"] .stripes,
.invite[data-theme="cyber"] .stripes,
.invite[data-theme="ember"] .stripes,
.invite[data-theme="ice"] .stripes,
.invite[data-theme="champagne"] .stripes,
.invite[data-theme="blush"] .stripes,
.invite[data-theme="sage"] .stripes,
.invite[data-theme="garden"] .stripes{background:linear-gradient(90deg,var(--red),var(--teal))}
/* Function shows the full brand gradient (pink · violet · cyan) across the strip */
.invite[data-theme="function"] .stripes{background:linear-gradient(90deg,#ff2e88,#a855f7 55%,#22d3ee)}

.invite .hero{
  position:relative;min-height:460px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 22px 24px;
  background-image:linear-gradient(180deg, rgba(7,15,37,.15) 0%, rgba(7,15,37,.55) 55%, rgba(6,12,31,.95) 100%),
    linear-gradient(135deg,#13245a,#0a1633);
  background-size:cover;background-position:center 32%;
}
.invite .eyebrow{font-weight:800;letter-spacing:.32em;font-size:12px;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.invite .hero h1{
  font-family:var(--font-title, var(--font-anton)),sans-serif;font-weight:400;line-height:.92;margin:0;
  font-size:clamp(50px,15.5vw,84px);text-transform:uppercase;letter-spacing:.5px;
  text-shadow:0 4px 24px rgba(0,0,0,.6);
  overflow-wrap:break-word;
}
/* Playfair is a serif; drop the uppercase treatment so it reads elegant */
.invite[style*="playfair"] .hero h1{text-transform:none;letter-spacing:0}
.invite .hero h1 .l2{color:var(--red)}
.invite .hero .sub{margin:14px 0 0;color:#e9eefc;font-weight:600;font-size:15px}
.invite .hero .sub b{color:var(--teal)}

.invite .count{display:flex;gap:8px;margin-top:18px}
.invite .count .cell{flex:1;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.invite .count .n{font-family:var(--font-anton),sans-serif;font-size:26px;line-height:1}
.invite .count .k{font-size:10px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin-top:4px}

.invite .card{
  margin:16px 16px 0;background:var(--card);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px;
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.25);
}
.invite .card h2{margin:0 0 14px;font-family:var(--font-anton),sans-serif;font-weight:400;letter-spacing:.5px;font-size:22px;text-transform:uppercase}
.invite .lineup{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.invite .lineup .it{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:12px}
.invite .lineup .it .e{font-size:24px}
.invite .lineup .it .t{font-weight:600;font-size:14px}

.invite .row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed var(--line)}
.invite .row:last-child{border-bottom:0}
.invite .row .e{font-size:20px;width:26px;text-align:center}
.invite .row .lab{font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.invite .row .val{font-weight:700;font-size:16px;margin-top:2px}

.invite .btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.invite .btn{flex:1 1 140px;text-align:center;text-decoration:none;border-radius:999px;padding:13px 16px;font-weight:800;font-size:15px;border:1px solid var(--line);color:var(--cream);background:rgba(255,255,255,.06)}
.invite .btn:hover{background:rgba(255,255,255,.12)}

.invite .rsvp-card{background:linear-gradient(135deg,rgba(255,59,92,.18),rgba(55,224,200,.10));border-color:rgba(255,59,92,.4)}
.invite[data-theme="summer"] .rsvp-card,
.invite[data-theme="night"] .rsvp-card,
.invite[data-theme="sunset"] .rsvp-card,
.invite[data-theme="miami"] .rsvp-card,
.invite[data-theme="noir"] .rsvp-card,
.invite[data-theme="aqua"] .rsvp-card,
.invite[data-theme="candy"] .rsvp-card,
.invite[data-theme="cyber"] .rsvp-card,
.invite[data-theme="ember"] .rsvp-card,
.invite[data-theme="ice"] .rsvp-card,
.invite[data-theme="champagne"] .rsvp-card,
.invite[data-theme="blush"] .rsvp-card,
.invite[data-theme="sage"] .rsvp-card,
.invite[data-theme="garden"] .rsvp-card{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
.invite[data-theme="function"] .rsvp-card{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
.invite .cta{display:block;text-align:center;text-decoration:none;background:var(--red);color:var(--cta-ink,#fff);font-weight:800;font-size:18px;letter-spacing:.02em;border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(255,59,92,.35);border:none;cursor:pointer;width:100%}
.invite .cta:active{transform:translateY(1px)}
.invite .rsvp-note{color:var(--muted);font-size:13px;text-align:center;margin-top:12px}

.invite footer{text-align:center;color:var(--muted);font-size:12px;padding:26px 16px}
.invite footer .flag{font-size:18px}

.invite .sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(6,12,31,.78) 30%);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  mask-image:linear-gradient(180deg,transparent,#000 26%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%)}
.invite .sticky .cta{max-width:520px;margin:0 auto}

/* Cover / cash-at-door card */
.invite .cover-card{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.invite .cover-amount{font-family:var(--font-anton),sans-serif;font-size:34px;line-height:1;color:var(--gold)}
.invite .cover-note{margin-top:8px;color:var(--muted);font-size:14px}
.invite .pay-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.invite .pay{font-weight:800;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid var(--line2)}
.invite .pay.venmo{background:rgba(52,140,255,.16);color:#8fc0ff;border-color:rgba(52,140,255,.4)}
.invite .pay.cashapp{background:rgba(0,214,102,.14);color:#66e6a0;border-color:rgba(0,214,102,.4)}

/* Guest photo wall */
.invite .photo-card{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.invite .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.invite .photo{aspect-ratio:1;border-radius:12px;background-size:cover;background-position:center;border:1px solid var(--line);display:block;background-color:rgba(255,255,255,.05)}
.invite .photo-empty{color:var(--muted);font-size:14px;text-align:center;padding:6px 0}
.invite .photo-add{display:block;text-align:center;margin-top:14px;padding:13px;border-radius:12px;border:1px dashed var(--line2);color:var(--cream);font-weight:800;font-size:15px;cursor:pointer;background:rgba(255,255,255,.05)}
.invite .photo-add:hover{border-color:var(--red)}

/* Recap (after the event ends) */
.invite .recap-card{background:linear-gradient(135deg,rgba(255,207,92,.14),rgba(255,255,255,.03));border-color:rgba(255,207,92,.35)}
.invite .recap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.invite .recap-stats .rs{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:14px 8px;text-align:center}
.invite .recap-stats .n{font-family:var(--font-anton),sans-serif;font-size:30px;line-height:1}
.invite .recap-stats .k{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:5px}
.invite .recap-note{color:var(--muted);font-size:13.5px;text-align:center;margin-top:14px}

/* Your RSVP (returning guest) */
.invite .myrsvp{display:grid;gap:12px}
.invite .my-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.invite .my-name{font-size:15px}
.invite .my-status{font-size:12.5px;font-weight:800;color:var(--teal);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:4px 10px;border-radius:999px}
.invite .my-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.invite .my-link{color:var(--gold);font-weight:800;font-size:13.5px;background:none;border:none;cursor:pointer;padding:0;text-decoration:none}
.invite .my-link.ghost{color:var(--muted)}
.invite .my-cancel{background:none;border:none;color:#ff8095;font-weight:700;font-size:13.5px;cursor:pointer;padding:0}
.invite .my-cancel.confirm{color:#fff;background:#ff2e5c;border-radius:999px;padding:6px 12px}
.invite .transfer-form{display:flex;gap:8px;flex-wrap:wrap}
.invite .transfer-form input{flex:1;min-width:150px;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--ink,#fff);font-family:inherit;font-size:14px}
.invite .transfer-form input:focus{outline:none;border-color:var(--gold)}
.invite .transfer-form button{background:var(--gold);color:#171204;border:none;border-radius:12px;padding:0 16px;font-weight:800;font-size:14px;cursor:pointer;font-family:inherit}
.invite .transfer-form button:disabled{opacity:.5;cursor:default}
.invite .transfer-note{color:var(--muted);font-size:13.5px;margin:0}
.invite .transfer-link{display:flex;gap:8px}
.invite .transfer-link input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;color:var(--muted);font-family:inherit;font-size:12.5px}
.invite .transfer-link button{background:none;border:1px solid var(--line2);border-radius:12px;padding:0 14px;color:var(--gold);font-weight:800;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
.invite .ticket-link{display:inline-block;margin-top:14px;font-weight:800;color:var(--gold);text-decoration:none;font-size:15px}

/* Ticket page */
.invite .ticket-wrap{min-height:100vh;display:grid;place-items:center;padding:28px 18px;align-content:center}
.invite .ticket-back{color:var(--muted);font-weight:700;font-size:14px;text-decoration:none;margin-bottom:16px}
.invite .ticket{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line2);border-radius:24px;padding:26px 24px;text-align:center;backdrop-filter:blur(8px)}
.invite .t-eyebrow{font-weight:800;letter-spacing:.28em;font-size:11px;color:var(--gold);text-transform:uppercase}
.invite .t-title{font-family:var(--font-title,var(--font-anton)),sans-serif;font-weight:400;text-transform:uppercase;font-size:32px;line-height:1;margin:10px 0 0}
.invite .t-meta{color:var(--muted);font-size:13.5px;font-weight:600;margin-top:8px}
.invite .t-divider{display:flex;align-items:center;margin:20px -24px;position:relative}
.invite .t-divider .dash{flex:1;border-top:2px dashed var(--line2)}
.invite .t-divider .notch{width:22px;height:22px;border-radius:50%;background:var(--base2,#060c1f);border:1px solid var(--line2);flex:0 0 auto}
.invite .t-divider .notch.left{margin-left:-11px}
.invite .t-divider .notch.right{margin-right:-11px}
.invite .t-guest{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.invite .t-label{font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;font-weight:800}
.invite .t-name{font-weight:800;font-size:20px;margin-top:2px}
.invite .t-tier{color:var(--teal);font-weight:700;font-size:13px;margin-top:2px}
.invite .t-badge{flex:0 0 auto;font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:999px;border:1px solid var(--line2)}
.invite .t-badge.go{color:var(--teal);background:rgba(55,224,200,.12)}
.invite .t-badge.in{color:#66e6a0;background:rgba(0,214,102,.14)}
.invite .t-badge.wait{color:var(--gold);background:rgba(255,207,92,.12)}
.invite .t-qrbox{margin:20px auto 0;width:212px;height:212px;background:#fff;border-radius:16px;display:grid;place-items:center}
.invite .t-hint{color:var(--muted);font-size:12.5px;margin-top:14px}

/* Host announcement banner */
.invite .announce{display:flex;align-items:center;gap:10px;margin:12px 16px 0;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(255,207,92,.18),rgba(255,59,92,.14));border:1px solid rgba(255,207,92,.4)}
.invite .announce-tag{flex:0 0 auto;font-weight:800;font-size:12px;letter-spacing:.04em;color:var(--gold);text-transform:uppercase}
.invite .announce-body{font-weight:700;font-size:14px;color:var(--cream)}

/* Run of show */
.invite .rundown{display:grid;gap:2px}
.invite .run-item{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line)}
.invite .run-item:last-child{border-bottom:0}
.invite .run-time{flex:0 0 84px;font-weight:800;color:var(--teal);font-size:14px}
.invite .run-label{font-weight:600;font-size:15px}

/* RSVP tier picker */
.invite .tier-pick{display:flex;flex-wrap:wrap;gap:8px}
.invite .tier-pick button{flex:1 1 auto;min-width:90px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--cream);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:2px;align-items:center}
.invite .tier-pick button.on{background:var(--red);border-color:var(--red);color:var(--cta-ink,#fff)}
.invite .tier-pick button.full{opacity:.45;cursor:not-allowed}
.invite .tier-pick .tp-desc{font-size:11px;font-weight:600;opacity:.8}

/* Map embed */
.invite .map-embed{margin-top:16px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.invite .map-embed iframe{display:block;width:100%;height:220px;border:0;filter:grayscale(.2) contrast(1.05)}

/* Misc */
.invite .tz-hint{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.invite .done-cal{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.invite .done-cal .btn{flex:1 1 140px}

/* Photo lightbox */
.invite .photo{border:1px solid var(--line);cursor:pointer;padding:0;width:100%}
.invite .lightbox{position:fixed;inset:0;z-index:60;background:rgba(4,2,10,.88);display:grid;place-items:center;padding:22px;backdrop-filter:blur(6px)}
.invite .lightbox img{max-width:min(94vw,900px);max-height:86vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.invite .lb-close{position:fixed;top:16px;right:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer}

/* Song requests */
.invite .song-card{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.invite .song-list{display:grid;gap:8px}
.invite .song-item{display:flex;gap:8px;align-items:baseline;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.invite .song-title{font-weight:700;font-size:15px}
.invite .song-by{color:var(--muted);font-size:13px}

/* Who's coming */
.invite .guestlist-card{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.invite .who-grid{display:flex;flex-wrap:wrap;gap:10px}
.invite .who{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px}
.invite .who-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:var(--red)}
.invite .who-name{font-weight:700;font-size:14px}

/* Share & get credit (referral) */
.invite .share-credit{margin-top:16px;padding:16px;border-radius:14px;border:1px dashed var(--line2);background:rgba(255,255,255,.04);text-align:center}
.invite .sc-title{font-weight:800;font-size:15px}
.invite .sc-sub{color:var(--muted);font-size:13px;margin:4px 0 12px}
.invite .sc-btn{background:rgba(255,255,255,.08);border:1px solid var(--line2);color:var(--cream);font-weight:800;font-size:14px;padding:11px 16px;border-radius:12px;cursor:pointer}
.invite .sc-btn:hover{background:rgba(255,255,255,.14)}

/* Private-event lock screen */
.invite .lock-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.invite .lock-card{max-width:400px;width:100%;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 26px;backdrop-filter:blur(8px)}
.invite .lock-emoji{font-size:44px}
.invite .lock-card h1{font-family:var(--font-anton),sans-serif;font-weight:400;text-transform:uppercase;font-size:34px;margin:8px 0 0}
.invite .lock-sub{color:var(--muted);font-size:15px;margin:8px 0 18px}
.invite .lock-form{display:grid;gap:10px}

/* Host moderation (walls) */
.invite .hype-item,.invite .song-item{position:relative}
.invite .mod-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:8px;border:1px solid var(--line2);background:rgba(8,6,15,.6);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;padding:0}
.invite .mod-x:hover{color:#ff8095;border-color:rgba(255,46,92,.5)}
.invite .photo-cell{position:relative}
.invite .photo-x{top:6px;right:6px;z-index:2}

/* Hype wall (guest comments) */
.invite .hype-card{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.invite .hype-list{display:grid;gap:10px;margin-top:4px}
.invite .hype-item{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.invite .hype-who{font-weight:800;font-size:13px;color:var(--teal)}
.invite .hype-body{font-size:15px;margin-top:2px;word-break:break-word}
.invite .hype-empty{color:var(--muted);font-size:14px;text-align:center;padding:6px 0}
.invite .hype-form{display:grid;gap:8px;margin-top:14px}
.invite .hype-row{display:flex;gap:8px}
.invite .hype-row .ri{flex:1;min-width:0}
.invite .hype-send{background:var(--red);color:var(--cta-ink,#fff);border:none;border-radius:12px;padding:0 18px;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap}
.invite .hype-send:disabled{opacity:.6}

.invite .waitlist-note{color:var(--gold);font-size:13.5px;font-weight:700;text-align:center;margin:0 0 12px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:9px}
.invite .waitlist-note.vouched{color:var(--teal);border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.07)}

/* RSVP form */
.invite .rsvp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.invite .rsvp-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.invite .going-badge{font-size:13px;font-weight:800;color:var(--teal);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:5px 10px;border-radius:999px}
.invite .cap-badge{font-size:13px;font-weight:800;color:var(--gold);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:5px 10px;border-radius:999px}
.invite .cap-badge.hot{color:#fff;background:rgba(255,46,92,.18);border-color:rgba(255,46,92,.55);animation:capPulse 1.6s ease-in-out infinite}
@keyframes capPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,46,92,.35)}50%{box-shadow:0 0 0 7px rgba(255,46,92,0)}}
.invite .addr-reveal{margin-top:6px;display:inline-block;font-size:13px;font-weight:700;color:var(--gold);background:rgba(255,215,106,.08);border:1px dashed rgba(255,215,106,.4);border-radius:10px;padding:6px 10px}
.invite footer .made-with{display:block;margin-top:18px;font-size:12px;font-weight:700;color:var(--muted,rgba(233,238,252,.55));text-decoration:none;opacity:.75;transition:opacity .15s}
.invite footer .made-with b{font-weight:800;color:var(--teal)}
.invite footer .made-with:hover{opacity:1}
.invite .rsvp-closed{text-align:center;padding:14px 0}
.invite .rsvp-closed .big{font-size:20px;font-weight:800}

/* Live preview mode (rendered inside the builder): don't let the sticky CTA
   escape into the page, and clip the tall invite into its panel. */
.invite.is-preview{min-height:0}
.invite.is-preview .sticky{display:none}
.invite.is-preview .wrap{padding-bottom:24px}
.invite .rsvp-form{display:grid;gap:12px;margin-top:4px}
/* RSVP status: big emoji circles (the most important tap on the page) */
.invite .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.invite .seg button{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px 12px;border-radius:20px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--cream);font-weight:700;font-size:13px;
  cursor:pointer;font-family:inherit;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.invite .seg button .se{
  font-size:36px;line-height:1;
  filter:grayscale(.45) brightness(.9);
  transition:filter .18s ease,transform .18s ease;
}
.invite .seg button:hover{background:rgba(255,255,255,.09)}
.invite .seg button:active{transform:scale(.96)}
.invite .seg button.on{
  background:rgba(255,255,255,.10);border-color:var(--red);
  box-shadow:0 0 0 1.5px var(--red), 0 10px 26px rgba(0,0,0,.3);
  color:var(--cream);
}
.invite .seg button.on .se{filter:none;transform:scale(1.15)}
.invite .seg[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.invite .ri{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--cream);font-size:15px;font-family:inherit}
.invite .ri::placeholder{color:var(--muted)}
.invite .ri:focus{outline:none;border-color:var(--red)}
.invite .guests{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted)}
.invite .stepper{display:flex;align-items:center;gap:12px}
.invite .stepper button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--cream);font-size:18px;cursor:pointer;line-height:1}
.invite .stepper b{min-width:34px;text-align:center;font-size:15px}
.invite .group-rsvp{display:grid;gap:8px}
.invite .group-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:var(--muted)}
.invite .group-count{font-weight:800;color:var(--teal)}
.invite .group-row{display:flex;gap:8px;align-items:center}
.invite .group-row .ri{flex:1;min-width:0}
.invite .group-x{flex:0 0 auto;width:38px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.invite .group-x:hover{color:#ff8095;border-color:rgba(255,128,149,.5)}
.invite .group-add{align-self:start;background:none;border:1px dashed var(--line2);color:var(--gold);font-weight:800;font-size:13.5px;font-family:inherit;padding:9px 14px;border-radius:12px;cursor:pointer}
.invite .group-add:hover{border-color:var(--gold)}
.invite .group-paste{display:flex;gap:8px;align-items:flex-start}
.invite .group-paste .ri{flex:1;min-width:0;font-size:13.5px;resize:vertical;font-family:inherit}
.invite .group-paste button{flex:0 0 auto;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--cream);font-weight:800;font-size:13px;font-family:inherit;border-radius:12px;padding:0 14px;cursor:pointer}
.invite .group-paste button:disabled{opacity:.5;cursor:default}
.invite .rsvp-err{color:#ff8095;font-size:13px;font-weight:600;margin:0}
.invite .rsvp-done{text-align:center;padding:10px 0}
.invite .rsvp-done .big{font-size:22px;font-weight:800}

/* ===================== Full-bleed animated gradient look =====================
   The theme gradient fills the whole screen on a fixed ::before layer behind the
   content, so it can animate independently of the page. custom.motion picks the
   animation; custom.pattern adds an overlay texture on ::after. Cards/fields are
   thin outlines over it (instead of filled glass) so the gradient reads through. */
.invite{background:var(--base2)}
.invite::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 720px at 82% -6%, color-mix(in srgb, var(--red) 42%, transparent), transparent 60%),
    radial-gradient(1000px 680px at -6% 12%, color-mix(in srgb, var(--teal) 38%, transparent), transparent 60%),
    radial-gradient(900px 620px at 50% 112%, color-mix(in srgb, var(--red) 26%, transparent), transparent 60%),
    linear-gradient(165deg, var(--base1) 0%, var(--navy) 45%, var(--base2) 100%);
  background-size:200% 200%, 200% 200%, 200% 200%, 100% 100%;
  animation:inv-bg-flow 26s ease-in-out infinite alternate;
}
/* Keep the background + pattern inside the builder's phone preview, not the viewport. */
.invite.is-preview::before,.invite.is-preview::after{position:absolute}
/* Motion (custom.motion): breathe scales + brightens the gradient; pulse just brightens. */
.invite[data-motion="breathe"]::before{animation:inv-bg-breathe 7s ease-in-out infinite}
.invite[data-motion="pulse"]::before{animation:inv-bg-pulse 5.5s ease-in-out infinite}
@keyframes inv-bg-flow{from{background-position:0% 0%, 0% 0%, 0% 0%, 0 0}to{background-position:100% 55%, 80% 45%, 35% 85%, 0 0}}
@keyframes inv-bg-breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.14)}}
@keyframes inv-bg-pulse{0%,100%{filter:brightness(.94)}50%{filter:brightness(1.16)}}

/* Pattern overlay (custom.pattern): a decorative texture over the gradient, below
   the content cards. Present only when a non-"none" pattern is chosen. */
.invite[data-pattern]::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none}
.invite[data-pattern="dots"]::after{
  background-image:radial-gradient(rgba(255,255,255,.5) 1.4px, transparent 1.6px);
  background-size:18px 18px;opacity:.22;animation:fxPan 16s linear infinite;
}
.invite[data-pattern="grid"]::after{
  background-image:linear-gradient(color-mix(in srgb,var(--teal) 55%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--teal) 55%,transparent) 1px,transparent 1px);
  background-size:30px 30px;opacity:.20;
  -webkit-mask-image:radial-gradient(125% 92% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(125% 92% at 50% 0%,#000,transparent 78%);
  animation:fxPan 24s linear infinite;
}
.invite[data-pattern="stripes"]::after{
  background-image:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--red) 60%,transparent) 0 12px, transparent 12px 34px);
  opacity:.14;
}
.invite[data-pattern="mesh"]::after{
  background-image:
    radial-gradient(42% 42% at 18% 22%, color-mix(in srgb,var(--red) 55%,transparent), transparent 70%),
    radial-gradient(40% 40% at 82% 26%, color-mix(in srgb,var(--teal) 50%,transparent), transparent 70%),
    radial-gradient(46% 46% at 50% 92%, color-mix(in srgb,var(--gold) 42%,transparent), transparent 70%);
  opacity:.55;mix-blend-mode:screen;
}
@keyframes fxPan{to{background-position:120px 120px}}
@media (prefers-reduced-motion: reduce){
  .invite::before,.invite[data-motion]::before,.invite[data-pattern]::after{animation:none}
}
.invite .aurora i{width:120vmax;height:120vmax;opacity:1}
/* No-flyer hero lets the full-bleed gradient show through (image case uses inline style). */
.invite .hero{background-image:none}

.invite .card{background:rgba(10,6,26,.14);border:1px solid rgba(255,255,255,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:none}
.invite .rsvp-card,.invite .cover-card,.invite .guestlist-card,.invite .song-card,.invite .hype-card,.invite .photo-card,.invite .recap-card{background:rgba(10,6,26,.14)}
.invite .count .cell{background:transparent;border-color:rgba(255,255,255,.3);-webkit-backdrop-filter:none;backdrop-filter:none}
.invite .btn{background:transparent}
.invite .ri{background:transparent}
.invite .seg button{background:transparent}
.invite .seg button.on{background:rgba(255,255,255,.08)}
.invite .lineup .it{background:transparent}

/* "Good to know" tag pills */
.invite .tags{display:flex;flex-wrap:wrap;gap:8px}
.invite .tag{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px;color:var(--cream);background:transparent}

/* ===================== Flyer layout (custom.layout = "flyer") =====================
   The uploaded flyer is the centerpiece: shown whole as a framed poster, with the
   event caption (eyebrow / title / countdown) below it. All the detail + RSVP /
   ticket cards follow unchanged, so guests tap through to RSVP and tickets. */
.invite.is-flyer .flyer-hero{min-height:0;display:block;padding:0;background:none}
.invite .flyer-shot{position:relative;margin:14px 16px 0;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);line-height:0}
.invite .flyer-img{display:block;width:100%;height:auto}
.invite .flyer-head{padding:16px 22px 4px}
/* The flyer already carries the event name, so the caption title is secondary. */
.invite.is-flyer .hero h1{font-size:clamp(30px,8.5vw,46px);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.invite.is-flyer .flyer-shot .inv-cover-edit{top:10px;right:10px}
/* ===================== Weddings & Events (custom.layout = "wedding") =====================
   A light, elegant skin: ivory ground, warm charcoal serif text, warm-white cards,
   gold hairlines, and a script hero title. Scoped to .is-wedding so other layouts are
   untouched; the theme (champagne/blush/sage/…) supplies the accent trio (--red/--gold). */
.invite.is-wedding{
  --cream:#3d362d; --muted:#95897a; --line:rgba(61,54,45,.16); --line2:rgba(61,54,45,.26);
  color:var(--cream); background:#f6efe2;
  font-family:var(--font-cormorant), Georgia, "Times New Roman", serif;
}
.invite.is-wedding::before{
  background:
    radial-gradient(1100px 760px at 82% -8%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 62%),
    radial-gradient(1000px 700px at -8% 10%, color-mix(in srgb, var(--red) 20%, transparent), transparent 62%),
    radial-gradient(900px 640px at 50% 116%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%),
    linear-gradient(168deg, #fcf8f1 0%, #f6efe2 46%, #f0e7d7 100%);
}
.invite.is-wedding .aurora{display:none}
.invite.is-wedding .stripes{height:0;background:none}
/* Garden theme: the watercolor floral image is the ground (flowers pinned top).
   Cards get a touch more opacity + a soft glow behind the hero for legibility. */
.invite.is-wedding[data-theme="garden"]::before{background:#eef3ea url('/theme-garden.jpg') top center / cover no-repeat}
.invite.is-wedding[data-theme="garden"] .card{background:rgba(255,253,248,.78)}
.invite.is-wedding[data-theme="garden"] .wed-frame{background:radial-gradient(120% 78% at 50% 34%, rgba(255,255,255,.55), transparent 72%)}

/* Hero: centered, airy, script title, italic tagline, letter-spaced accent eyebrow. */
.invite.is-wedding .wed-hero{min-height:0;display:block;padding:0;background:none}
.invite.is-wedding .wed-frame{max-width:520px;margin:0 auto;padding:46px 26px 8px;text-align:center;display:flex;flex-direction:column;align-items:center}
.invite.is-wedding .wed-head{width:100%}
.invite.is-wedding .inv-edit{text-align:center}
.invite.is-wedding .inv-fonts{justify-content:center}
/* Occasion picker (builder): elegant pill chips above the names. */
.invite.is-wedding .wed-occasions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 16px}
.invite.is-wedding .wed-occ{
  font-family:system-ui,-apple-system,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,252,245,.55);
  color:var(--muted);cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.invite.is-wedding .wed-occ:hover{background:rgba(255,252,245,.9)}
.invite.is-wedding .wed-occ.on{background:var(--red);border-color:var(--red);color:var(--cta-ink,#2a2205)}
.invite.is-wedding .eyebrow{color:var(--red);letter-spacing:.36em;font-weight:700;font-size:12px}
.invite.is-wedding .hero h1{
  font-weight:400;text-transform:none;letter-spacing:0;text-shadow:none;color:var(--cream);
  font-size:clamp(52px,16.5vw,92px);line-height:1.12;margin:8px 0 0;overflow-wrap:break-word;
}
.invite.is-wedding .wed-head h1::after{content:"";display:block;width:66px;height:1px;margin:18px auto 2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.invite.is-wedding .hero .sub{color:var(--muted);font-style:italic;font-weight:500;font-size:17px}
.invite.is-wedding .hero .sub b{color:var(--red);font-style:normal;font-weight:600}
/* Optional framed photo above the caption (engagement photo / monogram). */
.invite.is-wedding .wed-shot{position:relative;width:min(300px,74%);margin:0 auto 24px;border-radius:8px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 16px 42px rgba(80,60,30,.20);line-height:0}
.invite.is-wedding .wed-img{display:block;width:100%;height:auto}
.invite.is-wedding .inv-cover-drop{background:rgba(255,252,245,.5);border-color:var(--line2);color:var(--cream);min-height:220px}
.invite.is-wedding .inv-cover-drop .icd-sub{color:var(--muted)}

/* Countdown: elegant outline cells with serif numerals. */
.invite.is-wedding .count{justify-content:center}
.invite.is-wedding .count .cell{background:rgba(255,252,245,.5);border-color:var(--line2)}
.invite.is-wedding .count .n{font-family:var(--font-cormorant),serif;font-weight:600;color:var(--cream)}
.invite.is-wedding .count .k{color:var(--muted)}

/* Cards: warm white, hairline border, centered serif headings with tracking. */
.invite.is-wedding .card,
.invite.is-wedding .rsvp-card,.invite.is-wedding .cover-card,.invite.is-wedding .guestlist-card,
.invite.is-wedding .song-card,.invite.is-wedding .hype-card,.invite.is-wedding .photo-card,.invite.is-wedding .recap-card{
  background:rgba(255,253,248,.64);border:1px solid var(--line2);box-shadow:0 12px 34px rgba(90,70,40,.10);
}
.invite.is-wedding .card h2{
  font-family:var(--font-cormorant),serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:17px;color:var(--cream);text-align:center;
}
/* Prominent attire / dress-code section. */
.invite.is-wedding .wed-attire{text-align:center}
.invite.is-wedding .wed-attire-val{
  font-family:var(--font-cormorant),serif;font-weight:500;font-style:italic;
  font-size:clamp(22px,6.5vw,30px);color:var(--cream);margin:2px 0 0;letter-spacing:.01em;
}
.invite.is-wedding .row{border-bottom-color:var(--line)}
.invite.is-wedding .row .lab{color:var(--muted);letter-spacing:.16em}
.invite.is-wedding .row .val,.invite.is-wedding .rsvp-done .big,.invite.is-wedding .rsvp-closed .big{color:var(--cream)}
.invite.is-wedding .tz-hint,.invite.is-wedding .rsvp-note{color:var(--muted)}
.invite.is-wedding .cover-amount{color:var(--red)}

/* Buttons + inputs + RSVP controls on the light ground. */
.invite.is-wedding .btn{background:rgba(255,252,245,.62);border-color:var(--line2);color:var(--cream)}
.invite.is-wedding .btn:hover{background:rgba(255,252,245,.92)}
.invite.is-wedding .ri{background:rgba(255,255,255,.72);border-color:var(--line2);color:var(--cream)}
.invite.is-wedding .ri::placeholder{color:var(--muted)}
.invite.is-wedding .seg button{background:rgba(255,252,245,.55);border-color:var(--line2);color:var(--cream)}
.invite.is-wedding .seg button.on{background:rgba(255,252,245,.95);border-color:var(--red);box-shadow:0 0 0 1.5px var(--red),0 8px 22px rgba(120,90,40,.14);color:var(--cream)}
.invite.is-wedding .tag{border-color:var(--line2);color:var(--cream)}
.invite.is-wedding .lineup .it{background:rgba(255,252,245,.5);border-color:var(--line2)}
.invite.is-wedding .going-badge,.invite.is-wedding .cap-badge,.invite.is-wedding .my-status,.invite.is-wedding .run-time,.invite.is-wedding .hype-who{color:#9a7b1f;background:rgba(255,252,245,.6);border-color:var(--line2)}
.invite.is-wedding .run-time{background:none;border:none}
.invite.is-wedding .hype-who{background:none;border:none}

/* CTA in the accent (gold) with dark ink; frosted sticky bar on ivory. */
.invite.is-wedding .cta{background:var(--red);color:var(--cta-ink,#2a2205);box-shadow:0 10px 26px rgba(160,120,30,.28)}
.invite.is-wedding .sticky{background:linear-gradient(180deg,transparent,rgba(246,239,226,.88) 34%)}
.invite.is-wedding footer,.invite.is-wedding footer .made-with{color:var(--muted)}
.invite.is-wedding .waitlist-note{color:#9a7b1f;background:rgba(255,252,245,.6);border-color:var(--line2)}

/* Builder: the empty flyer dropzone shows a dimmed SAMPLE flyer filling the poster
   slot, with the upload prompt on top. Purely decorative — the host still drops or
   taps to upload their own. (margin longhands so the builder's top-chrome clearance
   from .ebuild .inv-cover-drop margin-top survives.) */
.invite.is-flyer .inv-cover-drop{
  position:relative;margin-left:16px;margin-right:16px;width:auto;max-width:none;min-height:360px;
  background-image:linear-gradient(rgba(8,5,16,.5),rgba(8,5,16,.6)),url('/sample-flyer.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-color:rgba(255,255,255,.34);overflow:hidden;
}
.invite.is-flyer .inv-cover-drop .icd-emoji,
.invite.is-flyer .inv-cover-drop .icd-title,
.invite.is-flyer .inv-cover-drop .icd-sub{text-shadow:0 2px 10px rgba(0,0,0,.82)}
.invite.is-flyer .inv-cover-drop::after{
  content:"Sample";position:absolute;top:9px;right:11px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.72);background:rgba(0,0,0,.42);
  padding:3px 9px;border-radius:999px;
}

/* ===================== Registry (card on the invite + the /registry page) ===================== */
.invite .reg-card-sub{color:var(--muted);font-size:14px;margin:0}
.invite .reg-cta{margin-top:14px}
.invite .reg-head{text-align:center;padding:36px 20px 4px}
.invite .reg-back{display:inline-block;color:var(--muted);font-weight:700;font-size:13.5px;text-decoration:none;margin-bottom:12px}
.invite .reg-title{font-family:var(--font-anton),sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(34px,10vw,54px);letter-spacing:.5px;margin:6px 0 0}
.invite .reg-sub{color:var(--muted);font-size:14.5px;max-width:46ch;margin:10px auto 0}
.invite .reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 16px 0}
.invite .reg-item{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--cream);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.invite .reg-img{aspect-ratio:1;background-size:cover;background-position:center;background-color:rgba(255,255,255,.06)}
.invite .reg-body{padding:12px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.invite .reg-name{font-weight:700;font-size:15px;line-height:1.2}
.invite .reg-price{font-weight:800;color:var(--gold);font-size:14px}
.invite .reg-note{color:var(--muted);font-size:12.5px}
.invite .reg-btn{margin-top:auto;padding-top:9px;font-weight:800;font-size:13px;color:var(--red)}
.invite .reg-fund{margin-top:16px;text-align:center}
.invite .reg-fund-note{color:var(--muted);font-size:14px;margin:0 0 12px}
.invite .reg-fund .pay-row{justify-content:center}
.invite .reg-empty{text-align:center;color:var(--muted);padding:34px 20px}
.invite .reg-foot{text-align:center;color:var(--muted);font-size:13px;padding:28px 16px}
/* Elegant overrides in the wedding light skin */
.invite.is-wedding .reg-title{font-family:var(--font-cormorant),serif;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(28px,8vw,44px);color:var(--cream)}
.invite.is-wedding .reg-sub{font-style:italic}
.invite.is-wedding .reg-item{background:rgba(255,253,248,.72);border-color:var(--line2)}
.invite.is-wedding .reg-price{color:#9a7b1f}
.invite.is-wedding .reg-btn{color:var(--red)}