/* Raised button surfaces, shared by every route. Brand colors and existing
   sizes, labels, links, form behavior and selected states stay in their own CSS. */
:root {
  --button-rim: rgba(250, 250, 250, .46);
  --button-base: rgba(21, 21, 21, .22);
  --button-edge: #8da46e;
  --button-glow: rgba(200, 232, 158, .24);
  --button-shine: rgba(250, 250, 250, .12);
}
:root body :is(button, .btn, .btn-green, .btn-ghost, .btn-dark, .btn-outline-dark, .submit, .button, .btn-primary, input[type="submit"]):not(.opt):not(.motion-toggle) {
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 var(--button-rim),
    inset 0 -2px 0 var(--button-base),
    inset 0 12px 20px -12px var(--button-shine),
    0 3px 0 var(--button-edge),
    0 4px 3px rgba(0, 0, 0, .38),
    0 10px 24px -6px var(--button-glow);
  text-shadow: none;
  transition: box-shadow 160ms ease, translate 160ms ease, opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Quieter elevation for dark and outlined surfaces. */
:root body :is(.btn-dark, .btn-ghost, .btn-outline-dark, .secondary, .booking-back, .booking-close, .booking-slot:not([aria-pressed="true"]), .case-controls button, .learning-cart-row button, .learning-cart-heading button) {
  --button-rim: rgba(250, 250, 250, .18);
  --button-base: rgba(0, 0, 0, .38);
  --button-edge: #0a0c08;
  --button-glow: rgba(21, 21, 21, .42);
  --button-shine: rgba(250, 250, 250, .06);
}
:root body .green-bg :is(.btn-dark, .btn-outline-dark) {
  --button-glow: rgba(21, 21, 21, .38);
  --button-focus: #151515;
}

/* Replace the old diagonal offset on legacy CTA hover. Individual translate
   leaves positioning transforms on other components alone. */
:root body :is(.btn, .submit):hover,
:root body :is(.btn, .submit):focus-visible { transform: none; }

/* Button rows still fade and lift on entry, but must not crop their shadows. */
.scroll-animations-ready :is(.btn-row, .hero-actions).scroll-reveal {
  clip-path: none;
}

@media (hover: hover) and (pointer: fine) {
  :root body :is(button, .btn, .btn-green, .btn-ghost, .btn-dark, .btn-outline-dark, .submit, .button, .btn-primary, input[type="submit"]):not(.opt):not(.motion-toggle):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -1px;
    box-shadow:
      inset 0 1px 0 var(--button-rim),
      inset 0 -2px 0 var(--button-base),
      inset 0 12px 20px -12px var(--button-shine),
      0 4px 0 var(--button-edge),
      0 5px 4px rgba(0, 0, 0, .36),
      0 13px 28px -6px var(--button-glow);
  }
}
:root body :is(button, .btn, .btn-green, .btn-ghost, .btn-dark, .btn-outline-dark, .submit, .button, .btn-primary, input[type="submit"]):not(.opt):not(.motion-toggle):focus-visible {
  outline: 2px solid var(--button-focus, #c8e89e);
  outline-offset: 4px;
}
:root body :is(button, .btn, .btn-green, .btn-ghost, .btn-dark, .btn-outline-dark, .submit, .button, .btn-primary, input[type="submit"]):not(.opt):not(.motion-toggle):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 2px;
  box-shadow:
    inset 0 1px 3px rgba(21, 21, 21, .2),
    inset 0 -1px 0 var(--button-base),
    0 1px 0 var(--button-edge),
    0 2px 2px rgba(0, 0, 0, .32),
    0 4px 12px -5px var(--button-glow);
}
:root body :is(button, .btn, .btn-green, .btn-ghost, .btn-dark, .btn-outline-dark, .submit, .button, .btn-primary, input[type="submit"]):not(.opt):not(.motion-toggle):is(:disabled, [aria-disabled="true"]) {
  translate: none;
  box-shadow: inset 0 1px 0 var(--button-rim), inset 0 -1px 0 var(--button-base);
}
@media (prefers-reduced-motion: reduce) {
  :root body :is(button, .btn, .btn-green, .btn-ghost, .btn-dark, .btn-outline-dark, .submit, .button, .btn-primary, input[type="submit"]):not(.opt):not(.motion-toggle) {
    transition: none !important;
    translate: none !important;
  }
}