/* Rules the SaveOurDate host bridge (_host/host.js) injects into the page,
   plus overrides so the site's root layout doesn't bleed into the template. */

/* config.js → theme (the page sets these on <html> at runtime; defaults here for first paint) */
:root {
  --ivory: #FFF8EE;
  --plum: #78330A;
  --lavender: #78330A;
  --mauve: #EC8463;
  --lilac: #F8D9C6;
  --champagne: #E0A63A;
  --olive: #6F9E4F;
}

/* closed door: a clear "tap to open" hint so guests know the page opens */
.opening-label {
  display: block;
  position: absolute;
  left: 50%;
  bottom: clamp(70px, 14vh, 130px);
  transform: translateX(-50%);
  padding: 11px 22px;
  border: 1px solid color-mix(in srgb, var(--champagne) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--plum) 62%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ivory);
  font-size: .68rem;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  animation: chameli-hint 2.4s ease-in-out infinite;
}
@keyframes chameli-hint {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -6px); }
}
@media (prefers-reduced-motion: reduce) { .opening-label { animation: none; } }

/* the live page keeps the sound button bottom-left */
.music-toggle { top: auto !important; right: auto !important; left: 16px !important; bottom: 72px !important; }

/* long names / words must wrap or shrink, never run off the screen */
.couple-names > *, .x-hosts > *, .x-host { min-width: 0; }
main h1, main h2, main h3, main p, main small, main address, main strong, main em, main li, main time,
.x-btn, .x-event__map, .x-contact__phone { overflow-wrap: anywhere; }
.x-btn { max-width: 100%; }
/* closing "A & B" stays on one line; fitPair() shrinks it to the column */
.closing-names, .signature { white-space: nowrap; }
.closing-names.is-stacked > span, .signature.is-stacked > span { display: block; margin: .04em 0; line-height: 1; }

/* root layout: the template owns the page background, type and colour */
body.chameli-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  background: var(--plum) !important;
  background-image: none !important;
  color: var(--plum) !important;
}
body.chameli-body > .pointer-events-none.fixed.inset-0 { display: none; }

/* =====================================================================
   BRIGHTER SKIN — dark bands lean rosy instead of teak, cards glow warm
   ===================================================================== */
