/* =========================================================
   WEDDING.ME — SPRINT 4 PRODUCT POLISH & REALITY PASS
   Handcrafted Commercial Design System, 8px Grid & Accessibility
   ========================================================= */

:root {
  /* 8px Spacing Grid System */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  /* Color System */
  --color-bg-ivory: #FAF8F3;
  --color-bg-white: #FFFFFF;
  --color-bg-cream: #F4EFE6;
  
  --color-surface: #FFFFFF;
  --color-surface-2: #FAF8F3;
  
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-accent: rgba(201, 169, 110, 0.32);
  
  --color-text: #1D1D1F;
  --color-text-muted: #515154;
  --color-text-subtle: #86868B;
  
  --color-accent: #C9A96E;
  --color-accent-hover: #B89552;
  --color-accent-dark: #8A6D3B;
  
  --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #C9A96E 50%, #B89552 100%);
  --gradient-gold-text: linear-gradient(135deg, #B89552 0%, #C9A96E 50%, #8A6D3B 100%);
  --shadow-gold-glow: 0 10px 30px rgba(201, 169, 110, 0.28);
  
  /* Strict Typographic Scale */
  --font-display: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-sans-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-arabic-display: 'Amiri', 'Aref Ruqaa', serif;
  --font-arabic-body: 'Noto Naskh Arabic', 'Amiri', sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* BASE RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
  font-size: 16px;
}

body {
  background-color: var(--color-bg-ivory);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Accessible Focus Rings */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* RTL Global Typography & Alignment */
[dir="rtl"] body, [dir="rtl"] .studio-shell-workspace, [dir="rtl"] .wizard-fullscreen-overlay {
  font-family: var(--font-arabic-body), var(--font-body);
}

[dir="rtl"] .t-display, [dir="rtl"] .inv-couple-names, [dir="rtl"] .wiz-step-title {
  font-family: var(--font-arabic-display), var(--font-display);
}

::selection {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

code {
  font-family: 'SF Mono', Consolas, monospace;
  background: rgba(201, 169, 110, 0.12);
  color: var(--color-accent-dark);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.9em;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.text-gold-gradient {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.t-display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.t-heading {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.t-body {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-weight: 400;
  line-height: 1.65;
}

.t-caption {
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  line-height: 1.4;
}

.text-center { text-align: center; }

/* TACTILE ACCESSIBLE BUTTONS (Min Tap Target: 44px) */
button, .btn {
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-decoration: none;
  outline: none;
  border: none;
  white-space: nowrap;
  min-height: 44px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

button:active, .btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--gradient-gold);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-gold-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(201, 169, 110, 0.45);
  filter: brightness(1.04);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.btn-secondary:hover {
  background: #FFFFFF;
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 10px 20px;
  border-radius: var(--radius-full);
}

.btn-ghost:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

.btn-large { padding: 14px 34px; font-size: 1.05rem; min-height: 52px; }
.btn-full { width: 100%; }

/* LANDING NAVIGATION BAR */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 72px;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-5); z-index: 500;
}

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--gradient-gold);
  color: #FFFFFF; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(201, 169, 110, 0.35);
}

.nav-logo-text { font-family: var(--font-sans-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em; color: var(--color-text); }
.nav-menu { display: flex; align-items: center; gap: var(--space-4); }
.nav-link { color: var(--color-text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color var(--transition); }
.nav-link:hover { color: var(--color-accent-dark); }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

/* LANDING HERO SECTION */
.hero {
  position: relative; padding-top: 130px; padding-bottom: 70px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-bg-ivory);
}

.hero-ambient-glow {
  position: absolute; top: 10%; right: 15%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.18) 0%, transparent 65%); pointer-events: none;
}

.hero-container {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--space-3); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: center; width: 100%; position: relative; z-index: 10;
}

.hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-1); background: rgba(201, 169, 110, 0.12); border: 1px solid rgba(201, 169, 110, 0.3); padding: 6px 16px; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-accent-dark); margin-bottom: var(--space-2);
}

