/* RSVP: a printed reply card (fills one screen, centred); after sending it goes into an envelope,
   the seal stamps, and the couple says namaste. Envelope, card and thank-you share one centred area. */
.rsvp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: calc(var(--frame) + 3svh) clamp(26px, 7vw, 60px);
  text-align: center;
}

.rsvp__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.rsvp__stage > * { grid-area: 1 / 1; }
.rsvp__tap { margin: 0; font-size: clamp(13px, 1.5svh + 3px, 17px); color: #7a5c44; }

/* ---------- envelope (built in CSS from the paper texture + gold edges) ---------- */
.envelope {
  --w: min(82vw, 440px);
  position: relative;
  width: var(--w);
  aspect-ratio: 1.55;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  perspective: 900px;
  filter: drop-shadow(0 12px 20px rgba(90, 60, 30, 0.25));
  animation: envelope-glow 2.8s ease-in-out infinite;
}

@keyframes envelope-glow {
  0%, 100% { filter: drop-shadow(0 12px 20px rgba(90, 60, 30, 0.25)); transform: translateY(0); }
  50% { filter: drop-shadow(0 14px 26px rgba(200, 150, 60, 0.45)); transform: translateY(-4px); }
}

.envelope span { position: absolute; inset: 0; display: block; }

.envelope__back,
.envelope__pocket,
.envelope__flap {
  background: #f6ecd9 url("../assets/paper/paper.webp") repeat;
  background-size: 300px;
}

.envelope__back { border-radius: 8px; box-shadow: inset 0 0 0 2px var(--gold-line), inset 0 0 0 6px #f6ecd9, inset 0 0 0 7px rgba(176, 128, 58, 0.5); }

/* the small card peeking inside (slides up when opened) */
.envelope__card-peek {
  inset: 10% 8% 8% 8% !important;
  background: #fffaf0;
  border: 1px solid rgba(176, 128, 58, 0.6);
  border-radius: 4px;
}

/* front pocket: the V-shaped lower part */
.envelope__pocket {
  clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%);
  border-radius: 8px;
  background-color: #f1e3c8;
  box-shadow: inset 0 -2px 0 var(--gold-line);
}

.envelope__pocket::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, transparent 49.6%, rgba(176, 128, 58, 0.7) 50%, transparent 50.4%) left / 50% 100% no-repeat,
              linear-gradient(to bottom left, transparent 49.6%, rgba(176, 128, 58, 0.7) 50%, transparent 50.4%) right / 50% 100% no-repeat;
  clip-path: inherit;
}

/* top flap: a triangle that swings open in 3D */
.envelope__flap {
  height: 66% !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  background-color: #efdfc1;
  z-index: 2;
  backface-visibility: hidden;
}

.envelope__flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent 49.4%, rgba(176, 128, 58, 0.8) 50%, transparent 50.6%) left / 50% 100% no-repeat,
              linear-gradient(to top left, transparent 49.4%, rgba(176, 128, 58, 0.8) 50%, transparent 50.6%) right / 50% 100% no-repeat;
}

.envelope__seal {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 24%;
  transform: translate(-50%, -50%) rotate(-8deg);
  z-index: 3;
  pointer-events: none;
}

/* envelope never wider than the space available, so it always stays centred */
.envelope { width: min(82vw, 440px, 100%); justify-self: center; }

/* ---------- the reply card ---------- */
.rsvp__card {
  position: relative;
  width: min(460px, 100%);
  max-height: 100%;
  overflow: hidden auto;
  background: #fffaf0 url("../assets/paper/paper.webp") repeat;
  background-size: 400px;
  border: 1.5px solid var(--gold-line);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(90, 60, 30, 0.2), inset 0 0 0 5px #fffaf0, inset 0 0 0 6px rgba(176, 128, 58, 0.55);
  padding: clamp(18px, 2.6svh, 30px) clamp(18px, 5vw, 32px) clamp(16px, 2.4svh, 26px);
  text-align: left;
}

