/*
 * Global button layer — every visitor (classic portal and UI 2), on the crservers.com design
 * tokens (crs-tokens.<hash>.css: --crs-action-commercial-*). One source for button colour and
 * state across site and portal; change the tokens in crservers.com/design-system, regenerate
 * with scripts/generate-crs-tokens-css.mjs, and this file follows.
 *
 * Replaces the Theme Custom CSS defaults that painted every .btn with a gradient + white text and
 * faded it on hover (opacity .7 !important). Specificity (html body …) + !important wins over
 * those rules; page-specific CRS overrides with longer selectors still apply.
 *
 * Variants: filled = .btn / primary / success / info (commercial gradient, hover deepens);
 * outlined = secondary / default / light / outline-primary|secondary|info; danger; outline-danger;
 * link. Social sign-in (.btn-social) keeps its own look and only gets the shared states.
 * Cloudflare ignores ?v=: bump blNNN in the filename and the header <link> when this changes.
 */

html body .btn {
  border-radius: var(--crs-radius-control) !important;
  font-weight: 600;
  transition:
    background var(--crs-motion-fast) var(--crs-motion-easing),
    border-color var(--crs-motion-fast) var(--crs-motion-easing),
    color var(--crs-motion-fast) var(--crs-motion-easing),
    box-shadow var(--crs-motion-fast) var(--crs-motion-easing),
    transform var(--crs-motion-fast) var(--crs-motion-easing) !important;
}

/* No fading: hover and focus keep full opacity (fill and label stay crisp). */
html body .btn:hover,
html body .btn:focus {
  opacity: 1 !important;
}

/* Hover lift + soft shadow, as on crservers.com. Exclusions sit inside :where() so this stays at
   "html body .btn:hover" weight and never lifts links, disabled, grouped or input-addon buttons
   (split dropdowns and addons would pull apart). */
html body .btn:where(:not(.btn-link, :disabled, .disabled, .btn-group > .btn, .input-group .btn)):hover {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px);
}

html body .btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--crs-palette-blue-dark, #006390) 90%, transparent) !important;
  outline-offset: 2px;
}

/* ---- Filled (default) ----
   :where() keeps these at the weight of "html body .btn" (0,1,2): above the Theme's ".btn" rules,
   below the variant rules (".btn.btn-secondary" etc., 0,2,2), so variants always win. */
html body .btn:where(:not(.btn-link):not(.btn-social)) {
  border-color: var(--crs-action-commercial-filled-border) !important;
  background: var(--crs-action-commercial-filled-fill) !important;
  color: var(--crs-text-inverse) !important;
  -webkit-text-fill-color: var(--crs-text-inverse) !important;
}

html body .btn:where(:not(.btn-link):not(.btn-social)):hover,
html body .btn:where(:not(.btn-link):not(.btn-social)):focus {
  border-color: var(--crs-action-commercial-filled-hover-border) !important;
  background: linear-gradient(90deg, var(--crs-action-commercial-filled-hover-gradient-start) 0%, var(--crs-action-commercial-filled-hover-gradient-end) 100%) !important;
  color: var(--crs-text-inverse) !important;
  /* Always set both: a label must never keep a dark fill colour on the dark hover gradient. */
  -webkit-text-fill-color: var(--crs-text-inverse) !important;
}

/* ---- Outlined ---- */
html body .btn.btn-secondary,
html body .btn.btn-default,
html body .btn.btn-light,
html body .btn.btn-outline-primary,
html body .btn.btn-outline-secondary,
html body .btn.btn-outline-info {
  border: var(--crs-action-commercial-outline-border-width) solid var(--crs-action-commercial-outline-border-color) !important;
  background: var(--crs-action-commercial-outline-surface) !important;
  color: var(--crs-action-commercial-outline-text) !important;
  -webkit-text-fill-color: var(--crs-action-commercial-outline-text) !important;
}

html body .btn.btn-secondary:hover,
html body .btn.btn-default:hover,
html body .btn.btn-light:hover,
html body .btn.btn-outline-primary:hover,
html body .btn.btn-outline-secondary:hover,
html body .btn.btn-outline-info:hover,
html body .btn.btn-secondary:focus,
html body .btn.btn-default:focus,
html body .btn.btn-outline-primary:focus,
html body .btn.btn-outline-secondary:focus {
  border-color: var(--crs-action-commercial-filled-border) !important;
  background: var(--crs-action-commercial-outline-surface) !important;
  color: var(--crs-action-commercial-filled-hover-gradient-end) !important;
  -webkit-text-fill-color: var(--crs-action-commercial-filled-hover-gradient-end) !important;
}

/* ---- Danger ---- */
html body .btn.btn-danger {
  border-color: var(--crs-status-error) !important;
  background: var(--crs-status-error) !important;
  color: var(--crs-text-inverse) !important;
  -webkit-text-fill-color: var(--crs-text-inverse) !important;
}

html body .btn.btn-danger:hover,
html body .btn.btn-danger:focus {
  border-color: color-mix(in srgb, var(--crs-status-error) 82%, #000) !important;
  background: color-mix(in srgb, var(--crs-status-error) 82%, #000) !important;
}

html body .btn.btn-outline-danger {
  border: 2px solid var(--crs-status-error) !important;
  background: var(--crs-surface-card) !important;
  color: var(--crs-status-error) !important;
  -webkit-text-fill-color: var(--crs-status-error) !important;
}

html body .btn.btn-outline-danger:hover,
html body .btn.btn-outline-danger:focus {
  background: var(--crs-status-error) !important;
  color: var(--crs-text-inverse) !important;
  -webkit-text-fill-color: var(--crs-text-inverse) !important;
}

/* ---- Link ---- */
html body .btn.btn-link {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--crs-action-interface-fill) !important;
  -webkit-text-fill-color: var(--crs-action-interface-fill) !important;
}

html body .btn.btn-link:hover {
  color: var(--crs-action-interface-hover-fill) !important;
  -webkit-text-fill-color: var(--crs-action-interface-hover-fill) !important;
  text-decoration: underline;
}

/* ---- Disabled ---- */
html body .btn:disabled,
html body .btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .btn:where(:not(.btn-link, :disabled, .disabled, .btn-group > .btn, .input-group .btn)):hover {
    transform: none;
  }
}