:root {
  --c-bg: color-mix(in srgb, var(--plum) 84%, var(--lavender));
  --d-bg: color-mix(in srgb, var(--plum) 92%, #000);
  --card: color-mix(in srgb, #fff 62%, var(--ivory));
  --card-d: color-mix(in srgb, var(--plum) 78%, #000);
  --shadow: 0 20px 44px color-mix(in srgb, var(--lavender) 16%, transparent);
  --paper-card: #fff6ea;
}

/* =====================================================================
   ISLAMIC PATTERNS — replaces the single diamond texture with a
   different geometric motif per section (masks, tinted by theme)
   ===================================================================== */
:root {
  /* khatam: the eight-point star (two interlaced squares) */
  --pat-khatam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Cpath d='M30 13 47 30 30 47 13 30z'/%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3Cpath d='M30 0v7M30 53v7M0 30h7M53 30h7M0 7 7 0M53 0l7 7M0 53l7 7M60 53l-7 7'/%3E%3C/g%3E%3C/svg%3E");
  /* interlaced circles: the classic four-petal rosette lattice */
  --pat-circles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1.6'/%3E%3Ccircle cx='0' cy='0' r='1.6'/%3E%3Ccircle cx='40' cy='0' r='1.6'/%3E%3Ccircle cx='0' cy='40' r='1.6'/%3E%3Ccircle cx='40' cy='40' r='1.6'/%3E%3C/svg%3E");
  /* Moroccan ogee: lantern-shaped trellis */
  --pat-ogee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath fill='none' stroke='black' stroke-width='1.2' d='M0 22Q11 22 11 11Q11 0 22 0Q33 0 33 11Q33 22 44 22M0 22Q11 22 11 33Q11 44 22 44Q33 44 33 33Q33 22 44 22'/%3E%3Cpath d='M22 17l1.4 3.6L27 22l-3.6 1.4L22 27l-1.4-3.6L17 22l3.6-1.4z'/%3E%3C/svg%3E");
  /* mihrab: a row of pointed prayer-niche arches with a star above each */
  --pat-mihrab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='84' viewBox='0 0 60 84'%3E%3Cg fill='none' stroke='black' stroke-width='1.2'%3E%3Cpath d='M12 84V44C12 28 22 17 30 11C38 17 48 28 48 44V84'/%3E%3Cpath d='M18 84V46C18 35 24 26 30 21C36 26 42 35 42 46V84'/%3E%3C/g%3E%3Cpath d='M30 0l1.2 3.3L34.5 4.5l-3.3 1.2L30 9l-1.2-3.3L25.5 4.5l3.3-1.2z'/%3E%3Ccircle cx='30' cy='56' r='2'/%3E%3C/svg%3E");
  /* crescent & stars, scattered like a night sky */
  --pat-crescent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M26 14A9 9 0 1 0 26 30A7 7 0 1 1 26 14Z'/%3E%3Cpath d='M36 10l1.1 3.4 3.4 1.1-3.4 1.1L36 19l-1.1-3.4-3.4-1.1 3.4-1.1z'/%3E%3Cpath d='M68 56l1.6 4.9 4.9 1.6-4.9 1.6L68 69l-1.6-4.9-4.9-1.6 4.9-1.6z'/%3E%3Ccircle cx='58' cy='24' r='1.5'/%3E%3Ccircle cx='16' cy='66' r='1.5'/%3E%3Ccircle cx='40' cy='80' r='1'/%3E%3Ccircle cx='82' cy='34' r='1'/%3E%3C/svg%3E");
}

.x-sec {
  --pat: var(--pat-khatam);
  --pat-s: 60px 60px;
  --pat-c: var(--lavender);
  --pat-o: .09;
}
.x-sec--c, .x-sec--d { --pat-c: var(--champagne); --pat-o: .14; }

.x-sec::before {
  background: var(--pat-c);
  -webkit-mask: var(--pat) 0 0 / var(--pat-s) repeat;
  mask: var(--pat) 0 0 / var(--pat-s) repeat;
  opacity: var(--pat-o);
}

.x-sec--verse    { --pat: var(--pat-khatam);   --pat-s: 64px 64px; }
.x-sec--welcome  { --pat: var(--pat-circles);  --pat-s: 48px 48px; }
.x-sec--date     { --pat: var(--pat-ogee);     --pat-s: 52px 52px; }
.x-sec--count    { --pat: var(--pat-mihrab);   --pat-s: 60px 84px; }
.x-sec--events   { --pat: var(--pat-crescent); --pat-s: 110px 110px; --pat-o: .12; }
.x-sec--venue    { --pat: var(--pat-khatam);   --pat-s: 56px 56px; }
.x-sec--rsvp     { --pat: var(--pat-circles);  --pat-s: 44px 44px; }
.x-sec--bless    { --pat: var(--pat-crescent); --pat-s: 100px 100px; --pat-o: .18; }
.x-sec--contact  { --pat: var(--pat-ogee);     --pat-s: 48px 48px; }
.x-close         { --pat: var(--pat-mihrab);   --pat-s: 54px 76px; }

/* =====================================================================
   RSVP FORM — refreshed
   ===================================================================== */
.x-sec--rsvp .x-rsvpf {
  position: relative;
  gap: 20px;
  max-width: 660px;
  margin-top: clamp(28px, 5vw, 40px);
  padding: clamp(28px, 6vw, 48px) clamp(20px, 6vw, 48px) clamp(30px, 6vw, 44px);
  border: 1px solid color-mix(in srgb, var(--champagne) 45%, transparent);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--lilac) 60%, transparent) 0%, transparent 70%),
    radial-gradient(70% 50% at 100% 100%, color-mix(in srgb, var(--champagne) 12%, transparent) 0%, transparent 70%),
    color-mix(in srgb, #fff 70%, var(--ivory));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--lavender) 16%, transparent),
    0 2px 0 rgba(255, 255, 255, .8) inset;
}
/* rose → marigold ribbon along the top */
.x-sec--rsvp .x-rsvpf::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--lavender), var(--champagne) 50%, var(--lavender));
}

