/* Liquid Glass Button - Simplified, Working Implementation */

.button-liquid {
  position: relative;
  isolation: isolate;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
}

.dark .button-liquid {
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
}

/* Inner glow/shadow effect */
.button-liquid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 15px -3px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

.dark .button-liquid::before {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 15px -3px rgba(255, 255, 255, 0.3);
}

/* Frosted backdrop layer with distortion */
.button-liquid::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  filter: url('#liquid-button-distortion');
  -webkit-filter: url('#liquid-button-distortion');
  pointer-events: none;
}

/* Ensure button text stays on top */
.button-liquid > * {
  position: relative;
  z-index: 1;
}

/* Hover state */
.button-liquid:hover {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.button-liquid:hover::before {
  background: rgba(255, 255, 255, 0.25);
}

.dark .button-liquid:hover::before {
  background: rgba(255, 255, 255, 0.1);
}

/* Active/pressed state */
.button-liquid:active {
  transform: scale(0.98);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
