/* =========================================================
   BEATS v1.7 — RSVP thank-you / QR pass, new themes, Golden Royale petals
   Loaded after style.css, intro.css and mode.css.
   ========================================================= */

/* ---------------- RSVP result (no page reload) ---------------- */
.rsvp-result { max-width: 440px; margin: 0 auto; position: relative; }
.rsvp-form[hidden], .rsvp-result[hidden] { display: none !important; }
.ps-qr-fail { width: 170px; height: 170px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px;
  border: 2px dashed var(--line); border-radius: 10px; color: var(--ink); font-size: 14px; }
.rsvp-err { margin: 0; padding: 10px 14px; border-radius: 10px; background: rgba(200,40,40,.08); color: #a1261b; font-size: 15px; }
.rsvp-form button.sending { opacity: .75; cursor: wait; }
.rsvp-count.bump .rsvp-count-num { animation: rsvpBump .7s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
@keyframes rsvpBump { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: var(--gold); } 100% { transform: scale(1); } }

.rsvp-thanks, .rsvp-prep, .rsvp-pass {
  position: relative; text-align: center; padding: 30px 22px 24px; border-radius: 18px;
  background: var(--card-tint, rgba(255,255,255,.55)); border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,0,.08); animation: rsvpIn .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rsvpIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.rsvp-thanks:focus, .rt-title:focus, .ps-name:focus, .rsvp-prep:focus { outline: none; }

.rt-badge { width: 84px; height: 84px; margin: 0 auto 14px; }
.rt-badge svg { width: 100%; height: 100%; overflow: visible; }
.rt-ring { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 176; stroke-dashoffset: 176; animation: rtDraw .8s ease-out .1s forwards; }
.rt-tick { fill: none; stroke: var(--rose); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; stroke-dashoffset: 46; animation: rtDraw .45s ease-out .75s forwards; }
.rt-heart { fill: var(--rose); transform-origin: 32px 33px; transform: scale(0); animation: rtHeart .7s cubic-bezier(.34,1.56,.64,1) .7s forwards; }
@keyframes rtDraw { to { stroke-dashoffset: 0; } }
@keyframes rtHeart { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.rt-title { font-family: var(--font-script); font-size: 38px; line-height: 1.15; color: var(--wine); margin: 0 0 8px; font-weight: 400; animation: rsvpIn .6s ease .5s both; }
.rt-text { color: var(--ink); font-size: 18px; margin: 0 auto 10px; max-width: 340px; animation: rsvpIn .6s ease .7s both; }
.rt-small { color: var(--rose); font-size: 14px; letter-spacing: .5px; margin: 0 0 18px; animation: rsvpIn .6s ease .85s both; }
.rsvp-again {
  background: none; border: 1px solid var(--line); color: var(--rose); border-radius: 22px; padding: 8px 18px;
  font: inherit; font-size: 14px; cursor: pointer; animation: rsvpIn .6s ease 1s both;
}
.rsvp-again:hover { border-color: var(--rose); }

.rsvp-spark {
  position: absolute; left: 50%; top: 70px; width: 9px; height: 9px; pointer-events: none; z-index: 2;
  background: var(--gold); border-radius: 2px; opacity: 0; transform: translate(-50%, -50%);
  animation: rsvpSpark 1.3s cubic-bezier(.2,.8,.3,1) calc(.75s + var(--d, 0s)) forwards;
}
.rsvp-spark:nth-child(3n) { background: var(--rose); border-radius: 50%; }
.rsvp-spark:nth-child(4n) { width: 6px; height: 12px; }
@keyframes rsvpSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 40px)) scale(1) rotate(var(--r)); }
}

