/* ==========================================================================
   The bridge between WHMCS's markup and the public website's design.

   Loaded ONLY on pages wearing the site shell — login, register, tickets,
   knowledgebase, checkout. It is never loaded on clientarea.php, which keeps
   hostcrafter.css's own palette and its own dark mode untouched.

   hostcrafter.css styles ~1,200 lines of WHMCS — tables, forms, status pills,
   buttons — all written against its own --hc-* tokens. Rewriting every rule to
   the site palette would be a long diff with a lot of places to miss one. So
   this file redefines those tokens in terms of the public site's, and
   hostcrafter.css re-colours itself. It loads after both, so it wins.

   Three jobs, and nothing else belongs here:

     1. point every --hc-* token at the shared palette
     2. settle the collisions between site.css and Bootstrap, which WHMCS's
        markup and JavaScript both depend on
     3. strip the checkout header down to a logo

   Anything genuinely new about the panel's appearance goes in hostcrafter.css,
   not here. This file should only ever shrink.
   ========================================================================== */

:root {
  /* 60 — neutral */
  --hc-canvas:    var(--canvas);
  --hc-surface:   var(--surface);
  --hc-surface-2: var(--canvas);
  --hc-surface-3: var(--canvas-2);
  --hc-line:      var(--line);
  --hc-line-2:    var(--line-2);

  --hc-text:   var(--ink);
  --hc-text-2: var(--ink-2);
  --hc-muted:  var(--muted);
  --hc-faint:  var(--faint);

  /* 30 — the brand indigo. Where hostcrafter.css asked for a dark navigation
     surface it now gets the same deep indigo the site's hero and footer use. */
  --hc-nav:      var(--ink-deep);
  --hc-nav-2:    var(--ink-deep-2);
  --hc-nav-3:    var(--ink-deep-2);
  --hc-nav-text: var(--on-deep);

  --hc-blue:      var(--brand);
  --hc-blue-dark: var(--brand-2);
  --hc-blue-soft: var(--brand-soft);
  --hc-blue-line: var(--brand-line);

  /* 10 — the action. Everything hostcrafter.css painted orange was a primary
     action, which is exactly what emerald is for here. */
  --hc-orange:      var(--go);
  --hc-orange-dark: var(--go-2);
  --hc-orange-soft: var(--go-soft);
  --hc-orange-line: var(--go-line);

  --hc-ok:   var(--go);      --hc-ok-soft:   var(--go-soft);   --hc-ok-line:   var(--go-line);
  --hc-warn: var(--warn);    --hc-warn-soft: var(--warn-soft); --hc-warn-line: var(--warn-line);
  --hc-bad:  #b42318;        --hc-bad-soft:  #fef3f2;          --hc-bad-line:  #fecdca;

  --hc-c-blue:  var(--c-indigo); --hc-c-blue-soft:  var(--c-indigo-s);
  --hc-c-green: var(--c-teal);   --hc-c-green-soft: var(--c-teal-s);
  --hc-c-amber: var(--c-amber);  --hc-c-amber-soft: var(--c-amber-s);
  --hc-c-red:   var(--c-rose);   --hc-c-red-soft:   var(--c-rose-s);

  --hc-sh-1: var(--sh-1);
  --hc-sh-2: var(--sh-2);
  --hc-sh-3: var(--sh-3);

  --hc-r:    var(--r-sm);
  --hc-r-lg: var(--r);
}

/* --------------------------------------------------------------------------
   The page itself.

   body.hc-site never carries the sidebar offset that body.hc-app does, so
   there is nothing to undo here — this only sets the type and ground the site
   shell expects.
   -------------------------------------------------------------------------- */
body.hc-site {
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 16px;
}

/* The content column. The public site's .wrap is the same 1180px measure, so a
   login form and a pricing page line up down the left edge. */
body.hc-site .hc-canvas {
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(3rem, 5vw, 4rem);
  min-height: 60vh;
}

