/* =============================================================================
   06-form.css  ·  the premium glass RSVP panel + fields + success
   ========================================================================== */

.rsvp::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,28,50,.55),rgba(10,28,50,.66)); }

.rsvp-card{
  position:relative; overflow:hidden; max-width:660px; margin-inline:auto;
  background:linear-gradient(165deg,rgba(18,42,71,.66),rgba(10,28,50,.74));
  border:1px solid var(--glass-brd); border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-deep); padding:clamp(2rem, 1.3rem + 2.8vw, 3.2rem);
}
.rsvp-card::before{ /* gold top hairline */
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--grad-gold); opacity:.9;
}
.rsvp-head{ text-align:center; margin-inline:auto; margin-bottom:1.8rem; }
.rsvp-head .eyebrow{ justify-content:center; }
.rsvp-head .lead{ margin-inline:auto; }

.rsvp-form{ display:grid; gap:1.35rem; }
.field{ display:flex; flex-direction:column; gap:.55rem; }
.field > label,.field--radio legend{
  font-family:var(--font-head); font-weight:600; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-navy-2); padding:0 .1rem;
}
.req{ color:var(--gold-200); }

/* Frosted-glass fields — they belong to the card instead of fighting it as white slabs */
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%; padding:.95rem 1.2rem; font-family:var(--font-ui); font-size:1.02rem; color:var(--on-navy);
  background:rgba(255,255,255,.06); border:1px solid rgba(244,248,252,.22); border-radius:var(--r-md);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea{ resize:vertical; min-height:5.2rem; line-height:1.55; }
.field input::placeholder,.field textarea::placeholder{ color:rgba(244,248,252,.42); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,78,.22); background:rgba(255,255,255,.10);
}
.field input:hover:not(:focus),.field select:hover:not(:focus),.field textarea:hover:not(:focus){ border-color:rgba(244,248,252,.34); }
.field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23CBD9E8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.15rem center; padding-right:2.8rem; color:var(--on-navy); }
.field select option{ color:var(--on-navy); background:var(--navy-800); }
/* Keep the frosted look through browser autofill */
.field input:-webkit-autofill,.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--on-navy); caret-color:var(--on-navy);
  -webkit-box-shadow:0 0 0 1000px rgba(16,34,58,.92) inset; transition:background-color 9999s; }
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{ border-color:#e8897c; box-shadow:0 0 0 3px rgba(232,137,124,.22); }
.field-err{ color:#ffc2b8; font-size:.82rem; font-weight:500; }

/* Radio chips */
.field--radio{ border:0; padding:0; margin:0; }
.radio-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.45rem; }
.chip{ position:relative; cursor:pointer; flex:1 1 0; min-width:8rem; }
.chip input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer; }
.chip span{
  display:flex; align-items:center; justify-content:center; gap:.5em; width:100%; padding:.95rem 1rem; border-radius:var(--r-md);
  background:rgba(255,255,255,.06); border:1px solid rgba(244,248,252,.22); color:var(--on-navy);
  font-family:var(--font-head); font-weight:600; font-size:.98rem; transition:all var(--dur) var(--ease);
}
.chip span::before{ content:""; width:.7em; height:.7em; border-radius:50%; border:2px solid var(--on-navy-muted); transition:all var(--dur) var(--ease); }
.chip:hover span{ border-color:var(--gold-soft); background:rgba(255,255,255,.13); }
.chip:has(input:checked) span,.chip input:checked + span{
  background:var(--grad-gold); color:var(--navy-900); border-color:var(--gold);
}
.chip:has(input:checked) span::before,.chip input:checked + span::before{ background:var(--navy-900); border-color:var(--navy-900); }
.chip:has(input:focus-visible) span{ outline:3px solid var(--gold-200); outline-offset:2px; }

/* Toggle */
.conditional{ animation:fadeUp .5s var(--ease) both; }
.toggle{ display:inline-flex; align-items:center; gap:.75rem; cursor:pointer; font-family:var(--font-head); font-weight:600; color:var(--on-navy); }
.toggle input{ position:absolute; opacity:0; width:1px; height:1px; }
.toggle-track{ width:48px; height:27px; border-radius:var(--r-pill); background:rgba(255,255,255,.18);
  border:1px solid var(--line-on-dark-strong); position:relative; transition:background var(--dur) var(--ease); flex:none; }
.toggle-thumb{ position:absolute; top:2px; left:2px; width:21px; height:21px; border-radius:50%; background:#fff;
  box-shadow:var(--shadow-soft); transition:transform var(--dur) var(--ease); }
.toggle:has(input:checked) .toggle-track,.toggle input:checked ~ .toggle-track{ background:var(--gold); }
.toggle:has(input:checked) .toggle-thumb,.toggle input:checked ~ .toggle-track .toggle-thumb{ transform:translateX(21px); }
.toggle:has(input:focus-visible) .toggle-track{ outline:3px solid var(--gold-200); outline-offset:2px; }

/* Guest group — indented with a gold accent + caption so it's unmistakably the guest's */
.guest-fields{ display:grid; gap:1.2rem; margin-top:1.1rem; padding:1.05rem 0 .35rem 1.1rem; border-left:2px solid rgba(201,162,78,.45); }
.guest-caption{ margin:0; font-family:var(--font-head); font-weight:700; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-200); }

/* Honeypot */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-note{ text-align:center; font-size:.82rem; color:var(--on-navy-muted); margin-top:-.2rem; }
.form-error{ background:rgba(232,137,124,.16); border:1px solid rgba(232,137,124,.5); color:#ffd2cb;
  padding:.85rem 1rem; border-radius:var(--r-sm); font-size:.92rem; text-align:center; }

/* Success — viewport-fixed modal, center-locked (lifted out of the tilting .rsvp-card) */
.rsvp-success{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:grid; place-items:center; padding:1.5rem; overflow:auto;
  background:rgba(8,22,40,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  animation:successFade .3s var(--ease) both;
}
.success-inner{
  position:relative; overflow:hidden; width:min(460px, 94vw); margin:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:clamp(2rem, 1.5rem + 2.4vw, 3rem);
  background:linear-gradient(165deg,rgba(20,44,74,.97),rgba(10,28,50,.99));
  border:1px solid var(--glass-brd); border-radius:var(--r-lg); box-shadow:var(--shadow-deep);
  animation:successPop .45s var(--ease-out) both;
}
.success-inner::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background:var(--grad-gold); opacity:.9; }
@keyframes successFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes successPop{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.success-stamp{ width:120px; height:120px; display:grid; place-items:center; margin-bottom:.4rem; }
.success-stamp img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(201,162,78,.5));
  animation:stamp .8s var(--ease-out) both; }
@keyframes stamp{ 0%{ transform:scale(2.2) rotate(-22deg); opacity:0; } 55%{ opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.success-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem, 1.1rem + 2vw, 2.2rem); color:var(--white); }
.success-sub{ color:var(--on-navy-2); }
.rsvp-success .link-cta{ margin-top:.8rem; color:var(--gold-200); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }