/* Warm frosted glass. Shared by booking links and service controls.
   Technique: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter
   The opaque color remains the fallback when backdrop filters are unavailable. */
.button-glass, .service-photo-action, .service-navigation .icon-button {
  --glass-tint: 250 248 245;
  --glass-opacity: .5;
  --glass-hover-opacity: .7;
  --glass-fallback: #f3efe8;
  --glass-highlight: .42;
  --glass-ink: #211b13;
  background-color: var(--glass-fallback);
  background-image: linear-gradient(145deg, rgb(255 255 255 / var(--glass-highlight)), rgb(255 255 255 / .03) 48%, rgb(224 200 158 / .1));
  border: 1px solid rgb(255 255 255 / .7);
  color: var(--glass-ink);
  box-shadow: inset 0 1px 0 #ffffff85, inset 0 -1px 0 #9c835a18, 0 5px 18px #35261312;
}
.button-glass-espresso {
  --glass-tint: 31 26 20;
  --glass-opacity: .9;
  --glass-hover-opacity: .98;
  --glass-fallback: #211b15;
  --glass-highlight: .1;
  --glass-ink: #fff8eb;
  border-color: #d8ba774a;
  box-shadow: inset 0 1px 0 #fff1d526, inset 0 -1px 0 #00000024, 0 5px 18px #3526131f;
}
.button-glass-gold {
  --glass-tint: 216 186 119;
  --glass-opacity: .84;
  --glass-hover-opacity: .96;
  --glass-fallback: #d8ba77;
  --glass-highlight: .26;
  --glass-ink: #261d10;
  border-color: #f3deb4b3;
  box-shadow: inset 0 1px 0 #fff6dd80, inset 0 -1px 0 #8c6b302e, 0 5px 18px #35261318;
}
.button-glass-on-dark {
  --glass-tint: 255 246 225;
  --glass-opacity: .1;
  --glass-hover-opacity: .2;
  --glass-fallback: #3b3429;
  --glass-highlight: .13;
  --glass-ink: #fff8eb;
  border-color: #fff1d85c;
  box-shadow: inset 0 1px 0 #fff9eb45, inset 0 -1px 0 #ffffff0a, 0 6px 24px #00000024;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .button-glass, .service-photo-action, .service-navigation .icon-button {
    background-color: rgb(var(--glass-tint) / var(--glass-opacity));
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
  @media (hover: hover) and (pointer: fine) {
    .button-glass:not(:disabled):not([aria-disabled=true]):hover, .service-options:not([open])>.service-photo-action:hover, .service-navigation .icon-button:not(:disabled):hover {
      background-color: rgb(var(--glass-tint) / var(--glass-hover-opacity));
    }
  }
}