/* Base styles for invitation pages. Event templates can override anything here. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.invitation-body { margin: 0; font-family: "Inter", system-ui, -apple-system, sans-serif; color: #1c1c1c; background: #f7f4ee; line-height: 1.5; }

/* Default template */
.inv { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 4rem 1.25rem; }
.inv-hero { text-align: center; max-width: 40rem; margin-bottom: 3rem; }
.inv-eyebrow { letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; opacity: .6; margin: 0 0 .75rem; }
.inv-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; margin: 0 0 1rem; }
.inv-when { font-size: 1.125rem; margin: 0 0 1rem; }
.inv-details { opacity: .8; }
.inv-card { width: 100%; max-width: 30rem; background: #fff; border-radius: 1.25rem; padding: 2.25rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.inv-card h2 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; margin: 0 0 1.25rem; text-align: center; }

/* RSVP form (shared) */
.rsvp-form { display: flex; flex-direction: column; gap: 1.1rem; }
.rsvp-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rsvp-toggle__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.rsvp-toggle__option span { display: block; text-align: center; padding: .8rem .5rem; border: 1px solid #ddd; border-radius: .75rem; cursor: pointer; font-weight: 500; transition: all .15s; }
.rsvp-toggle__option input:checked + span { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }
.rsvp-toggle__option input:focus-visible + span { outline: 2px solid #1c1c1c; outline-offset: 2px; }
.rsvp-field { display: flex; flex-direction: column; gap: .35rem; }
.rsvp-field label { font-size: .85rem; font-weight: 500; }
.rsvp-field small { font-size: .75rem; opacity: .6; }
.rsvp-field input, .rsvp-field select, .rsvp-field textarea {
  font: inherit; padding: .75rem .9rem; border: 1px solid #ddd; border-radius: .6rem; background: #fff; width: 100%;
}
.rsvp-field input:focus, .rsvp-field select:focus, .rsvp-field textarea:focus { outline: none; border-color: #1c1c1c; box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.rsvp-submit { font: inherit; font-weight: 600; padding: .95rem; border: 0; border-radius: .75rem; background: #1c1c1c; color: #fff; cursor: pointer; transition: transform .1s, opacity .15s; }
.rsvp-submit:hover { transform: translateY(-1px); }
.rsvp-submit:disabled { opacity: .6; cursor: default; transform: none; }
.rsvp-error { color: #b42318; background: #fee4e2; padding: .75rem 1rem; border-radius: .6rem; margin: 0; font-size: .9rem; }
.rsvp-success { text-align: center; padding: 1rem 0; }
.rsvp-success__mark { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: #e7f5ea; color: #2f6b3a; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; }
.rsvp-success h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.75rem; margin: 0 0 .5rem; }
.rsvp-success p { margin: 0 0 1rem; opacity: .8; }
.rsvp-link { background: none; border: 0; font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; opacity: .6; }
[hidden] { display: none !important; }

/* Background music widget (shared) */
.bg-music { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem .4rem .4rem;
  background: rgba(20, 20, 30, .72); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); font-family: inherit; }
.bg-music__toggle { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: .95rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.bg-music__toggle:hover { background: rgba(255,255,255,.28); }
.bg-music__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bg-music__volume { display: flex; align-items: center; }
.bg-music__volume input { width: 6rem; accent-color: #fff; cursor: pointer; margin: 0; }
.bg-music.is-playing .bg-music__toggle { background: rgba(255,255,255,.28); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 480px) { .bg-music__volume input { width: 4.5rem; } }