.hero-title { font-family: var(--font-display); font-size: clamp(3rem, 5.2vw, 4.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: var(--space-2); color: var(--color-text); }
.hero-subtitle { font-size: 1.15rem; color: var(--color-text-muted); max-width: 480px; line-height: 1.6; margin-bottom: var(--space-4); }
.hero-cta { display: flex; align-items: center; gap: var(--space-2); }

.hero-visual { position: relative; display: flex; justify-content: center; }
.phone-wrapper { position: relative; width: 290px; }
.phone-frame {
  width: 290px; height: 580px; background: #1A1A1E; border: 8px solid #282830; border-radius: 44px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15), 0 0 40px rgba(201, 169, 110, 0.2); position: relative; overflow: hidden; transform: perspective(1000px) rotateY(-5deg) rotateX(3deg); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-wrapper:hover .phone-frame { transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-4px); }
.phone-notch { width: 100px; height: 22px; background: #282830; border-radius: 0 0 14px 14px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; }
.phone-screen { width: 100%; height: 100%; overflow-y: auto; background: linear-gradient(135deg, #8A5A2A, #B97D3E); }
.mock-invitation { padding: 36px 16px 20px; text-align: center; color: #FFF; }
.mock-tag { font-size: 0.65rem; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; }
.mock-names { font-family: var(--font-display); font-size: 1.7rem; margin: 6px 0; color: #FFF; }
.mock-date { font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); margin-bottom: 16px; }
.mock-card { background: rgba(255, 255, 255, 0.96); color: #2C1E12; border-radius: 14px; padding: 20px 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.2); }
.mock-bism { font-family: 'Amiri', serif; font-size: 0.9rem; color: #8A5A2A; }
.mock-couple { font-family: 'Aref Ruqaa', serif; font-size: 1.3rem; color: #8A5A2A; font-weight: 700; margin: 10px 0; }
.mock-venue { font-size: 0.7rem; color: #666; margin-bottom: 12px; }
.mock-btn { background: #8A5A2A; color: #FFF; font-size: 0.72rem; padding: 6px 16px; border-radius: 20px; display: inline-block; font-weight: 600; }

.press-bar { padding: var(--space-4) 0; background: var(--color-bg-white); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.press-label { font-size: 0.72rem; letter-spacing: 0.22em; color: var(--color-text-subtle); margin-bottom: var(--space-2); font-weight: 600; }
.press-logos { display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; }
.press-logo { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.15em; color: rgba(29, 29, 31, 0.4); transition: color var(--transition); }
.press-logo:hover { color: var(--color-accent-dark); }

.section { padding: var(--space-10) 0; position: relative; }
.section-header { max-width: 640px; margin: 0 auto var(--space-6); }
.section-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; color: var(--color-accent-dark); margin-bottom: var(--space-1); text-transform: uppercase; }
.section-title { color: var(--color-text); }
.section-subtitle { font-size: 1.05rem; color: var(--color-text-muted); margin-top: var(--space-1); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

.why-section { background-color: var(--color-bg-cream); }
.bento-card { background: var(--color-surface); border: 1px solid rgba(184, 149, 82, 0.18); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); transition: all var(--transition); }
.bento-card:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: 0 20px 40px rgba(201, 169, 110, 0.15); }
.bento-icon { width: 52px; height: 52px; border-radius: 16px; background: rgba(201, 169, 110, 0.12); color: var(--color-accent-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-2); }
.bento-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin-bottom: 10px; color: var(--color-text); }
.bento-desc { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.6; }

.builder-preview-section { background-color: var(--color-bg-white); }
.live-sandbox { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; background: var(--color-bg-ivory); border: 1px solid var(--color-border-accent); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03); }
.sandbox-controls { display: flex; flex-direction: column; gap: var(--space-2); }
.sandbox-theme-pills { display: flex; gap: var(--space-1); margin-top: 4px; }
.sandbox-theme-pills .pill { padding: 8px 18px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; background: #FFFFFF; border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition); }
.sandbox-theme-pills .pill.active, .sandbox-theme-pills .pill:hover { background: var(--gradient-gold); color: #FFFFFF; border-color: transparent; }
.sandbox-screen-wrapper { display: flex; justify-content: center; }
.sandbox-frame { transform: scale(0.92); }

.themes-showcase-section { background-color: var(--color-bg-ivory); }
.themes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.theme-card { background: #FFFFFF; border: 1px solid rgba(184, 149, 82, 0.18); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); transition: transform var(--transition), border-color var(--transition); }
.theme-card:hover { transform: translateY(-4px); border-color: var(--color-accent); }
.theme-card-preview { height: 200px; padding: var(--space-2); display: flex; align-items: center; justify-content: center; }
.theme-card-gold .theme-card-preview { background: linear-gradient(135deg, #8A5A2A, #B97D3E); }
.theme-card-noir .theme-card-preview { background: radial-gradient(circle at top, #1A1A20 0%, #0C0C0E 100%); }
.theme-card-blush .theme-card-preview { background: radial-gradient(circle at top, #2C1820 0%, #150B10 100%); }
.theme-card-sage .theme-card-preview { background: radial-gradient(circle at top, #14241B 0%, #0A120E 100%); }
.theme-card-minimal .theme-card-preview { background: #FAFAF8; }
.theme-card-navy .theme-card-preview { background: radial-gradient(circle at top, #0F1D30 0%, #070E18 100%); }
.theme-preview-inner { width: 100%; height: 100%; border-radius: 12px; padding: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.2); color: #FFF; }
.preview-badge { font-size: 0.65rem; letter-spacing: 0.2em; opacity: 0.85; margin-bottom: 4px; }
.preview-names { font-family: var(--font-display); font-size: 1.3rem; }
.theme-card-minimal .theme-preview-inner { color: #1D1D1F; border-color: rgba(0,0,0,0.1); }
.theme-card-info { padding: var(--space-3); }
.theme-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); }

.steps-section { background-color: var(--color-bg-white); }
.step-card { background: var(--color-bg-ivory); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); }
.step-num { font-family: var(--font-sans-display); font-size: 2.5rem; font-weight: 800; color: var(--color-accent-dark); margin-bottom: var(--space-1); }
.step-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 10px; color: var(--color-text); }

.pricing-section { background-color: var(--color-bg-cream); }
.pricing-grid-short { max-width: 520px; margin: 0 auto; }
.pricing-card { background: #FFFFFF; border: 2px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); position: relative; box-shadow: 0 20px 50px rgba(201, 169, 110, 0.2); }
.popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--gradient-gold); color: #FFFFFF; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; padding: 4px 16px; border-radius: var(--radius-full); }
.plan-name { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); }
.plan-price { margin-bottom: var(--space-3); }
.plan-price .currency { font-size: 1.5rem; font-weight: 700; color: var(--color-accent-dark); vertical-align: top; }
.plan-price .amount { font-size: 3.8rem; font-weight: 800; color: var(--color-text); line-height: 1; }
.plan-price .period { font-size: 0.88rem; color: var(--color-text-subtle); }
.pricing-features-short { list-style: none; margin-bottom: var(--space-4); text-align: left; }
.pricing-features-short li { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 12px; }

.faq-section { background-color: var(--color-bg-white); }
.faq-accordion { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--color-bg-ivory); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; overflow: hidden; transition: border-color var(--transition); }
.faq-item.active { border-color: var(--color-border-accent); }
.faq-question { width: 100%; background: transparent; border: none; padding: 22px var(--space-3); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--color-text); text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-icon { font-size: 1.3rem; color: var(--color-accent-dark); transition: transform var(--transition); }
.faq-item.active .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 var(--space-3); }
.faq-item.active .faq-answer { max-height: 180px; padding: 0 var(--space-3) 20px; }
.faq-answer p { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.6; }

.cta-section { padding-bottom: 100px; background-color: var(--color-bg-white); }
.cta-card { position: relative; background: linear-gradient(135deg, #FAF4E8 0%, #F4EBE0 100%); border: 1px solid var(--color-border-accent); border-radius: 28px; padding: 64px 32px; overflow: hidden; box-shadow: 0 20px 60px rgba(201, 169, 110, 0.15); }
.cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 250px; background: radial-gradient(circle, rgba(201, 169, 110, 0.25) 0%, transparent 70%); pointer-events: none; }
.cta-content { position: relative; z-index: 10; max-width: 600px; margin: 0 auto; }
.cta-title { font-size: clamp(2rem, 3.5vw, 3rem); color: var(--color-text); margin-bottom: var(--space-3); }
.cta-buttons { display: flex; justify-content: center; }

.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; background: #141416; color: #FFF; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: #86868B; }
.system-status { display: inline-flex; align-items: center; gap: 6px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.25); padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.78rem; color: #4ADE80; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; }

/* =========================================================
   SPRINT 3 & 4: GUIDED CREATION WIZARD & POLISHED OVERLAY
   ========================================================= */

.wizard-fullscreen-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-bg-ivory);
  z-index: 4000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.wizard-fullscreen-overlay.active {
  display: flex;
}

.wizard-header {
  height: 56px;
  margin: var(--space-2) var(--space-3) 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: var(--radius-full);
  padding: 0 var(--space-3);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 4200;
}

.wizard-progress-pill {
  display: flex; align-items: center; gap: var(--space-1); font-size: 0.82rem; font-weight: 700; color: var(--color-accent-dark);
}

.wiz-progress-bar {
  width: 140px; height: 6px; background: rgba(201, 169, 110, 0.18); border-radius: 3px; overflow: hidden;
}

.wiz-progress-fill {
  height: 100%; background: var(--gradient-gold); transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-stage {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-3) var(--space-5); overflow-y: auto;
}

.wizard-split-layout {
  display: grid; grid-template-columns: 0.46fr 0.54fr; gap: var(--space-6); width: 100%; max-width: 1140px; align-items: center;
}

.wizard-card-column { display: flex; justify-content: center; }

.wizard-step-card {
  width: 100%; max-width: 480px; background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(201, 169, 110, 0.32); border-radius: 28px; padding: var(--space-5) var(--space-4);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06); animation: wizardCardFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wizardCardFade {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.wiz-step-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; color: var(--color-accent-dark); text-transform: uppercase; margin-bottom: 6px;
}

.wiz-step-title {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--color-text); line-height: 1.2; margin-bottom: 8px;
}

.wiz-step-sub {
  font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-3);
}

.wiz-form-group { margin-bottom: var(--space-2); }
.wiz-label { font-size: 0.78rem; font-weight: 700; color: var(--color-text-subtle); display: block; margin-bottom: 6px; }

.wiz-input {
  width: 100%; background: var(--color-bg-ivory); border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md); padding: 12px 16px; font-size: 1rem; color: var(--color-text);
  outline: none; transition: all var(--transition); min-height: 48px;
}

.wiz-input:focus { border-color: var(--color-accent); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15); }

/* ─── Luxury Date & Time Controls ──────────────────────────────── */
.wiz-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.wiz-input-icon-box {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent-dark);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.2s ease, color 0.2s ease;
}

[dir="ltr"] .wiz-input-icon-box {
  right: auto;
  left: 12px;
}

.wiz-input-with-icon {
  padding-right: 46px !important;
}

[dir="ltr"] .wiz-input-with-icon {
  padding-right: 16px !important;
  padding-left: 46px !important;
}

.wiz-time-12-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: var(--color-bg-ivory);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.wiz-time-unit {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiz-time-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  text-transform: uppercase;
}

.wiz-select {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 10px;
  padding: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.wiz-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

.wiz-time-sep {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  padding-bottom: 8px;
}

.wiz-ampm-toggle {
  display: flex;
  background: rgba(0,0,0,0.05);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 2px;
}

.wiz-ampm-btn {
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
}

.wiz-ampm-btn.active {
  background: var(--color-accent);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.35);
}

/* Accordion Component for Step 4 Opening Verses */
.wiz-accordion-item {
  margin-bottom: var(--space-2);
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg-ivory);
  transition: all 0.3s ease;
}

.wiz-accordion-header {
  width: 100%;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-ivory);
  border: none;
  font-family: var(--font-arabic-body), var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.wiz-accordion-header:hover {
  background: rgba(201, 169, 110, 0.08);
  color: var(--color-accent-dark);
}

.wiz-accordion-header.active {
  background: rgba(201, 169, 110, 0.14);
  color: var(--color-accent-dark);
  border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}

.wiz-accordion-header .acc-chevron {
  font-size: 0.75rem;
  color: var(--color-accent-dark);
  transition: transform 0.3s ease;
}

.wiz-accordion-header.active .acc-chevron {
  transform: rotate(180deg);
}

.wiz-accordion-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}

.wiz-accordion-body.open {
  max-height: 600px;
  opacity: 1;
  padding: 16px;
}

.wiz-verse-card-select {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--color-text);
  text-align: right;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.wiz-verse-card-select:last-child {
  margin-bottom: 0;
}

.wiz-verse-card-select:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 169, 110, 0.15);
}

.wiz-verse-card-select.active {
  border: 2px solid var(--color-accent);
  background: rgba(201, 169, 110, 0.06);
  color: var(--color-accent-dark);
  font-weight: 600;
}

.wiz-textarea {
  width: 100%;
  min-height: 100px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text);
  outline: none;
  resize: vertical;
  transition: all 0.25s ease;
}

.wiz-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

/* Music Step 8 Styling */
.wiz-music-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-3);
}

.wiz-music-card {
  background: var(--color-bg-ivory);
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.wiz-music-card:hover {
  border-color: var(--color-accent);
  background: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201, 169, 110, 0.15);
}

.wiz-music-card.active {
  border: 2px solid var(--color-accent);
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.22);
}

.wiz-music-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wiz-music-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.12);
  color: var(--color-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.wiz-music-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.wiz-music-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(201, 169, 110, 0.15);
  color: var(--color-accent-dark);
}

/* Upload Card Dropzone */
.wiz-upload-card {
  border: 2px dashed var(--color-accent);
  border-radius: 18px;
  background: rgba(201, 169, 110, 0.04);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.wiz-upload-card:hover, .wiz-upload-card.drag-over {
  background: rgba(201, 169, 110, 0.12);
  border-color: var(--color-accent-dark);
}

.wiz-upload-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  box-shadow: 0 4px 14px rgba(201, 169, 110, 0.3);
}

.wiz-upload-text-main {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.wiz-upload-text-sub {
  font-size: 0.78rem;
  color: var(--color-text-subtle);
}

/* Custom Audio Preview Player Card */
.wiz-audio-player-card {
  background: #FFFFFF;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.wiz-audio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.wiz-audio-filename {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 75%;
}

.wiz-audio-remove-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wiz-audio-remove-btn:hover {
  background: #DC2626;
  color: #FFFFFF;
}

.wiz-audio-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wiz-audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.wiz-audio-play-btn:hover {
  background: var(--color-accent-dark);
  transform: scale(1.05);
}

.wiz-audio-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiz-audio-seek {
  width: 100%;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.wiz-audio-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-subtle);
  direction: ltr;
}

.wiz-actions-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); gap: var(--space-2); }

