/* ==========================================================================
   eKaaJi UNDANGAN DIGITAL — THEME ENGINE (5 BESPOKE ART DIRECTIONS)
   All-in-One Full Feature (Rp 45.000) — Unique Layout, Framing & Typography
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cinzel:wght@500;600;700;800&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Great+Vibes&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. THEME: ROYAL GOLD (tpl-001)
   Aesthetic: Classic Baroque & Grand Ballroom Luxury
   Shapes: Arched frames, double gold halos, scalloped rounded corners, gold pills
   ========================================================================== */
html[data-invitation-theme="royal-gold"] {
  --theme-accent: #c59b27;
  --theme-accent-hover: #b0871b;
  --theme-accent-light: #fdf6e7;
  --theme-bg-light: #fcf9f2;
  --theme-card-bg: #ffffff;
  --theme-text-title: #2d261e;
  --theme-text-body: #4a4237;
  --theme-border: rgba(197, 155, 39, 0.28);
  --theme-font-title: 'Playfair Display', Georgia, serif;
  --theme-font-script: 'Great Vibes', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="royal-gold"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
  font-weight: 500 !important;
}

html[data-invitation-theme="royal-gold"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
  font-family: var(--theme-font-body) !important;
}

html[data-invitation-theme="royal-gold"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="royal-gold"] .bg-light-dark {
  background-color: var(--theme-bg-light) !important;
}

/* Royal Gold: Circular Avatars with Double Gold Halo */
html[data-invitation-theme="royal-gold"] .img-center-crop.rounded-circle,
html[data-invitation-theme="royal-gold"] #welcome-bg-img,
html[data-invitation-theme="royal-gold"] #hero-bg-img-2 {
  border-radius: 50% !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 0 3px #c59b27, 0 12px 28px rgba(197, 155, 39, 0.22) !important;
}

/* Royal Gold: Luxurious Grand Cards */
html[data-invitation-theme="royal-gold"] .border.rounded-5,
html[data-invitation-theme="royal-gold"] .bg-theme-auto {
  border-radius: 28px !important;
  border: 1px solid rgba(197, 155, 39, 0.28) !important;
  box-shadow: 0 10px 30px rgba(197, 155, 39, 0.08) !important;
}

/* Royal Gold: Classic Pill Countdown */
html[data-invitation-theme="royal-gold"] #wedding-date .border.rounded-pill {
  border-radius: 50rem !important;
  background: linear-gradient(135deg, #ffffff, #fdfaf3) !important;
  border: 1.5px solid #c59b27 !important;
  box-shadow: 0 6px 20px rgba(197, 155, 39, 0.15) !important;
}
html[data-invitation-theme="royal-gold"] #wedding-date p[id] {
  font-family: 'Playfair Display', serif !important;
  color: #c59b27 !important;
  font-weight: 700;
}

/* Royal Gold: Shimmering Gold Buttons */
html[data-invitation-theme="royal-gold"] .btn {
  border-radius: 50px !important;
}
html[data-invitation-theme="royal-gold"] .btn-outline-auto,
html[data-invitation-theme="royal-gold"] .btn-primary {
  background: linear-gradient(135deg, #d4af37, #aa820a) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(170, 130, 10, 0.28) !important;
}


/* ==========================================================================
   2. THEME: BOTANICAL SAGE (tpl-002)
   Aesthetic: Organic Rustic Garden & Literary Romance
   Shapes: Asymmetric leaf-curved frames (44px 8px 44px 8px), botanical badges
   ========================================================================== */
html[data-invitation-theme="botanical-sage"] {
  --theme-accent: #4a6b57;
  --theme-accent-hover: #3d5847;
  --theme-accent-light: #eef5f0;
  --theme-bg-light: #f5f8f6;
  --theme-card-bg: #ffffff;
  --theme-text-title: #1f3327;
  --theme-text-body: #3b4e43;
  --theme-border: rgba(74, 107, 87, 0.25);
  --theme-font-title: 'Cormorant Garamond', Georgia, serif;
  --theme-font-script: 'Alex Brush', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="botanical-sage"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
  font-size: 2.5rem !important;
}

html[data-invitation-theme="botanical-sage"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
}

html[data-invitation-theme="botanical-sage"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="botanical-sage"] .bg-light-dark {
  background-color: var(--theme-bg-light) !important;
}

/* Botanical Sage: ASYMMETRIC LEAF-SHAPED AVATARS */
html[data-invitation-theme="botanical-sage"] .img-center-crop.rounded-circle,
html[data-invitation-theme="botanical-sage"] #welcome-bg-img,
html[data-invitation-theme="botanical-sage"] #hero-bg-img-2 {
  border-radius: 48px 12px 48px 12px !important;
  border: 3px solid #5b826b !important;
  box-shadow: 0 8px 24px rgba(74, 107, 87, 0.2) !important;
  transition: transform 0.4s ease;
}

