/* =========================================================
   Digital Wedding / Engagement Invitation — bilingual (AR/EN)
   ========================================================= */
:root{
  --cream:#f6ede1; --cream-2:#f1e2d2; --blush:#ecd2cb; --ivory:#fbf5ec;
  --rose:#a8434f; --maroon:#8f2f3b; --maroon-dk:#7a2731;
  --gold:#c39b4e; --gold-dk:#a97f2e;
  --ink:#4c3d33; --ink-soft:#6f5c4e; --heart:#c0392b; --line:#d9c3a9;
  --shadow-card:0 10px 28px rgba(120,70,45,.14);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}

/* small layout utilities (previously from Tailwind CDN) */
.text-2xl{ font-size:1.5rem; }
.text-4xl{ font-size:2.25rem; }
.text-5xl{ font-size:3rem; }
.mt-2{ margin-top:.5rem; }
.mt-3{ margin-top:.75rem; }
.leading-tight{ line-height:1.25; }
body{
  font-family:"Cormorant Garamond",Georgia,serif; color:var(--ink);
  background:radial-gradient(120% 60% at 50% -10%,#fbf3ea 0%,#efe4d6 55%,#e7d8c7 100%);
  min-height:100vh; display:flex; justify-content:center;
}
.invite{ width:100%; max-width:460px; background:var(--cream); position:relative; overflow:hidden;
  box-shadow:0 0 60px rgba(90,50,30,.12); }

/* ---------- bilingual show / hide ---------- */
html[lang="en"] .ar{ display:none !important; }
html[lang="ar"] .en{ display:none !important; }

/* ---------- Arabic typography ---------- */
html[lang="ar"] body{ font-family:"Amiri", serif; }
html[lang="ar"] .cn,
html[lang="ar"] .names,
html[lang="ar"] .script,
html[lang="ar"] .venue-name,
html[lang="ar"] .rsvp-title{ font-family:"Aref Ruqaa","Amiri",serif !important; font-style:normal; font-weight:700; }
/* Arabic doesn't use letter-spacing / uppercase */
html[lang="ar"] .eyebrow,
html[lang="ar"] .label-sm,
html[lang="ar"] .cover-kicker,
html[lang="ar"] .cover-date,
html[lang="ar"] .unit,
html[lang="ar"] .map-tap,
html[lang="ar"] .tiny,
html[lang="ar"] .attend button,
html[lang="ar"] .btn,
html[lang="ar"] .count-lead,
html[lang="ar"] .names{ letter-spacing:0 !important; text-transform:none !important; }

/* ---------- language toggle ---------- */
.lang-toggle{ position:fixed; top:14px; right:14px; z-index:70; background:var(--ivory); color:var(--maroon);
  border:1px solid rgba(180,140,110,.4); border-radius:22px; padding:7px 15px; font-size:.82rem; font-weight:600;
  cursor:pointer; box-shadow:0 4px 14px rgba(90,50,30,.2); font-family:"Cormorant Garamond",serif; letter-spacing:.04em;
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
html[dir="rtl"] .lang-toggle{ right:auto; left:14px; font-family:"Amiri",serif; }

/* ---------- shared type ---------- */
.eyebrow{ font-size:.78rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-dk); font-weight:600; text-align:center; }
.eyebrow.rose{ color:var(--rose); }
.script{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:600; color:var(--rose); text-align:center; line-height:1.05; }
.label-sm{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); text-align:center; font-weight:600; }
.label-sm.center{ text-align:center; }
.section{ position:relative; padding:64px 26px; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* hearts (unicode, tinted) */
.heart-i{ color:var(--heart); line-height:1; display:inline-block; }
.heart-i::before{ content:"\2665"; font-size:15px; }
.heart-i.sm::before{ font-size:12px; } .heart-i.big::before{ font-size:20px; }

/* divider + flourishes */
.divider{ display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0 6px; }
.divider .rule{ height:1px; width:56px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.divider .rule.short{ width:36px; }
.flourish-mini{ text-align:center; color:var(--gold-dk); margin:10px 0; font-size:1.05rem; }
.flourish-row{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--gold-dk); margin:14px 0; }
.flourish-row .leaf{ opacity:.75; }

/* amp row (between names) */
.amp-row{ display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0; }
.amp-row .amp-rule{ height:1px; width:42px; background:linear-gradient(90deg,transparent,var(--gold-dk),transparent); opacity:.6; }
.amp-row .amp-ch{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--rose); font-size:1.5rem; }
.amp-row.big .amp-ch{ font-size:1.7rem; }
html[lang="ar"] .amp-row .amp-ch{ font-family:"Amiri",serif; font-style:normal; }

