/* ===== Design tokens (shared by guest + dashboard) ===== */
:root{
  --cream:#fff4ec;
  --cream-2:#ffe9df;
  --rose:#ffd9d0;
  --coral:#ff5a6e;
  --coral-deep:#e63e58;
  --gold:#ffb23e;
  --gold-deep:#f2871f;
  --ink:#4a1f3d;
  --ink-soft:#8a5a76;
  --card:#fffaf6;
  --line:#f3d9cf;
  --ok:#2fae74;
  --shadow:rgba(74,31,61,.18);
  --font-display:"Lalezar", "Tajawal", system-ui, sans-serif;
  --font-body:"Tajawal", "Segoe UI", system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  direction:rtl;
  font-family:var(--font-body);
  color:var(--ink);
  background:radial-gradient(120% 90% at 15% 0%, var(--cream) 0%, var(--cream-2) 45%, var(--rose) 100%);
  background-attachment:fixed;
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
}

/* floating hearts */
.hearts{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hearts span{position:absolute;bottom:-40px;opacity:.32;animation:rise linear infinite;will-change:transform}
@keyframes rise{ to{ transform:translateY(-115dvh) rotate(160deg); opacity:0 } }

.stage{position:relative;z-index:1;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}

/* ===== card ===== */
.card{
  width:100%;max-width:460px;background:var(--card);
  border:2px solid #fff;border-radius:30px;
  box-shadow:0 24px 60px -20px var(--shadow), 0 4px 0 var(--rose);
  padding:30px 24px 26px;text-align:center;
}

.view{display:none}
.view.active{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.eyebrow{
  display:inline-block;font-weight:700;font-size:.82rem;color:var(--coral-deep);
  background:var(--rose);padding:6px 14px;border-radius:999px;margin-bottom:12px;
}
h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.2rem,8.5vw,3.1rem);line-height:1.08;margin:.1em 0 .2em;
  color:var(--ink);text-wrap:balance;
}
h1 .accent{color:var(--coral)}
.sub{margin:0 auto 24px;max-width:34ch;font-size:1rem;color:var(--ink-soft);font-weight:500;line-height:1.65}

/* ===== intro photos ===== */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.gallery.one{grid-template-columns:1fr}
.photo{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:3/4;
  background:linear-gradient(135deg,var(--rose),var(--cream-2));
  box-shadow:0 8px 20px -12px var(--shadow);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .cap{
  position:absolute;inset-inline:0;bottom:0;padding:16px 12px 10px;
  background:linear-gradient(transparent, rgba(74,31,61,.75));
  color:#fff;font-size:.85rem;font-weight:600;text-align:right;
}
.photo.empty{display:flex;align-items:center;justify-content:center;color:var(--ink-soft);
  font-weight:600;font-size:.9rem;padding:14px;text-align:center;border:2px dashed var(--rose)}

/* ===== romantic photo album (carousel) ===== */
.album{margin-bottom:22px}
.album-empty{border:2px dashed var(--rose);border-radius:22px;padding:44px 14px;color:var(--ink-soft);
  font-weight:600;font-size:.92rem;text-align:center;line-height:1.6}
.carousel{position:relative}
.viewport{position:relative;height:min(56vh,460px);overflow:hidden;border-radius:24px;
  background:linear-gradient(160deg,var(--cream-2),var(--rose));
  box-shadow:inset 0 2px 16px rgba(74,31,61,.14), 0 12px 30px -18px var(--shadow)}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:14px;
  align-items:center;justify-content:center;opacity:0;transform:translateX(110%) scale(.9);
  transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .5s ease;will-change:transform,opacity}
.slide.active{opacity:1;transform:none}
.pic{position:relative;flex:1 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;margin:0}
.pic img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;background:#fff;
  box-shadow:0 12px 28px -12px var(--shadow)}
.pic figcaption{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  background:rgba(74,31,61,.74);color:#fff;font-size:.8rem;font-weight:600;padding:5px 14px;border-radius:999px;
  max-width:88%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border:none;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--coral-deep);font-size:1.7rem;font-weight:800;line-height:1;
  box-shadow:0 8px 20px -8px var(--shadow);display:flex;align-items:center;justify-content:center;
  transition:transform .12s, background .12s}
.nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.nav:active{transform:translateY(-50%) scale(.92)}
.nav.prev{right:8px}
.nav.next{left:8px}
.dots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.dot{width:8px;height:8px;border-radius:999px;border:none;cursor:pointer;background:var(--rose);padding:0;transition:.25s}
.dot.active{width:22px;background:var(--coral)}
.fly-heart{position:absolute;left:50%;top:58%;color:var(--coral);font-size:1.7rem;pointer-events:none;z-index:3;
  animation:flyup .9s ease forwards}
@keyframes flyup{0%{opacity:0;transform:translate(-50%,12px) scale(.6)}30%{opacity:.95}100%{opacity:0;transform:translate(-50%,-72px) scale(1.25)}}