/* --------------------------------------------------------------------------
   Bootstrap, which WHMCS's markup and JavaScript both depend on.

   site.css was written for a page with no Bootstrap on it, so a few of its
   base rules and Bootstrap's disagree. These are the collisions that actually
   show, not a general reset.
   -------------------------------------------------------------------------- */
.hc-site .container,
.hc-site .container-fluid { max-width: var(--wrap); }

/* site.css styles every .btn; WHMCS emits .btn-default and .btn-primary with
   Bootstrap's meaning. Map them rather than fight them. */
.hc-site .btn-default { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.hc-site .btn-default:hover { background: var(--canvas); border-color: var(--brand); color: var(--brand-2); }

/* site.css sets `img, svg { max-width: 100% }`, which collapses the inline
   icons WHMCS renders inside buttons and nav items. */
.hc-site .btn svg.i,
.hc-site .nav svg.i { max-width: none; }

/* WHMCS's own form controls, so a login box looks like the sign-in dropdown on
   the public site rather than like Bootstrap 4. */
.hc-site .form-control,
.hc-site input[type="text"], .hc-site input[type="email"],
.hc-site input[type="password"], .hc-site input[type="number"],
.hc-site select, .hc-site textarea {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  box-shadow: none;
}
.hc-site .form-control:focus,
.hc-site input:focus, .hc-site select:focus, .hc-site textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: 0;
}
.hc-site .input-group-text { background: var(--canvas); border-color: var(--line-2); color: var(--muted); }
.hc-site label { color: var(--ink); }
.hc-site .card, .hc-site .panel { background: var(--surface); border-color: var(--line); }

/* --------------------------------------------------------------------------
   Sign in with Google.

   WHMCS renders the social block as a SIBLING of the login card rather than
   inside it. Under twenty-one both were full width so it looked deliberate;
   in this shell the card is 540px in a 1116px column, which left the Google
   button floating in open space below the form looking like a mistake.

   So it is pulled back to the card's measure and given the same "or" rule the
   sign-in dropdown on the public site uses. Nothing is moved in the markup —
   this is the login page WHMCS ships, and it has to survive an update.
   -------------------------------------------------------------------------- */
.hc-site .providerLinkingFeedback {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.hc-site .providerPreLinking {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 540px;
  margin: 1.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.hc-site .providerPreLinking::before {
  content: "or";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 .7rem;
  background: var(--canvas);
  color: var(--faint);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* An empty provider block still draws its rule and its "or". */
.hc-site .providerPreLinking:empty { display: none; }

.hc-site .social-signin-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
}

/* --------------------------------------------------------------------------
   Checkout: one logo, one job.

   The markup already withholds the navigation, the burger, the account menu
   and the announcement — see header.tpl. What is left is centring what
   remains and making sure nothing WHMCS injects sneaks a way out back in.
   -------------------------------------------------------------------------- */
.hdr-bare .hdr-in {
  justify-content: space-between;
  align-items: center;
}

/* The mark is a <span> here, not an <a>. This keeps it from looking clickable
   to somebody who is deciding whether to trust the page. */
.hdr-bare .brand { cursor: default; }

.hdr-trust {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
}
.hdr-trust .fa-lock { color: var(--go); }

/* Belt and braces: if a WHMCS hook or an order-form template emits its own
   navigation into the cart, it does not get to show. */
body.hc-cart .announce,
body.hc-cart .hdr .nav,
body.hc-cart .hdr .burger,
body.hc-cart .hdr-acct { display: none !important; }

/* The order form's own sidebar goes, completely, on every step.

   It held "Categories" (the plans they did not buy), "Actions" (Register a New
   Domain, View Cart) and "Choose Currency". The first two are invitations to
   wander off mid-purchase. Currency was kept for a while on the argument that
   it is part of the buying decision — but it floated over three consecutive
   steps as a panel nobody asked for, on pages whose whole point is one
   question each. Currency belongs on the pricing page, before any of this.

   The whole rail is hidden rather than its panels one by one: a panel added
   later would otherwise reappear here on its own. */
body.hc-cart .cart-sidebar { display: none !important; }

/* And .sidebar-collapsed, which is the SAME rail printed a second time inside
   the body for narrow screens. Hiding .cart-sidebar alone left every one of
   those panels on a phone — where a wandering-off link costs the most. Our own
   checkout template omits the include; this covers the steps that don't. */
body.hc-cart .sidebar-collapsed { display: none !important; }

/* And the column it sat in gives its width back to the form. */
body.hc-cart .cart-sidebar + *,
body.hc-cart .col-md-9,
body.hc-cart .col-lg-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .hdr-trust span { display: none; }
}

/* --------------------------------------------------------------------------
   The order form.

   All of this is paired with the enhancement code in site.js. The stock
   controls are hidden ONLY under body.hc-dom-on / body.hc-config-on, classes
   that script adds after it has successfully built the replacement — so a
   failure anywhere leaves the customer with WHMCS's own form rather than an
   empty page. Nothing here is load-bearing.
   -------------------------------------------------------------------------- */

body.hc-dom-on #frmProductDomainSelections > .domain-selection-options,
body.hc-dom-on .domain-selection-options,
body.hc-dom-on #frmProductDomain { display: none !important; }

.hc-dom {
  max-width: 46rem;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}

.hc-dom-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}
.hc-dom-tab {
  flex: 1;
  padding: .85rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.hc-dom-tab:hover { color: var(--ink); }
.hc-dom-tab.is-on {
  color: var(--brand-2);
  border-bottom-color: var(--brand);
  background: var(--surface);
}

.hc-dom-panel { padding: 1.35rem; }

.hc-dom-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.hc-dom-in {
  flex: 1 1 16rem;
  min-width: 0;
  height: 46px;
  padding: 0 .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}
.hc-dom-in:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: 0;
}
.hc-dom-go { height: 46px; padding: 0 1.4rem; flex: none; }