/* preparing the QR pass */
.rp-ticket {
  position: relative; width: 190px; height: 118px; margin: 4px auto 18px; border-radius: 14px; overflow: hidden;
  background: var(--cream); border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(0,0,0,.08);
  animation: rpFloat 2.4s ease-in-out infinite;
}
@keyframes rpFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
.rp-line { position: absolute; left: 16px; height: 8px; border-radius: 4px; background: var(--line); }
.rp-line.w1 { top: 20px; width: 70px; } .rp-line.w2 { top: 38px; width: 50px; } .rp-line.w3 { top: 56px; width: 62px; }
.rp-qr {
  position: absolute; right: 16px; top: 18px; width: 64px; height: 64px; border-radius: 6px;
  background:
    linear-gradient(90deg, var(--wine) 0 22%, transparent 22% 39%, var(--wine) 39% 61%, transparent 61% 78%, var(--wine) 78%) 0 0 / 100% 22% no-repeat,
    linear-gradient(90deg, transparent 0 22%, var(--wine) 22% 39%, transparent 39% 61%, var(--wine) 61% 78%, transparent 78%) 0 39% / 100% 22% no-repeat,
    linear-gradient(90deg, var(--wine) 0 22%, transparent 22% 61%, var(--wine) 61%) 0 78% / 100% 22% no-repeat;
  opacity: .15; animation: rpQr 2.6s ease-in-out forwards;
}
@keyframes rpQr { to { opacity: .85; } }
.rp-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 2;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 55%, transparent), transparent);
  animation: rpScan 1.3s ease-in-out infinite;
}
@keyframes rpScan { 0% { transform: translateY(-30px); } 100% { transform: translateY(124px); } }
.rp-title { font-family: var(--font-heading); color: var(--wine); font-size: 17px; letter-spacing: 1px; margin: 0 0 6px; }
.rp-dots i { font-style: normal; animation: rpDot 1.2s infinite; opacity: .2; }
.rp-dots i:nth-child(2) { animation-delay: .2s; } .rp-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes rpDot { 50% { opacity: 1; } }
.rp-step { color: var(--rose); font-size: 15px; margin: 0; min-height: 22px; animation: rsvpIn .4s ease both; }