/* primary button */
.btn{ display:block; width:100%; max-width:360px; margin:0 auto; text-align:center;
  background:linear-gradient(180deg,var(--maroon) 0%,var(--maroon-dk) 100%); color:#fff; text-decoration:none; border:none;
  cursor:pointer; font-family:"Cormorant Garamond",serif; font-size:1.1rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; padding:16px; border-radius:16px; box-shadow:0 10px 22px rgba(140,40,55,.28);
  transition:transform .12s ease, box-shadow .12s ease; }
.btn:active{ transform:translateY(1px); box-shadow:0 6px 14px rgba(140,40,55,.28); }
html[lang="ar"] .btn{ font-family:"Amiri",serif; font-weight:700; }

/* =========================================================
   COVER (landing screen)
   ========================================================= */
body.locked{ overflow:hidden; }
.cover{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:28px 22px; overflow:hidden; background-size:cover; background-position:center;
  background-image:radial-gradient(95% 60% at 50% 30%,#fbeee1 0%,#f4ddca 52%,#e9cbb6 100%);
  transition:opacity .9s ease, transform .9s ease; }
.cover.open{ opacity:0; transform:scale(1.12); pointer-events:none; }
.cover.gone{ display:none; }
.cover .petals{ z-index:1; }

.cover-card{ position:relative; z-index:2; width:100%; max-width:340px; background:#f8f0e6;
  border:1px solid rgba(180,140,110,.28); border-radius:22px; box-shadow:0 22px 55px rgba(120,70,45,.22);
  padding:38px 30px 30px; text-align:center; animation:coverIn 1s ease both; }
@keyframes coverIn{ from{opacity:0; transform:translateY(16px) scale(.965);} to{opacity:1; transform:none;} }

.monogram{ width:66px; height:66px; margin:0 auto 20px; border:1.5px solid var(--gold-dk); border-radius:50%;
  display:flex; align-items:center; justify-content:center; gap:5px; }
.monogram .mi{ font-family:"Playfair Display",serif; color:var(--ink); font-size:1.18rem; }
.monogram .mamp{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--rose); font-size:.95rem; }

.cover-kicker{ font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 16px; font-weight:600; }
.cn{ font-family:"Playfair Display",serif; font-style:italic; font-weight:500; color:#3f2d26;
  font-size:clamp(2.4rem,10vw,3rem); line-height:1.06; margin:0; }