/* Botanical Sage: Organic Leaf-Corner Cards */
html[data-invitation-theme="botanical-sage"] .border.rounded-5,
html[data-invitation-theme="botanical-sage"] .bg-theme-auto {
  border-radius: 32px 8px 32px 8px !important;
  border: 1.5px solid rgba(74, 107, 87, 0.25) !important;
  background-color: #ffffff !important;
  box-shadow: 0 8px 26px rgba(74, 107, 87, 0.08) !important;
}

/* Botanical Sage: Organic Garden Countdown */
html[data-invitation-theme="botanical-sage"] #wedding-date .border.rounded-pill {
  border-radius: 24px 6px 24px 6px !important;
  border: 1.5px solid #4a6b57 !important;
  background: #eef5f0 !important;
  box-shadow: 0 6px 18px rgba(74, 107, 87, 0.12) !important;
}
html[data-invitation-theme="botanical-sage"] #wedding-date p[id] {
  font-family: 'Cormorant Garamond', serif !important;
  color: #4a6b57 !important;
  font-weight: 700;
  font-size: 1.5rem !important;
}

/* Botanical Sage: Soft Organic Earthy Buttons */
html[data-invitation-theme="botanical-sage"] .btn {
  border-radius: 18px 4px 18px 4px !important;
}
html[data-invitation-theme="botanical-sage"] .btn-outline-auto,
html[data-invitation-theme="botanical-sage"] .btn-primary {
  background: linear-gradient(135deg, #5b826b, #3d5847) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(61, 88, 71, 0.25) !important;
}


/* ==========================================================================
   3. THEME: RUBY VELVET (tpl-003)
   Aesthetic: Victorian Glamour & Romantic Candlelit Evening
   Shapes: Deep cameo vignettes, dramatic crimson drop-shadows, velvet buttons
   ========================================================================== */
html[data-invitation-theme="ruby-velvet"] {
  --theme-accent: #8b1e3f;
  --theme-accent-hover: #721632;
  --theme-accent-light: #fbf0f3;
  --theme-bg-light: #faf5f6;
  --theme-card-bg: #ffffff;
  --theme-text-title: #380d19;
  --theme-text-body: #54313b;
  --theme-border: rgba(139, 30, 63, 0.24);
  --theme-font-title: 'Playfair Display', Georgia, serif;
  --theme-font-script: 'Great Vibes', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="ruby-velvet"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
}

html[data-invitation-theme="ruby-velvet"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
}

html[data-invitation-theme="ruby-velvet"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="ruby-velvet"] .bg-light-dark {
  background-color: var(--theme-bg-light) !important;
}

/* Ruby Velvet: Oval Cameo Portraits with Crimson Glow */
html[data-invitation-theme="ruby-velvet"] .img-center-crop.rounded-circle,
html[data-invitation-theme="ruby-velvet"] #welcome-bg-img,
html[data-invitation-theme="ruby-velvet"] #hero-bg-img-2 {
  border-radius: 50% / 60% 60% 42% 42% !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 0 3px #8b1e3f, 0 12px 28px rgba(139, 30, 63, 0.28) !important;
}

/* Ruby Velvet: Rich Deep Crimson Cards */
html[data-invitation-theme="ruby-velvet"] .border.rounded-5,
html[data-invitation-theme="ruby-velvet"] .bg-theme-auto {
  border-radius: 24px !important;
  border: 1px solid rgba(139, 30, 63, 0.25) !important;
  box-shadow: 0 8px 30px rgba(139, 30, 63, 0.1) !important;
}

