/* ============================================
   Xpro Liquid Glass Effects
   Optimized & Fixed CSS
   ============================================ */

/* Base Variables */
:root {
  --xpro-glass-blur: 10px;
  --xpro-glass-saturation: 100%;
  --xpro-glass-brightness: 100%;
}

/* ------------------------------------------
   Standard Glass Effects (1-2, 7-10)
   ------------------------------------------ */
.xpro-glass-effect__glass1 {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.xpro-glass-effect__glass2 {
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
}

/* Enhanced Effects with Color Adjustments */
.xpro-glass-effect__glass7 {
  -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.05);
  backdrop-filter: blur(12px) saturate(180%) brightness(1.05);
  background: rgba(255, 255, 255, 0.08);
}

.xpro-glass-effect__glass8 {
  -webkit-backdrop-filter: blur(14px) contrast(130%) brightness(0.95);
  backdrop-filter: blur(14px) contrast(130%) brightness(0.95);
  background: rgba(255, 255, 255, 0.06);
}

.xpro-glass-effect__glass9 {
  -webkit-backdrop-filter: blur(10px) saturate(220%) brightness(1.1);
  backdrop-filter: blur(10px) saturate(220%) brightness(1.1);
  background: rgba(255, 255, 255, 0.1);
}

.xpro-glass-effect__glass10 {
  -webkit-backdrop-filter: blur(18px) contrast(140%) brightness(0.9);
  backdrop-filter: blur(18px) contrast(140%) brightness(0.9);
  background: rgba(255, 255, 255, 0.05);
}

/* ------------------------------------------
   Advanced Liquid Effects (3-6) with SVG
   ------------------------------------------ */
.xpro-glass-effect__glass3,
.xpro-glass-effect__glass4,
.xpro-glass-effect__glass5,
.xpro-glass-effect__glass6 {
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  transform: translateZ(0); /* GPU Acceleration */
  will-change: backdrop-filter;
}

/* SVG Filter Application */
.xpro-glass-effect__glass3 {
  -webkit-backdrop-filter: blur(8px) url(#glass-distortion1);
  backdrop-filter: blur(8px) url(#glass-distortion1);
}

.xpro-glass-effect__glass4 {
  -webkit-backdrop-filter: blur(10px) url(#glass-distortion2);
  backdrop-filter: blur(10px) url(#glass-distortion2);
}

.xpro-glass-effect__glass5 {
  -webkit-backdrop-filter: blur(6px) url(#glass-distortion3);
  backdrop-filter: blur(6px) url(#glass-distortion3);
}

.xpro-glass-effect__glass6 {
  -webkit-backdrop-filter: blur(24px) url(#glass-distortion4);
  backdrop-filter: blur(24px) url(#glass-distortion4);
}

/* ------------------------------------------
   Child Elements Inheritance
   ------------------------------------------ */
/* Standard inheritance */
.xpro-glass-effect__glass1 [class*="premium-"],
.xpro-glass-effect__glass2 [class*="premium-"],
.xpro-glass-effect__glass7 [class*="premium-"],
.xpro-glass-effect__glass8 [class*="premium-"],
.xpro-glass-effect__glass9 [class*="premium-"],
.xpro-glass-effect__glass10 [class*="premium-"] {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}

/* Advanced effects inheritance */
.xpro-glass-effect__glass3 [class*="premium-"]:not(.premium-button),
.xpro-glass-effect__glass4 [class*="premium-"]:not(.premium-button),
.xpro-glass-effect__glass5 [class*="premium-"]:not(.premium-button),
.xpro-glass-effect__glass6 [class*="premium-"]:not(.premium-button) {
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}

/* Button Pseudo-element Handling */
.xpro-glass-effect__glass3 .premium-button,
.xpro-glass-effect__glass4 .premium-button,
.xpro-glass-effect__glass5 .premium-button,
.xpro-glass-effect__glass6 .premium-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.xpro-glass-effect__glass3 .premium-button::before,
.xpro-glass-effect__glass4 .premium-button::before,
.xpro-glass-effect__glass5 .premium-button::before,
.xpro-glass-effect__glass6 .premium-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
  pointer-events: none;
}

/* Premium Widget Fixes */
[class*="xpro-glass-effect__glass"].premium-mega-content-container,
[class*="xpro-glass-effect__glass"].premium-sub-menu,
[class*="xpro-glass-effect__glass"].premium-menu-link,
[class*="xpro-glass-effect__glass"].pa-txt-sc__item-container {
  transform: translateZ(0);
}

/* ------------------------------------------
   Shadow Effects
   ------------------------------------------ */
.xpro-glass-shadow__shadow1 { box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.6) !important; }
.xpro-glass-shadow__shadow2 { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.65) !important; }
.xpro-glass-shadow__shadow3 { box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.7) !important; }
.xpro-glass-shadow__shadow4 { box-shadow: inset 0 20px 15px -5px rgba(255, 255, 255, 0.5) !important; }
.xpro-glass-shadow__shadow5 { box-shadow: inset 0 0 30px 1px rgba(255, 255, 255, 0.7) !important; }
.xpro-glass-shadow__shadow6 { box-shadow: inset 0 -20px 25px -15px rgba(255, 255, 255, 0.5) !important; }
.xpro-glass-shadow__shadow7 { box-shadow: inset 0 0 40px 5px rgba(255, 255, 255, 0.6) !important; }
.xpro-glass-shadow__shadow8 { box-shadow: inset 0 15px 15px -10px rgba(255, 255, 255, 0.45) !important; }
.xpro-glass-shadow__shadow9 { box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.12) !important; }
.xpro-glass-shadow__shadow10 { box-shadow: inset 0 20px 40px -10px rgba(255, 255, 255, 0.55), inset 0 -15px 20px rgba(255, 255, 255, 0.45) !important; }

/* ------------------------------------------
   Widget Specific Fixes
   ------------------------------------------ */
/* World Clock */
[class*="xpro-glass-effect__glass"].premium-world-clock__time-wrapper {
  border-radius: 50%;
}

/* Animated Text */
[class*="xpro-glass-effect__glass"].premium-atext__text {
  display: inline-block;
}

/* ------------------------------------------
   Browser Fallbacks
   ------------------------------------------ */
/* Safari & Firefox: Disable SVG filters */
@supports not (backdrop-filter: blur(10px) url(#glass-distortion1)) {
  .xpro-glass-effect__glass3,
  .xpro-glass-effect__glass4,
  .xpro-glass-effect__glass5,
  .xpro-glass-effect__glass6 {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* No backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  [class*="xpro-glass-effect__glass"] {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* Hide SVG elements */
[class*="xpro-glass-svg"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
