/**
 * OmniPop Engage Pro+ - 9 Popup Themes
 * File: omnipop-engage-pro/assets/css/omnipop-themes.css
 */

/* ══════════════════════════════════════════════════════════════════════════
   THEME 1: EARTH
   Natural greens, warm earth tones
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-earth {
  --omnipop-primary: #4a7c59;
  background: linear-gradient(145deg, #f5f0e8 0%, #e8dcc8 100%);
  color: #2d3a2e;
  border: 1.5px solid rgba(74,124,89,0.2);
}
.omnipop-popup.theme-earth .omnipop-popup__close { background: rgba(74,124,89,0.15); color: #2d3a2e; }
.omnipop-popup.theme-earth .omnipop-form__input,
.omnipop-popup.theme-earth .omnipop-form__textarea,
.omnipop-popup.theme-earth .omnipop-form__select { background: rgba(255,255,255,0.7); border-color: rgba(74,124,89,0.3); color: #2d3a2e; }
.omnipop-popup.theme-earth .omnipop-payment-block { background: rgba(74,124,89,0.08); }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 2: WATER
   Cool ocean blues, aqua tones
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-water {
  --omnipop-primary: #0077b6;
  background: linear-gradient(145deg, #e0f4ff 0%, #caf0f8 100%);
  color: #023e8a;
  border: 1.5px solid rgba(0,119,182,0.2);
}
.omnipop-popup.theme-water .omnipop-popup__close { background: rgba(0,119,182,0.15); color: #023e8a; }
.omnipop-popup.theme-water .omnipop-form__input,
.omnipop-popup.theme-water .omnipop-form__textarea,
.omnipop-popup.theme-water .omnipop-form__select { background: rgba(255,255,255,0.75); border-color: rgba(0,119,182,0.3); color: #023e8a; }
.omnipop-popup.theme-water .omnipop-payment-block { background: rgba(0,119,182,0.08); }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 3: FIRE
   Bold reds, energetic orange tones
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-fire {
  --omnipop-primary: #e63946;
  background: linear-gradient(145deg, #fff0ee 0%, #ffe0dc 100%);
  color: #7b1d1d;
  border: 1.5px solid rgba(230,57,70,0.2);
}
.omnipop-popup.theme-fire .omnipop-popup__close { background: rgba(230,57,70,0.15); color: #7b1d1d; }
.omnipop-popup.theme-fire .omnipop-form__input,
.omnipop-popup.theme-fire .omnipop-form__textarea,
.omnipop-popup.theme-fire .omnipop-form__select { background: rgba(255,255,255,0.75); border-color: rgba(230,57,70,0.3); color: #7b1d1d; }
.omnipop-popup.theme-fire .omnipop-payment-block { background: rgba(230,57,70,0.06); }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 4: AIR
   Light sky blues, airy whites
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-air {
  --omnipop-primary: #48cae4;
  background: linear-gradient(145deg, #f8fdff 0%, #e8f8ff 100%);
  color: #1a5276;
  border: 1.5px solid rgba(72,202,228,0.25);
  box-shadow: 0 20px 60px rgba(72,202,228,0.2);
}
.omnipop-popup.theme-air .omnipop-popup__close { background: rgba(72,202,228,0.2); color: #1a5276; }
.omnipop-popup.theme-air .omnipop-form__input,
.omnipop-popup.theme-air .omnipop-form__textarea,
.omnipop-popup.theme-air .omnipop-form__select { background: rgba(255,255,255,0.8); border-color: rgba(72,202,228,0.4); color: #1a5276; }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 5: SPACE
   Deep dark cosmos, purple accents
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-space {
  --omnipop-primary: #7b2fff;
  background: linear-gradient(145deg, #0d0d1a 0%, #1a0a2e 100%);
  color: #e0d7ff;
  border: 1.5px solid rgba(123,47,255,0.4);
  box-shadow: 0 20px 60px rgba(123,47,255,0.3), 0 0 0 1px rgba(123,47,255,0.1);
}
.omnipop-popup.theme-space::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 20%, rgba(123,47,255,0.15) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(76,201,240,0.1) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}
.omnipop-popup.theme-space .omnipop-popup__close { background: rgba(123,47,255,0.3); color: #e0d7ff; }
.omnipop-popup.theme-space .omnipop-form__input,
.omnipop-popup.theme-space .omnipop-form__textarea,
.omnipop-popup.theme-space .omnipop-form__select { background: rgba(255,255,255,0.07); border-color: rgba(123,47,255,0.4); color: #e0d7ff; }
.omnipop-popup.theme-space .omnipop-form__input::placeholder { color: rgba(224,215,255,0.4); }
.omnipop-popup.theme-space .omnipop-payment-block { background: rgba(123,47,255,0.12); }
.omnipop-popup.theme-space .omnipop-btn--ghost { color: #7b2fff; border-color: #7b2fff; }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 6: GLASSMORPHISM
   Frosted glass, blur, transparency
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-glass {
  --omnipop-primary: #6c63ff;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
.omnipop-popup.theme-glass .omnipop-popup__close { background: rgba(255,255,255,0.2); color: #fff; }
.omnipop-popup.theme-glass .omnipop-form__input,
.omnipop-popup.theme-glass .omnipop-form__textarea,
.omnipop-popup.theme-glass .omnipop-form__select {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.omnipop-popup.theme-glass .omnipop-form__input::placeholder { color: rgba(255,255,255,0.5); }
.omnipop-popup.theme-glass .omnipop-form__label { color: rgba(255,255,255,0.9); }
.omnipop-popup.theme-glass .omnipop-payment-block { background: rgba(255,255,255,0.1); }
.omnipop-popup.theme-glass .omnipop-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.omnipop-popup.theme-glass .omnipop-btn--ghost:hover { background: rgba(255,255,255,0.2); }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 7: SOFT NEON
   Dark background, glowing neon accents
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-neon {
  --omnipop-primary: #39ff14;
  background: #0a0a0a;
  color: #e0ffe0;
  border: 1.5px solid rgba(57,255,20,0.4);
  box-shadow: 0 0 30px rgba(57,255,20,0.15), 0 20px 60px rgba(0,0,0,0.5);
}
.omnipop-popup.theme-neon .omnipop-popup__close { background: rgba(57,255,20,0.15); color: #39ff14; }
.omnipop-popup.theme-neon .omnipop-form__input,
.omnipop-popup.theme-neon .omnipop-form__textarea,
.omnipop-popup.theme-neon .omnipop-form__select {
  background: rgba(57,255,20,0.05);
  border-color: rgba(57,255,20,0.3);
  color: #e0ffe0;
}
.omnipop-popup.theme-neon .omnipop-form__input:focus,
.omnipop-popup.theme-neon .omnipop-form__textarea:focus {
  border-color: #39ff14;
  box-shadow: 0 0 0 3px rgba(57,255,20,0.15);
}
.omnipop-popup.theme-neon .omnipop-form__input::placeholder { color: rgba(224,255,224,0.35); }
.omnipop-popup.theme-neon .omnipop-btn--primary { background: #39ff14; color: #0a0a0a; border-color: #39ff14; }
.omnipop-popup.theme-neon .omnipop-btn--ghost   { color: #39ff14; border-color: #39ff14; }
.omnipop-popup.theme-neon .omnipop-payment-block { background: rgba(57,255,20,0.06); }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 8: CLEAN MODERN
   White, purple gradient accents
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-modern {
  --omnipop-primary: #6c63ff;
  background: #ffffff;
  color: #1a1a2e;
  border: none;
  box-shadow: 0 24px 64px rgba(108,99,255,0.18), 0 4px 16px rgba(0,0,0,0.08);
}
.omnipop-popup.theme-modern::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6c63ff, #a78bfa, #6c63ff);
  border-radius: var(--omnipop-radius) var(--omnipop-radius) 0 0;
}
.omnipop-popup.theme-modern .omnipop-popup__close { background: #f0eeff; color: #6c63ff; }
.omnipop-popup.theme-modern .omnipop-form__input,
.omnipop-popup.theme-modern .omnipop-form__textarea,
.omnipop-popup.theme-modern .omnipop-form__select { background: #f8f7ff; border-color: #e0dcff; color: #1a1a2e; }
.omnipop-popup.theme-modern .omnipop-payment-block { background: #f8f7ff; }

/* ══════════════════════════════════════════════════════════════════════════
   THEME 9: MINIMAL PREMIUM
   Ultra-clean, subtle shadows, dark text
══════════════════════════════════════════════════════════════════════════ */
.omnipop-popup.theme-minimal {
  --omnipop-primary: #333333;
  background: #fafafa;
  color: #1a1a1a;
  border: 1px solid #e8e8e8;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  border-radius: 8px;
}
.omnipop-popup.theme-minimal .omnipop-popup__close { background: #f0f0f0; color: #333; }
.omnipop-popup.theme-minimal .omnipop-form__input,
.omnipop-popup.theme-minimal .omnipop-form__textarea,
.omnipop-popup.theme-minimal .omnipop-form__select { background: #fff; border-color: #ddd; color: #1a1a1a; }
.omnipop-popup.theme-minimal .omnipop-btn--primary { background: #1a1a1a; border-color: #1a1a1a; }
.omnipop-popup.theme-minimal .omnipop-btn--ghost   { color: #1a1a1a; border-color: #1a1a1a; }
.omnipop-popup.theme-minimal .omnipop-payment-block { background: #f0f0f0; }

/* ── Preview mode (admin) ──────────────────────────────────────────────── */
.omnipop-popup--preview {
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}