:root {
  --bto-btn-glass-a: rgba(255, 255, 255, 0.026);
  --bto-btn-glass-b: rgba(255, 255, 255, 0.007);
  --bto-btn-gold-border: rgba(191, 161, 129, 0.58);
  --bto-btn-gold-border-hover: rgba(191, 161, 129, 0.86);
  --bto-btn-highlight: rgba(255, 255, 255, 0.13);
  --bto-btn-highlight-soft: rgba(255, 255, 255, 0.028);
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  a.btn-shimmer,
  button.btn-shimmer,
  .btn-shimmer-icon,
  .bto-ctrl-pill,
  .btn,
  .btn-control,
  .genre-btn,
  .btn-back,
  .btn-icon,
  .lang-tab,
  .det-btn,
  .control-small,
  .artist-btn,
  .channel-btn,
  .fav-btn,
  .nav-btn,
  .link.btn-shimmer
) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--bto-btn-glass-a), var(--bto-btn-glass-b) 48%, rgba(255, 255, 255, 0));
  border: 1px solid var(--bto-btn-gold-border) !important;
  backdrop-filter: saturate(138%) contrast(116%) brightness(105%);
  -webkit-backdrop-filter: saturate(138%) contrast(116%) brightness(105%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.035),
    0 4px 10px rgba(0, 0, 0, 0.10);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  a.btn-shimmer,
  button.btn-shimmer,
  .btn-shimmer-icon,
  .bto-ctrl-pill,
  .btn,
  .btn-control,
  .genre-btn,
  .btn-back,
  .btn-icon,
  .lang-tab,
  .det-btn,
  .control-small,
  .artist-btn,
  .channel-btn,
  .fav-btn,
  .nav-btn,
  .link.btn-shimmer
)::before {
  content: "";
  position: absolute;
  inset: -36% -44%;
  background: radial-gradient(circle at 20% 26%, var(--bto-btn-highlight) 0%, var(--bto-btn-highlight-soft) 34%, rgba(255, 255, 255, 0) 66%);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  a.btn-shimmer,
  button.btn-shimmer,
  .btn-shimmer-icon,
  .bto-ctrl-pill,
  .btn,
  .btn-control,
  .genre-btn,
  .btn-back,
  .btn-icon,
  .lang-tab,
  .det-btn,
  .control-small,
  .artist-btn,
  .channel-btn,
  .fav-btn,
  .nav-btn,
  .link.btn-shimmer
)::after {
  content: "";
  position: absolute;
  inset: 18% 10%;
  border-radius: 999px;
  background: radial-gradient(120% 150% at 32% 35%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 36%, rgba(255, 255, 255, 0) 72%);
  opacity: 0.46;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  a.btn-shimmer,
  button.btn-shimmer,
  .btn-shimmer-icon,
  .bto-ctrl-pill,
  .btn,
  .btn-control,
  .genre-btn,
  .btn-back,
  .btn-icon,
  .lang-tab,
  .det-btn,
  .control-small,
  .artist-btn,
  .channel-btn,
  .fav-btn,
  .nav-btn,
  .link.btn-shimmer
) > * {
  position: relative;
  z-index: 1;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  a.btn-shimmer,
  button.btn-shimmer,
  .btn-shimmer-icon,
  .bto-ctrl-pill,
  .btn,
  .btn-control,
  .genre-btn,
  .btn-back,
  .btn-icon,
  .lang-tab,
  .det-btn,
  .control-small,
  .artist-btn,
  .channel-btn,
  .fav-btn,
  .nav-btn,
  .link.btn-shimmer
):hover {
  border-color: var(--bto-btn-gold-border-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px rgba(191, 161, 129, 0.18);
  transform: translateY(-1px);
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  a.btn-shimmer,
  button.btn-shimmer,
  .btn-shimmer-icon,
  .bto-ctrl-pill,
  .btn,
  .btn-control,
  .genre-btn,
  .btn-back,
  .btn-icon,
  .lang-tab,
  .det-btn,
  .control-small,
  .artist-btn,
  .channel-btn,
  .fav-btn,
  .nav-btn,
  .link.btn-shimmer
):active {
  transform: translateY(0) scale(0.985);
}

:where(button, input[type="button"], input[type="submit"]):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Header icon order (left -> right)
   1 Home, 2 Switch radios pages, 3 Back, 4 Dashboard, 5 Logout, 6 Burger
*/
:where(.header-right, #authArea, .actions) {
  display: flex;
  align-items: center;
}

#btnHome { order: 1; }
#btnRadios,
#btnRadios1,
#btnRadios2 { order: 2; }
#btnBack,
#btnBackStylesHeader { order: 3; }
#btnDashboard { order: 4; }
#btnLogoutHome,
#logoutBtn { order: 5; }
#burgerMenu,
.header-right > .burger-menu,
header > .flex.items-center.gap-2 > .burger-menu,
.actions > .burger-menu { order: 6; }