.hc-dom-err {
  margin: .7rem 0 0;
  color: #b42318;
  font-size: .88rem;
}
.hc-dom-hint {
  margin: .7rem 0 0;
  color: var(--muted);
  font-size: .86rem;
}

/* --------------------------------------------------------------------------
   The three steps.
   -------------------------------------------------------------------------- */
.hc-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.hc-step { display: flex; align-items: center; gap: .5rem; }
.hc-step-n {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  background: var(--surface);
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  flex: none;
}
.hc-step-t { font-size: .88rem; font-weight: 600; color: var(--muted); }
.hc-step.is-on .hc-step-n { border-color: var(--brand); background: var(--brand); color: #fff; }
.hc-step.is-on .hc-step-t { color: var(--ink); }
.hc-step.is-done .hc-step-n { border-color: var(--go); background: var(--go); color: #fff; }
.hc-step.is-done .hc-step-t { color: var(--ink-2); }
.hc-step-line {
  width: clamp(1.5rem, 7vw, 5rem);
  height: 2px;
  background: var(--line-2);
  border-radius: 1px;
}
.hc-step-line.is-done { background: var(--go); }

@media (max-width: 560px) {
  .hc-step-t { display: none; }
}

.hc-step-head { text-align: center; margin-bottom: 1.25rem; }
.hc-step-head h2 { margin: 0 0 .3rem; font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.hc-step-head p { margin: 0; color: var(--muted); font-size: .92rem; }

/* --------------------------------------------------------------------------
   Step two: where it runs.
   -------------------------------------------------------------------------- */
.hc-region-big {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .85rem;
  max-width: 60rem;
  margin: 0 auto;
}
.hc-region-big .hc-region-c {
  align-items: center;
  text-align: center;
  gap: .25rem;
  padding: 1.5rem 1rem 1.25rem;
}
.hc-region-art { display: block; color: var(--brand); margin-bottom: .5rem; }
/* Bigger than the marker it replaced: a country outline needs the room to be
   read as that country, and 58px was drawn for a pin. */
.hc-region-art svg { width: 68px; height: 68px; }
.hc-region-c.is-on .hc-region-art { color: var(--panel-accent, #f2691c); }
.hc-region-big .hc-region-n { font-size: 1.05rem; }
.hc-region-note {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.4;
  margin: .35rem 0 .5rem;
}

/* Step two asks ONE question, so everything that is not that question goes.

   WHMCS lays this page out as a half-width options column beside an order
   summary. With the term gone there is one control left on it, and it was
   rendering four location cards into a 249px column. The summary is dropped
   here too — the order is reviewed on step three, which is titled "Review &
   Checkout" and does exactly that. */
body.hc-step2 .hc-cycle-host,
body.hc-step2 .hc-cycle-host + label,
body.hc-step2 .field-container:has(select[name="billingcycle"]),
body.hc-step2 select[name="billingcycle"],
/* NOT .secondary-cart-sidebar itself — the Continue button is inside it,
   beside the summary, and hiding the column took the only way forward off
   the page. Only the summary goes. */
body.hc-step2 .secondary-cart-sidebar .order-summary,
body.hc-step2 .secondary-cart-body > .sub-heading,
body.hc-step2 .hc-region-host > label,
body.hc-step2 .cart-body > .header-lined,
body.hc-step2 .cart-body > .header-lined + p { display: none !important; }

body.hc-step2 .secondary-cart-body,
body.hc-step2 .secondary-cart-sidebar,
body.hc-step2 .product-configurable-options .col-sm-6,
body.hc-step2 .product-configurable-options .col-md-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* No Continue button on step two: the location cards ARE the button. It stays
   in the DOM for the no-JavaScript path and is hidden only because this class
   is added by the script that made the cards clickable. */
body.hc-step2 .secondary-cart-sidebar { display: none !important; }

/* Step one and step two are one question each, and the question is centred
   over the thing that answers it. WHMCS left-aligns all of this: step one's
   "Choose a Domain..." heading, and step two's instruction line and product
   card above the location cards. */
body.hc-cart .cart-body > .header-lined,
body.hc-cart .cart-body > .header-lined h1,
body.hc-step2 .secondary-cart-body > p,
body.hc-step2 .product-info { text-align: center; }

/* The plan name and its line sit in a full-width band, so they are centred
   across the band. An earlier attempt capped .product-info at 34rem and
   centred inside THAT, which put the text left of the middle of the box it
   was sitting in — centred, but visibly not. */
body.hc-step2 .product-info,
body.hc-step2 .product-info .product-title { width: auto; }

/* Picking one: the card takes the click, then the page moves.

   Three things happen at once and each says something different — the chosen
   card lifts and rings (this one), the others fade back (below), and a spinner
   appears on the chosen card so the wait for step three reads as loading
   rather than as nothing happening. */
.hc-region-c {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.hc-region-c:active { transform: scale(.985); }
.hc-region-c.is-going {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft), var(--sh-2);
  transform: translateY(-3px);
  animation: hc-region-pick .35s ease;
}
@keyframes hc-region-pick {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-5px) scale(1.03); }
  100% { transform: translateY(-3px) scale(1); }
}
.hc-region.is-busy { pointer-events: none; }
.hc-region.is-busy .hc-region-c:not(.is-going) { opacity: .45; }

/* The spinner sits over the card's artwork, so the eye is already there. */
.hc-region-c .hc-spin {
  display: none;
  border-width: 2px;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  color: var(--brand);
}
.hc-region-art { position: relative; }
.hc-region-c.is-going .hc-region-art > svg { opacity: .25; transition: opacity .18s ease; }
.hc-region-c.is-going .hc-spin { display: block; }

@media (prefers-reduced-motion: reduce) {
  .hc-region-c,
  .hc-region-c.is-going { transition: none; animation: none; transform: none; }
}

/* --------------------------------------------------------------------------
   Step three — the final page, in two columns.

   The markup is orderforms/hostcrafter_cart/checkout.tpl, not an injection: every
   rule below styles server-rendered HTML that is there on first paint.

   One thing to know before editing. The ORDER FORM's own stylesheet
   (templates/orderforms/*/css/all.min.css) is pulled in by common.tpl from
   inside the page body, so it loads AFTER this file and wins every tie. Its
   layout rules are ID-scoped — `#order-standard_cart .cart-body{float:right}`
   — so nothing here can outrank them by specificity either. The answer is to
   not collide: this page's own structure uses .hc-* class names that WHMCS
   never styles. Reach for !important only where WHMCS's markup is reused.
   -------------------------------------------------------------------------- */
.hc-co-body { width: 100%; }

/* NOTE there is no `align-items: start` here, and that is deliberate: it was,
   and it silently killed the sticky panel. A grid item only stretches to the
   row's full height by default, and `start` shrank the right column to its
   content — leaving position:sticky nothing to travel inside, so the panel
   scrolled away like any other block. Stretch is what gives it the runway. */
.hc-co-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
/* Below this the panel stops being a column and becomes the last thing on the
   page — which puts the button under the form, where the thumb already is. */
@media (max-width: 900px) {
  .hc-co-cols { grid-template-columns: minmax(0, 1fr); }
}

.hc-co-h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--ink);
}