/* Legacy theme grid (kept for compatibility) */
.wiz-themes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.wiz-theme-card-pick {
  background: var(--color-bg-ivory); border: 2px solid rgba(0,0,0,0.08); border-radius: 16px;
  padding: 14px; text-align: center; cursor: pointer; transition: all var(--transition);
}
.wiz-theme-card-pick:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.wiz-theme-card-pick.active { border-color: var(--color-accent); background: #FFF; box-shadow: 0 4px 15px rgba(201, 169, 110, 0.22); }
.wiz-theme-swatch { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

/* ─── Step 9 Color Palette (Canva-style) ─────────────────────── */
.wiz-color-section {
  margin-bottom: var(--space-3);
}
.wiz-color-section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 10px;
}
.wiz-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.wiz-color-dot {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  border: 2.5px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wiz-color-dot:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.wiz-color-dot.active {
  border: 2.5px solid var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201,169,110,0.35), 0 4px 14px rgba(0,0,0,0.22);
  transform: scale(1.1);
}
.wiz-color-check {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
  line-height: 1;
}
.wiz-color-custom-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed var(--color-accent);
  background: rgba(201,169,110,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  overflow: hidden;
}
.wiz-color-custom-btn:hover {
  background: rgba(201,169,110,0.18);
  transform: scale(1.1);
}
.wiz-color-custom-btn span {
  font-size: 18px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1;
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.wiz-color-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,169,110,0.3), transparent);
  margin: 4px 0 16px;
}

