:root {
  --liquid-glass-radius: var(--layout-shell-radius, 14px);
  --liquid-glass-border-current: rgba(199, 217, 242, 0.3);
  --liquid-glass-tint-current: rgba(255, 255, 255, 0.25);
  --liquid-glass-shine-current:
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
  --liquid-glass-shadow-current:
    0 6px 6px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 0, 0, 0.1);
  --liquid-glass-blur-current: var(--liquid-glass-blur-strong, 14px);
  --liquid-glass-saturate-current: var(--liquid-glass-saturate, 155%);
}

.liquidGlass-wrapper {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--liquid-glass-radius);
}

.liquidGlass-wrapper > .liquidGlass-effect,
.liquidGlass-wrapper > .liquidGlass-tint,
.liquidGlass-wrapper > .liquidGlass-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.liquidGlass-wrapper > .liquidGlass-effect {
  display: var(--liquid-glass-effect-display, block);
  z-index: 0;
  backdrop-filter: blur(var(--liquid-glass-blur-current)) saturate(var(--liquid-glass-saturate-current));
  -webkit-backdrop-filter: blur(var(--liquid-glass-blur-current)) saturate(var(--liquid-glass-saturate-current));
  filter: url(#glass-distortion);
}

.liquidGlass-wrapper > .liquidGlass-tint {
  z-index: 1;
  background: var(--liquid-glass-tint-current);
}

.liquidGlass-wrapper > .liquidGlass-shine {
  display: var(--liquid-glass-shine-display, block);
  z-index: 2;
  box-shadow: var(--liquid-glass-shine-current);
}

.liquidGlass-content,
.liquidGlass-wrapper > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine) {
  position: relative;
  z-index: 3;
}

.liquidGlass-content {
  width: 100%;
  font-size: inherit;
  color: inherit;
}

.liquidGlass-shell {
  border: 1px solid var(--liquid-glass-border-current);
  box-shadow: var(--liquid-glass-shadow-current);
  background: transparent;
}

.liquidGlass-solid {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--liquid-glass-radius);
}

.liquidGlass-solid::before,
.liquidGlass-solid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.liquidGlass-solid::before {
  z-index: 0;
  backdrop-filter: blur(var(--liquid-glass-blur-current)) saturate(var(--liquid-glass-saturate-current));
  -webkit-backdrop-filter: blur(var(--liquid-glass-blur-current)) saturate(var(--liquid-glass-saturate-current));
  filter: url(#glass-distortion);
}

.liquidGlass-solid::after {
  z-index: 1;
  background: var(--liquid-glass-tint-current);
  box-shadow: var(--liquid-glass-shine-current);
}

.liquidGlass-solid > * {
  position: relative;
  z-index: 3;
}

.liquidGlass--navbar,
.mg-header-shell {
  --liquid-glass-radius: var(--layout-shell-radius, 14px);
  --liquid-glass-border-current: var(--nav-shell-border, rgba(199, 217, 242, 0.3));
  --liquid-glass-tint-current: var(--nav-shell-tint);
  --liquid-glass-shine-current: var(--nav-shell-shine);
  --liquid-glass-shadow-current: var(--nav-shell-shadow);
  --liquid-glass-blur-current: var(--liquid-glass-blur-strong, 14px);
  --liquid-glass-saturate-current: var(--liquid-glass-saturate, 155%);
}

/* Shared surface for the navbar dropdown family. Structure stays component-specific. */
.nav-dropdown-surface {
  --liquid-glass-effect-display: none;
  --liquid-glass-border-current: var(--dropdown-surface-border, var(--nav-shell-border));
  --liquid-glass-tint-current: var(--dropdown-surface-tint, var(--nav-shell-tint));
  --liquid-glass-shine-current: var(--dropdown-surface-shine, var(--nav-shell-shine));
  --liquid-glass-shadow-current: var(--dropdown-surface-shadow, var(--nav-shell-shadow));
  --liquid-glass-blur-current: var(--liquid-glass-blur-strong, 14px);
  --liquid-glass-saturate-current: var(--liquid-glass-saturate, 155%);
  background: var(--dropdown-surface-bg, transparent);
  border: 1px solid var(--liquid-glass-border-current);
  box-shadow: var(--liquid-glass-shadow-current);
  backdrop-filter: blur(var(--liquid-glass-blur-current)) saturate(var(--liquid-glass-saturate-current));
  -webkit-backdrop-filter: blur(var(--liquid-glass-blur-current)) saturate(var(--liquid-glass-saturate-current));
  opacity: 0;
  pointer-events: none;
  transform: translateY(7px) translateZ(0);
  transition: opacity 170ms ease, transform 170ms ease;
  background-clip: padding-box;
  will-change: transform, opacity;
}

.nav-dropdown-surface.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) translateZ(0);
}

