/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
*/

/* ═══════════════════════════════════════════════════════════════
   BACKGROUND BLOBS
   ═══════════════════════════════════════════════════════════════ */
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.bg-blob-1 {
  width: 90vw;
  height: 75vh;
  top: -20%;
  left: -25%;
  background: radial-gradient(ellipse at 40% 50%,
    rgba(130, 20, 255, 0.55) 0%,
    rgba(160, 10, 220, 0.30) 35%,
    transparent 68%);
}

.bg-blob-2 {
  width: 70vw;
  height: 65vh;
  top: -10%;
  right: -15%;
  background: radial-gradient(ellipse at 55% 40%,
    rgba(255, 30, 160, 0.52) 0%,
    rgba(220, 20, 180, 0.28) 38%,
    transparent 68%);
}

.bg-blob-3 {
  width: 80vw;
  height: 50vh;
  top: 35%;
  left: 10%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(200, 25, 210, 0.38) 0%,
    rgba(230, 40, 170, 0.20) 42%,
    transparent 70%);
}

.bg-blob-4 {
  width: 60vw;
  height: 60vh;
  bottom: -15%;
  right: -8%;
  background: radial-gradient(ellipse at 45% 52%,
    rgba(255, 20, 170, 0.45) 0%,
    rgba(180, 10, 200, 0.22) 44%,
    transparent 70%);
}

.bg-blob-5 {
  width: 55vw;
  height: 45vh;
  bottom: -10%;
  left: -15%;
  filter: blur(110px);
  background: radial-gradient(ellipse at 50% 50%,
    rgba(120, 10, 255, 0.42) 0%,
    rgba(170, 15, 230, 0.20) 42%,
    transparent 70%);
}


/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM — HEADER & FOOTER PANELS
   ═══════════════════════════════════════════════════════════════ */
.glass-panel {
  border-radius: 1.5rem !important;
  background-color: rgba(var(--cl-card), 0.22) !important;
  backdrop-filter: blur(32px) saturate(200%) brightness(1.10) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 2px 60px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(200, 25, 210, 0.20);
}


/* ═══════════════════════════════════════════════════════════════
   GLASSMORPHISM — PRODUCT / BLOG / FEEDBACK CARDS
   ═══════════════════════════════════════════════════════════════ */
.glass-card {
  border-radius: 1.5rem !important;
  background-color: rgba(var(--cl-card), 0.20) !important;
  backdrop-filter: blur(24px) saturate(190%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 4px 30px rgba(0, 0, 0, 0.38),
    0 0 40px rgba(200, 25, 210, 0.14);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.glass-card > div {
  border-radius: 1.5rem !important;
  overflow: hidden;
}

.glass-card:hover {
  background-color: rgba(var(--cl-card), 0.34) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07) inset,
    0 8px 48px rgba(0, 0, 0, 0.50),
    0 0 60px rgba(220, 30, 200, 0.28);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER BOTTOM BAR
   ═══════════════════════════════════════════════════════════════ */
footer .bg-card\/25 {
  background-color: rgba(var(--cl-card), 0.12) !important;
  border-radius: 0 0 1.5rem 1.5rem !important;
}