/* ─── Step 7 Venue Location Picker ────────────────────────────── */
.wiz-venue-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--color-bg-ivory);
  border-radius: 14px;
  padding: 4px;
}
.wiz-venue-tab {
  flex: 1;
  padding: 9px 6px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.wiz-venue-tab.active {
  background: #fff;
  color: var(--color-accent-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.wiz-venue-tab:hover:not(.active) {
  color: var(--color-accent-dark);
  background: rgba(201,169,110,0.08);
}
.wiz-venue-panel { margin-bottom: 4px; }

.wiz-venue-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wiz-venue-search-row .wiz-input { flex: 1; }
.wiz-venue-search-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: none;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(201,169,110,0.4);
}
.wiz-venue-search-btn:hover { background: var(--color-accent-dark); transform: scale(1.05); }

.wiz-venue-results {
  margin-top: 8px;
  border-radius: 12px;
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.wiz-venue-result-item {
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  background: #fff;
}
.wiz-venue-result-item:last-child { border-bottom: none; }
.wiz-venue-result-item:hover { background: var(--color-bg-ivory); }
.wiz-venue-result-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text); }
.wiz-venue-result-addr { font-size: 0.76rem; color: var(--color-text-muted); margin-top: 2px; }

.wiz-venue-searching, .wiz-venue-noresult {
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: #fff;
  border-radius: 12px;
}

.wiz-venue-selected-card {
  margin-top: 10px;
  background: rgba(201,169,110,0.1);
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: 12px;
  padding: 10px 14px;
}
.wiz-venue-selected-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wiz-venue-selected-icon { font-size: 20px; }
.wiz-venue-selected-name { font-size: 0.88rem; font-weight: 700; color: var(--color-accent-dark); }
.wiz-venue-selected-addr { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }
.wiz-venue-clear-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 16px;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.wiz-venue-clear-btn:hover { background: rgba(239,68,68,0.1); border-color: #EF4444; color: #EF4444; }

.wiz-venue-status {
  font-size: 0.78rem;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  min-height: 0;
  line-height: 1.5;
  transition: all 0.2s;
}
.wiz-venue-status.ok { background: rgba(22,163,74,0.08); color: #15803D; }
.wiz-venue-status.warn { background: rgba(234,179,8,0.1); color: #A16207; }

.wiz-slug-box {
  background: rgba(201, 169, 110, 0.12); border: 1px dashed var(--color-accent);
  border-radius: var(--radius-md); padding: var(--space-2); text-align: center; margin-bottom: var(--space-2);
}

.wiz-slug-url { font-family: 'SF Mono', monospace; font-size: 1.1rem; font-weight: 700; color: var(--color-accent-dark); }

.wiz-expiration-badge {
  background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px; padding: 12px 16px; font-size: 0.82rem; color: #DC2626; line-height: 1.5; margin-bottom: var(--space-3);
}

.wizard-preview-column { display: flex; justify-content: center; }

.wizard-phone-frame {
  width: 360px; height: 640px; background: #1A1A1E; border: 10px solid #282830; border-radius: 46px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.14), 0 0 60px rgba(201, 169, 110, 0.18); position: relative; overflow: hidden;
}

/* FROZEN STUDIO WORKSPACE */
.studio-shell-workspace {
  position: fixed; inset: 0; width: 100vw; height: 100vh; background: var(--color-bg-ivory);
  z-index: 3000; display: none; flex-direction: column; overflow: hidden;
}

.studio-shell-workspace.active { display: flex; }

.studio-floating-topbar {
  height: 56px; margin: var(--space-2) var(--space-3) 0;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(201, 169, 110, 0.28); border-radius: var(--radius-full);
  padding: 0 var(--space-3); box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
  display: flex; align-items: center; justify-content: space-between; z-index: 3200;
}

.topbar-brand { display: flex; align-items: center; gap: var(--space-2); }

.studio-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.studio-logo .logo-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--gradient-gold);
  color: #FFF; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(201, 169, 110, 0.35);
}

.studio-logo .logo-title { font-family: var(--font-sans-display); font-size: 1.15rem; font-weight: 800; color: var(--color-text); }

.studio-autosave-badge {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25); padding: 4px 12px; border-radius: var(--radius-full); font-size: 0.75rem; color: #16A34A; font-weight: 600;
}

.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 8px #16A34A; }

.history-group { display: flex; gap: 4px; border-inline-start: 1px solid rgba(0,0,0,0.08); padding-inline-start: 12px; }

.tool-icon-btn {
  background: transparent; border: none; color: var(--color-text-muted);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center; min-height: 32px;
}

.tool-icon-btn:hover { background: rgba(0,0,0,0.04); color: var(--color-text); }

.topbar-center-tools { display: flex; align-items: center; gap: 14px; }

.segmented-lang-pill { display: flex; background: var(--color-bg-ivory); padding: 3px; border-radius: var(--radius-full); border: 1px solid rgba(201, 169, 110, 0.25); }

.lang-tab {
  background: transparent; border: none; padding: 4px 14px; border-radius: var(--radius-full);
  font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition); min-height: 32px;
}