.hc-co-block {
  margin-bottom: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.hc-co-h2 {
  margin: 0 0 .9rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.hc-co-note {
  margin: -.5rem 0 .9rem;
  font-size: .86rem;
  color: var(--muted);
}
/* An invisible reCAPTCHA renders an empty block; a visible one gets centred. */
.hc-co-captcha:empty { display: none; }
.hc-co-captcha > div:not(.hc-co-h2) { display: flex; justify-content: center; }

/* ---- the account step, as two tabs ----------------------------------------
   WHMCS's own buttons stay in the page and keep their handlers; they are
   hidden and clicked by the tabs. Hiding them is why the tabs can both stay
   on screen: each of those buttons fades ITSELF out when clicked. */
.hc-acct {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-bottom: 1rem;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--canvas);
}
.hc-acct-t {
  padding: .7rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: .92rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}
.hc-acct-t:hover { color: var(--ink); }
.hc-acct-t.is-on {
  border-color: var(--brand-line);
  background: var(--surface);
  color: var(--brand-2);
  box-shadow: var(--sh-1);
}
.hc-acct-native { display: none; }

/* ---- payment methods ---- */
.hc-pay { display: grid; gap: .1rem; }
.hc-pay-o {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .55rem .2rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
/* The provider's mark, beside its name. flex:none because an inline SVG in a
   flex row is otherwise free to be squeezed to nothing by a long method name,
   which is how a logo silently becomes a sliver. */
.hc-pay-o .hc-pmi { flex: none; display: block; }
.hc-pay-n { flex: 1 1 auto; }

/* ---- the order panel ------------------------------------------------------
   Sticky in CSS. WHMCS animates margin-top on #orderSummary to fake this on
   the review page; that JavaScript is keyed on ids this page does not use, so
   it never engages here. */
.hc-sum {
  position: sticky;
  top: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.hc-sum-h {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.hc-sum-empty { margin: .8rem 0 0; color: var(--muted); font-size: .9rem; }

.hc-line {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .85rem 0;
  border-top: 1px solid var(--line);
}
.hc-sum-lines > .hc-line:first-child { border-top: 0; }
/* An addon belongs to the line above it and is removed with it. The padding
   replaces the × so its price still lines up with the prices that have one. */
.hc-line.is-sub { padding: .6rem 2.1rem .6rem 1rem; border-top: 0; }

.hc-line-b { flex: 1 1 auto; min-width: 0; }
.hc-line-n { display: block; font-weight: 650; color: var(--ink); line-height: 1.3; }
.hc-line-g { display: block; font-size: .8rem; color: var(--muted); }
/* A long domain has to wrap in a 19rem column, but break-all splits it
   anywhere — "…-preview.co / m". This breaks it only when it has to. */
.hc-line-d {
  display: block;
  font-size: .82rem;
  color: var(--brand-2);
  overflow-wrap: anywhere;
}
.hc-line-o { display: block; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.hc-line-e {
  display: inline-block;
  margin-top: .25rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand-2);
}

.hc-line-p { flex: 0 0 auto; text-align: right; }
.hc-line-amt { display: block; font-weight: 650; color: var(--ink); white-space: nowrap; }
.hc-line-cyc { display: block; font-size: .78rem; color: var(--muted); white-space: nowrap; }

.hc-x {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--faint);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.hc-x:hover { border-color: var(--line-2); background: var(--canvas); color: #b42318; }

/* ---- promo, above the total ---- */
.hc-promo {
  display: flex;
  gap: .5rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.hc-promo-in {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 .6rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .88rem;
}
.hc-promo-go {
  position: relative;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 1.1rem;
  font-size: .85rem;
  font-weight: 650;
}
/* The panel goes quiet while the coupon is checked. Pointer-events off is the
   part that matters: a second Apply mid-flight would race the first. */
.hc-sum.is-busy { pointer-events: none; }
.hc-sum.is-busy .hc-sum-lines,
.hc-sum.is-busy .hc-sum-totals,
.hc-sum.is-busy .hc-sum-due { opacity: .45; transition: opacity .15s ease; }
.hc-sum.is-busy .hc-promo-go-t { visibility: hidden; }
.hc-sum.is-busy .hc-promo-go .hc-spin { display: block; }

.hc-spin {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hc-spin .6s linear infinite;
}
@keyframes hc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hc-spin { animation-duration: 1.8s; }
}
.hc-promo.is-on {
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.hc-promo-tag {
  font-size: .86rem;
  font-weight: 650;
  color: var(--go-2);
}
.hc-promo-x { font-size: .8rem; color: var(--muted); }
.hc-promo-x:hover { color: #b42318; }
.hc-promo-msg { margin: .5rem 0 0; font-size: .82rem; color: var(--go-2); }
.hc-promo-msg.is-bad { color: #b42318; }

/* ---- totals ---- */
.hc-sum-totals {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.hc-sum-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .2rem 0;
  font-size: .88rem;
  color: var(--ink-2);
}
.hc-sum-row.is-off { color: var(--go-2); }
.hc-sum-row.is-rec { align-items: flex-start; color: var(--muted); font-size: .82rem; }
.hc-sum-row.is-rec .recurring-charges { text-align: right; }

.hc-sum-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .6rem;
  padding-top: .8rem;
  border-top: 2px solid var(--line-2);
}
.hc-sum-due-l { font-weight: 650; color: var(--ink); }
.hc-sum-due-a { font-size: 1.5rem; font-weight: 700; color: var(--ink); }

.hc-sum-tos {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: 1rem 0 0;
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-2);
  line-height: 1.45;
}
.hc-sum-tos input { margin-top: .2rem; }

.hc-sum-go {
  display: block;
  width: 100%;
  margin-top: 1rem;
}
.hc-sum-secure {
  margin: .7rem 0 0;
  font-size: .74rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}

/* The promo controls are wired to this form by their `form` attribute; it
   carries nothing itself and must never take up space. */
.hc-hidden-form { display: none; }

/* ---- what they are buying, at the foot of the main column ----------------
   In the wide column, so the list can run in rows and columns. It was in the
   21rem order panel first and eight bullet points down a strip that narrow
   read as a wall of text nobody finishes. */
.hc-win-l {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.75rem;
}
@media (max-width: 620px) {
  .hc-win-l { columns: 1; }
}
.hc-win-l li {
  position: relative;
  padding: .25rem 0 .25rem 1.4rem;
  font-size: .87rem;
  color: var(--ink-2);
  line-height: 1.5;
  /* Keep a wrapped bullet from being split across the two columns. */
  break-inside: avoid;
}
.hc-win-l li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .65rem;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--go);
  border-bottom: 2px solid var(--go);
  transform: rotate(-45deg);
}
.hc-win-h2 { margin-top: 1.1rem; }

/* The money-back line, small, beside the button. */
.hc-sum-back {
  margin: .8rem 0 0;
  padding: .6rem .7rem;
  border: 1px solid var(--go-line);
  border-radius: var(--r-sm);
  background: var(--go-soft);
  font-size: .78rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.hc-sum-back strong { color: var(--go-2); }

/* ---- billing cycle as tabs ---- */
body.hc-config-on .hc-cycle-host select[name="billingcycle"] { display: none !important; }

.hc-cycle {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .5rem;
  margin-bottom: .35rem;
}
@media (max-width: 560px) {
  .hc-cycle { grid-auto-flow: row; grid-auto-columns: auto; }
}
.hc-cycle-t {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.hc-cycle-t:hover { border-color: var(--brand-line); }
.hc-cycle-t.is-on {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  background: var(--brand-soft);
}
.hc-cycle-n { font-weight: 650; font-size: .9rem; color: var(--ink); }
.hc-cycle-p { font-size: .82rem; color: var(--muted); }
.hc-cycle-t.is-on .hc-cycle-p { color: var(--brand-2); }

/* ---- the server region as cards ---- */
body.hc-config-on .hc-region-host select[name^="configoption"] { display: none !important; }

.hc-region {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
  margin-bottom: .35rem;
}
.hc-region-c {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .85rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.hc-region-c:hover { border-color: var(--brand-line); }
.hc-region-c.is-on {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  background: var(--brand-soft);
}
.hc-region-n { font-weight: 650; font-size: .93rem; color: var(--ink); }
.hc-region-city { font-size: .8rem; color: var(--muted); }
.hc-region-p {
  margin-top: .3rem;
  font-size: .84rem;
  font-weight: 650;
  color: var(--panel-accent-dark, #d45410);
}
.hc-region-p.is-base { color: var(--muted); font-weight: 600; }
.hc-region-p.is-save { color: var(--go); }

/* The Select, which only the chosen card shows. It is a span styled as a
   button — the card itself is a <button> and buttons cannot nest. Laid out
   with height rather than display so the four cards stay the same size
   whether or not one of them is showing it; a card that grows when clicked
   makes the other three jump. */
.hc-region-go {
  display: block;
  overflow: hidden;
  height: 0;
  margin-top: .6rem;
  border-radius: var(--r-sm);
  background: var(--go);
  color: #fff;
  font-size: .85rem;
  font-weight: 650;
  line-height: 34px;
  opacity: 0;
  transition: height .16s ease, opacity .16s ease;
}
.hc-region-c.is-on .hc-region-go { height: 34px; opacity: 1; }
.hc-region-c.is-on:hover .hc-region-go { background: var(--go-2); }
.hc-region-c.is-going .hc-region-go { background: var(--go-2); }

/* Not available yet.

   Washed out and dashed rather than left out: the pricing page's map shows
   four locations, and a cart that silently offers one reads as though the
   other three were never real. The dashed edge is doing the work for anyone
   who cannot see the colour difference, and the card is a disabled <button>
   so it is announced as unavailable rather than merely looking it. */
.hc-region-c.is-off {
  background: var(--surface-2, #fafafc);
  border-style: dashed;
  border-color: var(--line-2);
  cursor: not-allowed;
  opacity: .7;
}
.hc-region-c.is-off:hover { border-color: var(--line-2); }
.hc-region-c.is-off .hc-region-art { color: var(--muted); opacity: .45; }
.hc-region-c.is-off .hc-region-n,
.hc-region-c.is-off .hc-region-city,
.hc-region-c.is-off .hc-region-note { color: var(--muted); }

.hc-region-p.is-soon {
  display: inline-block;
  margin-top: .45rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--line-2);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* The chosen card's Select must not fade with the others once a pick is being
   submitted — is-busy dims every card but the one going, and this keeps the
   button on that one legible. */
.hc-region.is-busy .hc-region-c.is-off { opacity: .3; }

@media (prefers-reduced-motion: reduce) {
  .hc-region-go { transition: none; }
}

/* --------------------------------------------------------------------------
   The order summary.

   WHMCS's is a grey panel with a grey heading. It is the last thing somebody
   reads before paying, so it gets the surface, the brand rule and the money
   set large enough to be checked at a glance.
   -------------------------------------------------------------------------- */
/* Selectors taken from the rendered page, not guessed: the panel is
   #orderSummary > .order-summary, and its heading is an h2.font-size-30 — NOT
   a .panel-heading, which is why an earlier attempt at this did nothing. */
.hc-site .order-summary {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sh-2);
  overflow: hidden;
  padding: 0;
}

.hc-site .order-summary > h2 {
  margin: 0;
  padding: .8rem 1rem;
  background: var(--ink-deep);
  color: var(--on-deep);
  font-size: 1rem !important;
  font-weight: 650;
  letter-spacing: .01em;
}

.hc-site .order-summary .summary-container { padding: 1rem; }
.hc-site .order-summary .product-name { font-weight: 650; color: var(--ink); }
.hc-site .order-summary .product-group { color: var(--muted); font-size: .84rem; }
.hc-site .order-summary .summary-totals {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--muted);
}

/* WHMCS sizes this in em against an already-large container, so it came out
   around 3rem, and nowrap then pushed "USD" past the panel edge. Sized to the
   column it actually lives in, and allowed to wrap. */
.hc-site .order-summary .total-due-today {
  margin-top: .6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: 1.45rem !important;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: normal;
  overflow-wrap: break-word;
}
/* The amount is its own <span class="amt">, and WHMCS sizes it at 2.3em from
   `#order-standard_cart .order-summary .total-due-today .amt` — an ID
   selector, which outranks any number of classes. That is why the first two
   attempts at this changed nothing on screen.

   !important is the honest fix: the alternative is copying WHMCS's id into
   our selector, which then breaks the day the order form is renamed. */
.hc-site .order-summary .total-due-today .amt {
  display: block;
  font-size: 1.55rem !important;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
}

.hc-site .order-summary .total-due-today small,
.hc-site .order-summary .total-due-today span:not(.amt) {
  display: block;
  margin-top: .15rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   The empty cart.

   Built by site.js (see emptyCart there) so the stock markup still renders if
   the script never runs. These rules only bite once it has.
   -------------------------------------------------------------------------- */
.view-cart-empty.is-hc {
  padding: clamp(2rem, 5vw, 3.25rem) 1.25rem;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
}

.hc-emptycart-h {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--ink);
}
.hc-emptycart-s {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: .92rem;
}
.hc-emptycart-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   No dark mode outside the panel.

   hostcrafter.css carries a complete dark palette, and head.tpl already pins
   data-hc-theme to "light" on these pages. This block is the second lock: if
   anything else sets the attribute, the tokens still resolve light rather than
   rendering half a dark page.
   -------------------------------------------------------------------------- */
html[data-hc-theme="dark"] {
  --hc-canvas:    var(--canvas);
  --hc-surface:   var(--surface);
  --hc-surface-2: var(--canvas);
  --hc-surface-3: var(--canvas-2);
  --hc-line:      var(--line);
  --hc-line-2:    var(--line-2);
  --hc-text:      var(--ink);
  --hc-text-2:    var(--ink-2);
  --hc-muted:     var(--muted);
  --hc-faint:     var(--faint);
  --hc-blue:      var(--brand);
  --hc-blue-dark: var(--brand-2);
  --hc-blue-soft: var(--brand-soft);
  --hc-blue-line: var(--brand-line);
  --hc-orange:      var(--go);
  --hc-orange-dark: var(--go-2);
  --hc-orange-soft: var(--go-soft);
  --hc-orange-line: var(--go-line);
  --hc-ok:   var(--go);   --hc-ok-soft:   var(--go-soft);   --hc-ok-line:   var(--go-line);
  --hc-warn: var(--warn); --hc-warn-soft: var(--warn-soft); --hc-warn-line: var(--warn-line);
  --hc-bad:  #b42318;     --hc-bad-soft:  #fef3f2;          --hc-bad-line:  #fecdca;
}

/* The scheme toggle is not rendered in this shell, but hostcrafter.js binds to
   it by attribute — hiding it costs nothing and prevents a stray button. */
body.hc-site [data-hc-theme-toggle] { display: none !important; }