/* ==========================================================================
   ANYEVENT.IN — PREMIUM LUXURY PURPLE / LAVENDER BACKGROUND THEME ONLY
   ========================================================================== */

/* 1. Root & Global Page Atmosphere */
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #FAF9FF !important;
}

body {
  background: 
    radial-gradient(circle at 5% 15%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 95% 45%, rgba(168, 85, 247, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(109, 40, 217, 0.07) 0%, transparent 40%),
    linear-gradient(135deg, #ffffff 0%, #faf8ff 45%, #f1ebff 100%) !important;
  background-attachment: fixed !important;
}

/* Background utilities override for section backdrops only */
.bg-gray-50, 
.bg-slate-50, 
.bg-\[\#fafafb\], 
.bg-\[\#f8fafc\], 
.bg-\[\#f1f5f9\] {
  background-color: transparent !important;
}

/* 2. Reusable Decorative Background Layer & Botanical Leaves */
#ae-decorative-bg {
  position: fixed;
  inset: 0;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden;
}

/* Soft ambient gradient glows */
#ae-decorative-bg .orb-top-left {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, rgba(237, 233, 254, 0) 70%);
  filter: blur(45px);
}

#ae-decorative-bg .orb-mid-right {
  position: absolute;
  top: 30%;
  right: -100px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.10) 0%, rgba(245, 243, 255, 0) 70%);
  filter: blur(55px);
}

#ae-decorative-bg .orb-bottom-left {
  position: absolute;
  bottom: 40px;
  left: -80px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(109, 40, 217, 0.08) 0%, rgba(237, 233, 254, 0) 70%);
  filter: blur(50px);
}

/* Botanical Leaf Graphics (Left & Right) */
#ae-decorative-bg .botanical-left {
  position: absolute;
  bottom: 8%;
  left: 0;
  width: 380px;
  height: 550px;
  opacity: 0.75;
  pointer-events: none !important;
  background-image: url('./images/bg-left-leaf.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
}

#ae-decorative-bg .botanical-right {
  position: absolute;
  top: 15%;
  right: 0;
  width: 380px;
  height: 550px;
  opacity: 0.70;
  pointer-events: none !important;
  background-image: url('./images/bg-right-leaf.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
}

/* Ensure #root and all app content stay above the background layer */
#root {
  position: relative;
  z-index: 1;
}

/* Responsive background adjustment for mobile */
@media (max-width: 768px) {
  #ae-decorative-bg .botanical-left {
    width: 200px;
    height: 320px;
    bottom: 2%;
    opacity: 0.45;
  }

  #ae-decorative-bg .botanical-right {
    width: 200px;
    height: 320px;
    top: 5%;
    opacity: 0.40;
  }
}