/* ===== buttons ===== */
.buttons{display:flex;flex-direction:column;gap:14px}
.btn{
  font-family:inherit;border:none;cursor:pointer;border-radius:20px;padding:16px 18px;
  text-align:right;display:flex;align-items:center;gap:14px;color:#fff;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active{transform:translateY(2px) scale(.99)}
.btn .emoji{font-size:1.7rem;line-height:1;flex-shrink:0}
.btn .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.btn .big{font-weight:800;font-size:1.16rem}
.btn .small{font-weight:500;font-size:.82rem;opacity:.92}
.btn-1{background:linear-gradient(135deg,var(--coral),var(--coral-deep));box-shadow:0 10px 22px -10px var(--coral)}
.btn-2{background:linear-gradient(135deg,var(--gold),var(--gold-deep));box-shadow:0 10px 22px -10px var(--gold)}
.btn-1:hover,.btn-2:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn-3{background:linear-gradient(135deg,#9aa0ad,#6d7280);box-shadow:0 10px 22px -12px rgba(74,31,61,.5);width:100%;z-index:5}
.btn-3.loose{position:fixed;width:min(300px,80vw);margin:0;
  transition:top .18s cubic-bezier(.34,1.56,.64,1), left .18s cubic-bezier(.34,1.56,.64,1);}

.cta{
  font-family:inherit;border:none;cursor:pointer;width:100%;margin-top:4px;
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));color:#fff;
  font-weight:800;font-size:1.15rem;padding:15px;border-radius:18px;
  box-shadow:0 10px 22px -10px var(--coral);transition:transform .12s,filter .12s;
}
.cta:hover{filter:brightness(1.05);transform:translateY(-2px)}
.cta:active{transform:translateY(1px)}

/* ===== result / message boxes ===== */
.result{margin-top:22px;background:var(--cream-2);border:2px dashed var(--rose);border-radius:20px;padding:18px 16px;display:none;animation:pop .3s ease}
.result.show{display:block}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.result .label{font-size:.8rem;font-weight:700;color:var(--coral-deep);margin-bottom:6px}
.result .place{font-family:var(--font-display);font-size:1.55rem;color:var(--ink);line-height:1.25}
.result .again{margin-top:10px;font-size:.8rem;color:var(--ink-soft);font-weight:500}

.footer{margin-top:22px;font-size:.78rem;color:var(--ink-soft);font-weight:500}

/* ===== modal (type a place) ===== */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(74,31,61,.45);backdrop-filter:blur(3px)}
.modal.show{display:flex;animation:fade .25s ease}
.sheet{width:100%;max-width:420px;background:var(--card);border-radius:26px;padding:26px 22px;
  box-shadow:0 30px 70px -20px var(--shadow);text-align:center}
.sheet h2{font-family:var(--font-display);font-weight:400;font-size:1.8rem;margin:0 0 6px}
.sheet p{color:var(--ink-soft);font-size:.92rem;margin:0 0 16px;font-weight:500}
.sheet textarea{width:100%;min-height:96px;resize:vertical;border:2px solid var(--line);border-radius:16px;
  padding:14px;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;outline:none}
.sheet textarea:focus{border-color:var(--coral)}
.sheet-actions{display:flex;gap:10px;margin-top:16px}
.sheet-actions button{flex:1;font-family:inherit;font-weight:700;font-size:1rem;padding:13px;border-radius:15px;cursor:pointer;border:none}
.btn-save{background:linear-gradient(135deg,var(--coral),var(--coral-deep));color:#fff}
.btn-cancel{background:var(--cream-2);color:var(--ink-soft)}
.btn-save:disabled{opacity:.6;cursor:default}

/* ===== full-screen "3 يوني يا عيوني" celebration ===== */
.love{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;text-align:center;background:radial-gradient(120% 90% at 50% 20%, #fff 0%, var(--rose) 70%, var(--coral) 130%)}
.love.show{display:flex;animation:fade .35s ease}
.love .big-emoji{font-size:4.5rem;animation:beat 1s ease infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.love h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,11vw,3.6rem);color:var(--coral-deep);margin:.15em 0}
.love p{color:var(--ink-soft);font-weight:600;max-width:28ch;margin:0 0 22px;font-size:1.05rem}
.love button{font-family:inherit;font-weight:800;font-size:1.05rem;color:#fff;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--coral),var(--coral-deep));padding:13px 30px;border-radius:16px;box-shadow:0 12px 26px -12px var(--coral)}

.toast{position:fixed;bottom:22px;inset-inline:0;display:flex;justify-content:center;z-index:80;pointer-events:none}
.toast span{background:var(--ink);color:#fff;font-weight:600;font-size:.9rem;padding:11px 18px;border-radius:999px;
  opacity:0;transform:translateY(12px);transition:.25s}
.toast.show span{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hearts span{display:none}
  *{animation-duration:.001s!important}
}