/* =================================================================
   1. CONFIG — edit colours & type here, plus the EVENT block in JS
   ================================================================= */
:root{
  --ink:        #F8EDE3;   /* warm champagne-blush background   */
  --panel:      #FFFBF8;   /* near-white warm card surface      */
  --panel-edge: #EDD4BF;   /* dusty champagne border            */
  --gold:       #C4882A;   /* rich amber gold                   */
  --gold-soft:  #E8AC48;   /* warm golden highlight             */
  --blush:      #CF7B72;   /* dusty rose accent                 */
  --cream:      #2C1812;   /* deep espresso text                */
  --muted:      #9A7868;   /* warm rose-taupe secondary         */
  --success:    #4A9B5A;   /* confirmation green                */
  --error:      #C04545;   /* validation red                    */
  --radius:     14px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* =================================================================
   2. RESET & BASE
   ================================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Jost',system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
/* Ambient glow — quiet atmosphere behind the content */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(196,136,42,.18), transparent 60%),
    radial-gradient(90% 60% at 85% 110%, rgba(207,123,114,.14), transparent 55%);
}
.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:clamp(40px,8vw,90px) 24px 70px; }

/* Decorative botanical corners */
.deco-corner{ position:fixed; z-index:0; pointer-events:none; width:clamp(90px,16vw,240px); opacity:.5; }
.deco-corner svg{ display:block; width:100%; height:auto; }
.deco-tl{ top:0; left:0; }
.deco-tr{ top:0; right:0; transform:scaleX(-1); }
.deco-bl{ bottom:0; left:0; transform:scaleY(-1); }
.deco-br{ bottom:0; right:0; transform:scale(-1,-1); }
@media(max-width:700px){ .deco-corner{ width:clamp(60px,26vw,130px); opacity:.4; } }

/* =================================================================
   3. HERO
   ================================================================= */
.deadline-wrap{ text-align:center; margin-top:30px; }
.deadline-badge{
  display:inline-block; font-size:clamp(1.1rem,3.5vw,1.5rem); letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream); background:linear-gradient(135deg,rgba(196,136,42,.12),rgba(207,123,114,.08));
  border:2px solid rgba(196,136,42,.5); border-radius:14px;
  padding:16px 36px;
  box-shadow:0 0 28px -8px rgba(196,136,42,.28), 0 0 14px -6px rgba(207,123,114,.18);
}
.deadline-badge strong{ color:var(--gold); font-weight:700; }

.basmala{
  font-family:'Amiri',serif; font-size:clamp(1.4rem,4vw,2rem);
  color:var(--gold); text-align:center; direction:rtl;
  margin-bottom:10px; line-height:1.8; font-weight:400;
}
.eyebrow{
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); font-weight:500; text-align:center;
}
.crest{
  display:block; width:108px; height:108px; margin:26px auto 8px;
  filter:drop-shadow(0 6px 10px rgba(80,50,10,.35));
}
.crest .initial{
  fill:#FFF6E8; stroke:none; font-family:'Cormorant Garamond',serif; font-weight:600;
  filter:drop-shadow(0 1px 0 rgba(126,84,23,.6));
}
.crest .amp{ fill:#FFE9C4; }

h1{
  font-family:'Cormorant Garamond',serif;
  font-weight:500; text-align:center;
  font-size:clamp(3rem,12vw,5.6rem);
  line-height:.98; letter-spacing:.01em;
  color:var(--cream);
}
h1 .amp{ font-style:italic; color:var(--gold-soft); font-weight:400; }
.subtitle{
  text-align:center; color:var(--muted);
  font-size:clamp(1rem,3.4vw,1.18rem); margin-top:14px; font-weight:300;
}

/* Decorative gold rule with a centre lozenge — drawn in on load */
.rule{ display:flex; align-items:center; gap:16px; margin:38px auto 0; max-width:340px; }
.rule .line{ height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--gold)); }
.rule .line.r{ background:linear-gradient(270deg,transparent,var(--gold)); }
.rule .lozenge{ width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex:none; }

/* =================================================================
   4. EVENT DETAIL CARDS
   ================================================================= */