/* header: script title, one plain instruction, a small family note */
.rc-head { text-align: center; margin-bottom: clamp(10px, 1.8svh, 18px); }
.rc-title { margin: 0; font-family: var(--font-script); font-size: clamp(30px, 3.6svh + 8px, 44px); line-height: 1.05; color: var(--gold); }
.rc-how { margin: 0.5svh 0 0; font-size: clamp(13px, 1.3svh + 3px, 16px); color: var(--ink); }
.rc-family { margin: 0.2svh 0 0; font-size: clamp(11px, 1.05svh + 3px, 13px); font-style: italic; color: #7f6248; }
/* fine gold rule with a small diamond under the header */
.rc-head::after {
  content: "◆";
  display: block;
  margin-top: clamp(6px, 1.2svh, 12px);
  font-size: 11px;
  line-height: 12px;
  text-align: center;
  color: var(--gold-line);
  background: linear-gradient(90deg, transparent, rgba(176, 128, 58, 0.7) 18% 45%, transparent 47% 53%, rgba(176, 128, 58, 0.7) 55% 82%, transparent) center / 100% 1px no-repeat;
}

/* step labels: a small gold numeral medallion + small-caps text */
.rc-part { margin-bottom: clamp(10px, 1.8svh, 18px); }
.rc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(4px, 0.8svh, 8px);
  font-size: clamp(12px, 1.15svh + 3px, 14px);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: #7a5c44;
}
html[lang="hi"] .rc-label { font-variant: normal; letter-spacing: 0; }
.rc-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  font-size: 11px;
  font-variant: normal;
  letter-spacing: 0;
  color: var(--gold);
  background: #fffaf0;
  box-shadow: 0 0 0 2px #fffaf0, 0 0 0 3px rgba(176, 128, 58, 0.35);
}

