/*
 * Shared tactile contract for public-facing CTAs.
 * Page styles retain ownership of color, size and layout; this layer only
 * standardizes depth and interaction geometry.
 */
:root {
  --public-button-depth: #1849BB;
  --public-button-neutral-depth: color-mix(in srgb, #ffffff 58%, #64748b 42%);
  --public-button-danger-depth: #991b1b;
  --public-button-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  --public-button-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --public-button-shadow-active: inset 0 2px 4px rgba(15, 23, 42, 0.16);
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
) {
  --public-button-local-depth: var(--public-button-depth);
  box-sizing: border-box !important;
  /* Paint the surface beneath the transparent pressed spacer as well. This
     keeps the rounded top and side edges continuous while the depth collapses. */
  background-clip: border-box !important;
  border-radius: 14px !important;
  border-top-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  box-shadow: var(--public-button-shadow) !important;
  transform: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    filter 160ms ease,
    transform 120ms ease !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  .btn-secondary,
  .btn-cancel,
  .btn-manage,
  .btn-close,
  .btn-google-login,
  .social-google-btn,
  .mobile-login-btn,
  .navbar .btn-login,
  .mobile-auth-buttons .btn-login,
  .cct-btn-ghost,
  .cct-btn-secondary
) {
  --public-button-local-depth: var(--public-button-neutral-depth);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  .btn-danger,
  .btn-delete,
  .mobile-auth-buttons .logout-btn
) {
  --public-button-local-depth: var(--public-button-danger-depth);
}

/* The homepage CTA is green, so its complete tactile edge must stay green as
   well. Pin the lateral edges in addition to the bottom depth: this prevents
   older page-level blue borders from showing through at the rounded corners. */
html:root body.tw-homepage .btn.btn-oldprimary {
  --public-button-local-depth: #1849BB;
  border-right-color: #1849BB !important;
  border-bottom-color: #1849BB !important;
  border-left-color: #1849BB !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):not(:disabled):not(.disabled):is(:hover, :focus-visible) {
  border-bottom-width: 4px !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  box-shadow: var(--public-button-shadow-hover) !important;
  filter: brightness(1.035) saturate(1.025) !important;
  transform: none !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  .btn-secondary,
  .btn-cancel,
  .btn-manage,
  .btn-close,
  .btn-google-login,
  .social-google-btn,
  .mobile-login-btn,
  .navbar .btn-login,
  .mobile-auth-buttons .btn-login,
  .cct-btn-ghost,
  .cct-btn-secondary
):not(:disabled):not(.disabled):is(:hover, :focus-visible) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):not(:disabled):not(.disabled):active {
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top: 3px solid transparent !important;
  border-right-color: transparent !important;
  border-bottom-width: 1px !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  border-left-color: transparent !important;
  box-shadow: var(--public-button-shadow-active) !important;
  filter: brightness(0.985) saturate(1.02) !important;
  outline: 0 !important;
  transform: none !important;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    filter 160ms ease,
    transform 120ms ease !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):focus-visible {
  outline: 3px solid rgba(47, 107, 255, 0.2) !important;
  outline-offset: 2px !important;
}

html:root body :is(
  .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
  a.btn,
  button.btn,
  .btn-login,
  .btn-register,
  .btn-enter,
  .btn-oldprimary,
  .mobile-login-btn,
  .mobile-register-btn,
  .mobile-auth-buttons .logout-btn,
  .submit-btn,
  .contact-btn,
  .checkout-btn,
  .btn-checkout,
  .btn-confirm,
  .btn-google-login,
  .social-google-btn,
  .cct-btn
):is(:disabled, .disabled) {
  --public-button-local-depth: var(--public-button-neutral-depth);
  border-top-width: 0 !important;
  border-bottom-width: 4px !important;
  border-bottom-color: var(--public-button-local-depth) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  filter: none !important;
  transform: none !important;
}

/* Homepage hero secondary CTA: its page-specific hover rule previously
   recoloured only the lateral borders while the tactile depth retained the
   shared neutral tone. Keep a single surface/border/depth construction so the
   button remains one seamless object during press. */
html:root body.tw-homepage .hero .btn.btn-secondary {
  --home-secondary-surface: #ffffff;
  --home-secondary-border: #d6dfec;
  --home-secondary-depth: var(--public-button-neutral-depth);
  --public-button-local-depth: var(--home-secondary-depth);
  background: var(--home-secondary-surface) !important;
  border-top: 0 solid transparent !important;
  border-right: 1px solid var(--home-secondary-border) !important;
  border-bottom: 4px solid var(--home-secondary-depth) !important;
  border-left: 1px solid var(--home-secondary-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

html:root body.tw-homepage .hero .btn.btn-secondary:is(:hover, :focus-visible) {
  background: var(--home-secondary-surface) !important;
  border-right-color: var(--home-secondary-border) !important;
  border-bottom-color: var(--home-secondary-depth) !important;
  border-left-color: var(--home-secondary-border) !important;
  box-shadow:
    0 0 0 3px rgba(100, 116, 139, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  filter: brightness(1.012) saturate(1.01) !important;
}

html:root body.tw-homepage .hero .btn.btn-secondary:active {
  background: var(--home-secondary-surface) !important;
  background-clip: border-box !important;
  background-origin: border-box !important;
  border-top: 3px solid var(--home-secondary-surface) !important;
  border-right-color: transparent !important;
  border-bottom-width: 1px !important;
  border-bottom-color: var(--home-secondary-depth) !important;
  border-left-color: transparent !important;
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12) !important;
  filter: brightness(0.99) saturate(1.01) !important;
  transform: none !important;
}

/* Mobile presses begin without a hover phase. Remove the resting inset shine
   immediately so it cannot linger across the newly contracted top corners. */
@media (max-width: 1372px), (pointer: coarse) {
  html:root body :is(
    .public-tactile-specificity.public-tactile-specificity.public-tactile-specificity,
    a.btn,
    button.btn,
    .btn-login,
    .btn-register,
    .btn-enter,
    .btn-oldprimary,
    .mobile-login-btn,
    .mobile-register-btn,
    .mobile-auth-buttons .logout-btn,
    .submit-btn,
    .contact-btn,
    .checkout-btn,
    .btn-checkout,
    .btn-confirm,
    .btn-google-login,
    .social-google-btn,
    .cct-btn
  ):not(:disabled):not(.disabled):active {
    box-shadow: none !important;
    transition:
      background-color 160ms ease,
      color 160ms ease,
      filter 160ms ease,
      transform 120ms ease !important;
  }
}