/* head: heart badge, lead line, deadline pill */
.x-rsvpf__head {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 4px;
  text-align: center;
}
.x-rsvpf__badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--lavender), var(--mauve));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--lavender) 35%, transparent),
    0 0 0 6px color-mix(in srgb, var(--lavender) 12%, transparent);
}
.x-rsvpf__badge svg { width: 26px; height: 26px; fill: currentColor; }
.x-rsvpf__lead {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  color: var(--plum);
}
.x-rsvpf__by {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--champagne) 70%, var(--plum));
  background: color-mix(in srgb, var(--champagne) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--champagne) 40%, transparent);
}

/* labels */
.x-sec--rsvp .x-field label,
.x-sec--rsvp .x-field legend {
  font-size: .64rem;
  letter-spacing: .2em;
  color: var(--plum);
  opacity: .78;
}

/* inputs with a leading icon */
.x-input { position: relative; }
.x-input__ic {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 20px;
  height: 20px;
  color: var(--lavender);
  opacity: .75;
  pointer-events: none;
  transition: opacity .25s, color .25s;
}
.x-input__ic svg { width: 100%; height: 100%; display: block; }
.x-sec--rsvp .x-field input[type="text"],
.x-sec--rsvp .x-field input[type="tel"],
.x-sec--rsvp .x-field input[type="email"],
.x-sec--rsvp .x-field select,
.x-sec--rsvp .x-field textarea {
  min-height: 50px;
  padding: 13px 16px 13px 46px;
  color: var(--plum);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  border-radius: 14px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--plum) 6%, transparent);
}
.x-sec--rsvp .x-field textarea { min-height: 110px; line-height: 1.6; }
.x-sec--rsvp .x-field input::placeholder,
.x-sec--rsvp .x-field textarea::placeholder { color: color-mix(in srgb, var(--plum) 40%, transparent); }
.x-sec--rsvp .x-field input:hover,
.x-sec--rsvp .x-field select:hover,
.x-sec--rsvp .x-field textarea:hover { border-color: color-mix(in srgb, var(--lavender) 40%, transparent); }
.x-sec--rsvp .x-field input:focus,
.x-sec--rsvp .x-field select:focus,
.x-sec--rsvp .x-field textarea:focus {
  border-color: var(--lavender);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lavender) 16%, transparent);
}
.x-input:focus-within .x-input__ic { opacity: 1; }

/* select: custom chevron */
.x-sec--rsvp .x-input--select select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.x-input--select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.8px solid var(--lavender);
  border-bottom: 1.8px solid var(--lavender);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* attendance: two icon cards */
.x-sec--rsvp .x-choice { gap: 12px; }
.x-sec--rsvp .x-chip > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--plum);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--plum) 14%, transparent);
  border-radius: 14px;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.x-sec--rsvp .x-chip .x-chip__ic {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--lavender);
  transition: color .3s;
}
.x-chip__ic svg { width: 100%; height: 100%; }
.x-sec--rsvp .x-chip:hover > span { border-color: color-mix(in srgb, var(--lavender) 45%, transparent); transform: translateY(-1px); }
.x-sec--rsvp .x-chip input:checked + span {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--lavender), color-mix(in srgb, var(--lavender) 55%, var(--plum)));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--lavender) 30%, transparent);
}
.x-sec--rsvp .x-chip input:checked + span .x-chip__ic { color: #fff; }
.x-sec--rsvp .x-chip input:checked + span .x-chip__ic svg { fill: currentColor; }

/* submit: gradient pill with a paper-plane */
.x-sec--rsvp .x-rsvpf__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 320px);
  min-height: 56px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, var(--lavender), var(--mauve) 55%, var(--champagne));
  background-size: 180% 100%;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--lavender) 35%, transparent);
  transition: background-position .5s ease, transform .25s ease, box-shadow .25s ease;
}
.x-sec--rsvp .x-rsvpf__submit:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--lavender) 42%, transparent);
}
.x-rsvpf__send { display: grid; width: 18px; height: 18px; transition: transform .3s ease; }
.x-rsvpf__send svg { width: 100%; height: 100%; }
.x-rsvpf__submit:hover .x-rsvpf__send { transform: translate(3px, -3px); }
.x-sec--rsvp .x-rsvpf__error { color: var(--lavender); text-align: center; }
.x-sec--rsvp .x-rsvpf__error:empty { display: none; }

