/* Zabtek brand overrides for the WHMCS twenty-one theme.
 *
 * Picked up automatically: head.tpl ends with {assetExists file="custom.css"},
 * so this file needs no template edit and survives a theme update, unlike
 * editing theme.css would.
 *
 * Added 2026-09-26, when the client area moved off the legacy "default" theme.
 * The point is continuity: a customer clicking "Buy Business" on zabtek.com
 * should not feel handed to a different company at checkout.
 *
 * Colours are the site's own tokens:
 *   brand orange  #FF8705
 *   ink           #1B1F23
 *   brand text    #AD5A00  (orange dark enough to pass AA on white)
 *
 * Note the button text is INK, not white. White on #FF8705 is about 2.3:1 and
 * fails WCAG AA outright; ink on the same orange measures 6.88:1. The main site
 * makes the same choice for the same reason, and this site is sold on being
 * built to AA, so the checkout cannot quietly fail it.
 */

:root {
  --zb-brand: #FF8705;
  --zb-brand-dark: #E67A04;
  --zb-ink: #1B1F23;
  --zb-brand-text: #AD5A00;
}

/* ── primary actions ─────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background-color: var(--zb-brand);
  border-color: var(--zb-brand);
  color: var(--zb-ink);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--zb-brand-dark);
  border-color: var(--zb-brand-dark);
  color: var(--zb-ink);
}
/* Keyboard focus has to stay obvious. Bootstrap's default ring is blue and
   would be the last blue thing left on the page. */
.btn-primary:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--zb-ink);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── links ───────────────────────────────────────────────────────────────── */
a { color: var(--zb-brand-text); }
a:hover, a:focus { color: var(--zb-ink); }
/* Links sitting inside coloured or inverted furniture keep their own colour. */
.navbar a, .btn, .card-header a, .breadcrumb a { color: inherit; }
.breadcrumb a { color: var(--zb-brand-text); }

/* ── selection and progress furniture ────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--zb-brand);
  color: var(--zb-ink);
}
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
  background-color: var(--zb-brand);
  border-color: var(--zb-brand);
}
.progress-bar { background-color: var(--zb-brand); }

/* ── the order summary panel, the thing people actually read ─────────────── */
.order-summary .summary-container .title,
.cart-summary .title { border-bottom-color: var(--zb-brand); }

/* ── header ──────────────────────────────────────────────────────────────── */
/* The rendered logo is 274px wide, which is a third of a 390px phone screen.
   Cap it so the cart icon and menu button sit beside it rather than under it. */
.logo-img { max-height: 46px; width: auto; }
@media (max-width: 575px) {
  .logo-img { max-height: 38px; }
}