.lang-tab.active { background: var(--gradient-gold); color: #FFFFFF; box-shadow: 0 2px 8px rgba(201, 169, 110, 0.35); }

.segmented-vp-pill { display: flex; background: var(--color-bg-ivory); padding: 3px; border-radius: var(--radius-full); border: 1px solid rgba(0,0,0,0.08); }

.vp-tab {
  background: transparent; border: none; padding: 5px 14px; border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all var(--transition); min-height: 32px;
}

.vp-tab.active { background: #FFFFFF; color: var(--color-text); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

.zoom-pill { display: flex; align-items: center; gap: 6px; background: var(--color-bg-ivory); padding: 3px 12px; border-radius: var(--radius-full); border: 1px solid rgba(0,0,0,0.08); }

.zoom-btn { background: transparent; border: none; font-weight: 700; font-size: 0.95rem; color: var(--color-text); cursor: pointer; min-height: 30px; }
.zoom-readout { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); }

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.btn-ghost-studio {
  background: transparent; border: 1px solid rgba(0,0,0,0.08); color: var(--color-text);
  padding: 8px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; transition: all var(--transition); min-height: 36px;
}

.btn-ghost-studio:hover { background: #FFFFFF; border-color: var(--color-accent); }
.btn-publish-studio { padding: 8px 20px; font-size: 0.85rem; min-height: 36px; }

.btn-exit-studio {
  background: rgba(0,0,0,0.04); border: none; font-size: 1.1rem; color: var(--color-text-muted);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; min-height: 36px;
}

.btn-exit-studio:hover { background: rgba(239, 68, 68, 0.1); color: #EF4444; }

.studio-canvas-stage {
  flex: 1; background: #FAF8F3; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.dot-grid-canvas {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(201, 169, 110, 0.16) 1.2px, transparent 1.2px);
  background-size: 24px 24px; pointer-events: none;
}

.studio-canvas-content {
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 10;
  width: 100%; height: 100%; padding: 30px 40px;
}

.studio-device-wrapper.vp-canvas { width: 540px; position: relative; display: flex; justify-content: center; align-items: center; }
.studio-device-wrapper.vp-mobile { width: 396px; }
.studio-device-wrapper.vp-tablet { width: 620px; }
.studio-device-wrapper.vp-desktop { width: 840px; }

.studio-device-ambient-glow {
  position: absolute; width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.2) 0%, rgba(250, 248, 243, 0) 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 1;
}

.clean-studio-canvas-card {
  max-width: 540px; width: 100%; max-height: 78vh; overflow-y: auto; background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(201, 169, 110, 0.3); border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.1), 0 0 60px rgba(201, 169, 110, 0.16);
  position: relative; z-index: 2; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-device-wrapper.vp-mobile .clean-studio-canvas-card {
  width: 396px; height: 690px; background: #1A1A1E; border: 10px solid #282830; border-radius: 48px;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.16), 0 0 60px rgba(201, 169, 110, 0.2);
}

.studio-device-wrapper.vp-tablet .clean-studio-canvas-card { width: 600px; border-radius: 28px; }
.studio-device-wrapper.vp-desktop .clean-studio-canvas-card { width: 840px; border-radius: 20px; }

.phone-invitation-container { width: 100%; height: 100%; overflow-y: auto; padding: 36px 24px; font-family: var(--font-body); }

.interactive-target {
  cursor: pointer; border-radius: 12px; padding: 8px; margin: 4px 0;
  transition: all 0.25s ease; border: 1.5px dashed transparent;
}

.interactive-target:hover { border-color: rgba(201, 169, 110, 0.5); background: rgba(201, 169, 110, 0.05); }
.interactive-target.active-selected { border-color: var(--color-accent); background: rgba(201, 169, 110, 0.1); box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.2); }

.inv-live-content { max-width: 100%; }
.inv-header-block { margin-bottom: 20px; color: var(--color-text); }
.inv-names-title { font-size: 1.85rem; color: var(--color-accent-dark); margin: 6px 0; }
.inv-date-sub { font-size: 0.75rem; letter-spacing: 0.15em; color: var(--color-text-muted); }

.inv-card-surface {
  background: rgba(255, 255, 255, 0.96); color: #2C1E12; border-radius: 16px;
  padding: 24px 16px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); text-align: center;
}