/* 1. name and phone side by side on gold writing lines */
.rc-who { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; align-items: end; }
.rsvp__name {
  display: block;
  min-width: 0;
  padding: 0.1em 0.15em 0.05em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  font-family: var(--font-script);
  font-size: clamp(22px, 2.6svh + 5px, 30px);
  color: var(--rose);
  caret-color: var(--rose);
  cursor: text;
  background: linear-gradient(var(--rose), var(--rose)) left bottom / 0% 1.5px no-repeat,
              linear-gradient(rgba(176, 128, 58, 0.7), rgba(176, 128, 58, 0.7)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.6s ease;
}
.rsvp__name:focus { background-size: 100% 1.5px, 100% 1px; }
/* placeholder matches the phone placeholder (same serif italic and size); the typed name stays in script */
.rsvp__name:empty { font-family: var(--font-serif); font-size: clamp(15px, 1.6svh + 4px, 19px); line-height: 1.3; padding: 0.3em 0.15em 0.25em; }
.rsvp__name:empty::before { content: attr(data-placeholder); font-style: italic; color: rgba(138, 106, 80, 0.45); }
.rsvp__phone-input {
  min-width: 0;
  width: 100%;
  padding: 0.3em 0.15em 0.25em;
  border: 0;
  border-radius: 0;
  outline: none;
  background: linear-gradient(var(--rose), var(--rose)) left bottom / 0% 1.5px no-repeat,
              linear-gradient(rgba(176, 128, 58, 0.7), rgba(176, 128, 58, 0.7)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.6s ease;
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.6svh + 4px, 19px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--rose);
}
.rsvp__phone-input:focus { background-size: 100% 1.5px, 100% 1px; }
.rsvp__phone-input::placeholder { font-style: italic; letter-spacing: 0; color: rgba(138, 106, 80, 0.45); }
.rsvp__note { margin: 0.6svh 0 0; font-size: 12.5px; font-style: italic; line-height: 1.35; color: #2f6b3a; }

/* 2. one compact row per function: [diya] name / date  ·  Yes  No / − 2 + people */
.rsvp__rows { display: grid; }
.rsvp-row {
  --diya: clamp(34px, 4.4svh, 46px);
  display: grid;
  grid-template-columns: var(--diya) minmax(0, 1fr) auto;
  grid-template-areas:
    "diya name choice"
    "diya date count";
  align-items: center;
  column-gap: 10px;
  padding: clamp(5px, 0.9svh, 9px) 0;
}
.rsvp-row + .rsvp-row { border-top: 1px dotted rgba(176, 128, 58, 0.5); }

.rsvp-diya { grid-area: diya; position: relative; width: var(--diya); }
.rsvp-diya img { display: block; width: 100%; filter: saturate(0.5) brightness(0.92); transition: filter 0.4s; }
.rsvp-row.is-yes .rsvp-diya img { filter: none; }
.rsvp-diya__flame {
  position: absolute;
  left: 9.8%;
  top: 49%;
  width: 34%;
  aspect-ratio: 0.55;
  transform: translate(-50%, -100%) scale(0);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 75%, #fff8d6 0 18%, #ffd36b 35%, #ff9a2e 62%, rgba(255, 120, 30, 0) 75%);
  filter: blur(0.3px) drop-shadow(0 0 6px rgba(255, 170, 60, 0.9));
  transition: transform 0.45s cubic-bezier(.3,1.6,.5,1);
}
.rsvp-row.is-yes .rsvp-diya__flame { transform: translate(-50%, -100%) scale(1); animation: flicker 1.6s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { transform: translate(-50%, -100%) scale(1, 1) rotate(-2deg); }
  30% { transform: translate(-50%, -100%) scale(0.92, 1.08) rotate(2deg); }
  60% { transform: translate(-50%, -100%) scale(1.05, 0.95) rotate(-1deg); }
}

.rsvp-row__name { grid-area: name; min-width: 0; white-space: nowrap; font-family: var(--font-script); font-size: clamp(19px, 2.1svh + 3px, 26px); line-height: 1.1; color: var(--gold); }
.rsvp-row__date { grid-area: date; font-size: clamp(11px, 1.1svh + 3px, 13px); letter-spacing: 0.03em; color: #7f6248; }

/* Yes / No: printed words; the chosen one is circled in red ink (drawn like a pen stroke) */
.rsvp-row__choice { grid-area: choice; display: flex; gap: 2px; justify-self: end; }
.rsvp-choice {
  position: relative;
  min-width: 46px;
  padding: 5px 8px;
  border: 0;
  background: none;
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.4svh + 3px, 17px);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: #7a5c44;
  cursor: pointer;
  transition: color 0.3s;
}
html[lang="hi"] .rsvp-choice { font-variant: normal; letter-spacing: 0; }
.rsvp-choice span { position: relative; z-index: 1; }
.rc-ink { position: absolute; inset: -1px -2px; width: calc(100% + 4px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.rc-ink path {
  fill: none;
  stroke: rgba(176, 128, 58, 0.45);
  stroke-width: 1;
  stroke-dasharray: 0.02 0.03;      /* unchosen: a faint dotted ring shows it can be tapped */
  vector-effect: non-scaling-stroke;
  transition: stroke 0.2s;
}
.rsvp-choice.is-on { color: #8e1c2a; }
.rsvp-choice.is-on .rc-ink path {
  stroke: #8e1c2a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ink-draw 0.5s ease-out forwards;
}
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
/* when one is chosen, the other word steps back */
.rsvp-row[data-answer] .rsvp-choice:not(.is-on) { color: rgba(138, 106, 80, 0.55); }
.rsvp-row[data-answer] .rsvp-choice:not(.is-on) .rc-ink path { stroke: transparent; }

/* guests: on the date line, only after "Yes" */
.rsvp-count { grid-area: count; justify-self: end; display: flex; align-items: center; gap: 5px; visibility: hidden; }
.rsvp-count.is-shown { visibility: visible; }
.rsvp-count__btn {
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--gold-line); border-radius: 50%;
  background: #fffaf0;
  font-size: 14px; line-height: 1; color: #7a4e1e; cursor: pointer;
}
.rsvp-count__num { min-width: 1.1em; text-align: center; font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: #8e1c2a; }
.rsvp-count__label { font-size: 12px; font-style: italic; color: #7f6248; }

/* blessing: two ruled lines on the card, the hint written inside */
.rc-blessing { display: block; margin-bottom: clamp(6px, 1svh, 10px); }
.rc-blessing textarea {
  display: block;
  width: 100%;
  height: 3em;
  padding: 0 0.2em;
  border: 0;
  outline: none;
  resize: none;
  font-family: var(--font-script);
  font-size: clamp(18px, 2svh + 3px, 23px);
  line-height: 1.5em;
  color: var(--rose);
  background: repeating-linear-gradient(transparent 0 calc(1.5em - 1px), rgba(176, 128, 58, 0.5) calc(1.5em - 1px) 1.5em);
}
.rc-blessing textarea::placeholder { font-family: var(--font-serif); font-style: italic; font-size: 0.62em; color: rgba(138, 106, 80, 0.55); }

.rsvp__error { min-height: 1.1em; margin: 0 0 8px; font-size: 12.5px; line-height: 1.35; text-align: center; color: #a3273a; }

/* send: a maroon silk ribbon with notched ends, the wax seal pressed on its left end */
.rsvp__seal-send {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(54px, 7svh, 70px); /* as tall as the seal, so the seal never overlaps the text above */
  margin: 0 auto;
  padding: 0 0 0 clamp(26px, 3.4svh, 34px);
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.rc-ribbon {
  display: block;
  padding: clamp(9px, 1.2svh, 12px) 30px clamp(9px, 1.2svh, 12px) clamp(34px, 4.4svh, 44px);
  background: linear-gradient(180deg, #a3283a 0%, #8e1c2a 55%, #74131f 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.rc-ribbon::before, .rc-ribbon::after { content: none; }
.rsvp__seal-send .rsvp__seal-hint {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.4svh + 3px, 17px);
  font-variant: small-caps;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: #fbeed6;
}
html[lang="hi"] .rsvp__seal-send .rsvp__seal-hint { font-variant: normal; letter-spacing: 0.02em; }
/* thin gold stitching along the ribbon */
.rc-ribbon { outline: 1px dashed rgba(240, 200, 130, 0.55); outline-offset: -4px; }
.rc-seal {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(54px, 7svh, 70px);
  transform: translateY(-50%) rotate(-10deg);
  filter: drop-shadow(0 3px 4px rgba(60, 10, 10, 0.4));
}
.rsvp__seal-send:hover { transform: scale(1.03); }
.rsvp__seal-send:active { transform: scale(0.98); }
.rsvp__seal-send.is-sending { animation: send-pulse 1s ease-in-out infinite; pointer-events: none; }
@keyframes send-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* while sending: the card is locked (dimmed, nothing can be changed) */
.rsvp__card.is-locked form { pointer-events: none; }
.rsvp__card.is-locked form > *:not(.rsvp__seal-send) { opacity: 0.55; transition: opacity 0.3s; }

/* ---------- thank you ---------- */
.rsvp__thanks { display: grid; justify-items: center; justify-self: center; }
/* the couple stands ~5% right of centre inside the namaste video: shift it back so they look centred */
.rsvp__namaste { height: min(38svh, 360px); width: auto; transform: translateX(-4.9%); }
.rsvp__thanks h3 { margin: 0.4svh 0 0; font-family: var(--font-script); font-weight: 400; font-size: clamp(36px, 4.4svh + 12px, 60px); color: var(--gold); }
.rsvp__thanks p { margin: 0.4em 0 0; color: var(--ink); }
.rsvp__edit {
  margin-top: 1.4svh;
  padding: 0.5em 1.2em;
  border: 1.5px solid var(--gold-line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-style: italic;
  color: #7a4e1e;
  cursor: pointer;
}

.rsvp__petals { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; }

/* very narrow phones: smaller diya and gaps so rows never overflow */
@media (max-width: 369px) {
  .rsvp-row { --diya: 28px; column-gap: 7px; }
  .rsvp-choice { min-width: 40px; padding: 5px 6px; }
  .rsvp-row__name { font-size: 18px; }
  .rc-who { gap: 10px; }
}

/* short screens (e.g. 320x568): tighter spacing so the whole card still fits one screen */
@media (max-height: 620px) {
  .rsvp__card { padding-top: 14px; padding-bottom: 12px; }
  .rc-title { font-size: 26px; }
  .rc-head, .rc-part { margin-bottom: 6px; }
  .rc-blessing textarea { height: 2.6em; }
  .rsvp-row { padding: 3px 0; --diya: 28px; }
  .rsvp__error { margin-bottom: 6px; }
}