/**
 * Integrate Edge Digital Invitations - Theme System (UI/UX Pro Max)
 * 8 Bespoke Cultural & Celebration Themes
 * Designed with High-End Aesthetics, Authentic Symbolism & Color Harmony
 */

/* =========================================================
   1. ELEGANT TRADITIONAL (Ivory & Antique Gold)
   ========================================================= */
.theme-traditional {
  --theme-bg: #fdfbf7;
  --theme-card-bg: #ffffff;
  --theme-primary: #80182c;
  --theme-primary-dark: #5c1020;
  --theme-gold: #b8860b;
  --theme-gold-light: #fef8eb;
  --theme-text-dark: #2d1810;
  --theme-text-muted: #6b5c53;
  --theme-border: rgba(184, 134, 11, 0.35);
  --theme-border-inner: rgba(184, 134, 11, 0.2);
  --theme-detail-bg: rgba(253, 251, 247, 0.85);
  --theme-shadow: 0 20px 50px -15px rgba(128, 24, 44, 0.14), 0 0 0 1px rgba(184, 134, 11, 0.15);
  --theme-accent-gradient: linear-gradient(135deg, #80182c 0%, #b8860b 100%);
  --theme-font-title: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

/* =========================================================
   2. ISLAMIC (Emerald Green & Gold Arabesque)
   ========================================================= */
.theme-islamic {
  --theme-bg: #062013;
  --theme-card-bg: #0a2f1d;
  --theme-primary: #f6d878;
  --theme-primary-dark: #dfba4f;
  --theme-gold: #f0cb69;
  --theme-gold-light: rgba(240, 203, 105, 0.15);
  --theme-text-dark: #ffffff;
  --theme-text-muted: #a7f3d0;
  --theme-border: rgba(240, 203, 105, 0.5);
  --theme-border-inner: rgba(240, 203, 105, 0.3);
  --theme-detail-bg: rgba(5, 25, 15, 0.85);
  --theme-shadow: 0 20px 50px -15px rgba(2, 18, 10, 0.8), 0 0 0 1px rgba(240, 203, 105, 0.25);
  --theme-accent-gradient: linear-gradient(135deg, #0a3320 0%, #f0cb69 100%);
  --theme-font-title: 'Amiri', 'Cormorant Garamond', 'Cinzel', Georgia, serif;
}

/* Islamic Theme Card Luxury Overrides */
.theme-islamic.invitation-card-container {
  background: radial-gradient(circle at 50% 12%, #0f422a 0%, #082819 65%, #051a10 100%) !important;
  border: 1.5px solid rgba(240, 203, 105, 0.55) !important;
  box-shadow: 0 24px 60px -15px rgba(2, 18, 10, 0.85), inset 0 0 40px rgba(0, 0, 0, 0.3) !important;
}

.theme-islamic .inv-mantra {
  color: #f6d878 !important;
  font-family: var(--theme-font-title) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.theme-islamic .inv-pretitle {
  color: #a7f3d0 !important;
}

.theme-islamic .inv-title {
  color: #f6d878 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
  font-family: var(--theme-font-title) !important;
}

.theme-islamic .inv-subtitle {
  color: #f0cb69 !important;
}

.theme-islamic .inv-host-intro {
  color: #a7f3d0 !important;
}

.theme-islamic .inv-host-name {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  font-family: var(--theme-font-title) !important;
  font-size: 1.55rem !important;
}

.theme-islamic .inv-message-box {
  background: rgba(5, 25, 15, 0.85) !important;
  border: 1px solid rgba(240, 203, 105, 0.35) !important;
  border-left: 3.5px solid #f0cb69 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.theme-islamic .inv-message-text {
  color: #f0fdf4 !important;
  font-size: 1.12rem !important;
}

.theme-islamic .detail-card {
  background: rgba(5, 25, 15, 0.85) !important;
  border: 1px solid rgba(240, 203, 105, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

.theme-islamic .detail-label {
  color: #f0cb69 !important;
}

.theme-islamic .detail-value {
  color: #ffffff !important;
  font-family: var(--theme-font-title) !important;
}

.theme-islamic .detail-subvalue {
  color: #a7f3d0 !important;
}

/* Get Directions Button: High-contrast Dark Green Text on White Button */
.theme-islamic .btn-directions {
  background: #ffffff !important;
  color: #082819 !important;
  border: 1.5px solid #f0cb69 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.theme-islamic .btn-directions:hover {
  background: #f6d878 !important;
  color: #061d12 !important;
}

/* Calendar Button: Shimmering Gold Accent */
.theme-islamic .btn-calendar {
  background: rgba(240, 203, 105, 0.14) !important;
  color: #f6d878 !important;
  border: 1.5px solid rgba(240, 203, 105, 0.5) !important;
  font-weight: 700 !important;
}

.theme-islamic .btn-calendar:hover {
  background: rgba(240, 203, 105, 0.25) !important;
  color: #ffffff !important;
}

/* Countdown Box: Luxury Arabesque Clockwork with Dark Tiles & Radiant Gold Numbers */
.theme-islamic .inv-countdown-box {
  background: rgba(5, 25, 15, 0.85) !important;
  border: 1.5px solid rgba(240, 203, 105, 0.4) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.theme-islamic .countdown-title {
  color: #f6d878 !important;
  letter-spacing: 0.16em !important;
  font-family: var(--theme-font-title) !important;
}

.theme-islamic .countdown-unit {
  background: #051d11 !important;
  border: 1.5px solid rgba(240, 203, 105, 0.45) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(240, 203, 105, 0.2) !important;
}

.theme-islamic .countdown-number {
  color: #fef08a !important;
  font-family: var(--theme-font-title) !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.theme-islamic .countdown-label {
  color: #a7f3d0 !important;
  font-weight: 800 !important;
}

/* RSVP Section in Islamic Theme */
.theme-islamic .inv-rsvp-section {
  border-top-color: rgba(240, 203, 105, 0.3) !important;
}

.theme-islamic .inv-rsvp-title {
  color: #f6d878 !important;
  font-family: var(--theme-font-title) !important;
}

.theme-islamic .inv-rsvp-sub {
  color: #a7f3d0 !important;
}

.theme-islamic .btn-rsvp-maybe,
.theme-islamic .btn-rsvp-no {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1.5px solid rgba(240, 203, 105, 0.6) !important;
  font-weight: 700 !important;
}

/* Referral Footer in Islamic Theme */
.theme-islamic .inv-referral-footer {
  border-top: 1px solid rgba(240, 203, 105, 0.25) !important;
  padding-top: 1.5rem !important;
}

.theme-islamic .inv-referral-footer .referral-heading {
  color: #f6d878 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

.theme-islamic .inv-referral-footer .referral-desc {
  color: #e2e8f0 !important;
  opacity: 0.95 !important;
}

.theme-islamic .inv-referral-footer .referral-link {
  color: #f6d878 !important;
  text-decoration-color: #f6d878 !important;
}

/* =========================================================
   3. HINDU TRADITIONAL (Sacred Saffron & Deep Maroon)
   ========================================================= */
.theme-hindu {
  --theme-bg: #fffbf5;
  --theme-card-bg: #ffffff;
  --theme-primary: #962319;
  --theme-primary-dark: #6b140d;
  --theme-gold: #d97706;
  --theme-gold-light: #fffbeb;
  --theme-text-dark: #3c1208;
  --theme-text-muted: #78350f;
  --theme-border: rgba(217, 119, 6, 0.42);
  --theme-border-inner: rgba(150, 35, 25, 0.2);
  --theme-detail-bg: rgba(255, 251, 245, 0.9);
  --theme-shadow: 0 20px 50px -15px rgba(150, 35, 25, 0.16), 0 0 0 1px rgba(217, 119, 6, 0.18);
  --theme-accent-gradient: linear-gradient(135deg, #962319 0%, #d97706 100%);
  --theme-font-title: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

/* =========================================================
   4. CHRISTIAN (Ivory, Royal Sapphire & Silver Trims)
   ========================================================= */
.theme-christian {
  --theme-bg: #f8faff;
  --theme-card-bg: #ffffff;
  --theme-primary: #1d3557;
  --theme-primary-dark: #102035;
  --theme-gold: #b8860b;
  --theme-gold-light: #f0f5fc;
  --theme-text-dark: #0f1d2e;
  --theme-text-muted: #455a75;
  --theme-border: rgba(29, 53, 87, 0.3);
  --theme-border-inner: rgba(184, 134, 11, 0.2);
  --theme-detail-bg: rgba(248, 250, 255, 0.85);
  --theme-shadow: 0 20px 50px -15px rgba(29, 53, 87, 0.15), 0 0 0 1px rgba(29, 53, 87, 0.14);
  --theme-accent-gradient: linear-gradient(135deg, #1d3557 0%, #b8860b 100%);
  --theme-font-title: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

/* =========================================================
   5. MODERN MINIMAL (Slate & Crisp Monochrome)
   ========================================================= */
.theme-modern {
  --theme-bg: #fafafa;
  --theme-card-bg: #ffffff;
  --theme-primary: #18181b;
  --theme-primary-dark: #09090b;
  --theme-gold: #52525b;
  --theme-gold-light: #f4f4f5;
  --theme-text-dark: #18181b;
  --theme-text-muted: #71717a;
  --theme-border: rgba(24, 24, 27, 0.22);
  --theme-border-inner: rgba(113, 113, 122, 0.18);
  --theme-detail-bg: rgba(250, 250, 250, 0.95);
  --theme-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --theme-accent-gradient: linear-gradient(135deg, #18181b 0%, #52525b 100%);
  --theme-font-title: 'Cinzel', 'Plus Jakarta Sans', sans-serif;
}

/* =========================================================
   6. FLORAL ROMANCE (Blush Rose & Rose Gold)
   ========================================================= */
.theme-floral {
  --theme-bg: #fff8f9;
  --theme-card-bg: #ffffff;
  --theme-primary: #a84261;
  --theme-primary-dark: #7a2640;
  --theme-gold: #c27d66;
  --theme-gold-light: #fdf2f4;
  --theme-text-dark: #3a1c25;
  --theme-text-muted: #7d4957;
  --theme-border: rgba(168, 66, 97, 0.32);
  --theme-border-inner: rgba(194, 125, 102, 0.22);
  --theme-detail-bg: rgba(255, 248, 249, 0.9);
  --theme-shadow: 0 20px 50px -15px rgba(168, 66, 97, 0.15), 0 0 0 1px rgba(168, 66, 97, 0.15);
  --theme-accent-gradient: linear-gradient(135deg, #a84261 0%, #e29578 100%);
  --theme-font-title: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* =========================================================
   7. ROYAL HERITAGE (Velvet Midnight Blue & Imperial Gold)
   ========================================================= */
.theme-royal {
  --theme-bg: #f4f6fa;
  --theme-card-bg: #ffffff;
  --theme-primary: #0b2545;
  --theme-primary-dark: #051324;
  --theme-gold: #c59b27;
  --theme-gold-light: #edf2f9;
  --theme-text-dark: #091a2e;
  --theme-text-muted: #3d516b;
  --theme-border: rgba(197, 155, 39, 0.45);
  --theme-border-inner: rgba(11, 37, 69, 0.25);
  --theme-detail-bg: rgba(244, 246, 250, 0.9);
  --theme-shadow: 0 20px 50px -15px rgba(11, 37, 69, 0.18), 0 0 0 1px rgba(197, 155, 39, 0.2);
  --theme-accent-gradient: linear-gradient(135deg, #0b2545 0%, #c59b27 100%);
  --theme-font-title: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

/* =========================================================
   8. FESTIVE CELEBRATION (Warm Terracotta & Celebration Gold)
   ========================================================= */
.theme-festive {
  --theme-bg: #fffbf8;
  --theme-card-bg: #ffffff;
  --theme-primary: #c84b31;
  --theme-primary-dark: #912e1a;
  --theme-gold: #e76f51;
  --theme-gold-light: #fff2ed;
  --theme-text-dark: #3d140a;
  --theme-text-muted: #823e2d;
  --theme-border: rgba(200, 75, 49, 0.38);
  --theme-border-inner: rgba(231, 111, 81, 0.22);
  --theme-detail-bg: rgba(255, 251, 248, 0.9);
  --theme-shadow: 0 20px 50px -15px rgba(200, 75, 49, 0.16), 0 0 0 1px rgba(200, 75, 49, 0.16);
  --theme-accent-gradient: linear-gradient(135deg, #c84b31 0%, #f4a261 100%);
  --theme-font-title: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
}

/* =========================================================
   REFERRAL FOOTER ALIGNMENT GUARANTEE
   ========================================================= */
.inv-referral-footer,
.inv-referral-footer * {
  text-align: center !important;
}

/* =========================================================
   WELCOME OVERLAY - THEME SPECIFIC LUXURY OVERRIDES
   ========================================================= */

/* 1. Islamic Theme Welcome Overlay */
.theme-islamic.invitation-welcome-overlay {
  background: radial-gradient(circle at 50% 30%, #0c3822 0%, #062013 70%, #03120b 100%) !important;
}

.theme-islamic .welcome-card {
  background: radial-gradient(circle at 50% 15%, #0f422a 0%, #082819 65%, #051a10 100%) !important;
  border: 1.5px solid rgba(240, 203, 105, 0.55) !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.75), inset 0 0 35px rgba(0, 0, 0, 0.3) !important;
}

.theme-islamic .welcome-badge {
  color: #f6d878 !important;
}

.theme-islamic .welcome-icon-box {
  background: radial-gradient(circle, rgba(240, 203, 105, 0.2) 0%, transparent 70%) !important;
  border-color: rgba(240, 203, 105, 0.45) !important;
}

.theme-islamic .welcome-title {
  color: #f6d878 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.theme-islamic .welcome-host-name {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.theme-islamic .welcome-invite-phrase {
  color: #a7f3d0 !important;
}

.theme-islamic .welcome-divider-line {
  background: rgba(240, 203, 105, 0.4) !important;
}

.theme-islamic .welcome-divider-symbol {
  color: #f0cb69 !important;
}

.theme-islamic .btn-open-invitation {
  background: linear-gradient(135deg, #f0cb69 0%, #dfba4f 60%, #b8912e 100%) !important;
  color: #062013 !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5) !important;
}

.theme-islamic .welcome-music-note {
  color: #a7f3d0 !important;
}

/* 2. Hindu Traditional Welcome Overlay */
.theme-hindu.invitation-welcome-overlay {
  background: radial-gradient(circle at 50% 30%, #4a0d16 0%, #29040a 75%, #180206 100%) !important;
}

.theme-hindu .welcome-card {
  background: radial-gradient(circle at 50% 15%, #420b13 0%, #2b060d 75%) !important;
  border: 1.5px solid rgba(230, 184, 0, 0.5) !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.7), inset 0 0 35px rgba(0, 0, 0, 0.25) !important;
}

.theme-hindu .welcome-title {
  color: #fce79a !important;
}

.theme-hindu .welcome-host-name {
  color: #ffffff !important;
}

.theme-hindu .welcome-invite-phrase {
  color: #ffccd5 !important;
}

.theme-hindu .btn-open-invitation {
  background: linear-gradient(135deg, #e6b800 0%, #b32d00 100%) !important;
  color: #ffffff !important;
}

/* 3. Royal Theme Welcome Overlay */
.theme-royal.invitation-welcome-overlay {
  background: radial-gradient(circle at 50% 30%, #152238 0%, #0a111c 75%, #05080e 100%) !important;
}

.theme-royal .welcome-card {
  background: radial-gradient(circle at 50% 15%, #1a2a47 0%, #0f192b 75%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.7), inset 0 0 35px rgba(0, 0, 0, 0.3) !important;
}

.theme-royal .welcome-title {
  color: #f7df94 !important;
}

.theme-royal .welcome-host-name {
  color: #ffffff !important;
}

.theme-royal .welcome-invite-phrase {
  color: #b8cce6 !important;
}

.theme-royal .btn-open-invitation {
  background: linear-gradient(135deg, #d4af37 0%, #aa8210 100%) !important;
  color: #0b1322 !important;
  font-weight: 800 !important;
}