/* ===== صفحة الدعوة — موبايل أولاً + كل الميزات ===== */
:root {
  --inv-gold: #c9a227;
  --inv-gold-soft: #e8c87a;
  --inv-ink: #1a1612;
  --inv-cream: #fdfaf2;
  --font-display: "Amiri", "Noto Naskh Arabic", serif;
  --font-script: "Aref Ruqaa", "Amiri", serif;
  --font-body: "Cairo", "Tajawal", sans-serif;
}

html, body {
  margin: 0; padding: 0; height: 100%; overflow-x: hidden;
  font-family: var(--font-body); background: #0a0806; color: var(--inv-cream);
  -webkit-tap-highlight-color: transparent;
}

.invite-app { min-height: 100dvh; min-height: 100vh; position: relative; }

.top-controls {
  position: fixed; top: max(12px, env(safe-area-inset-top));
  inset-inline-start: max(12px, env(safe-area-inset-left));
  z-index: 40; display: flex; gap: 8px;
}
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(232,200,122,.35); background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px); color: var(--inv-gold-soft);
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ===== Opening layers ===== */
.curtain-layer {
  position: fixed; inset: 0; z-index: 30; cursor: pointer; user-select: none;
}
.curtain-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 18%, transparent 82%, rgba(0,0,0,.25)),
    radial-gradient(ellipse at center, #4a3420, #120e0a);
  transition: opacity .9s ease, transform 1.35s cubic-bezier(.65,0,.35,1);
}
.curtain-left, .curtain-right {
  position: absolute; top: 0; bottom: 0; width: 52%;
  background: linear-gradient(180deg,#5a3d22,#2a1a0e 40%,#1a1008);
  box-shadow: inset 0 0 60px rgba(0,0,0,.4);
  transition: transform 1.4s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.curtain-left {
  left: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(0,0,0,.12) 18px, rgba(0,0,0,.12) 22px),
    linear-gradient(180deg,#5a3d22,#2a1a0e);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
}
.curtain-right {
  right: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(0,0,0,.12) 18px, rgba(0,0,0,.12) 22px),
    linear-gradient(180deg,#5a3d22,#2a1a0e);
  clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
}
.curtain-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 1.5rem; z-index: 2; pointer-events: none;
  transition: opacity .45s, transform .6s;
}
.curtain-names {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1.15;
  color: var(--inv-gold-soft); text-shadow: 0 6px 28px rgba(0,0,0,.65); font-weight: 700;
}
.curtain-names .amp { display: block; font-size: .55em; margin: .1em 0; opacity: .9; }
.curtain-hint {
  margin-top: 1.75rem; font-size: clamp(.85rem, 3.5vw, 1rem);
  color: rgba(232,200,122,.92); animation: pulseHint 2.2s ease-in-out infinite;
}
@keyframes pulseHint {
  0%,100% { opacity: .65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}
.curtain-layer.is-opening .curtain-left { transform: translateX(-105%); }
.curtain-layer.is-opening .curtain-right { transform: translateX(105%); }
.curtain-layer.is-opening .curtain-center { opacity: 0; transform: scale(.96); }
.curtain-layer.is-opening .curtain-bg { opacity: 0; transform: scale(1.04); }
.curtain-layer.is-gone { pointer-events: none; visibility: hidden; }

/* Envelope open (Thurayya) */
body.open-envelope .curtain-bg {
  background: radial-gradient(ellipse at center, #1a1510, #050505);
}
body.open-envelope .curtain-left,
body.open-envelope .curtain-right {
  width: 100%; left: 0; right: 0; clip-path: none;
  background:
    linear-gradient(180deg, transparent 42%, #0a0a0a 42%),
    repeating-linear-gradient(45deg, #111 0, #111 8px, #0d0d0d 8px, #0d0d0d 16px);
}
body.open-envelope .curtain-right { display: none; }
body.open-envelope .seal {
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8c87a, #8a6a1a);
  margin: 1rem auto 0; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  display: grid; place-items: center; font-family: var(--font-display); color: #1a1000; font-size: 1.4rem;
}
body.open-envelope .curtain-layer.is-opening .curtain-left {
  transform: translateY(-60%) rotateX(25deg); opacity: 0;
}

/* Scroll (Duha) */
body.open-scroll .curtain-left, body.open-scroll .curtain-right {
  width: 100%; left: 0; clip-path: none;
  background: linear-gradient(180deg, #ebe2d2, #f7f1e6);
}
body.open-scroll .curtain-right { display: none; }
body.open-scroll .curtain-names { color: #3d3429; text-shadow: none; }
body.open-scroll .curtain-hint { color: #8a7355; }
body.open-scroll .curtain-layer.is-opening .curtain-left { transform: translateY(-110%); }

/* Mashrabiya (Rawda) */
body.open-mashrabiya .curtain-left,
body.open-mashrabiya .curtain-right {
  background:
    radial-gradient(circle, transparent 35%, rgba(10,40,28,.85) 36%),
    repeating-linear-gradient(0deg, #0d2a20, #0d2a20 10px, #0a1f18 10px, #0a1f18 20px),
    repeating-linear-gradient(90deg, #0d2a20, #0d2a20 10px, #0a1f18 10px, #0a1f18 20px);
}
body.open-mashrabiya .curtain-bg { background: #06140f; }

/* Petal / Fade */
body.open-petal .curtain-left { clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); }
body.open-petal .curtain-right { clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
body.open-fade .curtain-left, body.open-fade .curtain-right { opacity: .95; }
body.open-fade .curtain-layer.is-opening .curtain-left,
body.open-fade .curtain-layer.is-opening .curtain-right {
  transform: none; opacity: 0;
}

/* ===== Stage content ===== */
.invite-stage {
  min-height: 100dvh; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding:
    max(1.25rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  gap: 1.25rem;
  opacity: 0; transform: scale(.96) translateY(12px);
  transition: opacity .7s ease .35s, transform .7s ease .35s;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(201,162,39,.12), transparent 65%),
    #12100e;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.invite-stage.is-visible { opacity: 1; transform: none; }

.invite-card {
  width: min(420px, 100%);
  background: var(--inv-cream); color: var(--inv-ink);
  border-radius: 22px;
  padding: clamp(1.6rem, 5vw, 2.2rem) clamp(1.2rem, 4vw, 1.8rem);
  text-align: center; position: relative;
  box-shadow: 0 0 0 1px rgba(201,162,39,.15), 0 30px 70px rgba(0,0,0,.45);
  overflow: hidden;
}
.invite-card::before, .invite-card::after {
  content: ""; position: absolute; width: 90px; height: 90px;
  background: radial-gradient(circle at 30% 30%, rgba(201,162,39,.35), transparent 55%);
  pointer-events: none; opacity: .55;
}
.invite-card::before { top: -10px; inset-inline-end: -10px; }
.invite-card::after { bottom: -10px; inset-inline-start: -10px; }

.card-title { margin: 0; font-size: .92rem; font-weight: 500; color: rgba(26,22,18,.55); }
.card-names {
  margin: .85rem 0 .7rem; font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.7rem); line-height: 1.2; font-weight: 700;
}
.card-names .amp { color: var(--inv-gold); margin: 0 .2em; font-weight: 400; }
.ornament { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .4rem auto 1rem; }
.ornament .line { flex: 1; max-width: 72px; height: 1px; background: linear-gradient(90deg,transparent,var(--inv-gold),transparent); }
.ornament .diamond { width: 8px; height: 8px; background: var(--inv-gold); transform: rotate(45deg); opacity: .85; }
.card-message { margin: 0 0 1.35rem; font-size: clamp(.92rem, 3.4vw, 1.02rem); line-height: 1.8; color: rgba(26,22,18,.82); }
.details { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
.detail { display: grid; gap: .2rem; }
.detail .label { font-size: .78rem; color: rgba(26,22,18,.45); }
.detail .value { font-size: clamp(1rem, 3.8vw, 1.12rem); font-weight: 700; }
.card-closing { margin: 0; font-family: var(--font-script); font-size: clamp(.95rem, 3.6vw, 1.12rem); line-height: 1.9; color: rgba(26,22,18,.78); }
.card-extra { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(201,162,39,.2); font-size: .9rem; color: rgba(26,22,18,.7); white-space: pre-wrap; }

/* Blocks below card */
.inv-block {
  width: min(420px, 100%);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(232,200,122,.2);
  border-radius: 18px; padding: 1.25rem; text-align: center; color: var(--inv-cream);
}
.inv-block h3 {
  margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--inv-gold-soft);
}
.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: .5rem; }
.countdown div {
  background: rgba(0,0,0,.28); border-radius: 12px; padding: .7rem .3rem;
}
.countdown strong { display: block; font-size: 1.35rem; font-family: var(--font-display); color: var(--inv-gold-soft); }
.countdown span { font-size: .72rem; opacity: .65; }

.rsvp-actions { display: grid; gap: .65rem; }
.rsvp-actions .btn-yes {
  background: linear-gradient(135deg,#3d9a5f,#2a6e42); color: #fff; border: 0;
  padding: .9rem; border-radius: 999px; font-weight: 700; cursor: pointer;
}
.rsvp-actions .btn-no {
  background: transparent; color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.2); padding: .85rem; border-radius: 999px; cursor: pointer;
}
.rsvp-form { display: none; grid-gap: .65rem; text-align: start; margin-top: .85rem; }
.rsvp-form.is-open { display: grid; }
.rsvp-form input, .rsvp-form textarea, .wish-form input, .wish-form textarea {
  width: 100%; padding: .75rem .85rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.3); color: #fff; outline: none;
}
.rsvp-form button, .wish-form button, .album-form button {
  background: linear-gradient(135deg,#d4af37,#a67c00); color: #1a1408;
  border: 0; padding: .8rem; border-radius: 999px; font-weight: 700; cursor: pointer;
}
.rsvp-note { margin-top: .75rem; font-size: .85rem; opacity: .7; }

.wish-form, .album-form { display: grid; gap: .65rem; text-align: start; }
.wishes-list { margin-top: 1rem; display: grid; gap: .65rem; text-align: start; }
.wish-item {
  background: rgba(0,0,0,.25); border-radius: 12px; padding: .75rem .85rem; font-size: .9rem;
}
.wish-item strong { color: var(--inv-gold-soft); display: block; margin-bottom: .25rem; }

.album-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-top: 1rem;
}
.album-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;
}

.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; padding: .9rem; border-radius: 999px;
  background: #25D366; color: #fff; font-weight: 700; border: 0; cursor: pointer;
}

/* Themes */
body.theme-thurayya { --inv-gold:#d4af37; --inv-gold-soft:#f0d78c; --inv-ink:#f5efe3; --inv-cream:#15100a; }
body.theme-thurayya .invite-stage { background: #050505; }
body.theme-thurayya .invite-card { border: 1px solid #d4af37; color: #f5efe3; }
body.theme-thurayya .card-title, body.theme-thurayya .detail .label { color: rgba(245,239,227,.5); }
body.theme-thurayya .card-message, body.theme-thurayya .card-closing { color: rgba(245,239,227,.85); }
body.theme-thurayya .detail .value, body.theme-thurayya .card-names { color: #f5efe3; }

body.theme-duha { --inv-gold:#b8956a; --inv-gold-soft:#d4b892; --inv-ink:#3d3429; --inv-cream:#fffcf5; }
body.theme-duha .invite-stage { background: #2a241c; }

body.theme-rawda { --inv-gold:#c9a227; --inv-gold-soft:#e0c76a; --inv-ink:#0a1f18; --inv-cream:#f7f3ea; }
body.theme-rawda .invite-stage { background: #06140f; }

body.theme-royal { --inv-gold:#d4af37; --inv-gold-soft:#f0d78c; --inv-ink:#0b1320; --inv-cream:#f5f0e6; }
body.theme-royal .invite-stage { background: #070d16; }

body.theme-floral { --inv-gold:#c97b84; --inv-gold-soft:#e8b4ba; --inv-ink:#2c1810; --inv-cream:#fff8f5; }
body.theme-floral .invite-stage { background: #1c1214; }

body.theme-imperial { --inv-gold:#c9a227; --inv-gold-soft:#e8c87a; --inv-ink:#1c1408; --inv-cream:#faf6eb; }
body.theme-imperial .invite-card { box-shadow: 0 0 0 3px #c9a227, 0 30px 70px rgba(0,0,0,.45); }

body.theme-minimal { --inv-gold:#222; --inv-gold-soft:#444; --inv-ink:#111; --inv-cream:#fff; }
body.theme-minimal .invite-stage { background: #f3f3f3; }
body.theme-minimal .inv-block { background: #fff; color: #111; border-color: #ddd; }
body.theme-minimal .inv-block h3 { color: #111; }
body.theme-minimal .curtain-names { color: #fff; }
body.theme-minimal .countdown div { background: #f0f0f0; }
body.theme-minimal .countdown strong { color: #111; }

body.theme-classic .curtain-bg {
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 18%, transparent 82%, rgba(0,0,0,.25)),
    url("../images/curtain-gold.jpg") center / cover no-repeat;
}
body.theme-classic .curtain-left,
body.theme-classic .curtain-right {
  background: url("../images/curtain-gold.jpg") center / cover no-repeat;
}

@media (min-width: 768px) {
  .invite-app { display: grid; place-items: center; background: #050403; min-height: 100vh; }
  .phone-shell {
    width: min(420px, 92vw); height: min(860px, 94vh);
    border-radius: 36px; border: 4px solid #2a241c; overflow: hidden;
    position: relative; box-shadow: 0 40px 100px rgba(0,0,0,.55); background: #0a0806;
  }
  .curtain-layer, .invite-stage, .top-controls { position: absolute; }
  .curtain-layer, .invite-stage { inset: 0; }
  .invite-stage { overflow-y: auto; }
}
@media (max-width: 767px) {
  .phone-shell { min-height: 100dvh; min-height: 100vh; width: 100%; }
}