.nav-dropdown-surface[hidden] {
  display: none;
}

.liquidGlass--container,
.mg-service-panel {
  --liquid-glass-border-current: var(--service-panel-border, rgba(199, 217, 242, 0.3));
  --liquid-glass-tint-current: var(--service-panel-tint, rgba(255, 255, 255, 0.25));
  --liquid-glass-shine-current: var(--service-panel-shine, var(--liquid-glass-shine-current));
  --liquid-glass-shadow-current: var(--service-panel-shadow, var(--liquid-glass-shadow-current));
  --liquid-glass-blur-current: var(--liquid-glass-blur-strong, 14px);
  --liquid-glass-saturate-current: var(--liquid-glass-saturate, 155%);
}

.liquidGlass--header,
.rr-header,
.rr-suggestions {
  --liquid-glass-tint-current: var(--rr-header-tint, var(--rr-suggestions-tint, rgba(255, 255, 255, 0.25)));
  --liquid-glass-shine-current: var(--rr-header-shine, var(--rr-suggestions-shine, var(--liquid-glass-shine-current)));
  --liquid-glass-blur-current: var(--liquid-glass-blur-medium, 11px);
  --liquid-glass-saturate-current: var(--liquid-glass-saturate-soft, 145%);
}

.liquidGlass--pill,
.rr-input {
  --liquid-glass-tint-current: var(--rr-input-bg, rgba(255, 255, 255, 0.25));
  --liquid-glass-shine-current: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(8, 13, 25, 0.18);
  --liquid-glass-blur-current: var(--liquid-glass-blur-soft, 8px);
  --liquid-glass-saturate-current: var(--liquid-glass-saturate-soft, 145%);
}

.liquidGlass--card {
  --liquid-glass-radius: var(--mg-card-radius, 14px);
  --liquid-glass-border-current: var(--card-glass-border);
  --liquid-glass-tint-current: var(--card-glass-tint);
  --liquid-glass-shine-current: var(--card-glass-shine);
  --liquid-glass-shadow-current: var(--card-glass-shadow);
  --liquid-glass-blur-current: var(--card-glass-blur, var(--liquid-glass-blur-medium, 11px));
  --liquid-glass-saturate-current: var(--card-glass-saturate, 128%);
}

@media (max-width: 767.98px) {
  .liquidGlass--navbar,
  .mg-header-shell {
    --liquid-glass-tint-current: var(--nav-mobile-shell-tint, var(--nav-shell-tint));
    --liquid-glass-shine-current: var(--nav-mobile-shell-shine, var(--nav-shell-shine));
    --liquid-glass-blur-current: var(--liquid-glass-blur-medium, 11px);
    --liquid-glass-saturate-current: 128%;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquidGlass-wrapper > .liquidGlass-effect,
  .liquidGlass-solid::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .liquidGlass-wrapper > .liquidGlass-tint,
  .liquidGlass-solid::after {
    background: rgba(10, 17, 32, 0.82);
  }
}