/* Wedding RSVP v3 – Dark + Gold */

:root {
  --bg:#0d0d0d; --card:#141414;
  --gold:#c9a84c; --gold2:#dfc072; --gold3:#8a7233; --golda:rgba(201,168,76,.15);
  --txt:#e8e0d0; --mut:#8a8275;
  --bdr:rgba(201,168,76,.25); --bdr2:rgba(201,168,76,.12);
  --err:#c45c5c;
  --ff:'Cormorant Garamond',Georgia,serif;
  --fs:'Jost','Helvetica Neue',sans-serif;
  --ease:.4s cubic-bezier(.4,0,.2,1);
}

/* Reset scoped */
.wrsvp,.wrsvp *,.wrsvp *::before,.wrsvp *::after{box-sizing:border-box;margin:0;padding:0}

/* Wrapper */
.wrsvp{
  position:relative; max-width:700px; margin:40px auto;
  padding:48px 54px 44px; background:var(--card);
  font-family:var(--fs); color:var(--txt);
  -webkit-font-smoothing:antialiased;
}

/* Corners */
.wrsvp-frame{position:absolute;inset:12px;pointer-events:none;z-index:1}
.wrsvp-c{position:absolute;width:28px;height:28px;border-color:var(--gold);border-style:solid;border-width:0;display:block}
.wrsvp-c1{top:0;left:0;border-top-width:1px;border-left-width:1px}
.wrsvp-c2{top:0;right:0;border-top-width:1px;border-right-width:1px}
.wrsvp-c3{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.wrsvp-c4{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

/* Progress bar */
.wrsvp-bar{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:32px;position:relative;z-index:2}
.wrsvp-bar__l{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.wrsvp-bar__l b{font-weight:500}
.wrsvp-bar__r{margin-left:auto;font-size:11px;letter-spacing:1px;color:var(--mut)}
.wrsvp-bar__track{width:100%;height:2px;margin-top:10px;background:var(--bdr2);overflow:hidden}
.wrsvp-bar__fill{height:100%;background:linear-gradient(90deg,var(--gold3),var(--gold));transition:width .6s ease}

/* Sections */
.wrsvp-s{display:none;position:relative;z-index:2}
.wrsvp-s--on{display:block;animation:wIn .4s ease both}
.wrsvp-s--out{display:block;animation:wOut .25s ease both}
@keyframes wIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}

/* Header */
.wrsvp-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:28px}
.wrsvp-hi{width:26px;height:26px;color:var(--gold);flex-shrink:0}
.wrsvp-hi--l{width:32px;height:32px}
.wrsvp-head h2{font-family:var(--ff);font-size:28px;font-weight:400;color:var(--txt);letter-spacing:.5px;line-height:1.3}

.wrsvp-sub{text-align:center;font-size:14px;font-weight:300;color:var(--mut);margin:-10px 0 24px;line-height:1.6}
.wrsvp-sub--n{margin-top:0}
.wrsvp-hint{text-align:center;font-size:13px;color:var(--mut);margin-bottom:12px}

/* Fields */
.wrsvp-f{margin-bottom:22px}
.wrsvp-lb{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

.wrsvp-in{
  display:block;width:100%;padding:12px 4px 12px 0;
  background:transparent;border:none;border-bottom:1px solid var(--bdr);
  color:var(--txt);font-family:var(--fs);font-size:15px;font-weight:300;
  letter-spacing:.4px;outline:none;transition:border-color var(--ease);
}
.wrsvp-in::placeholder{color:var(--mut);opacity:.55}
.wrsvp-in:focus{border-bottom-color:var(--gold)}
.wrsvp-in--err{border-bottom-color:var(--err)!important}
@keyframes wShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.wrsvp-in--shake{animation:wShake .35s ease}

.wrsvp-ta{
  display:block;width:100%;min-height:120px;padding:14px 16px;
  background:rgba(255,255,255,.03);border:1px solid var(--bdr);
  color:var(--txt);font-family:var(--fs);font-size:15px;font-weight:300;
  line-height:1.7;outline:none;resize:vertical;transition:border-color var(--ease);
}
.wrsvp-ta::placeholder{color:var(--mut);opacity:.45}
.wrsvp-ta:focus{border-color:var(--gold)}

/* Buttons */
.wrsvp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 26px;border:1px solid var(--bdr);background:rgba(201,168,76,.06);
  color:var(--gold);font-family:var(--fs);font-size:12px;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;transition:all var(--ease);white-space:nowrap;
}
.wrsvp-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.12);transform:translateY(-1px);box-shadow:0 4px 16px rgba(201,168,76,.1)}
.wrsvp-btn:active{transform:translateY(0)}
.wrsvp-btn--w{width:100%;margin-top:10px}
.wrsvp-btn--x{flex:1}
.wrsvp-btn--bk{background:transparent;border-color:var(--bdr2);color:var(--mut);font-size:11px}
.wrsvp-btn--bk:hover{border-color:var(--bdr);color:var(--txt);background:rgba(255,255,255,.03);box-shadow:none}
.wrsvp-btn--send{background:linear-gradient(135deg,var(--gold),var(--gold2));border-color:var(--gold);color:#0d0d0d;font-weight:500}
.wrsvp-btn--send:hover{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#0d0d0d;box-shadow:0 4px 20px rgba(201,168,76,.25)}
.wrsvp-row{display:flex;gap:12px;margin-top:24px}
.wrsvp-row--t{margin-top:32px}

/* Counter */
.wrsvp-cnt{display:flex;align-items:center;justify-content:center;gap:24px;margin:24px 0 20px}
.wrsvp-cnt--s{margin:10px 0 6px;gap:18px}
.wrsvp-cnt__b{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border:1.5px solid var(--gold);border-radius:50%;
  background:transparent;cursor:pointer;transition:all var(--ease);
}
.wrsvp-cnt__b:hover{background:var(--golda);transform:scale(1.06)}
.wrsvp-cnt__b:active{transform:scale(.94)}
.wrsvp-cnt__b span{font-family:var(--fs);font-size:24px;font-weight:300;color:var(--gold);line-height:1;user-select:none}
.wrsvp-cnt--s .wrsvp-cnt__b{width:42px;height:42px}
.wrsvp-cnt--s .wrsvp-cnt__b span{font-size:20px}
.wrsvp-cnt__v{display:flex;flex-direction:column;align-items:center;min-width:54px}
.wrsvp-cnt__v b{font-family:var(--ff);font-size:46px;font-weight:300;color:var(--txt);line-height:1;transition:transform .2s ease}
.wrsvp-cnt--s .wrsvp-cnt__v b{font-size:34px}
.wrsvp-cnt__v small{font-size:12px;font-weight:300;color:var(--mut);letter-spacing:1px;margin-top:4px}
.wrsvp-bump{transform:scale(1.15)!important}

/* Companions */
.wrsvp-cf{margin-bottom:16px;animation:wIn .3s ease both}

/* Checkbox */
.wrsvp-chk{display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;margin:16px 0 8px}
.wrsvp-chk input{position:absolute;opacity:0;width:0;height:0}
.wrsvp-chk__box{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1px solid var(--bdr);flex-shrink:0;transition:all var(--ease);
}
.wrsvp-chk__box::after{content:'✓';font-size:13px;color:var(--gold);opacity:0;transform:scale(.4);transition:all .2s ease}
.wrsvp-chk input:checked+.wrsvp-chk__box{border-color:var(--gold);background:var(--golda)}
.wrsvp-chk input:checked+.wrsvp-chk__box::after{opacity:1;transform:scale(1)}
.wrsvp-chk__txt{font-size:14px;font-weight:300;color:var(--mut)}

/* Confirm */
.wrsvp-choice{display:flex;gap:14px;margin-top:28px}
.wrsvp-cb{
  flex:1;padding:16px;border:1px solid var(--bdr);background:transparent;
  font-family:var(--fs);font-size:12px;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;transition:all var(--ease);text-align:center;
}
.wrsvp-cb--y{color:var(--gold);border-color:var(--gold);background:rgba(201,168,76,.05)}
.wrsvp-cb--y:hover,.wrsvp-cb--y.wrsvp-cb--sel{background:var(--gold);color:#0d0d0d;box-shadow:0 4px 20px rgba(201,168,76,.2);transform:translateY(-1px)}
.wrsvp-cb--n{color:var(--mut);border-color:var(--bdr2)}
.wrsvp-cb--n:hover{border-color:var(--mut);background:rgba(255,255,255,.04);color:var(--txt);transform:translateY(-1px)}
.wrsvp-cb--n.wrsvp-cb--sel{border-color:var(--mut);background:rgba(255,255,255,.06);color:var(--txt)}

/* Success */
.wrsvp-ok{text-align:center;padding:24px 0}
.wrsvp-ok__h{font-size:46px;color:var(--gold);margin-bottom:16px;animation:wPulse 2s ease-in-out infinite}
@keyframes wPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.wrsvp-ok h2{font-family:var(--ff);font-size:30px;font-weight:400;color:var(--txt);margin-bottom:14px}
.wrsvp-ok__d{font-size:14px;color:var(--gold3);letter-spacing:6px;opacity:.5;margin-top:8px}

/* Error */
.wrsvp-err{
  display:none;margin-top:14px;padding:10px 16px;
  background:rgba(196,92,92,.1);border-left:2px solid var(--err);
  color:var(--err);font-size:13px;font-weight:300;position:relative;z-index:2;
}

/* ─── Responsive ─── */
@media(max-width:740px){
  .wrsvp{margin:24px 12px;padding:36px 28px 32px}
  .wrsvp-head h2{font-size:23px}
  .wrsvp-cnt__v b{font-size:40px}
}
@media(max-width:520px){
  .wrsvp{padding:28px 18px 24px}
  .wrsvp-head h2{font-size:20px}
  .wrsvp-choice{flex-direction:column;gap:10px}
  .wrsvp-row{flex-direction:column-reverse;gap:8px}
  .wrsvp-row .wrsvp-btn{width:100%;justify-content:center}
  .wrsvp-cnt{gap:16px}
  .wrsvp-cnt__b{width:44px;height:44px}
  .wrsvp-cnt__v b{font-size:36px}
  .wrsvp-frame{inset:6px}
  .wrsvp-c{width:18px;height:18px}
}