.details{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
  margin:46px auto 8px; max-width:500px;
}
.detail{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:var(--radius); padding:24px 18px; text-align:center;
  box-shadow:0 3px 18px rgba(180,90,70,.07);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.detail:hover{ box-shadow:0 6px 24px rgba(180,90,70,.12); }
.detail:hover{ border-color:var(--gold); transform:translateY(-3px); }
.detail svg{ width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:1.3; margin-bottom:12px; }
.detail .k{ font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.detail .v{ font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--cream); margin-top:4px; line-height:1.25; }
.detail .v small{ display:block; font-family:'Jost'; font-size:.82rem; color:var(--muted); font-weight:300; letter-spacing:.02em; }
.map-link{ display:inline-block; margin-top:10px; font-family:'Jost'; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(196,136,42,.35); transition:color .2s var(--ease), border-color .2s var(--ease); }
.map-link:hover{ color:var(--blush); border-color:var(--blush); }

/* =================================================================
   5. RSVP FORM
   ================================================================= */
.form-card{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:var(--radius); padding:clamp(28px,5vw,44px);
  margin-top:46px; position:relative; overflow:hidden;
  box-shadow:0 4px 28px rgba(180,90,70,.09);
}
.form-card::before{ /* thin gold top accent */
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.form-head{ text-align:center; margin-bottom:30px; }
.form-head h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:2.1rem; }
.form-head p{ color:var(--muted); font-size:.92rem; margin-top:4px; }

.field{ margin-bottom:20px; }
.field.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:0; }
@media(max-width:520px){ .field.row{ grid-template-columns:1fr; gap:0; } }
.field.row > div{ margin-bottom:20px; }

label{ display:block; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; font-weight:500; }
label .req{ color:var(--gold); }

input,select,textarea{
  width:100%; background:var(--ink); color:var(--cream);
  border:1px solid var(--panel-edge); border-radius:9px;
  padding:13px 15px; font-family:'Jost'; font-size:.98rem; font-weight:300;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
input::placeholder,textarea::placeholder{ color:#6a5f50; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(196,136,42,.16);
}
select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23C4882A' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center;
}
textarea{ resize:vertical; min-height:74px; }
.hint{ font-size:.78rem; color:#6a5f50; margin-top:6px; }
.err-msg{ color:var(--error); font-size:.78rem; margin-top:6px; min-height:0; }
input.invalid,select.invalid{ border-color:var(--error); }

/* Non-editable names display */
.name-display{
  background:var(--ink); border:1px solid var(--panel-edge); border-radius:9px;
  padding:13px 15px; font-family:'Cormorant Garamond',serif; font-size:1.15rem;
  color:var(--cream); opacity:.85; cursor:default; letter-spacing:.02em;
}

/* Attendee checkboxes */
.attendee-list{ display:flex; flex-direction:column; gap:8px; }
.attendee-row{
  display:flex; align-items:center; gap:13px;
  padding:12px 15px; background:var(--ink);
  border:1px solid var(--panel-edge); border-radius:9px;
  cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease);
  user-select:none;
}
.attendee-row.checked{ border-color:var(--gold); background:rgba(201,162,90,.04); }
.attendee-row input{ display:none; }
.check-mark{
  width:19px; height:19px; flex-shrink:0; border:1.5px solid var(--panel-edge);
  border-radius:5px; display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease); font-size:.7rem; font-weight:700; color:transparent;
}
.attendee-row.checked .check-mark{ background:var(--gold); border-color:var(--gold); color:var(--panel); }
.attendee-check-name{ font-family:'Cormorant Garamond',serif; font-size:1.1rem; }

/* Attendance as elegant segmented control */
.segment{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.segment-2{ grid-template-columns:1fr 1fr !important; }
.segment input{ position:absolute; opacity:0; pointer-events:none; }
.segment label{
  margin:0; text-align:center; padding:13px 8px; border:1px solid var(--panel-edge);
  border-radius:9px; cursor:pointer; letter-spacing:.14em;
  color:var(--muted); transition:all .25s var(--ease); background:var(--ink);
}
.segment label:hover{ border-color:var(--gold); color:var(--cream); }
.segment input:checked + label{
  border-color:var(--gold); color:var(--panel);
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)); font-weight:500;
}
.segment input:focus-visible + label{ box-shadow:0 0 0 3px rgba(196,136,42,.28); }

/* Submit */
.submit{
  width:100%; margin-top:30px; padding:16px; border:none; cursor:pointer;
  border-radius:9px; font-family:'Jost'; font-weight:500; font-size:.86rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--panel);
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.submit:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(196,136,42,.55); filter:brightness(1.04); }
.submit:active{ transform:translateY(0); }
.submit:disabled{ opacity:.6; cursor:wait; }