/* Ruby Velvet: Velvet Pill Countdown */
html[data-invitation-theme="ruby-velvet"] #wedding-date .border.rounded-pill {
  border-radius: 50rem !important;
  background: linear-gradient(135deg, #ffffff, #fbf0f3) !important;
  border: 1.5px solid #8b1e3f !important;
  box-shadow: 0 6px 20px rgba(139, 30, 63, 0.16) !important;
}
html[data-invitation-theme="ruby-velvet"] #wedding-date p[id] {
  font-family: 'Playfair Display', serif !important;
  color: #8b1e3f !important;
  font-weight: 700;
}

/* Ruby Velvet: Luxurious Deep Ruby Buttons */
html[data-invitation-theme="ruby-velvet"] .btn {
  border-radius: 50px !important;
}
html[data-invitation-theme="ruby-velvet"] .btn-outline-auto,
html[data-invitation-theme="ruby-velvet"] .btn-primary {
  background: linear-gradient(135deg, #9b284c, #6c122e) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(108, 18, 46, 0.3) !important;
}


/* ==========================================================================
   4. THEME: MINIMAL NOIR (tpl-004)
   Aesthetic: Swiss Contemporary & High-Fashion Monokrom Editorial
   Shapes: STRICT 0PX SHARP RECTANGLES (NO CIRCLES!), Hairline Black Borders, Kinfolk Magazine Vibe
   ========================================================================== */
html[data-invitation-theme="minimal-noir"] {
  --theme-accent: #111111;
  --theme-accent-hover: #333333;
  --theme-accent-light: #f0f0f0;
  --theme-bg-light: #ffffff;
  --theme-card-bg: #ffffff;
  --theme-text-title: #0a0a0a;
  --theme-text-body: #222222;
  --theme-border: #111111;
  --theme-font-title: 'Cinzel', serif;
  --theme-font-script: 'Cinzel', serif;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="minimal-noir"] .font-esthetic {
  font-family: 'Cinzel', serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
}

html[data-invitation-theme="minimal-noir"] body {
  background-color: #ffffff !important;
  color: #111111 !important;
}

html[data-invitation-theme="minimal-noir"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="minimal-noir"] .bg-light-dark {
  background-color: #f7f7f8 !important;
}

/* Minimal Noir: ZERO CIRCLES! STRICT SHARP RECTANGULAR PORTRAITS */
html[data-invitation-theme="minimal-noir"] .img-center-crop.rounded-circle,
html[data-invitation-theme="minimal-noir"] .rounded-circle,
html[data-invitation-theme="minimal-noir"] #welcome-bg-img,
html[data-invitation-theme="minimal-noir"] #hero-bg-img-2,
html[data-invitation-theme="minimal-noir"] #foto-pria-img,
html[data-invitation-theme="minimal-noir"] #foto-wanita-img {
  border-radius: 0px !important;
  border: 2px solid #111111 !important;
  box-shadow: 6px 6px 0px #111111 !important;
  aspect-ratio: 1/1 !important;
}

/* Minimal Noir: Sharp Rectangular Editorial Cards */
html[data-invitation-theme="minimal-noir"] .border.rounded-5,
html[data-invitation-theme="minimal-noir"] .rounded-5,
html[data-invitation-theme="minimal-noir"] .rounded-4,
html[data-invitation-theme="minimal-noir"] .rounded-3,
html[data-invitation-theme="minimal-noir"] .bg-theme-auto {
  border-radius: 0px !important;
  border: 1.5px solid #111111 !important;
  background-color: #ffffff !important;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.9) !important;
}

/* Minimal Noir: Brutalist Countdown Grid */
html[data-invitation-theme="minimal-noir"] #wedding-date .border.rounded-pill {
  border-radius: 0px !important;
  border: 2px solid #111111 !important;
  background: #ffffff !important;
  box-shadow: 5px 5px 0px #111111 !important;
}
html[data-invitation-theme="minimal-noir"] #wedding-date p[id] {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: #111111 !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Minimal Noir: High-Fashion Block Buttons */
html[data-invitation-theme="minimal-noir"] .btn {
  border-radius: 0px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  border: 2px solid #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: 3px 3px 0px #777777 !important;
  transition: all 0.2s ease !important;
}
html[data-invitation-theme="minimal-noir"] .btn:hover {
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 1px 1px 0px #111111 !important;
}

/* Minimal Noir: Sharp Carousel & Indicators */
html[data-invitation-theme="minimal-noir"] .carousel-inner {
  border-radius: 0px !important;
  border: 1.5px solid #111111 !important;
}
html[data-invitation-theme="minimal-noir"] #navbar-menu {
  border-radius: 0px !important;
  border-top: 2px solid #111111 !important;
  background: #ffffff !important;
}