/* thank-you state */
.x-sec--rsvp .x-rsvpf.is-done .x-btn--ghost {
  border-radius: 999px;
  padding-inline: 26px;
  color: var(--lavender);
  border-color: color-mix(in srgb, var(--lavender) 45%, transparent);
  background: #fff;
}
.x-sec--rsvp .x-rsvpf.is-done .x-btn--ghost:hover { background: color-mix(in srgb, var(--lavender) 8%, #fff); }
.x-sec--rsvp .x-rsvpf__tick {
  width: 72px;
  height: 72px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--olive), color-mix(in srgb, var(--olive) 60%, var(--champagne)));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--olive) 35%, transparent),
    0 0 0 7px color-mix(in srgb, var(--olive) 14%, transparent);
}

/* =====================================================================
   INVITATION LETTER — refreshed layout
   ===================================================================== */
.x-sec--welcome .x-letter {
  max-width: 980px;
  gap: 30px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--lilac) 55%, transparent) 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--champagne) 16%, transparent) 0%, transparent 65%),
    var(--card);
  outline-offset: 6px;
}
.x-sec--welcome .x-letter::before { border-radius: 12px; }
.x-sec--welcome .x-letter > * { min-width: 0; }

/* left: eyebrow, jasmine glyph, title */
.x-sec--welcome .x-letter__lead {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
}
.x-sec--welcome .x-letter__lead::before {
  content: "";
  width: 34px;
  height: 34px;
  background: var(--champagne);
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.x-sec--welcome .x-letter__lead .x-eyebrow { color: var(--lavender); }
.x-sec--welcome .x-letter .x-title {
  margin: 0;
  font-size: clamp(2.3rem, 5vw, 3.3rem);
  line-height: 1.08;
  text-wrap: balance;
  color: var(--plum);
}
.x-sec--welcome .x-letter .x-rule { margin: 6px 0 0; }

/* right: message, two family cards, signature */
.x-sec--welcome .x-letter .x-lede {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  line-height: 1.85;
  color: var(--ink-2);
}
.x-sec--welcome .x-letter .x-hosts {
  gap: 14px;
  max-width: none;
  margin: clamp(24px, 4vw, 32px) 0 0;
  padding-top: 0;
  border-top: 0;
}
.x-sec--welcome .x-letter .x-host {
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--champagne) 38%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--lilac) 30%, #fff);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--lavender) 8%, transparent);
}
.x-sec--welcome .x-letter .x-host + .x-host { border-left: 1px solid color-mix(in srgb, var(--champagne) 38%, transparent); }
.x-sec--welcome .x-letter .x-host em { color: var(--lavender); }
.x-sec--welcome .x-letter .x-host small { color: color-mix(in srgb, var(--olive) 80%, var(--plum)); }
.x-sec--welcome .x-letter .x-host strong { font-size: 1.04rem; }
.x-sec--welcome .x-letter .signature {
  margin-top: clamp(24px, 4vw, 32px);
  padding-top: clamp(18px, 3vw, 24px);
  border-top: 1px dashed color-mix(in srgb, var(--champagne) 55%, transparent);
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--plum);
}
.x-sec--welcome .x-letter .signature span { color: var(--champagne); }

@media (min-width: 560px) {
  .x-sec--welcome .x-letter .x-hosts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 820px) {
  .x-sec--welcome .x-letter {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    column-gap: 56px;
    align-items: stretch;
  }
  .x-sec--welcome .x-letter__lead { padding-right: 44px; }
}