/* Confirmation state */
.confirmation{ text-align:center; padding:14px 0; display:none; }
.confirmation.show{ display:block; animation:rise .6s var(--ease); }
.confirmation svg{ width:64px; height:64px; stroke:var(--success); fill:none; stroke-width:1.3; margin-bottom:18px; }
.confirmation h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:2.3rem; }
.confirmation p{ color:var(--muted); margin-top:8px; }
.confirmation .again{
  margin-top:22px; background:none; border:1px solid var(--panel-edge); color:var(--muted);
  padding:11px 22px; border-radius:9px; font-family:'Jost'; letter-spacing:.16em;
  text-transform:uppercase; font-size:.72rem; cursor:pointer; transition:all .25s var(--ease);
}
.confirmation .again:hover{ border-color:var(--gold); color:var(--cream); }

/* =================================================================
   6. HOST PANEL  (discreet — opened from the footer)
   ================================================================= */
.host-link{ display:block; text-align:center; margin-top:40px; }
.host-link button{
  background:none; border:none; color:#5e5446; cursor:pointer;
  font-family:'Jost'; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  transition:color .25s var(--ease);
}
.host-link button:hover{ color:var(--gold); }

.host-panel{
  display:none; margin-top:20px; background:var(--panel);
  border:1px solid var(--panel-edge); border-radius:var(--radius); padding:26px;
}
.host-panel.show{ display:block; animation:rise .5s var(--ease); }
.host-panel h3{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.6rem; text-align:center; }
.host-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0; }
.stat{ text-align:center; padding:14px 6px; background:var(--ink); border:1px solid var(--panel-edge); border-radius:10px; }
.stat .n{ font-family:'Cormorant Garamond',serif; font-size:1.9rem; color:var(--gold-soft); line-height:1; }
.stat .l{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.host-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.host-actions button{
  padding:13px; border-radius:9px; cursor:pointer; font-family:'Jost';
  letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; transition:all .25s var(--ease);
}
.btn-export{ border:none; color:var(--panel); background:linear-gradient(135deg,var(--gold-soft),var(--gold)); font-weight:500; }
.btn-export:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-clear{ border:1px solid var(--panel-edge); background:var(--ink); color:var(--muted); }
.btn-clear:hover{ border-color:var(--error); color:var(--error); }
.host-empty{ text-align:center; color:var(--muted); font-size:.88rem; padding:8px 0 4px; }

footer{ text-align:center; margin-top:48px; color:var(--muted); font-size:.74rem; letter-spacing:.14em; }

/* =================================================================
   7. MOTION
   ================================================================= */
@keyframes rise{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }
.reveal{ opacity:0; transform:translateY(20px); }
.reveal.in{ opacity:1; transform:translateY(0); transition:opacity .8s var(--ease), transform .8s var(--ease); }
/* Crest stamp */
.crest{ opacity:0; transform:scale(.6) rotate(-8deg); animation:stamp .6s var(--ease) .2s forwards; }
@keyframes stamp{ 60%{ opacity:1; transform:scale(1.08) rotate(2deg); } to{ opacity:1; transform:scale(1) rotate(0); } }
/* Rule draw */
.rule .line{ transform:scaleX(0); transform-origin:right; animation:grow 1s var(--ease) .5s forwards; }
.rule .line.r{ transform-origin:left; }
@keyframes grow{ to{ transform:scaleX(1); } }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .crest{ opacity:1; transform:none; }
  .rule .line{ transform:scaleX(1); }
}
@media(max-width:480px){ .details{ grid-template-columns:1fr; } .host-stats{ grid-template-columns:repeat(2,1fr); } }

/* =================================================================
   8. INVITE STATES  (loading / invalid invite)
   ================================================================= */
.invite-state{
  background:var(--panel); border:1px solid var(--panel-edge);
  border-radius:var(--radius); padding:clamp(28px,5vw,44px);
  margin-top:46px; text-align:center; color:var(--muted);
  font-size:.95rem; line-height:1.7;
}
.invite-state p + p{ margin-top:8px; }

.already-responded{
  margin-bottom:18px; padding:10px 14px;
  border:1px solid var(--panel-edge); border-radius:9px;
  background:rgba(201,162,90,.06); color:var(--muted); font-size:.8rem;
}