/* ==========================================================================
   5. THEME: NUSANTARA HERITAGE (tpl-005)
   Aesthetic: Indonesian Royal Adat & Gunungan Keraton Kasunanan
   Shapes: Arched Gunungan silhouette (100px 100px 16px 16px), Batik Gold Trims
   ========================================================================== */
html[data-invitation-theme="nusantara"] {
  --theme-accent: #b45309;
  --theme-accent-hover: #92400e;
  --theme-accent-light: #fef3c7;
  --theme-bg-light: #fbf7ee;
  --theme-card-bg: #ffffff;
  --theme-text-title: #451a03;
  --theme-text-body: #573318;
  --theme-border: rgba(180, 83, 9, 0.32);
  --theme-font-title: 'Cinzel', serif;
  --theme-font-script: 'Great Vibes', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="nusantara"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
}

html[data-invitation-theme="nusantara"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
}

html[data-invitation-theme="nusantara"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="nusantara"] .bg-light-dark {
  background-color: #f6eedb !important;
}

/* Nusantara: GUNUNGAN WAYANG ARCHED PORTRAITS */
html[data-invitation-theme="nusantara"] .img-center-crop.rounded-circle,
html[data-invitation-theme="nusantara"] #welcome-bg-img,
html[data-invitation-theme="nusantara"] #hero-bg-img-2,
html[data-invitation-theme="nusantara"] #foto-pria-img,
html[data-invitation-theme="nusantara"] #foto-wanita-img {
  border-radius: 90px 90px 16px 16px !important;
  border: 3.5px solid #ffffff !important;
  box-shadow: 0 0 0 3px #b45309, 0 12px 28px rgba(180, 83, 9, 0.28) !important;
}

/* Nusantara: Royal Kasunanan Cards */
html[data-invitation-theme="nusantara"] .border.rounded-5,
html[data-invitation-theme="nusantara"] .bg-theme-auto {
  border-radius: 24px 24px 10px 10px !important;
  border: 1.5px solid #b45309 !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(180, 83, 9, 0.12) !important;
}

/* Nusantara: Traditional Brass & Gold Countdown */
html[data-invitation-theme="nusantara"] #wedding-date .border.rounded-pill {
  border-radius: 24px !important;
  border: 2px solid #b45309 !important;
  background: linear-gradient(135deg, #fffdf8, #fef3c7) !important;
  box-shadow: 0 6px 20px rgba(180, 83, 9, 0.18) !important;
}
html[data-invitation-theme="nusantara"] #wedding-date p[id] {
  font-family: 'Cinzel', serif !important;
  color: #b45309 !important;
  font-weight: 700;
}