.inv-verse { font-family: 'Amiri', serif; font-size: 0.85rem; color: #5A4A38; line-height: 1.8; margin-bottom: 16px; }
.inv-hosts-names { font-family: var(--font-display); font-size: 0.92rem; color: #8A5A2A; font-weight: 600; margin-bottom: 12px; }
.inv-couple-names { font-size: 1.55rem; color: #8A5A2A; font-weight: 700; margin: 12px 0; }
.inv-date-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9rem; color: #5A4A38; margin: 12px 0; }
.inv-day-num { font-size: 1.85rem; font-weight: 700; color: #8A5A2A; }
.inv-bar { color: #D8AF74; }

.inv-venue-title { font-family: var(--font-display); font-size: 1.1rem; color: #8A5A2A; margin-top: 12px; }
.inv-venue-sub { font-size: 0.75rem; color: #666; margin-bottom: 14px; }

.inv-audio-widget { margin: 14px 0; }
.audio-pill {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(138, 90, 42, 0.1);
  border: 1px solid rgba(138, 90, 42, 0.25); padding: 6px 14px; border-radius: 20px; font-size: 0.75rem; color: #8A5A2A; font-weight: 600;
}

.contextual-popover-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2500; }

.studio-contextual-popover {
  position: absolute; width: 310px; background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(201, 169, 110, 0.35); border-radius: 22px; padding: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); pointer-events: auto;
  animation: popoverSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2600;
}

@keyframes popoverSlideIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.popover-header { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.popover-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; color: var(--color-accent-dark); }
.popover-title { font-size: 1.2rem; font-weight: 600; color: var(--color-text); margin-top: 2px; }
.popover-close { background: transparent; border: none; font-size: 1.1rem; color: var(--color-text-muted); cursor: pointer; min-height: 32px; }

.popover-input-group { margin-bottom: 12px; }
.popover-label { font-size: 0.7rem; font-weight: 600; color: var(--color-text-subtle); display: block; margin-bottom: 4px; }
.popover-input {
  width: 100%; background: var(--color-bg-ivory); border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: 0.9rem; color: var(--color-text);
  outline: none; transition: border-color var(--transition); min-height: 42px;
}

.popover-input:focus { border-color: var(--color-accent); background: #FFF; }

.studio-floating-dock {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-full);
  padding: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex; gap: 4px; z-index: 3200; max-width: 92vw; overflow-x: auto;
}

.dock-tab {
  background: transparent; border: none; padding: 8px 14px; border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px;
  cursor: pointer; transition: all var(--transition); white-space: nowrap; min-height: 38px;
}

.dock-tab:hover { color: var(--color-text); background: rgba(0,0,0,0.03); }
.dock-tab.active { background: #FFFFFF; color: var(--color-text); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); }

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 992px) {
  .wizard-split-layout { grid-template-columns: 1fr; gap: 24px; }
  .wizard-preview-column { display: none; }
  .wizard-step-card { max-width: 100%; }
  .studio-floating-topbar { margin: 8px 12px 0; padding: 0 16px; }
  .segmented-vp-pill { display: none; }
  .studio-contextual-popover { width: 280px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.5rem; }
  .wiz-step-title { font-size: 1.75rem; }
  .wizard-header { margin: 8px 12px 0; padding: 0 12px; }
  .wizard-stage { padding: 16px; }
}

/* Progressive Reveal Animation Classes */
.wiz-reveal-block {
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.wiz-reveal-block.hidden-reveal {
  opacity: 0 !important;
  transform: translateY(16px) !important;
  display: none !important;
}

.wiz-reveal-block.revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
  display: block !important;
}

/* Card Selection Pill for Step 4 Verse Option Cards */
.wiz-option-card-pick {
  background: var(--color-bg-ivory);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wiz-option-card-pick:hover {
  border-color: var(--color-accent);
  background: #FFFFFF;
  transform: translateY(-2px);
}

.wiz-option-card-pick.active {
  border-color: var(--color-accent);
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(201, 169, 110, 0.22);
}

.verse-item-card {
  background: var(--color-bg-ivory);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: 'Amiri', serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  transition: all var(--transition);
}

.verse-item-card:hover {
  border-color: var(--color-accent);
  background: #FFFFFF;
}

.verse-item-card.active {
  border-color: var(--color-accent);
  background: #FFFFFF;
  box-shadow: 0 4px 14px rgba(201, 169, 110, 0.18);
}

/* =========================================================
   MASTER ROYAL THEME (INDEX2.HTML) CSS SYSTEM
   ========================================================= */
:root {
  --baroque-bg: linear-gradient(to bottom right, rgba(138,90,42,0.92), rgba(185,125,62,0.92), rgba(216,175,135,0.92));
  --cream: #fbf8f1;
  --cream-card: rgba(251, 248, 241, 0.97);
  --gold: #B97D3E;
  --gold-dark: #8A5A2A;
  --gold-lt: #D8AF74;
  --ink: #2C1E12;
  --mid: #5A4A38;
  --olive: rgba(141, 143, 88, 0.9);
  --hint: #8C7B6B;
}

.inv-master-renderer {
  width: 100%;
  min-height: 100%;
  position: relative;
  font-family: 'Noto Naskh Arabic', 'Cormorant Garamond', serif;
  color: #2C1E12;
  background: #784b20;
}

.inv-master-renderer .inv-landing-cover {
  position: absolute; inset: 0;
  background: var(--baroque-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 200;
  padding: 20px;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.inv-master-renderer .inv-landing-cover::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: 0.55;
  pointer-events: none;
}

.inv-master-renderer .inv-landing-cover.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sparkle {
  position: absolute;
  color: #fce8cc;
  opacity: 0;
  animation: sparkleFall linear infinite;
}
@keyframes sparkleFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.45; }
  100% { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}

.baroque-card-wrap {
  position: relative;
  width: min(92vw, 480px);
  z-index: 10;
  animation: cardIn 1.1s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardIn {
  0% { transform: translateY(40px) scale(0.92); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.heart-seal {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #B97D3E, #8A5A2A);
  box-shadow: 0 4px 20px rgba(185, 125, 62, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.35);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  animation: sealPulse 2.4s ease-in-out infinite;
}
.heart-seal svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}
@keyframes sealPulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 4px 20px rgba(185, 125, 62, 0.55); }
  50% { transform: translateX(-50%) scale(1.08); box-shadow: 0 6px 28px rgba(185, 125, 62, 0.8); }
}

.baroque-card {
  position: relative;
  background: var(--cream-card);
  border: 1px solid rgba(185, 125, 62, 0.25);
  border-radius: 16px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 40px rgba(185, 125, 62, 0.18);
  padding: 56px 24px 38px;
  text-align: center;
  overflow: hidden;
}

.corner-flower-tl {
  position: absolute;
  top: 0; left: 0;
  width: 44%; max-width: 200px;
  transform: translate(-24%, -24%) rotate(8deg);
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.corner-flower-br {
  position: absolute;
  bottom: 0; right: 0;
  width: 44%; max-width: 200px;
  transform: translate(24%, 24%) scaleX(-1) rotate(8deg);
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.card-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-names {
  color: #B97D3E;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.c-name-ar {
  font-family: 'Aref Ruqaa', serif;
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  color: #B97D3E;
}
.c-amp {
  font-family: 'Great Vibes', 'Alex Brush', cursive;
  font-size: 26px;
  color: #B97D3E;
  margin: -2px 0;
  line-height: 1;
}

.c-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 16px;
  width: 100%;
}
.c-line {
  width: 45px;
  height: 1px;
  background: linear-gradient(to right, transparent, #B97D3E, transparent);
}
.c-ornament {
  color: #B97D3E;
  opacity: 0.75;
  font-size: 14px;
}

.c-date {
  color: var(--olive);
  font-family: 'Lora', 'Cormorant Garamond', serif;
  font-size: 17px;
  margin-bottom: 12px;
  direction: ltr;
}

.c-invites {
  color: var(--olive);
  font-family: 'Lora', 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 300;
  margin-bottom: 22px;
}

.open-btn {
  position: relative;
  background-color: #B97D3E;
  color: #ffffff;
  border: none;
  padding: 12px 42px;
  font-family: 'Lora', 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  border-radius: 40px;
  box-shadow: 0 4px 16px rgba(185, 125, 62, 0.4);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  user-select: none;
}
.open-btn:hover {
  transform: translateY(-2px);
  background-color: #8A5A2A;
  box-shadow: 0 6px 20px rgba(185, 125, 62, 0.55);
}
.open-btn:active {
  transform: scale(0.97);
}

.shine-effect {
  position: absolute;
  top: 0; left: -100%;
  width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0% { left: -100%; }
  35%, 100% { left: 200%; }
}

.inv-master-renderer .inv-main-content {
  opacity: 0;
  transition: opacity 0.8s ease;
  min-height: 100vh;
  background: var(--baroque-bg);
}
.inv-master-renderer .inv-main-content.visible {
  opacity: 1;
}

.fl {
  position: absolute; pointer-events: none; z-index: 1;
  animation: ambientFloat 6s ease-in-out infinite alternate;
}
.fl:nth-child(even) {
  animation-duration: 8s;
  animation-delay: -3s;
}
@keyframes ambientFloat {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-8px) rotate(4deg); }
}
.fl img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.card-sec {
  position: relative;
  min-height: 100vh;
  background: var(--baroque-bg);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 18px 60px;
}
.card-sec::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: 0.5;
  pointer-events: none;
}

.hero-paper-card {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 580px;
  background: var(--cream-card);
  border: 1px solid rgba(185, 125, 62, 0.35);
  border-radius: 18px;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 48px 24px 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.bism { font-family: 'Amiri', serif; font-size: 23px; color: var(--gold-dark); line-height: 1.7; margin-bottom: 12px; animation: fadeUp 1s ease both; animation-delay: .1s; }
.verse { font-family: 'Amiri', serif; font-size: 14px; line-height: 2.1; color: var(--mid); max-width: 360px; margin: 0 auto 16px; animation: fadeUp 1s ease both; animation-delay: .25s; }
.cdots { display: flex; gap: 5px; justify-content: center; margin-bottom: 14px; animation: fadeUp 1s ease both; animation-delay: .35s; }
.cdots span { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.personal-guest {
  background: rgba(185, 125, 62, 0.12);
  border: 1px solid rgba(185, 125, 62, 0.35);
  border-radius: 20px;
  padding: 6px 18px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--mid);
  animation: fadeUp 1s ease both; animation-delay: .4s;
}
.personal-guest strong { color: var(--gold-dark); font-family: 'Aref Ruqaa', serif; font-size: 16px; margin-right: 4px; }

.hosts-block {
  margin-bottom: 16px; animation: fadeUp 1s ease both; animation-delay: .45s;
}
.hosts-intro { font-size: 14px; color: var(--mid); margin-bottom: 6px; letter-spacing: .02em; }
.hosts-names {
  font-family: 'Aref Ruqaa', serif;
  font-size: 19px;
  color: var(--gold-dark);
  font-weight: 700;
  line-height: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hosts-names .host-fam {
  display: inline-block;
  white-space: nowrap;
}

.hosts-and { font-family: 'Great Vibes', cursive; color: var(--gold); font-size: 22px; margin: 0 4px; }

@media (max-width: 520px) {
  .hosts-names {
    flex-direction: column;
    gap: 4px;
  }
}

.inv-master-renderer.preview-mode .hosts-names {
  flex-direction: column;
  gap: 4px;
}

.couple-names-wrap { margin: 10px 0; animation: fadeUp 1s ease both; animation-delay: .6s; }
.gname { font-family: 'Aref Ruqaa', serif; font-size: 42px; color: var(--gold); line-height: 1.1; font-weight: 700; }
.eng-gname { font-family: 'Great Vibes', cursive; font-size: 38px; color: var(--gold-dark); line-height: 1.1; margin-top: -2px; }
.aamp { font-family: 'Great Vibes', cursive; font-size: 36px; color: var(--gold); line-height: 1; margin: 4px 0; }
.bname { font-family: 'Aref Ruqaa', serif; font-size: 42px; color: var(--gold); line-height: 1.1; font-weight: 700; }

.grule { width: 90px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); margin: 16px auto; animation: fadeUp 1s ease both; animation-delay: .8s; }

.dblock { animation: fadeUp 1s ease both; animation-delay: .9s; }
.mth { font-size: 24px; font-weight: 500; letter-spacing: .06em; color: var(--gold-dark); font-family: 'Aref Ruqaa', serif; }
.drow { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 16px; color: var(--mid); margin: 4px 0; }
.dnum { font-size: 40px; font-weight: 600; color: var(--gold); line-height: 1; font-family: 'Cormorant Garamond', serif; }
.dbar { color: var(--gold-lt); font-size: 22px; }
.yr { font-size: 15px; font-weight: 400; letter-spacing: .15em; color: var(--mid); font-family: 'Cormorant Garamond', serif; }

.vblock { font-size: 17px; font-weight: 600; color: var(--gold-dark); line-height: 1.8; margin-top: 16px; font-family: 'Aref Ruqaa', serif; animation: fadeUp 1s ease both; animation-delay: 1.0s; }
.vblock-sub { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--mid); font-weight: 400; }

.couple-img { position: absolute; bottom: 20px; right: 18px; width: 175px; z-index: 6; animation: fadeUp 1.2s ease both; animation-delay: 1.15s; display: block; }
.scroll-cue { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 7; opacity: .7; color: var(--gold-dark); animation: bounce 2s ease-in-out infinite; }
.scroll-cue span { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--mid); }
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

.sec { padding: 56px 24px; text-align: center; position: relative; overflow: hidden; background: rgba(251, 248, 241, 0.96); }
.sec.alt { background: rgba(244, 235, 217, 0.96); }
.sec-hdr { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 28px; }
.sec-ln { flex: 1; max-width: 55px; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); }
.sec-ln.r { background: linear-gradient(to left, transparent, var(--gold)); }
.sec-lbl { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; font-family: 'Aref Ruqaa', serif; }

.petals-container {
  position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden;
}
.petal {
  position: absolute; top: -30px;
  background: radial-gradient(circle at 35% 35%, #fce8cc, #B97D3E 85%);
  border-radius: 14px 0 14px 0; opacity: 0.7;
  box-shadow: 0 2px 8px rgba(185,125,62,0.35);
  animation: petalFall linear infinite;
}
@keyframes petalFall {
  0% { transform: translateY(-30px) rotate(0deg) scale(0.85); opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.55; }
  100% { transform: translateY(105vh) rotate(400deg) scale(1.1); opacity: 0; }
}

.cd-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; max-width: 360px; margin: 0 auto; }
.cd-cell {
  background: #fff; border-radius: 10px; padding: 14px 6px;
  border: 1px solid rgba(185,125,62,.3); box-shadow: 0 4px 16px rgba(138,90,42,.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cd-cell:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 24px rgba(185,125,62,0.25); }
.cd-n {
  display: block; font-size: 34px; font-weight: 600; color: var(--gold);
  line-height: 1; font-family: 'Cormorant Garamond', serif;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cd-n.pulse-num { animation: numPulse 0.45s ease-out; }
@keyframes numPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.22); color: var(--gold-dark); }
  100% { transform: scale(1); }
}
.cd-l { display: block; margin-top: 4px; font-size: 11px; color: var(--mid); font-family: 'Aref Ruqaa', serif; }
.cd-msg { margin-top: 22px; font-size: 16px; color: var(--gold-dark); font-family: 'Aref Ruqaa', serif; }

.map-frame { border-radius: 14px; overflow: hidden; max-width: 420px; margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(0,0,0,.15); border: 2px solid rgba(185,125,62,.35); position: relative; min-height: 280px; background: rgba(251, 248, 241, 0.5); }
.map-frame iframe { width: 100%; height: 280px; display: block; border: none; }
.leaflet-map-container { width: 100%; height: 280px; display: block; background: #fbf8f1; z-index: 1; opacity: 0; transition: opacity 0.4s ease-in-out; }
.leaflet-map-container.leaflet-rendered { opacity: 1; }
.map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 280px; padding: 20px; text-align: center; color: #8A5A2A; background: radial-gradient(circle, rgba(216,175,135,0.2) 0%, rgba(251,248,241,0.8) 100%); }
.map-placeholder-icon { font-size: 32px; margin-bottom: 8px; }
.map-placeholder-text { font-size: 14px; font-weight: 600; color: #5A4A38; }

/* Custom Luxury Gold Leaflet Pin & Soft Map Styling */
.leaflet-container {
  font-family: 'Noto Naskh Arabic', 'Cormorant Garamond', serif !important;
}
.leaflet-tile-pane {
  filter: sepia(0.2) contrast(0.96) saturate(0.88);
}
.custom-gold-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.custom-gold-marker::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 18px;
  height: 6px;
  background: rgba(138, 90, 42, 0.35);
  border-radius: 50%;
  filter: blur(2px);
  animation: shadowPulse 2s ease-in-out infinite alternate;
}
.custom-gold-marker svg {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 6px 14px rgba(185, 125, 62, 0.45));
  animation: markerBounce 2s ease-in-out infinite alternate;
  z-index: 2;
}
@keyframes markerBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}
@keyframes shadowPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(0.6); opacity: 0.2; }
}

