/* OHELP LIQUID GLASS BUTTON SYSTEM */

:root {
  --glass-surface: rgba(255,255,255,.19);
  --glass-border: rgba(255,255,255,.48);
  --glass-shadow: 0 5px 20px rgba(15,35,70,.13);
  --glass-blue: rgba(0,105,255,.75);
}

@supports (backdrop-filter: blur(10px)) {
  button,
  .btn,
  .button,
  a.btn,
  a.button,
  [role="button"] {
    backdrop-filter: blur(18px) saturate(175%);
    -webkit-backdrop-filter: blur(18px) saturate(175%);
  }
}

button,
.btn,
.button,
a.btn,
a.button,
[role="button"] {
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background-image: linear-gradient(
    145deg,
    rgba(255,255,255,.24),
    rgba(255,255,255,.055)
  );
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    var(--glass-shadow);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):active,
.btn:not(:disabled):active,
[role="button"]:active {
  transform: scale(.965);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.10),
    0 2px 8px rgba(0,0,0,.08);
}

button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 3px;
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

button,
.btn,
.button {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: reduce) {
  button, .btn, .button, [role="button"] {
    transition: none;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  button, .btn, .button, [role="button"] {
    background-color: rgba(235,242,250,.94);
  }
}

/* OHELP_GLASS_PRIORITY_V2 */

:is(button,.btn,.button,a.btn,a.button,[role="button"]):not(:disabled) {
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.48) !important;

    background-image: linear-gradient(
        145deg,
        rgba(255,255,255,.32),
        rgba(255,255,255,.06)
    ) !important;

    backdrop-filter: blur(22px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(190%) !important;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.55),
        0 8px 24px rgba(0,30,90,.16) !important;

    transition: transform .18s ease,box-shadow .18s ease !important;
}

:is(button,.btn,.button,[role="button"]):not(:disabled):active {
    transform: scale(.96) !important;
}

@media (prefers-reduced-motion: reduce) {
    button,.btn,.button,[role="button"] {
        transition: none !important;
    }
}