/* Nusantara: Regal Terracotta-Amber Buttons */
html[data-invitation-theme="nusantara"] .btn {
  border-radius: 20px !important;
}
html[data-invitation-theme="nusantara"] .btn-outline-auto,
html[data-invitation-theme="nusantara"] .btn-primary {
  background: linear-gradient(135deg, #b45309, #78350f) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(146, 64, 14, 0.28) !important;
}


/* ==========================================================================
   6. THEME: CELESTIAL STARLIGHT (tpl-006)
   Aesthetic: Midnight Cosmic Sapphire & Starlight Silver Glow
   Shapes: Star Arch Portal (120px 120px 16px 16px), Starlight Halo Glow
   ========================================================================== */
html[data-invitation-theme="celestial-starlight"] {
  --theme-accent: #818cf8;
  --theme-accent-hover: #6366f1;
  --theme-accent-light: #1e1b4b;
  --theme-bg-light: #070b14;
  --theme-card-bg: rgba(15, 23, 42, 0.94);
  --theme-text-title: #f8fafc;
  --theme-text-body: #cbd5e1;
  --theme-border: rgba(129, 140, 248, 0.35);
  --theme-font-title: 'Cinzel', serif;
  --theme-font-script: 'Alex Brush', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="celestial-starlight"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: #c7d2fe !important;
  font-size: 2.5rem !important;
  text-shadow: 0 0 16px rgba(129, 140, 248, 0.6) !important;
}

html[data-invitation-theme="celestial-starlight"] body {
  background-color: #070b14 !important;
  color: #cbd5e1 !important;
}

html[data-invitation-theme="celestial-starlight"] .bg-white-black {
  background-color: #0c1222 !important;
  color: #f1f5f9 !important;
}

html[data-invitation-theme="celestial-starlight"] .bg-light-dark {
  background-color: #070b14 !important;
}

/* Celestial: Starlight Arch Portal Portraits with Silver-Indigo Halo */
html[data-invitation-theme="celestial-starlight"] .img-center-crop.rounded-circle,
html[data-invitation-theme="celestial-starlight"] #welcome-bg-img,
html[data-invitation-theme="celestial-starlight"] #hero-bg-img-2,
html[data-invitation-theme="celestial-starlight"] #foto-pria-img,
html[data-invitation-theme="celestial-starlight"] #foto-wanita-img {
  border-radius: 120px 120px 16px 16px !important;
  border: 3px solid #818cf8 !important;
  box-shadow: 0 0 24px rgba(129, 140, 248, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* Celestial: Midnight Glass Cards */
html[data-invitation-theme="celestial-starlight"] .border.rounded-5,
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto {
  border-radius: 22px !important;
  border: 1.5px solid rgba(129, 140, 248, 0.35) !important;
  background-color: #0c1324 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45) !important;
}
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto p,
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto small,
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto span {
  color: #cbd5e1 !important;
}
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto h1,
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto h2,
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto h3,
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto h4,
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto h5 {
  color: #f8fafc !important;
}

/* Celestial: Starlight Countdown */
html[data-invitation-theme="celestial-starlight"] #wedding-date .border.rounded-pill {
  border-radius: 20px !important;
  border: 1.5px solid #818cf8 !important;
  background: #0f172a !important;
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.25) !important;
}
html[data-invitation-theme="celestial-starlight"] #wedding-date p[id] {
  font-family: 'Cinzel', serif !important;
  color: #a5b4fc !important;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(129, 140, 248, 0.5);
}

/* Celestial: Nebula Glow Buttons */
html[data-invitation-theme="celestial-starlight"] .btn {
  border-radius: 50px !important;
}
html[data-invitation-theme="celestial-starlight"] .btn-outline-auto,
html[data-invitation-theme="celestial-starlight"] .btn-primary {
  background: linear-gradient(135deg, #4f46e5, #0284c7) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4) !important;
}


/* ==========================================================================
   7. THEME: OCEANIC AZURE (tpl-007)
   Aesthetic: Santorini Mediterranean Breeze & Aegean Cobalt
   Shapes: Asymmetric Wave Pebble Frame (35% 65% 60% 40% / 40% 40% 60% 60%)
   ========================================================================== */
html[data-invitation-theme="oceanic-azure"] {
  --theme-accent: #0284c7;
  --theme-accent-hover: #0369a1;
  --theme-accent-light: #e0f2fe;
  --theme-bg-light: #f0f7fc;
  --theme-card-bg: #ffffff;
  --theme-text-title: #0c4a6e;
  --theme-text-body: #1e3a5f;
  --theme-border: rgba(2, 132, 199, 0.25);
  --theme-font-title: 'Playfair Display', Georgia, serif;
  --theme-font-script: 'Great Vibes', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="oceanic-azure"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
  font-weight: 500 !important;
}

html[data-invitation-theme="oceanic-azure"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
}

html[data-invitation-theme="oceanic-azure"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="oceanic-azure"] .bg-light-dark {
  background-color: var(--theme-bg-light) !important;
}

/* Oceanic: Organic Coastal Wave Pebble Avatars */
html[data-invitation-theme="oceanic-azure"] .img-center-crop.rounded-circle,
html[data-invitation-theme="oceanic-azure"] #welcome-bg-img,
html[data-invitation-theme="oceanic-azure"] #hero-bg-img-2,
html[data-invitation-theme="oceanic-azure"] #foto-pria-img,
html[data-invitation-theme="oceanic-azure"] #foto-wanita-img {
  border-radius: 35% 65% 60% 40% / 40% 40% 60% 60% !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 0 3px #0284c7, 0 12px 28px rgba(2, 132, 199, 0.22) !important;
  transition: transform 0.4s ease;
}

/* Oceanic: Asymmetric Coastal Cards */
html[data-invitation-theme="oceanic-azure"] .border.rounded-5,
html[data-invitation-theme="oceanic-azure"] .bg-theme-auto {
  border-radius: 28px 8px 28px 28px !important;
  border: 1.5px solid rgba(2, 132, 199, 0.22) !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.08) !important;
}