/* Luxury Leaflet Popup Styling */
.leaflet-popup-content-wrapper {
  background: rgba(251, 248, 241, 0.97) !important;
  border: 1px solid rgba(185, 125, 62, 0.4) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(185, 125, 62, 0.2) !important;
  padding: 0 !important;
  backdrop-filter: blur(10px) !important;
}
.leaflet-popup-content {
  margin: 12px 16px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
.leaflet-popup-tip {
  background: rgba(251, 248, 241, 0.97) !important;
  border: 1px solid rgba(185, 125, 62, 0.3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}
.leaflet-container a.leaflet-popup-close-button {
  color: #8A5A2A !important;
  padding: 6px 8px 0 0 !important;
  font-size: 16px !important;
}
.luxury-popup-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.luxury-popup-title {
  font-family: 'Aref Ruqaa', 'Amiri', serif;
  font-size: 15px;
  font-weight: 700;
  color: #8A5A2A;
}
.luxury-popup-addr {
  font-size: 11px;
  color: #5A4A38;
  max-width: 180px;
}
.luxury-popup-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #B97D3E, #8A5A2A);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(185, 125, 62, 0.3);
}

.map-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #fff; text-decoration: none; padding: 13px 28px; border-radius: 40px; font-family: 'Noto Naskh Arabic', serif; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(185,125,62,0.35); transition: background .3s, transform .2s; }
.map-btn:hover { background: var(--gold-dark); transform: translateY(-2px); }
.vname { font-size: 22px; color: var(--gold-dark); margin-bottom: 6px; font-family: 'Aref Ruqaa', serif; font-weight: 700; }
.vdetail { font-size: 14px; color: var(--mid); margin-bottom: 18px; line-height: 1.7; }

.rsvp-form { max-width: 360px; margin: 0 auto; text-align: right; }
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 12px; color: var(--mid); margin-bottom: 6px; font-weight: 600; }
.fg input, .fg textarea, .fg select {
  width: 100%; background: #fff; border: 1px solid rgba(185,125,62,.4); border-radius: 8px;
  padding: 12px 14px; font-family: 'Noto Naskh Arabic', serif; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color .3s; -webkit-appearance: none; appearance: none;
}
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color: var(--gold); }
.fg textarea { resize: none; height: 90px; }
.send-btn {
  width: 100%; background: var(--gold); color: #fff; border: none; padding: 15px;
  border-radius: 40px; font-family: 'Noto Naskh Arabic', serif; font-size: 15px;
  font-weight: 600; cursor: pointer; margin-top: 6px; box-shadow: 0 4px 14px rgba(185,125,62,0.35); transition: background .3s, transform .2s;
}
.send-btn:hover { background: var(--gold-dark); transform: translateY(-2px); }
.send-btn:active { transform: scale(.98); }
.success-box { display: none; text-align: center; padding: 24px 16px; }
.success-box.show { display: block; }
.success-box p { font-size: 18px; color: var(--gold-dark); line-height: 1.8; font-family: 'Aref Ruqaa', serif; }