.cheart{ margin:10px 0 6px; } .cheart .heart-i::before{ font-size:16px; }
.cover-date{ font-size:.76rem; letter-spacing:.26em; text-transform:uppercase; color:var(--rose); margin:6px 0 18px; font-weight:600; }
.cover-tagline{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink-soft); font-size:1.12rem; line-height:1.55; margin:0 0 26px; }
html[lang="ar"] .cover-tagline{ font-family:"Amiri",serif; font-style:normal; }
.cover-btn{ background:linear-gradient(180deg,#a9615a 0%,#8f4b45 100%); box-shadow:0 10px 22px rgba(140,70,60,.3); }

.cfloral{ position:absolute; width:172px; height:172px; z-index:1; pointer-events:none; opacity:.96; }
.cfloral.ctl{ top:-16px; left:-20px; } .cfloral.ctr{ top:-16px; right:-20px; transform:scaleX(-1); }
.cfloral.cbl{ bottom:-16px; left:-20px; transform:scaleY(-1); } .cfloral.cbr{ bottom:-16px; right:-20px; transform:scale(-1,-1); }

/* petals */
.petals{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.petal{ position:absolute; top:-24px; opacity:.75; animation:fall linear infinite; }
@keyframes fall{ 0%{transform:translateY(-10px) rotate(0);opacity:0;} 10%{opacity:.8;} 100%{transform:translateY(112vh) rotate(320deg);opacity:.15;} }

/* corner florals */
.floral{ position:absolute; width:150px; height:150px; pointer-events:none; z-index:1; opacity:.95; }
.floral.tl{ top:-6px; left:-10px; } .floral.tr{ top:-6px; right:-10px; transform:scaleX(-1); }
.floral.bl{ bottom:-6px; left:-10px; transform:scaleY(-1); } .floral.br{ bottom:-6px; right:-10px; transform:scale(-1,-1); }

/* =========================================================
   1. HERO
   ========================================================= */
.hero{ min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:70px 26px; overflow:hidden; background-image:radial-gradient(80% 55% at 50% 42%,#fdf6ee 0%,#f3e4d5 60%,#ecdbc9 100%); }
.names{ font-family:"Playfair Display",serif; color:var(--ink); font-weight:600; line-height:1.04; margin:0;
  font-size:clamp(2.6rem,12vw,3.6rem); letter-spacing:.03em; }
html[lang="en"] .hero .names{ text-transform:uppercase; }
.vow{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink-soft); font-size:1.28rem; line-height:1.5; margin:14px 0; }
html[lang="ar"] .vow{ font-family:"Amiri",serif; font-style:normal; }
.chev{ color:var(--gold-dk); animation:bob 1.8s ease-in-out infinite; margin-top:4px; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* =========================================================
   2. DATE (scratch)
   ========================================================= */
.date-sec{ background-image:linear-gradient(180deg,var(--cream) 0%,#f4e0d6 100%); }
.date-sec .floral{ width:172px; height:172px; }
.date-sec .floral.bl{ bottom:-8px; } .date-sec .floral.br{ bottom:-8px; }
.cards3{ display:flex; gap:12px; justify-content:center; margin-top:30px; }
.scratch{ position:relative; flex:1; max-width:120px; aspect-ratio:4/4.3; border-radius:16px; overflow:hidden;
  background:var(--ivory); box-shadow:var(--shadow-card); display:flex; align-items:center; justify-content:center; }
.scratch .under{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Cormorant Garamond",serif; color:var(--rose); font-weight:600; font-size:1.6rem; text-align:center; padding:4px; }
html[lang="ar"] .scratch .under{ font-family:"Aref Ruqaa","Amiri",serif; }
.scratch .under.under-sm{ font-size:1.15rem; }
.scratch canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
.scratch.done canvas{ opacity:0; transition:opacity .5s ease; pointer-events:none; }
.caps-row{ display:flex; gap:12px; justify-content:center; }
.caps-row .label-sm{ flex:1; max-width:120px; }
.finger{ text-align:center; font-size:1.5rem; margin:26px 0 6px; }
.swipe-note{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink-soft); text-align:center; }
html[lang="ar"] .swipe-note{ font-family:"Amiri",serif; font-style:normal; }

/* =========================================================
   3. COUNTDOWN
   ========================================================= */
.count-sec{ background-image:linear-gradient(180deg,#f0d9c6 0%,#e7c3ab 55%,#e9cbb4 100%); }
.count-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px auto 0; max-width:360px; }
.cbox{ background:var(--ivory); border-radius:18px; padding:20px 10px 16px; text-align:center; box-shadow:var(--shadow-card); }
.cbox .orn{ color:var(--gold); font-size:.8rem; margin-bottom:4px; }
.cbox .num{ font-family:"Playfair Display",serif; font-size:2.6rem; color:var(--maroon); font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.cbox .unit{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); margin-top:8px; font-weight:600; }
.cbox .heart-i{ margin-top:6px; }
.count-lead{ }
.count-today{ display:none; text-align:center; margin-top:24px; font-family:"Playfair Display",serif; color:var(--maroon); font-size:1.4rem; letter-spacing:.04em; }
html[lang="ar"] .count-today{ font-family:"Aref Ruqaa","Amiri",serif; letter-spacing:0; }
.count-sec.is-today .count-grid{ display:none; }
.count-sec.is-today .count-lead{ display:none; }
.count-sec.is-today .count-today{ display:block; }
.count-foot{ text-align:center; margin-top:26px; }

/* =========================================================
   4. PLACE
   ========================================================= */
.place-sec{ background-image:linear-gradient(180deg,#f4e5d7 0%,var(--cream) 100%); }
.map-card{ display:block; position:relative; margin:22px auto 0; max-width:360px; height:190px; border-radius:20px;
  overflow:hidden; text-decoration:none; box-shadow:var(--shadow-card); border:1px solid rgba(180,140,110,.25); background:#e9e2d4; }
.map-card .streets{ position:absolute; inset:0; background:
  linear-gradient(90deg,transparent 48%,rgba(255,255,255,.7) 48%,rgba(255,255,255,.7) 52%,transparent 52%),
  linear-gradient(35deg,transparent 46%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.55) 50%,transparent 50%),
  linear-gradient(-40deg,transparent 47%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.5) 51%,transparent 51%),
  linear-gradient(160deg,#e2ddcf,#d7e0d2 60%,#cfe0dc); }
.map-card .green{ position:absolute; width:120px; height:90px; right:-10px; top:-12px; background:radial-gradient(closest-side,#cfe0c2,transparent); }
.pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-70%); z-index:2; filter:drop-shadow(0 6px 6px rgba(0,0,0,.2)); animation:drop .7s ease; }
@keyframes drop{ 0%{transform:translate(-50%,-160%);opacity:0} 60%{transform:translate(-50%,-60%)} 100%{transform:translate(-50%,-70%);opacity:1} }
.map-tap{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2; background:var(--ivory);
  color:var(--ink-soft); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; padding:8px 16px; border-radius:20px;
  font-weight:600; box-shadow:0 4px 12px rgba(0,0,0,.12); white-space:nowrap; }
.venue-card{ background:var(--ivory); border-radius:20px; box-shadow:var(--shadow-card); max-width:360px; margin:18px auto 0; padding:26px 20px; text-align:center; }
.venue-name{ font-family:"Playfair Display",serif; font-size:1.55rem; letter-spacing:.08em; color:var(--maroon); }
html[lang="ar"] .venue-name{ letter-spacing:0; }
.venue-addr{ font-family:"Cormorant Garamond",serif; font-size:1.15rem; color:var(--ink); line-height:1.5; }
html[lang="ar"] .venue-addr{ font-family:"Amiri",serif; }
.place-note{ font-family:"Cormorant Garamond",serif; font-style:italic; text-align:center; color:var(--ink); margin:22px 0 18px; font-size:1.12rem; }
html[lang="ar"] .place-note{ font-family:"Amiri",serif; font-style:normal; }

/* =========================================================
   5. RSVP
   ========================================================= */
.rsvp-sec{ background-image:linear-gradient(180deg,var(--cream) 0%,#f3e2d3 100%); }
.rsvp-title{ font-family:"Playfair Display",serif; font-size:2rem; color:var(--maroon); text-align:center; letter-spacing:.06em; }
html[lang="ar"] .rsvp-title{ letter-spacing:0; }
.rsvp-card{ background:var(--ivory); border-radius:20px; box-shadow:var(--shadow-card); border:1px solid rgba(180,140,110,.25); max-width:380px; margin:22px auto 0; padding:26px 22px 28px; }
.rsvp-orn{ text-align:center; color:var(--gold); margin-bottom:14px; letter-spacing:.4em; }
.field{ margin-bottom:20px; }
.field > .label-sm.block{ display:block; text-align:center; margin-bottom:8px; }
.field input, .field textarea{ width:100%; border:1.5px solid var(--line); background:#fffdf8; border-radius:12px; padding:14px;
  font-family:"Cormorant Garamond",serif; font-size:1.15rem; color:var(--ink); outline:none; transition:border-color .15s ease; }
html[lang="ar"] .field input, html[lang="ar"] .field textarea{ font-family:"Amiri",serif; }
.field input:focus, .field textarea:focus{ border-color:var(--maroon); }
.field textarea{ min-height:92px; resize:vertical; }
.attend{ display:flex; gap:12px; }
.attend button{ flex:1; border:1.5px solid var(--line); background:#fffdf8; cursor:pointer; border-radius:12px; padding:14px 8px;
  font-family:"Cormorant Garamond",serif; font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; transition:all .15s ease; }
html[lang="ar"] .attend button{ font-family:"Amiri",serif; font-size:1rem; }
.attend button.sel{ background:linear-gradient(180deg,var(--maroon),var(--maroon-dk)); color:#fff; border-color:var(--maroon); }
.form-error{ color:var(--maroon); text-align:center; min-height:1.2em; margin:0 0 8px; font-size:.95rem; }
.send-btn{ margin-top:6px; }
.thanks{ display:none; text-align:center; padding:10px 4px; }
.thanks.show{ display:block; animation:pop .35s ease; }
@keyframes pop{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.thanks .big{ font-family:"Playfair Display",serif; color:var(--maroon); font-size:1.6rem; margin-bottom:8px; }
html[lang="ar"] .thanks .big{ font-family:"Aref Ruqaa","Amiri",serif; }
.thanks .sub{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--ink); font-size:1.15rem; }
html[lang="ar"] .thanks .sub{ font-family:"Amiri",serif; font-style:normal; }

/* footer */
.foot{ text-align:center; padding:36px 20px 70px; color:var(--gold-dk); }
.foot .m{ font-family:"Cormorant Garamond",serif; font-style:italic; font-size:1.2rem; color:var(--rose); }
html[lang="ar"] .foot .m{ font-family:"Aref Ruqaa","Amiri",serif; font-style:normal; }
.foot .tiny{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; margin-top:8px; color:var(--ink-soft); }

/* visible keyboard focus (accessibility) */
.field input:focus-visible, .field textarea:focus-visible,
.attend button:focus-visible, .btn:focus-visible, .lang-toggle:focus-visible{
  outline:2px solid var(--maroon); outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .petal,.chev,.pin,.cover-card,.thanks.show{ animation:none !important; }
  .cover,.cover.open{ transition:none !important; }
}