/* Oceanic: Coastal Capsule Countdown */
html[data-invitation-theme="oceanic-azure"] #wedding-date .border.rounded-pill {
  border-radius: 50rem !important;
  border: 1.5px solid #0284c7 !important;
  background: linear-gradient(135deg, #ffffff, #e0f2fe) !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.12) !important;
}
html[data-invitation-theme="oceanic-azure"] #wedding-date p[id] {
  font-family: 'Playfair Display', serif !important;
  color: #0284c7 !important;
  font-weight: 700;
}

/* Oceanic: Aegean Cobalt Buttons */
html[data-invitation-theme="oceanic-azure"] .btn {
  border-radius: 50px !important;
}
html[data-invitation-theme="oceanic-azure"] .btn-outline-auto,
html[data-invitation-theme="oceanic-azure"] .btn-primary {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
}


/* ==========================================================================
   CARDS & SVG WAVE DIVIDERS HARMONY (ANTI-DARK GLITCH)
   ========================================================================== */
.bg-theme-auto,
html[data-invitation-theme] .bg-theme-auto,
html[data-bs-theme="dark"] .bg-theme-auto,
html[data-bs-theme="light"] .bg-theme-auto {
  background-color: #ffffff !important;
  border: 1px solid var(--theme-border, rgba(197, 155, 39, 0.22)) !important;
  color: var(--theme-text-body, #4a4237) !important;
}

/* Specific Dark Card for Celestial */
html[data-invitation-theme="celestial-starlight"] .bg-theme-auto {
  background-color: #0c1324 !important;
  color: #cbd5e1 !important;
}

.bg-theme-auto p,
.bg-theme-auto small,
.bg-theme-auto span {
  color: var(--theme-text-body, #4a4237) !important;
}

.bg-theme-auto .text-theme-auto {
  color: var(--theme-accent, #c59b27) !important;
  font-weight: 600 !important;
}

.color-theme-svg {
  color: #ffffff !important;
  background-color: var(--theme-bg-light, #fcf9f2) !important;
}

html[data-invitation-theme="celestial-starlight"] .color-theme-svg {
  color: #0c1324 !important;
  background-color: #070b14 !important;
}

html[data-invitation-theme="oceanic-azure"] .color-theme-svg {
  color: #ffffff !important;
  background-color: #f0f7fc !important;
}

/* ==========================================================================
   8. THEME: SAKURA BLOSSOM (tpl-008)
   Aesthetic: Hanami Bloom & Japanese Wabi-Sabi Soft Pastel
   Shapes: Petal-inspired asymmetric pill frames, blush rose glow
   ========================================================================== */
html[data-invitation-theme="sakura-blossom"] {
  --theme-accent: #d96b7d;
  --theme-accent-hover: #bf5163;
  --theme-accent-light: #fdf0f2;
  --theme-bg-light: #fff8f9;
  --theme-card-bg: #ffffff;
  --theme-text-title: #4a232b;
  --theme-text-body: #6b464e;
  --theme-border: rgba(217, 107, 125, 0.22);
  --theme-font-title: 'Playfair Display', Georgia, serif;
  --theme-font-script: 'Great Vibes', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="sakura-blossom"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
}

html[data-invitation-theme="sakura-blossom"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
}

html[data-invitation-theme="sakura-blossom"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="sakura-blossom"] .bg-light-dark {
  background-color: var(--theme-bg-light) !important;
}

/* Sakura: Petal-inspired Asymmetric Soft Frames */
html[data-invitation-theme="sakura-blossom"] .img-center-crop.rounded-circle,
html[data-invitation-theme="sakura-blossom"] #welcome-bg-img,
html[data-invitation-theme="sakura-blossom"] #hero-bg-img-2,
html[data-invitation-theme="sakura-blossom"] #foto-pria-img,
html[data-invitation-theme="sakura-blossom"] #foto-wanita-img {
  border-radius: 45px 12px 45px 12px !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 0 3px #d96b7d, 0 10px 24px rgba(217, 107, 125, 0.2) !important;
}

/* Sakura: Gentle Rounded Cards */
html[data-invitation-theme="sakura-blossom"] .border.rounded-5,
html[data-invitation-theme="sakura-blossom"] .bg-theme-auto {
  border-radius: 24px 8px 24px 8px !important;
  border: 1.5px solid rgba(217, 107, 125, 0.2) !important;
  background-color: #ffffff !important;
  box-shadow: 0 8px 26px rgba(217, 107, 125, 0.08) !important;
}

/* Sakura: Soft Petal Countdown */
html[data-invitation-theme="sakura-blossom"] #wedding-date .border.rounded-pill {
  border-radius: 50rem !important;
  background: linear-gradient(135deg, #ffffff, #fdf0f2) !important;
  border: 1.5px solid #d96b7d !important;
  box-shadow: 0 6px 18px rgba(217, 107, 125, 0.12) !important;
}
html[data-invitation-theme="sakura-blossom"] #wedding-date p[id] {
  font-family: 'Playfair Display', serif !important;
  color: #d96b7d !important;
  font-weight: 700;
}

/* Sakura: Soft Blossom Buttons */
html[data-invitation-theme="sakura-blossom"] .btn {
  border-radius: 50px !important;
}
html[data-invitation-theme="sakura-blossom"] .btn-outline-auto,
html[data-invitation-theme="sakura-blossom"] .btn-primary {
  background: linear-gradient(135deg, #e47c8d, #bf5163) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(191, 81, 99, 0.25) !important;
}
html[data-invitation-theme="sakura-blossom"] .color-theme-svg {
  color: #ffffff !important;
  background-color: #fff8f9 !important;
}


/* ==========================================================================
   9. THEME: TERRACOTTA BOHO (tpl-009)
   Aesthetic: Warm Moroccan Clay & Desert Bohemian Sun
   Shapes: Adobe archway silhouette, warm ochre & terracotta sandstone
   ========================================================================== */
html[data-invitation-theme="terracotta-boho"] {
  --theme-accent: #c45b34;
  --theme-accent-hover: #a3421e;
  --theme-accent-light: #fcefe8;
  --theme-bg-light: #faf3ec;
  --theme-card-bg: #ffffff;
  --theme-text-title: #3d1a0e;
  --theme-text-body: #593628;
  --theme-border: rgba(196, 91, 52, 0.25);
  --theme-font-title: 'Cormorant Garamond', Georgia, serif;
  --theme-font-script: 'Great Vibes', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="terracotta-boho"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
}

html[data-invitation-theme="terracotta-boho"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
}

html[data-invitation-theme="terracotta-boho"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="terracotta-boho"] .bg-light-dark {
  background-color: var(--theme-bg-light) !important;
}

/* Terracotta: Moroccan Adobe Archway Avatars */
html[data-invitation-theme="terracotta-boho"] .img-center-crop.rounded-circle,
html[data-invitation-theme="terracotta-boho"] #welcome-bg-img,
html[data-invitation-theme="terracotta-boho"] #hero-bg-img-2,
html[data-invitation-theme="terracotta-boho"] #foto-pria-img,
html[data-invitation-theme="terracotta-boho"] #foto-wanita-img {
  border-radius: 50% 50% 14px 14px !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 0 3px #c45b34, 0 12px 28px rgba(196, 91, 52, 0.22) !important;
}

/* Terracotta: Adobe Terracotta Sandstone Cards */
html[data-invitation-theme="terracotta-boho"] .border.rounded-5,
html[data-invitation-theme="terracotta-boho"] .bg-theme-auto {
  border-radius: 20px 20px 6px 6px !important;
  border: 1.5px solid rgba(196, 91, 52, 0.25) !important;
  background-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(196, 91, 52, 0.09) !important;
}

/* Terracotta: Sandstone Arch Countdown */
html[data-invitation-theme="terracotta-boho"] #wedding-date .border.rounded-pill {
  border-radius: 16px !important;
  background: linear-gradient(135deg, #ffffff, #fcefe8) !important;
  border: 1.5px solid #c45b34 !important;
  box-shadow: 0 6px 18px rgba(196, 91, 52, 0.12) !important;
}
html[data-invitation-theme="terracotta-boho"] #wedding-date p[id] {
  font-family: 'Cormorant Garamond', serif !important;
  color: #c45b34 !important;
  font-weight: 700;
  font-size: 1.45rem !important;
}

/* Terracotta: Warm Earth Buttons */
html[data-invitation-theme="terracotta-boho"] .btn {
  border-radius: 26px 6px 26px 6px !important;
}
html[data-invitation-theme="terracotta-boho"] .btn-outline-auto,
html[data-invitation-theme="terracotta-boho"] .btn-primary {
  background: linear-gradient(135deg, #d36941, #a3421e) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(163, 66, 30, 0.28) !important;
}
html[data-invitation-theme="terracotta-boho"] .color-theme-svg {
  color: #ffffff !important;
  background-color: #faf3ec !important;
}


/* ==========================================================================
   10. THEME: EMERALD IMPERIAL (tpl-010)
   Aesthetic: Imperial Keraton & Gatsby Art Deco Jewel Tone
   Shapes: Art Deco faceted diamond corners, gilded champagne gold & emerald glow
   ========================================================================== */
html[data-invitation-theme="emerald-imperial"] {
  --theme-accent: #165b4c;
  --theme-accent-hover: #0e4236;
  --theme-accent-light: #e4f3ee;
  --theme-bg-light: #f0f7f4;
  --theme-card-bg: #ffffff;
  --theme-text-title: #082821;
  --theme-text-body: #163e34;
  --theme-border: rgba(22, 91, 76, 0.26);
  --theme-font-title: 'Cinzel', Georgia, serif;
  --theme-font-script: 'Great Vibes', cursive;
  --theme-font-body: 'Plus Jakarta Sans', sans-serif;
}

html[data-invitation-theme="emerald-imperial"] .font-esthetic {
  font-family: var(--theme-font-script) !important;
  color: var(--theme-accent) !important;
}

html[data-invitation-theme="emerald-imperial"] body {
  background-color: var(--theme-bg-light) !important;
  color: var(--theme-text-body) !important;
}

html[data-invitation-theme="emerald-imperial"] .bg-white-black {
  background-color: #ffffff !important;
}

html[data-invitation-theme="emerald-imperial"] .bg-light-dark {
  background-color: var(--theme-bg-light) !important;
}

/* Emerald Imperial: Faceted Art Deco Chamfer Avatars */
html[data-invitation-theme="emerald-imperial"] .img-center-crop.rounded-circle,
html[data-invitation-theme="emerald-imperial"] #welcome-bg-img,
html[data-invitation-theme="emerald-imperial"] #hero-bg-img-2,
html[data-invitation-theme="emerald-imperial"] #foto-pria-img,
html[data-invitation-theme="emerald-imperial"] #foto-wanita-img {
  border-radius: 36px 6px 36px 6px !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 0 3px #165b4c, 0 0 0 5px #c8a348, 0 14px 30px rgba(22, 91, 76, 0.26) !important;
}

/* Emerald Imperial: Gilded Art Deco Chamfer Cards */
html[data-invitation-theme="emerald-imperial"] .border.rounded-5,
html[data-invitation-theme="emerald-imperial"] .bg-theme-auto {
  border-radius: 24px 4px 24px 4px !important;
  border: 1.5px solid rgba(22, 91, 76, 0.26) !important;
  background-color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(22, 91, 76, 0.1) !important;
}

/* Emerald Imperial: Faceted Jewel Countdown */
html[data-invitation-theme="emerald-imperial"] #wedding-date .border.rounded-pill {
  border-radius: 50rem !important;
  background: linear-gradient(135deg, #ffffff, #e4f3ee) !important;
  border: 1.5px solid #165b4c !important;
  box-shadow: 0 6px 18px rgba(22, 91, 76, 0.14) !important;
}
html[data-invitation-theme="emerald-imperial"] #wedding-date p[id] {
  font-family: 'Cinzel', serif !important;
  color: #165b4c !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Emerald Imperial: Aristocratic Gilded Emerald Buttons */
html[data-invitation-theme="emerald-imperial"] .btn {
  border-radius: 50px !important;
}
html[data-invitation-theme="emerald-imperial"] .btn-outline-auto,
html[data-invitation-theme="emerald-imperial"] .btn-primary {
  background: linear-gradient(135deg, #1c6e5c, #0e4236) !important;
  color: #ffffff !important;
  border: 1px solid #c8a348 !important;
  box-shadow: 0 4px 16px rgba(22, 91, 76, 0.3) !important;
}
html[data-invitation-theme="emerald-imperial"] .color-theme-svg {
  color: #ffffff !important;
  background-color: #f0f7f4 !important;
}