.wishes-viewport {
  max-width: 380px;
  margin: 0 auto;
  overflow: hidden;
  max-height: 360px;
  position: relative;
  border-radius: 12px;
}
.wishes-viewport::before,
.wishes-viewport::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 28px; z-index: 5; pointer-events: none;
}
.wishes-viewport::before { top: 0; background: linear-gradient(to bottom, rgba(244,235,217,0.95), transparent); }
.wishes-viewport::after { bottom: 0; background: linear-gradient(to top, rgba(244,235,217,0.95), transparent); }

.wishes-wall {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: marqueeScroll 22s linear infinite;
}
.wishes-viewport:hover .wishes-wall,
.wishes-viewport:active .wishes-wall {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.wish-card {
  background: #fff; border-radius: 10px; padding: 14px 16px; text-align: right;
  box-shadow: 0 4px 14px rgba(180,140,90,.1); border: 1px solid rgba(185,125,62,.2);
  flex-shrink: 0;
}
.w-name { font-size: 15px; color: var(--gold); font-weight: 700; margin-bottom: 5px; font-family: 'Aref Ruqaa', serif; }
.w-att { font-size: 11px; opacity: .8; font-weight: normal; margin-right: 6px; color: var(--mid); font-family: 'Noto Naskh Arabic', serif; }
.w-msg { font-size: 15px; color: var(--mid); line-height: 1.7; font-family: 'Amiri', serif; }
.w-date { font-size: 10px; color: var(--hint); margin-top: 6px; direction: ltr; text-align: left; }

footer { background: #3e2612; color: rgba(255,255,255,.75); text-align: center; padding: 36px 20px; }
.f-names { font-family: 'Aref Ruqaa', serif; font-size: 32px; color: var(--gold-lt); display: block; margin-bottom: 6px; }
.f-sub { font-size: 12px; letter-spacing: .05em; color: rgba(255,255,255,.6); line-height: 1.8; }

/* Phone screen container override for single source preview */
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #784b20;
  -webkit-overflow-scrolling: touch;
}