/* The invitation itself: five themes over one layout. */
.dw {
  --bg: #fbf6ec; --paper: #fffdf8; --ink: #3b2f1e; --muted: #7a6a52; --accent: #b08d57; --accent-ink: #fff;
  --line: rgba(176, 141, 87, .35);
  font-family: "Readex Pro", "Noto Naskh Arabic", system-ui, sans-serif;
  color: var(--ink); direction: rtl; text-align: center;
  background: var(--bg) radial-gradient(circle at 20% 0%, rgba(255,255,255,.7), transparent 50%);
  padding: 24px 14px 32px; min-height: 100%;
}
.dw-rose { --bg: #fdf0f2; --paper: #fffafb; --ink: #4a2c34; --muted: #8b6670; --accent: #c0707f; --line: rgba(192,112,127,.35); }
.dw-emerald { --bg: #0d2b25; --paper: #12362f; --ink: #f3eee0; --muted: #c4c9b8; --accent: #d4b46a; --accent-ink: #13231f; --line: rgba(212,180,106,.4); }
.dw-navy { --bg: #0c1730; --paper: #13213f; --ink: #eef1f8; --muted: #b5bdd2; --accent: #c9a96e; --accent-ink: #101a30; --line: rgba(201,169,110,.4); }
.dw-sky { --bg: #eef3fa; --paper: #ffffff; --ink: #1d2b44; --muted: #5d6b84; --accent: #3d6fd8; --line: rgba(61,111,216,.3); }

.dw-card { position: relative; max-width: 460px; margin: 0 auto; background: var(--paper); border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); overflow: hidden; }
.dw-frame { position: relative; margin: 12px; padding: 34px 22px 28px; border: 1px solid var(--line); border-radius: 16px; }
.dw-frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); border-radius: 12px; pointer-events: none; }
.dw-icon { color: var(--accent); width: 64px; margin: 0 auto 6px; }
.dw-icon svg, .dw-orn { display: block; width: 100%; }
.dw-orn { color: var(--accent); max-width: 220px; margin: 18px auto; opacity: .9; }
.dw-opening { font-family: "Amiri", serif; font-size: 1.15rem; margin: 4px 0; color: var(--muted); }
.dw-verse { font-family: "Amiri", serif; font-size: 1.05rem; line-height: 1.9; margin: 6px 0 0; color: var(--muted); }
.dw-host { font-size: .98rem; line-height: 1.8; color: var(--muted); margin: 0 0 6px; }
.dw-names { font-family: "Aref Ruqaa", "Amiri", serif; font-weight: 700; color: var(--accent); font-size: clamp(2.1rem, 9vw, 2.9rem);
  line-height: 1.35; margin: 6px 0 10px; display: flex; flex-direction: column; align-items: center; }
.dw-amp { font-size: .55em; color: var(--muted); margin: -2px 0; }
.dw-sub { font-size: .5em; color: var(--muted); font-family: "Readex Pro", sans-serif; font-weight: 400; }
.dw-message { line-height: 2; font-size: 1rem; margin: 8px 0 0; }
.dw-date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 4px; }
.dw-date-col { border-block: 1px solid var(--line); padding: 8px 0; font-size: .95rem; }
.dw-date-mid b { display: block; font-size: 2.6rem; line-height: 1; color: var(--accent); font-weight: 600; }
.dw-date-mid span { font-size: .9rem; color: var(--muted); }
.dw-hijri { color: var(--muted); font-size: .88rem; margin: 10px 0 0; }
.dw-venue { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.dw-venue b { font-size: 1.1rem; }
.dw-venue span { color: var(--muted); font-size: .92rem; }
.dw-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.dw-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-size: .95rem; text-decoration: none; }
.dw-btn:disabled { opacity: .6; cursor: default; }
.dw-btn-ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dw-count { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.dw-count div { min-width: 58px; padding: 8px 4px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dw-count b { display: block; font-size: 1.4rem; color: var(--accent); }
.dw-count span { font-size: .75rem; color: var(--muted); }
.dw-note { margin-top: 18px; font-size: .9rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; }
.dw-rsvp { margin-top: 26px; text-align: start; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.dw-rsvp h2 { text-align: center; margin: 0; font-size: 1.2rem; color: var(--accent); }
.dw-rsvp label { display: grid; gap: 6px; font-size: .92rem; }
.dw-rsvp input:not([type=radio]), .dw-rsvp select, .dw-rsvp textarea { font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--ink); }
.dw-rsvp select option { color: #222; }
.dw-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw-choice label { display: flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; font-size: .88rem; }
.dw-rsvp .dw-btn { justify-content: center; }
.dw-small { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.dw-small a { color: var(--accent); }
.dw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dw-made { text-align: center; font-size: .78rem; color: var(--muted); margin: 16px 0 0; }
.dw-made a { color: inherit; }
.dw-draft { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.dw-draft span { transform: rotate(-30deg); font-size: 1.6rem; font-weight: 700; white-space: nowrap; color: rgba(200, 40, 40, .2);
  border: 3px solid rgba(200, 40, 40, .2); padding: 6px 18px; border-radius: 10px; }

/* envelope intro (public page only) */
.dw-env { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg, #fbf6ec); transition: opacity .7s ease .9s, visibility 0s 1.6s; }
.dw-env.is-open { opacity: 0; visibility: hidden; }
.dw-env-box { position: relative; width: min(82vw, 340px); aspect-ratio: 1.45; perspective: 900px; cursor: pointer; border: 0; background: none; padding: 0; }
.dw-env-back, .dw-env-front, .dw-env-flap { position: absolute; inset: 0; border-radius: 10px; }
.dw-env-back { background: var(--env, #d9c29a); box-shadow: 0 20px 40px rgba(0,0,0,.18); }
.dw-env-front { background: linear-gradient(to top right, var(--env2, #e7d4b0) 50%, transparent 50%) left / 50.5% 100% no-repeat,
  linear-gradient(to top left, var(--env2, #e7d4b0) 50%, transparent 50%) right / 50.5% 100% no-repeat; z-index: 3; }
.dw-env-flap { z-index: 4; transform-origin: top; clip-path: polygon(0 0, 100% 0, 50% 58%); background: var(--env3, #cfb586); transition: transform .8s ease; }
.dw-env.is-open .dw-env-flap { transform: rotateX(180deg); z-index: 1; }
.dw-env-seal { position: absolute; z-index: 5; left: 50%; top: 52%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d0544f, #8e2420); color: #f6d9c4; display: grid; place-items: center;
  font-family: "Aref Ruqaa", serif; font-size: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,.25); transition: transform .4s, opacity .4s; }
.dw-env.is-open .dw-env-seal { transform: scale(.4); opacity: 0; }
.dw-env-hint { position: absolute; bottom: -54px; left: 0; right: 0; text-align: center; font-family: "Readex Pro", sans-serif; color: #7a6a52;
  animation: dw-pulse 1.6s ease-in-out infinite; }
@keyframes dw-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .dw-env, .dw-env-flap, .dw-env-seal { transition: none; } .dw-env-hint { animation: none; } }