/* One button look at rest (Panel: Colours & fonts > Buttons > "Same look at rest too"). Loaded before buttons.css,
 * which owns hover, press and keyboard focus. Every value is a token: ClientLook prints the Panel's choices on :root;
 * the defaults below follow the Design colours and button corners, so an empty setting still gives one style.
 * Weight, text size and a rest shadow are printed by ClientLook only when chosen; otherwise each button keeps its own.
 * Buttons joined to a field or to each other (input and button groups) keep their joined corners. */
:where(:root) {
  --nbc-btn-solid-base: var(--nbc-primary, #0948b3);
  --nbc-btn-solid-bg: var(--nbc-btn-solid-base);
  --nbc-btn-solid-text: var(--nbc-surface, #fff);
  --nbc-btn-solid-border: var(--nbc-btn-solid-base);
  --nbc-btn-light-bg: transparent;
  --nbc-btn-light-text: var(--nbc-primary, #0948b3);
  --nbc-btn-light-border: color-mix(in srgb, var(--nbc-primary, #0948b3) 30%, #fff);
  --nbc-btn-radius: var(--nbc-button-radius, 12px);
}

/* Solid: WHMCS's primary, success, info and add-to-cart buttons, submit buttons and the Panel's solid calls to action. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-primary, .btn-success, .btn-info, .btn-add, .btn-add-to-cart, input[type="submit"].btn:not(.btn-default):not(.btn-light):not([class*="secondary"]):not([class*="outline"]), .nw-btn, .nb-btn:not(.nb-btn--ghost):not(:where(.nb-hero *, .nb-cta *)), .nbc-button:not([class*="ghost"]):not([class*="outline"]):not([class*="soft"]):not([class*="light"]):not([class*="secondary"]), .nbcp-cta--solid) {
  background: var(--nbc-btn-solid-bg) !important;
  border-color: var(--nbc-btn-solid-border) !important;
  color: var(--nbc-btn-solid-text) !important;
}

/* Light: default, secondary, light and outline buttons. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .nbc-button--outline, .nbc-btn--secondary) {
  background: var(--nbc-btn-light-bg) !important;
  border-color: var(--nbc-btn-light-border) !important;
  color: var(--nbc-btn-light-text) !important;
}

/* Corners for both families, except where a button is joined to a field or another button. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-primary, .btn-success, .btn-info, .btn-add, .btn-add-to-cart, input[type="submit"].btn:not(.btn-default):not(.btn-light):not([class*="secondary"]):not([class*="outline"]), .nw-btn, .nb-btn:not(.nb-btn--ghost):not(:where(.nb-hero *, .nb-cta *)), .nbc-button:not([class*="ghost"]):not([class*="outline"]):not([class*="soft"]):not([class*="light"]):not([class*="secondary"]), .nbcp-cta--solid, .btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .nbc-button--outline, .nbc-btn--secondary):not(:is(.input-group, .btn-group, .input-group-btn, .input-group-append, .input-group-prepend) > *) {
  border-radius: var(--nbc-btn-radius) !important;
}

/* Icons and text inside a light button follow its text colour. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .nbc-button--outline, .nbc-btn--secondary) :is(i, svg) {
  color: inherit;
}

/* One button behaviour for the client area, the order form and every Panel block (Panel: Client area > Buttons).
 * Colours come from the design tokens (--nbc-primary, --nbc-ink, --nbc-focus); the behaviour from the button tokens
 * ClientLook prints on :root. This file owns hover, press and keyboard focus; buttons-rest.css (loaded before it when
 * "Same look at rest too" is on) owns the rest look.
 * The three :not(#id) steps let these rules win over older page-specific hover rules that use ids.
 * Editor toolbars (the markdown editor's Bold, Italic, Preview…) are tools, not buttons: they keep the theme's look.
 * Defaults sit in :where(:root) (no specificity), so the Panel's tokens win whichever loads first. */
:where(:root) {
  --nbc-btn-solid-base: var(--nbc-primary, #0948b3);
  --nbc-btn-hover-shade: 12%;
  --nbc-btn-press-shade: 18%;
  --nbc-btn-hover-filter: none;
  --nbc-btn-icon-nudge: 2px;
  --nbc-btn-lift: 0px;
  --nbc-btn-speed: 200ms;
  --nbc-btn-focus-width: 2px;
  --nbc-btn-focus-offset: 3px;
}

/* Solid buttons: WHMCS's primary, success, info and add-to-cart buttons, submit buttons and the Panel's solid calls to
 * action. Hover and press darken the solid colour (the Panel's solid background, else the primary colour); a gradient
 * at rest becomes that darker solid colour. Anything named "secondary" belongs to the light family. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-primary, .btn-success, .btn-info, .btn-add, .btn-add-to-cart, input[type="submit"].btn:not(.btn-default):not(.btn-light):not([class*="secondary"]):not([class*="outline"]), .nw-btn, .nb-btn:not(.nb-btn--ghost):not(:where(.nb-hero *, .nb-cta *)), .nbc-button:not([class*="ghost"]):not([class*="outline"]):not([class*="soft"]):not([class*="light"]):not([class*="secondary"]), .nbcp-cta--solid) {
  transition: background-color var(--nbc-btn-speed), border-color var(--nbc-btn-speed), box-shadow var(--nbc-btn-speed), filter var(--nbc-btn-speed), transform var(--nbc-btn-speed);
}
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-primary, .btn-success, .btn-info, .btn-add, .btn-add-to-cart, input[type="submit"].btn:not(.btn-default):not(.btn-light):not([class*="secondary"]):not([class*="outline"]), .nw-btn, .nb-btn:not(.nb-btn--ghost):not(:where(.nb-hero *, .nb-cta *)), .nbc-button:not([class*="ghost"]):not([class*="outline"]):not([class*="soft"]):not([class*="light"]):not([class*="secondary"]), .nbcp-cta--solid):is(:hover, :focus-visible):not(:disabled):not(.disabled) {
  background: var(--nbc-btn-solid-hover-bg, color-mix(in srgb, var(--nbc-btn-solid-base) calc(100% - var(--nbc-btn-hover-shade)), #000)) !important;
  border-color: color-mix(in srgb, var(--nbc-btn-solid-base) calc(100% - var(--nbc-btn-press-shade)), #000) !important;
  filter: var(--nbc-btn-hover-filter) !important;
  transform: translateY(var(--nbc-btn-lift)) !important;
}
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-primary, .btn-success, .btn-info, .btn-add, .btn-add-to-cart, input[type="submit"].btn:not(.btn-default):not(.btn-light):not([class*="secondary"]):not([class*="outline"]), .nw-btn, .nb-btn:not(.nb-btn--ghost):not(:where(.nb-hero *, .nb-cta *)), .nbc-button:not([class*="ghost"]):not([class*="outline"]):not([class*="soft"]):not([class*="light"]):not([class*="secondary"]), .nbcp-cta--solid):active:not(:disabled):not(.disabled) {
  background: color-mix(in srgb, var(--nbc-btn-solid-base) calc(100% - var(--nbc-btn-press-shade)), #000) !important;
  border-color: color-mix(in srgb, var(--nbc-btn-solid-base) calc(100% - var(--nbc-btn-press-shade) - 7%), #000) !important;
}
/* The deeper hover shadow is printed with the tokens when "Hover: deepen the shadow" is on (ClientLook::buttonTokens). */

/* Light buttons: outline, secondary, default and option buttons. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .nrd-ps-field, .nbc-button--outline, .nbc-btn--secondary) {
  transition: background-color var(--nbc-btn-speed), border-color var(--nbc-btn-speed), box-shadow var(--nbc-btn-speed), color var(--nbc-btn-speed), transform var(--nbc-btn-speed);
}
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .nrd-ps-field, .nbc-button--outline, .nbc-btn--secondary):is(:hover, :focus-visible, :active):not(:disabled):not(.disabled) {
  background-color: var(--nbc-btn-soft-hover, color-mix(in srgb, var(--nbc-primary, #0948b3) 6%, #fff)) !important;
  background-image: none !important;
  border-color: var(--nbc-btn-soft-border, color-mix(in srgb, var(--nbc-primary, #0948b3) 45%, #fff)) !important;
  transform: translateY(var(--nbc-btn-lift)) !important;
}

/* The arrow or icon at the end of a button moves on hover and keyboard focus. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn, .nw-btn, .nbc-button, .nbcp-cta, input[type="submit"]) > :is(svg, i, .icon, [class*="arrow"]):last-child {
  transition: transform var(--nbc-btn-speed);
}
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn, .nw-btn, .nbc-button, .nbcp-cta):is(:hover, :focus-visible):not(:disabled):not(.disabled) > :is(svg, i, .icon, [class*="arrow"]):last-child:not(:first-child) {
  transform: translateX(var(--nbc-btn-icon-nudge));
}

/* Keyboard focus: the hover treatment above plus one ring. */
html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn, .nw-btn, .nbc-button, .nbcp-cta, input[type="submit"], .nrd-ps-field):focus-visible {
  outline: var(--nbc-btn-focus-width) solid var(--nbc-btn-focus-ring, var(--nbc-focus, #0948b3)) !important;
  outline-offset: var(--nbc-btn-focus-offset) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn, .nw-btn, .nbc-button, .nbcp-cta, input[type="submit"], .nrd-ps-field),
  html:not(#nbc-b1):not(#nbc-b2):not(#nbc-b3) body :not(.md-header *):is(.btn, .nw-btn, .nbc-button, .nbcp-cta) > * {
    transition: none !important;
    transform: none !important;
  }
}


/* Extracted standalone theme polish: 3px scrollbars, visible only during interaction. */
.nhs-ca-scroll::-webkit-scrollbar,
.nrd-ps-scroll::-webkit-scrollbar,
.nrd-pick__list::-webkit-scrollbar{width:3px;height:3px}
.nhs-ca-scroll::-webkit-scrollbar-thumb,
.nrd-ps-scroll::-webkit-scrollbar-thumb,
.nrd-pick__list::-webkit-scrollbar-thumb{background:transparent;border:0;border-radius:999px}
.nhs-ca-scroll:hover::-webkit-scrollbar-thumb,
.nhs-ca-scroll:focus-within::-webkit-scrollbar-thumb{background:color-mix(in srgb,currentColor 35%,transparent)}
.nrd-ps-scroll:hover::-webkit-scrollbar-thumb,
.nrd-ps-scroll:focus-within::-webkit-scrollbar-thumb,
.nrd-ps-menu:hover .nrd-ps-scroll::-webkit-scrollbar-thumb,
.nrd-ps-menu:focus-within .nrd-ps-scroll::-webkit-scrollbar-thumb,
.nrd-pick__list:hover::-webkit-scrollbar-thumb,
.nrd-pick__list:focus-within::-webkit-scrollbar-thumb{background:var(--nrd-ps-accent,#6254d9)}
/* Firefox implementation is kept separate from the Chromium/WebKit styling. */
@supports (-moz-appearance: none) {
  .nhs-ca-scroll,.nrd-ps-scroll,.nrd-pick__list { scrollbar-width:thin;scrollbar-color:transparent transparent; }
  .nhs-ca-scroll:hover,.nhs-ca-scroll:focus-within { scrollbar-color:#9aa9ba transparent; }
  .nrd-ps-scroll:hover,.nrd-ps-scroll:focus-within,
  .nrd-ps-menu:hover .nrd-ps-scroll,.nrd-ps-menu:focus-within .nrd-ps-scroll,
  .nrd-pick__list:hover,.nrd-pick__list:focus-within { scrollbar-color:var(--nrd-ps-accent,#6254d9) transparent; }
}