/* the finished pass */
.rsvp-pass { padding: 22px 16px 20px; }
.ps-card {
  position: relative; max-width: 290px; margin: 0 auto 14px; padding: 20px 18px 18px; border-radius: 18px;
  background: var(--cream); border: 1px solid var(--line); box-shadow: 0 16px 38px rgba(0,0,0,.12);
  animation: psFlip .9s cubic-bezier(.22,1,.36,1) both; transform-origin: 50% 100%;
}
@keyframes psFlip { from { opacity: 0; transform: perspective(700px) rotateX(-70deg) translateY(20px); } to { opacity: 1; transform: none; } }
.ps-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%) -200% 0 / 200% 100% no-repeat;
  animation: psShine 1.6s ease .9s;
}
@keyframes psShine { to { background-position: 200% 0; } }
.ps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ps-tag { font-family: var(--font-heading); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--rose); }
.ps-ok { font-size: 12px; font-weight: 700; color: #1d7a45; background: rgba(29,122,69,.1); padding: 3px 9px; border-radius: 12px; }
.ps-name { font-family: var(--font-script); font-weight: 400; font-size: 34px; line-height: 1.15; color: var(--wine); margin: 4px 0 0; }
.ps-meta { margin: 2px 0 12px; color: var(--ink); font-size: 15px; }
.ps-tear { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 0 -18px 14px; }
.ps-tear::before, .ps-tear::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--blush); border: 1px solid var(--line); }
.ps-tear::before { left: -10px; } .ps-tear::after { right: -10px; }
.ps-qr { display: block; margin: 0 auto 10px; width: 170px; height: 170px; border: 6px solid #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); background: #fff; }
body[data-protect] .ps-qr { pointer-events: auto; -webkit-touch-callout: default; }
.ps-event { font-family: var(--font-heading); color: var(--wine); font-size: 14px; letter-spacing: 1px; margin: 0; }
.ps-date { color: var(--rose); font-size: 14px; margin: 2px 0 0; }
.ps-help { color: var(--ink); opacity: .8; font-size: 14px; margin: 0 auto 14px; max-width: 300px; }

html[data-mode="dark"] .ps-qr { border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .rsvp-thanks, .rsvp-prep, .rsvp-pass, .ps-card, .rt-title, .rt-text, .rt-small, .rsvp-again, .rp-ticket, .rp-scan { animation: none !important; }
  .rt-ring, .rt-tick { stroke-dashoffset: 0; animation: none; } .rt-heart { transform: none; animation: none; }
}

/* =========================================================
   NEW THEMES (v1.7)
   pearl_grey · slate_blue · golden_glow · blush_pink · golden_royale (premium)
   ========================================================= */
body[data-theme="pearl_grey"] {
  --blush:#eef0f3; --cream:#ffffff; --rose:#5f6b7a; --wine:#2b323c; --gold:#a9afb9; --ink:#3a414b;
  --line:rgba(95,107,122,.25); --card-tint:rgba(255,255,255,.7); --rose-solid:#5f6b7a; --wine-solid:#2b323c;
  --env-body:#7b8594; --env-flap:#6a7382; --env-front:#8a94a3; --env-inner:#2b323c; --seal-bg:#d8dbe0; --seal-fg:#2b323c;
  --intro-glyph:"\2727"; --intro-particle:"\2727";
}
body[data-theme="slate_blue"] {
  --blush:#e6ecf3; --cream:#f7f9fc; --rose:#4f6d8a; --wine:#1f3247; --gold:#9fb4c9; --ink:#2b3d50;
  --line:rgba(79,109,138,.25); --card-tint:rgba(255,255,255,.6); --rose-solid:#4f6d8a; --wine-solid:#1f3247;
  --env-body:#5b7896; --env-flap:#4c6782; --env-front:#6886a4; --env-inner:#1f3247; --seal-bg:#c9d6e3; --seal-fg:#1f3247;
  --intro-glyph:"\2726"; --intro-particle:"\2726";
}
body[data-theme="golden_glow"] {
  --blush:#fbf1dc; --cream:#fffaf0; --rose:#b0812a; --wine:#5e4310; --gold:#dcb458; --ink:#4b3912;
  --line:rgba(176,129,42,.28); --card-tint:rgba(255,255,255,.55); --rose-solid:#a7781f; --wine-solid:#5e4310;
  --env-body:#c69a3e; --env-flap:#b0852f; --env-front:#d3a84c; --env-inner:#5e4310; --seal-bg:#fff1c9; --seal-fg:#7a5714;
  --intro-glyph:"\2605"; --intro-particle:"\2726";
}
body[data-theme="blush_pink"] {
  --blush:#fde6ee; --cream:#fff7fa; --rose:#d9628e; --wine:#87294f; --gold:#f1a7c0; --ink:#5a2a3e;
  --line:rgba(217,98,142,.25); --card-tint:rgba(255,255,255,.6); --rose-solid:#cf5584; --wine-solid:#87294f;
  --env-body:#e57fa5; --env-flap:#d86c95; --env-front:#ee92b3; --env-inner:#87294f; --seal-bg:#fff0f5; --seal-fg:#c34a78;
  --intro-glyph:"\2740"; --intro-particle:"\2740";
}
body[data-theme="golden_royale"] {
  --blush:#17120a; --cream:#1f180d; --rose:#d9b04c; --wine:#f6e4a8; --gold:#e8c468; --ink:#efe3c4;
  --line:rgba(217,176,76,.35); --card-tint:rgba(255,236,180,.05); --rose-solid:#c79b33; --wine-solid:#8a6516;
  --env-body:#2a2112; --env-flap:#342915; --env-front:#2f2513; --env-inner:#0e0b06; --seal-bg:#e8c468; --seal-fg:#2a1f08;
  --card-bg:#221a0e; --card-ink:#f6e4a8; --card-accent:#e8c468;
  --intro-glyph:"\2766"; --intro-particle:"\2740";
}

/* dark variants */
html[data-mode="dark"] body[data-theme="pearl_grey"]  { --rose-solid:#8892a1; --blush:#1b1e23; --cream:#121418; --rose:#a9b2bf; --wine:#e8ebef; --gold:#c4c9d1; --ink:#dde1e6; --line:rgba(169,178,191,.3); --card-tint:rgba(255,255,255,.05); }
html[data-mode="dark"] body[data-theme="slate_blue"]  { --rose-solid:#5f81a4; --blush:#141c26; --cream:#0d131b; --rose:#8fb0d0; --wine:#dfe9f3; --gold:#a9bfd6; --ink:#d8e2ec; --line:rgba(143,176,208,.3); --card-tint:rgba(255,255,255,.05); }
html[data-mode="dark"] body[data-theme="golden_glow"] { --rose-solid:#c69a3e; --blush:#22190a; --cream:#171106; --rose:#e2bd65; --wine:#f7e7bb; --gold:#e9c870; --ink:#f0e4c6; --line:rgba(226,189,101,.32); --card-tint:rgba(255,255,255,.05); }
html[data-mode="dark"] body[data-theme="blush_pink"]  { --rose-solid:#d9628e; --blush:#2a1520; --cream:#1c0f16; --rose:#f08cb2; --wine:#fbd9e6; --gold:#f5b3cb; --ink:#f6e1ea; --line:rgba(240,140,178,.32); --card-tint:rgba(255,255,255,.05); }
/* Golden Royale is dark by design; a light ivory-gold variant if the owner picks light */
html[data-mode="light"] body[data-theme="golden_royale"] {
  --blush:#f8efd9; --cream:#fffaf0; --rose:#a37a1f; --wine:#4a360c; --gold:#c9a03f; --ink:#3d2f10;
  --line:rgba(163,122,31,.3); --card-tint:rgba(255,255,255,.6); --card-bg:#fffaf0; --card-ink:#4a360c;
  --env-body:#3a2c12; --env-flap:#45351a; --env-front:#403016;
}

/* intro backgrounds for the new themes */
body[data-theme="pearl_grey"] .intro-gate { background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #e4e7eb 100%); }
body[data-theme="slate_blue"] .intro-gate { background: radial-gradient(ellipse at 50% 35%, #f7f9fc 0%, #d9e2ec 100%); }
body[data-theme="golden_glow"] .intro-gate { background: radial-gradient(ellipse at 50% 35%, #fffaf0 0%, #f3e2b8 100%); }
body[data-theme="blush_pink"] .intro-gate { background: radial-gradient(ellipse at 50% 35%, #fff7fa 0%, #f9d3e0 100%); }
body[data-theme="golden_royale"] .intro-gate { background: radial-gradient(ellipse at 50% 30%, #3a2c12 0%, #120d06 70%, #080603 100%); }
html[data-mode="light"] body[data-theme="golden_royale"] .intro-gate { background: radial-gradient(ellipse at 50% 30%, #fffaf0 0%, #f1deb0 100%); }
body[data-theme="golden_royale"] .intro-eyebrow, body[data-theme="golden_royale"] .intro-hint { color: var(--gold); }
body[data-theme="golden_royale"] .intro-env { box-shadow: 0 18px 46px rgba(0,0,0,.5), 0 0 0 2px var(--seal-bg) inset; }
body[data-theme="golden_royale"] .intro-float span::before { color: var(--gold); text-shadow: 0 0 8px rgba(232,196,104,.6); }

/* =========================================================
   GOLDEN ROYALE — premium look
   Gold petals drift down from the top and land softly; gold shimmer on the names.
   ========================================================= */
body[data-theme="golden_royale"] .petals {
  background:
    radial-gradient(ellipse 520px 360px at 50% -8%, rgba(232,196,104,.18), transparent 65%),
    radial-gradient(ellipse 420px 300px at 105% 100%, rgba(232,196,104,.10), transparent 60%),
    radial-gradient(ellipse 420px 300px at -5% 100%, rgba(232,196,104,.08), transparent 60%);
}
body[data-theme="golden_royale"] .drift {
  bottom: auto; top: -40px; border-radius: 80% 0 80% 0;
  width: calc(var(--size, 10px) * 1.25); height: var(--size, 10px);
  background: linear-gradient(135deg, #fff3c4 0%, #e8c468 45%, #b8892a 100%);
  box-shadow: 0 0 10px rgba(232,196,104,.35);
  animation: royalePetal var(--dur, 18s) cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: var(--delay, 0s);
}
body[data-theme="golden_royale"] .drift:nth-child(3n)   { border-radius: 50% 0 50% 50%; filter: brightness(1.1); }
body[data-theme="golden_royale"] .drift:nth-child(4n+1) { animation-name: royalePetalB; }
@keyframes royalePetal {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) rotateX(0deg); }
  8%   { opacity: .95; }
  25%  { transform: translate3d(38px, 25vh, 0) rotate(90deg) rotateX(40deg); }
  50%  { transform: translate3d(-26px, 50vh, 0) rotate(180deg) rotateX(0deg); }
  75%  { transform: translate3d(30px, 75vh, 0) rotate(270deg) rotateX(50deg); }
  92%  { opacity: .9; transform: translate3d(-8px, calc(100vh - 20px), 0) rotate(340deg) rotateX(70deg); }
  100% { opacity: 0; transform: translate3d(-6px, calc(100vh - 10px), 0) rotate(360deg) rotateX(80deg); }
}
@keyframes royalePetalB {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  10%  { opacity: .9; }
  30%  { transform: translate3d(-44px, 30vh, 0) rotate(-120deg); }
  60%  { transform: translate3d(22px, 60vh, 0) rotate(-220deg); }
  92%  { opacity: .85; transform: translate3d(-10px, calc(100vh - 16px), 0) rotate(-320deg); }
  100% { opacity: 0; transform: translate3d(-10px, calc(100vh - 8px), 0) rotate(-340deg); }
}
body[data-theme="golden_royale"] :is(.names, .footer-names) {
  background: linear-gradient(100deg, #b8892a 0%, #fff1bf 22%, #e8c468 40%, #b8892a 60%, #fff1bf 80%, #e8c468 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: royaleShimmer 6s linear infinite;
  filter: drop-shadow(0 2px 10px rgba(232,196,104,.25));
}
@keyframes royaleShimmer { to { background-position: 220% center; } }
body[data-theme="golden_royale"] .section-label { color: var(--gold); letter-spacing: 3px; }
body[data-theme="golden_royale"] .section-label::after {
  content: ""; display: block; width: 90px; height: 1px; margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
body[data-theme="golden_royale"] :is(.rsvp-form button, .reveal-btn, .map-btn, .share-btn.whatsapp) {
  background: linear-gradient(135deg, #f3d77e, #c79b33 55%, #a37a1f); color: #241a05; border-color: #e8c468;
}
html[data-mode="light"] body[data-theme="golden_royale"] :is(.names, .footer-names) { filter: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-theme="golden_royale"] .drift, body[data-theme="golden_royale"] :is(.names, .footer-names) { animation: none !important; }
  body[data-theme="golden_royale"] .drift { display: none; }
}

/* =========================================================
   v1.9 — two functions (e.g. Wedding + Reception) on the details card
   ========================================================= */
.fn-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 26px; margin: 0 0 8px; }
.fn-label { font-family: var(--font-heading); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.fn-day { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .5px;
  background: var(--blush); color: var(--rose); border: 1px solid var(--line); }
.fn-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fn-actions .map-btn { margin: 0; }
.cal-btn { background: transparent; }
.details-card.multi { max-width: 980px; }
.fn-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.fn-grid .fn-block + .fn-block { margin-top: 28px; padding-top: 28px; border-top: 1px dashed var(--line); }
.fn-grid .map-embed-wrap { margin-bottom: 16px; }
@media (min-width: 820px) {
  .fn-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .fn-grid .fn-block + .fn-block { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 34px; border-left: 1px dashed var(--line); }
}