/* ============================================================
   Time4VPS checkout redesign — content styles
   Scoped under .co-v4-scope so it never leaks into design11 chrome
   (header / sidebar / footer stay untouched).
   Reused across order steps — keep the .stepper block generic.
   ============================================================ */

/* ---------- Deployment gotchas (v=15) ----------
   If a shipped fix shows no visible effect at all: (1) a template rename fix only
   works once the OLD filename is deleted from the server - a zip upload doesn't
   delete missing files; (2) HostBill may cache compiled Smarty templates by file
   mtime, so a re-extract that doesn't bump mtimes can keep serving old output;
   (3) hard-refresh/incognito to rule out browser/CDN HTML caching. See the
   file-map doc's diagnostic-technique list for the full checklist. */

/* v=38 fix: overflow-x:hidden -> overflow-x:clip. Per the CSS Overflow spec, setting
   only overflow-x (not overflow-y) makes the browser silently compute overflow-y as
   `auto`, turning .co-v4-scope into a scroll container - which changes what
   `.summary{position:sticky;top:18px}` measures `top` against, producing an
   ~18px offset. `clip` is exempted from that auto-coercion (unlike `hidden` on
   either/both axes), so it keeps the same horizontal clipping without creating a
   scroll container. Verified via Playwright; no JS reads scrollTop/Left on this
   element. */
.co-v4-scope{
  --ink:#0d1323; --card:#ffffff; --line:#e6ebf2; --muted:#64707f; --text:#1a2230;
  --brand:#d1332e; --brand-strong:#a5241f; --save:#0d8a3d;
  --radius:14px; --shadow:0 1px 2px rgba(13,19,35,.04),0 12px 34px rgba(13,19,35,.07);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  width:100%; max-width:100%; overflow-x:clip;
}
.co-v4-scope *{box-sizing:border-box}
.co-v4-scope a{color:var(--brand);text-decoration:none}
.co-v4-scope h1,.co-v4-scope h2,.co-v4-scope h3,.co-v4-scope h4{margin:0;color:var(--ink)}

/* ---------- Legacy page-shell overrides ----------
   Chrome structure: #main_row > #left_content.span10 (Bootstrap 2, hard-coded
   width:780px, not a max-width) > #cart.cart-wrapper > #cont. Widening #cart alone
   does nothing - #left_content itself must be widened first, since #cart just fills
   whatever width #left_content gives it. Scoped to >=1200px, matching
   cart.sidemenu.tpl's own breakpoint for #sidemenu/#floater. Only loads on
   cart3.tpl/cart4.tpl - cart0/1/2/5 keep their original layout. */
@media (min-width: 1200px) {
  #left_content:has(#cart){float:none !important;width:100% !important;margin:0 !important;overflow:visible !important}
  #cart{max-width:1180px !important}
  #sidemenu{width:370px !important}
  #floater{width:370px !important}
  #cont{display:flow-root}
}

/* v=56 fix: invoice.tpl (step 3) never gets a #cart wrapper at all - header.tpl only
   renders one when $cmd=='cart', and invoice.tpl's own $cmd isn't 'cart', so the
   #cart{max-width:1180px} cap (and its inherited margin:auto centering) above never
   applies here. .co-v4-scope itself was still width:100% with no cap, so on a wide
   viewport (e.g. browser zoomed out) .grid stretched to fill the entire #left_content,
   making .col-main balloon far past the invoice iframe's own fixed 650px natural
   width and leaving a large, uncentered gap before the sidebar. Capping .co-v4-scope
   the same way #cart is capped elsewhere fixes it; scoped to `.content-wrapper
   .co-v4-scope` so it can only ever match invoice.tpl (the only one of the four
   pages that load this file which ever renders through that non-#cart branch). */
@media (min-width: 1200px) {
  .content-wrapper .co-v4-scope{max-width:1180px !important;margin:0 auto !important}
}
/* v=71 fix: the rule above only matches when header.tpl emits `.content-wrapper`, and
   header.tpl only does that when `$tpl_path` does NOT contain 'design11' (see its
   `in_array('design11',$tpl_path)` branch). On a theme folder literally named design11
   (live) that wrapper is never output, so the invoice page lost both the 1180px cap /
   centering AND the `.spacing` side padding and sat flush against the left edge.
   invoice.tpl now also tags its root with `.co-v4-invoice`; this does not depend on any
   wrapper. The padding rule only applies when the root is a direct child of
   #left_content (i.e. no .spacing wrapper around it), so dev, which still has the
   wrapper, is unchanged. */
.co-v4-scope.co-v4-invoice{box-sizing:border-box}
@media (min-width: 1200px) {
  .co-v4-scope.co-v4-invoice{max-width:1180px !important;margin-left:auto !important;margin-right:auto !important}
}
#left_content > .co-v4-scope.co-v4-invoice{padding:20px 20px 0}
/* Each !important above defeats a specific pre-existing conflict (full history in the
   changelog, v=19 through v=25 and v=33):
   - float:none / margin:0: without `.row-fluid` (only added when $cmd!='cart'),
     #left_content never gets Bootstrap's float, so nothing else here can rely on
     float-based auto-positioning. `!important` also defeats an unscoped
     bootstrap-responsive.css rule (`[class*="span"]{margin-left:auto}`) that
     centers it instead of hugging the sidebar - a plain sidebar-hugging margin:0
     is needed to keep the vertical divider line flush against the sidebar in every
     fold state.
   - overflow:visible: ca11_main.css's own sitewide `overflow:hidden` on
     #left_content makes it a second, nested block-formatting context that
     double-avoids the floated sidebar (on top of #main-section's own avoidance),
     shifting content right by the sidebar's width. Only overridden here, not
     globally, since other pages rely on that overflow:hidden for width-transition
     clipping.
   - #cart's own max-width (not #left_content's): #left_content must stay
     UNCAPPED (matching its own width:100%) so #cart's inherited `margin:auto`
     (from clientarea.css, untouched) has real slack to center within - capping
     both to the same width is indistinguishable from flush-left, regardless of
     margin:auto. */

/* .force-fold #main-section{margin-left:68px} below: the original theme only ever
   defined `.force-fold.unfold #main-section{margin-left:210px}` (expanded state) -
   there was no counterpart for the collapsed state (plain .force-fold, no .unfold),
   since force-fold only applies to cart pages and this gap never mattered before.
   Scoped to >=768px: below that, ca11_main.css turns the sidebar into an off-canvas
   overlay that takes no horizontal space, and this rule would wrongly push content
   right with nothing to cancel it out. */
@media (min-width: 768px) {
  .force-fold #main-section{margin-left:68px}
}

/* #main-side/header/nav's own border-right (clientarea.css) is correct, intended
   chrome on every page - an earlier attempt here to hide it as a "stray line" was
   wrong and was reverted. */

/* #section-border (footer.tpl's <div>, absolutely positioned, full page height) draws
   one continuous divider from header to footer, by original design - not something
   to shrink to footer-height (an earlier attempt to do that was reverted too).

   Its margin-left needs to track the sidebar's actual rendered width, which the stock
   theme only handles for `.unfold` (expanded, `margin-left:210px` in clientarea.css) -
   collapsed-with-hover is the one state with no matching rule, since sidehover()
   (script.js) adds `#main-side.hover` only when `.unfold` is ABSENT. Hence the rule
   below - it's the one gap in the stock theme's own margin-syncing, not a new
   mechanism. (Full history of two wrong attempts before finding this, in the
   changelog's v=16-v=20 rows.) */
#page:has(#main-side.hover) #section-border{
    margin-left: 210px;
}

/* .force-fold.unfold #main-side nav{border-right:none !important} below: `force-fold`
   only applies on cart pages ($cmd=='cart'), and only cart pages default to
   `.force-fold.unfold` together on load - triggering `.force-fold.unfold #main-side
   nav{border-right:1px solid #000}` in clientarea.css on top of nav's header
   sibling's own always-on border. Every other page only ever gets plain `.unfold`,
   which doesn't match that compound selector, so nav never gets a second border
   there. Removing it here makes cart pages consistent with everywhere else: header
   always bordered, nav only on genuine hover (untouched). */
.force-fold.unfold #main-side nav{border-right:none !important}

/* #login-widget{display:none} below: footer.tpl's global login overlay
   (`ajax.login.tpl` with loginwidget=true) sometimes renders in-flow/unstyled below
   the footer instead of as its intended full-screen modal - no template this project
   touches sets the `$loginpage` flag controlling it, so the trigger is HostBill-core,
   not traceable further from template source. Redundant regardless: step 2 already
   has its own dedicated login panel, and step 1 never needs a guest to log in. Only
   applies on these 3 checkout templates. */
#login-widget{display:none !important}

/* The 3 rules below hide a DIFFERENT stray login form - not #login-widget, and not
   this project's current ajax.login.v4step2.tpl (confirmed by id: v4-login-email/
   v4-login-pass/v4-login-btn/v4SetCustMode() are an older naming scheme, predating
   the current loginfield_username/v4SwitchContact() system - this exact markup
   exists in no current or historical file in this project). Source unknown (stale
   compiled template or an unaudited file elsewhere); hides it by its confirmed live
   ids/attributes instead. `:has()` targets only these specific elements, so it can't
   affect the real, current login/signup panels (different ids throughout). */
.form-grid:has(#v4-login-email){display:none !important}
div:has(> #v4-login-btn){display:none !important}
div:has(> a[onclick*="v4SetCustMode"]){display:none !important}

/* ---------- Progress stepper (reusable across steps) ---------- */
.co-v4-scope .stepper{display:flex;align-items:center;gap:0;margin:2px 0 4px;min-width:0}
.co-v4-scope .stepper .st{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.co-v4-scope .stepper .st .lb{min-width:0;overflow:hidden}
.co-v4-scope .stepper .st .lb b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.co-v4-scope .stepper .st .n{width:30px;height:30px;border-radius:50%;
  background:#fbdedc;color:#b0524f;display:grid;place-items:center;
  font-weight:800;font-size:14px;flex:0 0 30px}
.co-v4-scope .stepper .st .lb b{color:var(--ink);font-size:13.5px}
.co-v4-scope .stepper .st .lb small{color:var(--muted);font-size:11.5px;display:block}
.co-v4-scope .stepper .bar{flex:1;height:3px;background:#e2e8f0;margin:0 12px;border-radius:3px}
.co-v4-scope .stepper .st.active .n{background:var(--ink);color:#fff;box-shadow:0 0 0 4px rgba(13,19,35,.18)}
.co-v4-scope .stepper .st.done .n{background:var(--ink);color:#fff}
.co-v4-scope .stepper .bar.done{background:var(--ink)}

/* ---------- Layout ---------- */
.co-v4-scope .grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.co-v4-scope .col-main{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- Cards ---------- */
/* v=37 fix: added overflow:hidden. .card has border-radius but never clipped
   children, so a child's own background color (.summary .hd's #eef1f6) painted
   square corners poking past the card's rounded ones. Checked every .card
   descendant that escapes its box on purpose (badges, dropdowns) - none are
   affected, since the one such element (.bc-badge) lives in .bcard, not .card. */
.co-v4-scope .card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.co-v4-scope .card .hd{padding:16px 20px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.co-v4-scope .card .bd{padding:20px}

/* ---------- Pending hero ---------- */
.co-v4-scope .pending{display:flex;gap:16px;align-items:flex-start}
.co-v4-scope .pending .p-ic{width:56px;height:56px;border-radius:50%;background:#fbdedc;
  color:var(--brand);display:grid;place-items:center;flex:0 0 56px}
.co-v4-scope .pending h2{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.co-v4-scope .pending p{margin:6px 0 0;font-size:14.5px;color:var(--muted);line-height:1.55;max-width:52ch}
.co-v4-scope .pending p b{color:var(--ink);font-weight:700}

/* ---------- Review rows ---------- */
.co-v4-scope .review-item{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.co-v4-scope .review-item:last-child{border-bottom:0}
.co-v4-scope .review-item .k{color:var(--muted)}
.co-v4-scope .review-item .val{color:var(--ink);font-weight:600}
.co-v4-scope .inv-link{color:var(--brand);font-weight:700}
.co-v4-scope .inv-link:hover{text-decoration:underline}

/* #v4Stepper wraps both the stepper and trust-bar so they relocate together as one
   band; this margin keeps the gap the trust-bar used to provide as a separate
   sibling. */
#v4Stepper{margin-bottom:20px}

/* ---------- Trust bar ---------- */
.co-v4-scope .trust-bar{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 18px}
.co-v4-scope .trust-bar .tb-items{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.co-v4-scope .trust-bar .tb-item{display:flex;align-items:center;gap:9px;font-size:13.5px;
  font-weight:600;color:var(--ink)}
.co-v4-scope .trust-bar .tb-item .tb-ic{color:#0d8a3d;display:grid;place-items:center;flex:0 0 auto}
.co-v4-scope .trust-bar .tb-trust{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--muted);flex-wrap:wrap}
.co-v4-scope .trust-bar .tb-trust b{color:var(--ink);font-weight:700}
.co-v4-scope .trust-bar .tb-stars{display:inline-flex;gap:2px}
.co-v4-scope .trust-bar{flex-wrap:wrap;row-gap:8px}
.co-v4-scope .trust-item{width:180px;max-width:100%;flex:0 0 auto}
.co-v4-scope .trust-bar .tb-star{background:#00b67a;color:#fff;width:20px;height:20px;
  display:grid;place-items:center;font-size:13px;line-height:1;border-radius:2px}

/* ---------- Promo banner (points at the promo field in the cart summary) ---------- */
.co-v4-scope .promo-banner{background:#fff;color:var(--brand);border:1.5px solid var(--brand);
  border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;
  font-size:13.5px;margin-top:14px;
  box-shadow:0 0 0 3px rgba(209,51,46,.12),0 4px 18px rgba(209,51,46,.18)}
.co-v4-scope .promo-banner .pb-ic{font-size:20px;flex:0 0 auto}
.co-v4-scope .promo-banner b{font-weight:800;color:var(--brand)}
.co-v4-scope .promo-banner div{color:var(--text)}

/* ---------- Summary ---------- */
.co-v4-scope .summary{position:sticky;top:18px;border:1px solid var(--line)}
.co-v4-scope .summary .hd{background:#eef1f6;color:var(--ink);border-bottom:1px solid var(--line)}
.co-v4-scope .sum-line{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;gap:12px}
.co-v4-scope .sum-line .muted{color:var(--muted)}
.co-v4-scope .sum-line .val{color:var(--ink);font-weight:600}
.co-v4-scope .sum-sep{border-top:1px dashed var(--line);margin:8px 0}
.co-v4-scope .sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.co-v4-scope .sum-total .lbl{font-weight:800;color:var(--ink)}
.co-v4-scope .sum-total .big{font-size:28px;font-weight:900;color:var(--ink);letter-spacing:-.5px}
.co-v4-scope .permo-badge{color:var(--muted);font-size:12px;text-align:right;margin-top:2px}

/* ---------- Cart summary sidebar (new design) ---------- */
/* The raw #cart_contents table (ajax.cart.summary.tpl) is kept fully intact
   in the DOM for the GA4 tracking script — these two rows (item name,
   item cycle/price) are only visually hidden in favor of the single
   combined .cs-item-line row rendered just above the table. */
.cart-summary-v4 .cs-hide-row{display:none}
.cart-summary-v4 .cs-item-line{font-weight:600}
.cart-summary-v4 .cs-item-line .val{font-weight:600}
.cart-summary-v4 .cs-cycle{font-weight:400}
.cart-summary-v4 .cs-savings{background:#e9f7ef;color:#0d8a3d;border-radius:8px;
  padding:8px 10px;font-size:12.5px;margin:10px 0 4px;font-weight:600}
.cart-summary-v4 .cs-savings b{font-weight:800}
.cart-summary-v4 .cs-promo-link strong{color:var(--brand);font-size:12.5px}
.cart-summary-v4 .cs-guarantee{margin-top:12px;padding-top:0;border-top:0;justify-content:flex-start;text-align:left}

/* ---------- Buttons ---------- */
.co-v4-scope .btn{display:block;width:100%;border:0;border-radius:11px;padding:15px;
  font-size:16px;font-weight:800;cursor:pointer;text-align:center;transition:.15s;margin-top:16px}
.co-v4-scope .btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-strong));
  color:#fff;box-shadow:0 6px 18px rgba(209,51,46,.32)}
.co-v4-scope .btn-primary:hover{background:linear-gradient(180deg,var(--brand-strong),var(--brand-strong))}

.co-v4-scope .after-cta{display:flex;gap:7px;align-items:center;justify-content:center;
  margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
.co-v4-scope .after-cta svg{color:var(--save);flex:0 0 auto}
.co-v4-scope .guarantee{display:flex;gap:10px;align-items:center;justify-content:center;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.co-v4-scope .guarantee b{color:var(--ink)}
/* v=66: refund-policy link inside the guarantee note (cart / invoice / domain config). */
.co-v4-scope .guarantee a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.co-v4-scope .guarantee a:hover{color:var(--brand-strong)}
.co-v4-scope .guarantee svg{color:var(--save);flex:0 0 auto}

/* ---------- Stay / exit-intent modal ---------- */
.co-v4-scope .stay-overlay{position:fixed;inset:0;background:rgba(13,19,35,.55);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:9999}
.co-v4-scope .stay-overlay.show{display:flex}
.co-v4-scope .stay-modal{background:#fff;border-radius:16px;max-width:440px;width:100%;
  padding:28px 26px 24px;text-align:center;box-shadow:0 24px 60px rgba(13,19,35,.35)}
.co-v4-scope .stay-modal .sm-ic{width:60px;height:60px;border-radius:50%;background:#fbdedc;
  color:#d1332e;display:grid;place-items:center;margin:0 auto 16px}
.co-v4-scope .stay-modal h3{font-size:21px;font-weight:800;color:#0d1323;letter-spacing:-.3px;margin:0}
.co-v4-scope .stay-modal p{margin:8px 0 0;font-size:14.5px;color:#64707f;line-height:1.55}
.co-v4-scope .stay-modal p b{color:#0d1323;font-weight:700}
.co-v4-scope .stay-modal .sm-total{margin:16px 0 4px;font-size:13px;color:#64707f}
.co-v4-scope .stay-modal .sm-total b{font-size:22px;font-weight:900;color:#0d1323;
  letter-spacing:-.5px;display:block;margin-top:2px}
.co-v4-scope .stay-modal .sm-pay{display:block;width:100%;border:0;border-radius:11px;padding:15px;
  font-size:16px;font-weight:800;cursor:pointer;color:#fff;margin-top:16px;
  background:linear-gradient(180deg,#d1332e,#a5241f);
  box-shadow:0 6px 18px rgba(209,51,46,.32);transition:.15s}
.co-v4-scope .stay-modal .sm-pay:hover{background:#a5241f}
.co-v4-scope .stay-modal .sm-leave{background:none;border:0;color:#64707f;font-size:13px;
  font-weight:600;cursor:pointer;margin-top:12px;padding:6px}
.co-v4-scope .stay-modal .sm-leave:hover{color:#0d1323}
.co-v4-scope .stay-modal .sm-reassure{margin-top:14px;padding-top:14px;border-top:1px dashed #e6ebf2;
  font-size:12px;color:#64707f;display:flex;gap:7px;align-items:center;justify-content:center}
.co-v4-scope .stay-modal .sm-reassure svg{color:#0d8a3d;flex:0 0 auto}

/* ---------- Payment method (moved here from the old side-by-side payform) ---------- */
.co-v4-scope .pay-block{margin:14px 0 4px}
.co-v4-scope .pay-label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.co-v4-scope .pay-select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;color:var(--ink);background:#fff;margin-bottom:12px}
.co-v4-scope .pay-gateway{width:100%}
/* v=69: card-storage consent checkbox above the card form, and the locked state
   of the form until it is ticked. [inert] (set by JS) blocks mouse AND keyboard;
   pointer-events:none is only a fallback for browsers without inert support. */
.co-v4-scope .cc-consent{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  font-size:12.5px;line-height:1.45;color:var(--text);font-weight:400}
.co-v4-scope .cc-consent:has(input:checked){border-color:var(--ink)}
.co-v4-scope .cc-consent input[type="checkbox"]{flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;cursor:pointer}
.co-v4-scope .cc-consent a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.co-v4-scope .cc-consent-hint{margin:0 0 10px;font-size:12px;color:var(--muted)}
.co-v4-scope .pay-gateway.v4-cc-locked{opacity:.45;pointer-events:none;user-select:none}
/* Each HostBill gateway module renders its own markup/button inside #gateway
   (module HTML we don't control) — these rules just make the common cases
   (buttons, forms) sit flush and full-width inside our card instead of
   whatever fixed width the original side-column CSS gave them. */
.co-v4-scope .pay-gateway form{width:100%}
.co-v4-scope .pay-gateway input[type="submit"],
.co-v4-scope .pay-gateway button,
.co-v4-scope .pay-gateway .btn-paynow2{width:100%;display:block;box-sizing:border-box}
.co-v4-scope .pay-remove-cc{margin-top:8px;font-size:12px;text-align:center;color:var(--muted);line-height:1.45}
.co-v4-scope .pay-remove-cc a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- Credit / coupon widgets (moved here from the old backlink row) ---------- */
.co-v4-scope .pay-extra{font-size:13px;color:var(--muted);margin:0 0 12px;padding-bottom:12px;
  border-bottom:1px dashed var(--line)}
.co-v4-scope .pay-extra a,
.co-v4-scope .couponlink{color:var(--brand);font-weight:600;cursor:pointer}
.co-v4-scope .pay-extra form{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.co-v4-scope .pay-mini-input{flex:1;min-width:80px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:13px}
.co-v4-scope .pay-mini-btn{padding:8px 14px;border:0;border-radius:8px;background:var(--ink);
  color:#fff;font-weight:700;font-size:13px;cursor:pointer}

/* ---------- Compact "processing time" note, next to payment method ---------- */
.co-v4-scope .pay-note{background:#fffbe0;border-left:3px solid #ffeb3b;border-radius:6px;
  padding:9px 12px;font-size:12.5px;color:#6b6420;margin:2px 0 14px}
.co-v4-scope .pay-note b{color:#4a4515}

/* ---------- Invoice actions sidebar (print / download / cancel) ---------- */
.co-v4-scope .inv-actions{display:flex;flex-direction:column;gap:4px}
.co-v4-scope .inv-action{display:flex;align-items:center;gap:10px;padding:11px 6px;
  color:var(--ink);font-weight:600;font-size:13.5px;border-radius:8px;transition:.15s}
.co-v4-scope .inv-action:hover{background:#f4f6f9;text-decoration:none}
.co-v4-scope .inv-action svg{flex:0 0 auto;color:var(--muted)}
.co-v4-scope .inv-action-danger{color:var(--brand)}
.co-v4-scope .inv-action-danger svg{color:var(--brand)}

/* ---------- Side column: stacks the (optional) hero, order+payment card,
   and invoice-actions card on top of each other in the narrow grid track ---------- */
.co-v4-scope .side-col{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- Fix: payment <select> not showing its chosen option ----------
   design11's global `select{...}` rule (sized for the old narrow payform) was
   winning against .pay-select and clipping the text. Pinned box-sizing/height/
   line-height (!important where needed) to stop it bleeding through. */
.co-v4-scope select.pay-select{
  height:auto !important;
  line-height:1.4 !important;
  -webkit-appearance:menulist !important;
  appearance:menulist !important;
  box-sizing:border-box !important;
  color:var(--ink) !important;
  background-color:#fff !important;
}
.co-v4-scope select.pay-select option{color:var(--ink);background:#fff}

/* ---------- Fix: invoice document is fixed-pixel-width by design (original
   invoice.css) - inside our fluid .col-main, let it shrink on narrow viewports
   instead of forcing horizontal scroll. ---------- */
.co-v4-scope #invoice-container,
.co-v4-scope .unpaid-container{width:100% !important;max-width:820px;box-sizing:border-box}
.co-v4-scope #invoice-content{width:100% !important;max-width:100%;box-sizing:border-box;overflow:hidden !important;position:relative}
.co-v4-scope #invoice-content iframe{display:block}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .co-v4-scope .grid{grid-template-columns:1fr}
  .co-v4-scope .summary{position:static}
  /* On mobile, order + payment (the actionable part) comes first, the
     invoice document follows below it — matches what people actually
     need to do first on a small screen. */
  .co-v4-scope .col-main{order:2}
  .co-v4-scope .side-col{order:1}
  /* v=27 exception: on step 2 (cart.tpl), .col-main holds the actual form to fill
     in, not a document to read (unlike invoice.tpl). The generic mobile flip
     above would put Continue above the login/signup fields, reading as broken.
     Detected via #v4ContactTabs or #client-info (both unique to cart.tpl), so
     cart3.tpl/invoice.tpl keep the summary-first order untouched. */
  .co-v4-scope .grid:has(#v4ContactTabs, #client-info) .col-main{order:1}
  .co-v4-scope .grid:has(#v4ContactTabs, #client-info) .side-col{order:2}
}
@media(max-width:700px){
  .co-v4-scope .stepper{gap:0;align-items:center}
  .co-v4-scope .stepper .st{flex:0 1 auto;gap:6px}
  .co-v4-scope .stepper .st .n{width:22px;height:22px;font-size:11px;flex:0 0 22px}
  .co-v4-scope .stepper .st .lb{text-align:left;max-width:none}
  .co-v4-scope .stepper .st .lb small{display:none}
  .co-v4-scope .stepper .st .lb b{font-size:11.5px;white-space:nowrap}
  .co-v4-scope .stepper .bar{margin:0 8px;flex:1 1 20px;min-width:14px;height:2px}
  .co-v4-scope .trust-bar .tb-items{flex-direction:column;align-items:flex-start;gap:10px}
  .co-v4-scope .trust-bar .tb-trust{flex-direction:column;align-items:flex-start;gap:6px}
}
@media(max-width:520px){
  .co-v4-scope .trust-bar{flex-direction:column;align-items:flex-start;gap:10px}
  .co-v4-scope .pending{flex-direction:column}
  .co-v4-scope .sum-total .big{font-size:24px}
}

/* ---------- Tighten spacing between our block and the invoice below ----------
   design11's invoice markup (.noti, #invoice-container) has its own margins - fine
   normally, oversized when our block is shown above it. Sibling selector only fires
   when .co-v4-scope precedes it, so plain invoice viewing is unaffected. */
.co-v4-scope ~ center,
.co-v4-scope ~ .noti{margin-top:0 !important}
.co-v4-scope ~ #invoice-container,
.co-v4-scope ~ .unpaid-container{margin-top:0 !important}

/* ============================================================
   Cart summary sidebar (cart.sidemenu.tpl + ajax.cart.summary.tpl)
   Shared across all cart steps, refreshed live via AJAX. Mostly CSS-only - the
   underlying markup has business logic (IP-guard, GA4 price-scraping via
   ".cart_total span" by fixed index) that must keep working, so this only
   restyles the existing table markup as a summary card.
   ============================================================ */
/* v=37 fix: this box's outer div is <div class="wbox card co-v4-scope
   cart-summary-v4"> - .card and .co-v4-scope sit on the SAME element, not as
   ancestor/descendant, so `.co-v4-scope .card` (a descendant selector) never
   matched it. It was rendering as legacy main.css's .wbox (flat, square corners,
   grey border, gradient header) - the "old design showing through" report. A
   pre-existing bug from the original upload, not a regression.
   Fix: target the compound class `.cart-summary-v4.card` directly, with the same
   shell/header/body treatment as .card/.hd/.bd (custom properties already applied
   here regardless, since those only need .co-v4-scope on the element itself).
   .hd's font-size/background/shadow explicitly cancel main.css's .wbox_header,
   which would otherwise still win on plain inheritance.
   Only visual/box properties touched - doesn't interact with this box's existing
   scroll-follow JS (flyingSidemenu(), positions #floater separately). */
.cart-summary-v4.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;padding:0}
.cart-summary-v4.card > .hd{padding:16px 20px;font-weight:700;font-size:14px;
  color:var(--ink);border-bottom:1px solid var(--line);background:none;
  box-shadow:none;text-shadow:none}
.cart-summary-v4.card > .bd{padding:20px}

.cart-summary-v4{padding:2px 4px 6px}
.cart-summary-v4 table{width:100%;border-collapse:collapse}
.cart-summary-v4 td{border:none !important}
.cart-summary-v4 td.midtext{font-weight:700;color:var(--ink);font-size:14px;padding:10px 0 4px}
.cart-summary-v4 td.smalltext{font-size:13px;color:var(--muted);padding:3px 0}
.cart-summary-v4 a{color:var(--brand);font-weight:600;text-decoration:none}
.cart-summary-v4 a:hover{text-decoration:underline}
.cart-summary-v4 .cart_total{margin-top:8px;display:flex;align-items:baseline;gap:5px}
.cart-summary-v4 .cart_total span{color:var(--ink);line-height:1}
.cart-summary-v4 .cart_total span:last-child{font-size:28px !important;font-weight:900}
.cart-summary-v4 .cart_total span:first-child{font-size:16px !important;font-weight:700}
/* v=33: "Total today" now reuses `.sum-total` (same flex row as cart.tpl's order
   summary) instead of the old two-stacked-rows markup. .cart_total's own
   margin-top (needed for the old stacked layout) is no longer needed here. Its
   first span (a redundant {$currency.sign}, duplicating text the second span
   already includes) is hidden via CSS, not removed - cart3.tpl's GA4 script
   reads these spans by fixed index, so the span count must not change. */
.cart-summary-v4 .sum-total .cart_total{margin-top:0}
.cart-summary-v4 .sum-total .cart_total span:first-child{display:none}
/* Promo code field — input + "Apply" button sit inline side by side (not
   stacked full-width blocks, which read as two unlabeled boxes with no clue
   what to do with either one) and the input has a visible placeholder, both
   matching the approved design. */
.cart-summary-v4 #promocode{margin-top:10px}
.cart-summary-v4 .cs-promo-append{display:flex !important;gap:8px;align-items:stretch}
.cart-summary-v4 #appendedInputButton{border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;font-size:13px;flex:1 1 auto;min-width:0;box-sizing:border-box;margin:0}
.cart-summary-v4 #promocode .cs-promo-apply{width:auto;flex:0 0 auto;border-radius:8px;
  background:var(--ink);color:#fff;border:0;padding:0 18px;cursor:pointer;font-weight:700;
  margin-top:0;font-size:13px}

/* Continue button, relocated here from cart3.tpl's form. Keeps its
   .orderbox/.orderboxpadding classes for the GA4 click-tracking selector, but
   that legacy main.css box style doesn't fit this flat card - neutralized here.
   !important forces it even though these selectors already out-specificity
   main.css on paper (the boxed look was still showing up live). If still
   visible, check for a stale deployed checkout_v4.css first. */
.cart-summary-v4 .orderbox.cart-summary-cta{border:0 !important;box-shadow:none !important;
  background:none !important;padding:0 !important;margin-top:16px}
.cart-summary-v4 .cart-summary-cta .orderboxpadding{background:none !important;border:0 !important;
  box-shadow:none !important;padding:0 !important}
.cart-summary-v4 .cart-summary-cta .btn{margin-top:0}

/* ============================================================
   Step 1 (cart3.tpl) — product configuration page
   ============================================================ */
.co-v4-scope .plan-hero{display:flex;align-items:flex-start;gap:14px}
/* .plan-hero wraps a single child, .plan-top (icon + name) — the flex rule
   above only affects .plan-hero's own direct children, so without a rule on
   .plan-top itself the icon and name still stacked vertically (each is a
   block-level div). This is the actual layout row. */
.co-v4-scope .plan-top{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.co-v4-scope .plan-ic{width:52px;height:52px;border-radius:12px;background:#fbdedc;
  color:var(--brand);display:grid;place-items:center;flex:0 0 52px}
.co-v4-scope .plan-info{min-width:0}
.co-v4-scope .plan-title{font-size:19px;font-weight:800;color:var(--ink)}
.co-v4-scope .plan-title strong{font-weight:800}

/* Generic checkbox/addon option row, reused for subproducts + addons */
.co-v4-scope .opts-list{display:flex;flex-direction:column;gap:2px}
.co-v4-scope label.opt{display:flex;align-items:center;gap:12px;padding:12px 8px;
  border-bottom:1px dashed var(--line);cursor:pointer}
.co-v4-scope label.opt:last-child{border-bottom:0}
.co-v4-scope label.opt input[type="checkbox"]{width:18px;height:18px;flex:0 0 18px;accent-color:var(--ink);cursor:pointer}
.co-v4-scope label.opt .name{flex:1;font-size:13.5px;color:var(--ink);font-weight:600;min-width:0}
.co-v4-scope label.opt .name b{font-weight:700}
.co-v4-scope label.opt .desc{color:var(--muted);font-weight:400;font-size:12px;margin-top:2px}
.co-v4-scope label.opt .price{flex:0 0 auto;font-size:13px;color:var(--ink);font-weight:700;
  display:flex;align-items:center;gap:8px;text-align:right}
.co-v4-scope label.opt .price select{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:12.5px}
.co-v4-scope label.opt .fakeselect{color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap}

/* Custom config field row (checkboxes / dropdowns / text inputs rendered by
   HostBill's own $cf.configtemplates.cart include — we only style the
   label/description column consistently; the control itself is whatever
   that include renders, untouched). */
.co-v4-scope .opt-row{display:flex;gap:16px;align-items:flex-start;padding:12px 8px;
  border-bottom:1px dashed var(--line);flex-wrap:wrap}
.co-v4-scope .opt-row:last-child{border-bottom:0}
.co-v4-scope .opt-row-label{flex:1 1 220px;min-width:0}
.co-v4-scope .opt-row-label b{font-size:13.5px;color:var(--ink);font-weight:700}
.co-v4-scope .opt-row-label .desc{color:var(--muted);font-size:12px;margin-top:2px}
.co-v4-scope .opt-row-control{flex:1 1 220px;min-width:0}
.co-v4-scope .opt-row-control select,
.co-v4-scope .opt-row-control input[type="text"]{width:100%;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;font-size:13px;box-sizing:border-box}

/* ============================================================
   Step 2 (cart4.tpl) — Order review / Contact info (New client vs
   Already registered) / Terms — rebuilt as the two-column .grid
   layout (reusing .grid/.col-main/.summary/.sum-line/.review-item
   already defined above for invoice.tpl) with a sticky "Your order"
   card, matching the approved design. The dynamic $fields loop in
   ajax.signup.tpl and the real username/password fields in
   ajax.login.tpl are UNCHANGED — only their per-field markup was
   swapped from <table><tr><td> to <div class="fld"> so the same
   admin-configured fields, in whatever order/type they're set up,
   still render correctly (Input/Password/Select/Check/type/country/
   captcha), just inside the new card/grid look.
   ============================================================ */
.co-v4-scope .review-item .desc small{color:var(--muted);font-size:12px;display:block;margin-top:2px}
.co-v4-scope .review-item .amt{white-space:nowrap;font-weight:700;color:var(--ink);text-align:right}
.co-v4-scope .review-item .amt small{color:var(--muted);font-weight:500;display:block;font-size:11.5px}
/* v=57 fix: crossed-out original price next to a product's real discounted
   total, same "was/now" pattern as .bc-was on step 1's billing-cycle cards -
   see the cart.tpl comment at this product-summary line for why. */
.co-v4-scope .review-item .amt .v4-was{font-size:12px;font-weight:500;color:var(--muted);
  text-decoration:line-through;margin-right:5px}
.co-v4-scope .save-callout{background:linear-gradient(180deg,#e8f5ed,#d8ecdf);
  border:1px solid #b8dcc6;border-radius:11px;padding:12px 14px;text-align:center;margin:12px 0}
.co-v4-scope .save-callout b{color:var(--save);font-size:15px;font-weight:800}

/* Pill tabs — New client / Already registered */
.co-v4-scope .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.co-v4-scope .tab{border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--muted);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.co-v4-scope .tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Dynamic $fields form grid (ajax.signup.tpl / ajax.login.tpl): bigger
   gap/padding/font-size for readability. <select> needs an appearance
   reset (custom chevron) - custom padding with no appearance reset is a
   known source of garbled/overlapping option text on some mobile browsers.
   overflow:hidden/text-overflow was tried on the select itself but
   reverted: some browsers (Firefox) clip the select's internal "current
   value" box to nothing under overflow:hidden, making the selected option
   disappear entirely - not a supported combination on native <select>
   chrome. */
.co-v4-scope .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.co-v4-scope .fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.co-v4-scope .fld.full{grid-column:1/-1}
.co-v4-scope .fld label{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
/* v=28/29 fix: the password Show/Hide toggle rendered taller than its own
   input, overflowing past its rounded corners. Root cause: the password
   field is the only one wrapped in an extra position:relative div (needed
   so the toggle button can be absolutely positioned), and a native <input>
   is inline-block by default, reserving descender space that makes that
   wrapping div taller than the input's own box. Fixed by making the input
   display:block. v=29: that alone wasn't enough live - the trailing
   (always-present, opacity:0 until an error) parsley-errors-list sibling
   sits inside that same wrapper and adds its own margin-top to the
   wrapper's height. Rather than compute the exact remainder, adopted the
   user's live-verified fix: widened .v4-pw-toggle's bottom inset from 1px
   to 10px so it clears both gaps.
   IMPORTANT: display:block is scoped to input only, never select - select
   has no wrapper div, and forcing a display change on an appearance:none
   select risks the same fragile "selected option" rendering already hit
   once before (v=9). */
.co-v4-scope .fld input,.co-v4-scope .fld select{border:1px solid var(--line);border-radius:10px;
  padding:13px 14px;font-size:15px;line-height:1.3;background:#fff;color:var(--text);width:100%;
  height:48px;font-family:inherit}
.co-v4-scope .fld input{display:block}
/* v=31 fix: custom appearance:none selects rendered the closed box blank on some
   engines (value stays correct, box just shows nothing) - same symptom already
   fixed once for .pay-select below. Fixed by forcing native appearance:menulist
   instead of a custom chevron.

   v=43 fix: this handed box rendering to the native combobox, which doesn't
   honor padding/line-height the way an <input> does - height:auto let the
   select render taller than its row sibling. Fixed with an explicit
   height:48px (a hard box-model constraint the native widget can't override),
   without touching appearance. */
.co-v4-scope .fld select{
  -webkit-appearance:menulist !important;
  -moz-appearance:menulist !important;
  appearance:menulist !important;
  height:48px !important;
  line-height:1.3 !important;
  box-sizing:border-box !important;
  color:var(--text) !important;
  background-color:#fff !important;
  cursor:pointer}
.co-v4-scope .fld input:focus,.co-v4-scope .fld select:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(13,19,35,.10)}

/* v=44 fix: v=43's height:48px wasn't enough live - Chromium (the only engine
   this project can test) measures it correctly, but Safari/WebKit has a
   documented quirk where explicit height on a native-appearance <select> isn't
   reliably honored. Fixed engine-agnostically: wrapped the country/State
   selects in a new `.v4-select-wrap` div (ajax.signup.v4step2.tpl) - an
   ordinary block box, so its own height/overflow work identically everywhere.
   It owns the visible border and clips anything taller than 48px; the select
   itself goes borderless inside it. Doesn't touch appearance, so v=31 is
   unaffected. */
.co-v4-scope .fld .v4-select-wrap,.co-v4-scope .v4-select-wrap{height:48px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:#fff;box-sizing:border-box}
.co-v4-scope .fld .v4-select-wrap:focus-within,.co-v4-scope .v4-select-wrap:focus-within{border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(13,19,35,.10)}
.co-v4-scope .fld .v4-select-wrap select,.co-v4-scope .v4-select-wrap select{border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;height:48px;min-height:48px}
/* v=52 fix: reused .v4-select-wrap (widened to also match outside `.fld`) for
   cart2.tpl's period select. Inside `.fld` it stretches full-width by design;
   cart2.tpl's selects sit in table cells instead, so this override keeps them
   at their own compact content width rather than stretching to fill the <td>. */
.co-v4-scope table.checker .v4-select-wrap,.co-v4-scope table.styled .v4-select-wrap{
  display:inline-block;width:auto
}

/* v=44 fix, part 2: Parsley's `<ul class="parsley-errors-list">` was hidden via
   opacity:0 (still a laid-out flex child, height varies by browser when empty).
   Switched to display:none by default, display:block only once Parsley adds
   .filled - a hard zero-height guarantee, real errors still show as before. */
.co-v4-scope ul.parsley-errors-list{display:none}
.co-v4-scope ul.parsley-errors-list.filled{display:block}

/* Password "Show" toggle, second pass: integrated into the input on an inset
   track, full input height, uniform width (no jump between Show/Hide), visible
   pressed state.

   v=29 fix: `bottom` widened 1px->10px per live DevTools test - the wrapping
   div is taller than the input itself because of the trailing Parsley
   errors-list sibling's own margin (see .fld input,.fld select above). */
.co-v4-scope .v4-pw-toggle{position:absolute;right:1px;top:1px;bottom:auto;height:46px;
  width:56px;display:flex;align-items:center;justify-content:center;
  background:#f6f7f9;border:0;border-left:1px solid var(--line);
  border-radius:0 9px 9px 0;color:var(--muted);
  font-size:11.5px;font-weight:700;letter-spacing:.2px;cursor:pointer}
.co-v4-scope .v4-pw-toggle:hover{background:#eef1f6;color:var(--ink)}
.co-v4-scope .v4-pw-toggle:active,
.co-v4-scope .v4-pw-toggle.is-active{background:var(--ink);color:#fff;border-left-color:var(--ink)}
.co-v4-scope .fld .vtip_description{color:var(--muted);cursor:help;font-size:12px}

/* "Already registered" login panel (ajax.login.v4step2.tpl) - the bottom action
   row (Forgot password? / Login button) sat flush under the fields with no
   separation, reading as an afterthought; a light top divider + spacing
   matches the visual weight of the signup panel's own sectioning. */
.co-v4-scope .v4-login-actions{margin-top:14px;padding-top:16px;border-top:1px solid var(--line)}

/* Segmented account-type slider (Personal / Business) */
.co-v4-scope .v4-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;
  background:#eef1f6;border:1px solid var(--line);border-radius:12px;padding:5px;
  margin-bottom:16px;user-select:none}
.co-v4-scope .v4-seg .v4-seg-thumb{position:absolute;top:5px;bottom:5px;left:5px;
  width:calc(50% - 5px);background:#fff;border:1.5px solid var(--ink);border-radius:9px;
  box-shadow:0 2px 8px rgba(13,19,35,.10);transition:transform .22s ease}
.co-v4-scope .v4-seg[data-pos="1"] .v4-seg-thumb{transform:translateX(100%)}
.co-v4-scope .v4-seg .v4-seg-opt{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;text-align:center;padding:10px 8px;
  border-radius:9px;cursor:pointer;transition:color .2s}
.co-v4-scope .v4-seg .v4-seg-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.co-v4-scope .v4-seg .v4-seg-txt b{display:block;font-size:14px;font-weight:700;color:var(--muted)}
.co-v4-scope .v4-seg .v4-seg-txt small{display:block;font-size:11.5px;color:var(--muted)}
.co-v4-scope .v4-seg .v4-seg-opt.is-active .v4-seg-txt b{color:var(--ink)}
.co-v4-scope .v4-seg .v4-seg-opt.is-active .v4-seg-txt small{color:var(--text)}

/* Terms & conditions row */
.co-v4-scope .tc{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.co-v4-scope .tc input{accent-color:var(--save);width:18px;height:18px;margin-top:1px;flex:0 0 18px}
.co-v4-scope .tc label{cursor:pointer;line-height:1.5;color:var(--text)}

/* Login panel — neutral black button instead of red brand (this isn't the
   order's primary CTA, it's a secondary "sign in" action) */
.co-v4-scope #v4-login-btn,
.co-v4-scope input[name="loginbtn"]{background:var(--ink);color:#fff;border:0;border-radius:10px;
  padding:12px 30px;font-weight:700;cursor:pointer;width:auto;box-shadow:none}
.co-v4-scope #v4-login-btn:hover,
.co-v4-scope input[name="loginbtn"]:hover{background:#1a2230}

/* hide legacy parsley error list styling within scope */
.co-v4-scope ul.parsley-errors-list{list-style:none;margin:4px 0 0;padding:0;color:#c62828;
  font-size:12px;font-weight:600}
.co-v4-scope ul.parsley-errors-list li{padding:2px 0}
.co-v4-scope input.parsley-error,.co-v4-scope select.parsley-error{border-color:#c62828 !important;
  box-shadow:0 0 0 3px rgba(198,40,40,.12) !important}

@media(max-width:960px){
  .co-v4-scope .form-grid{grid-template-columns:1fr}
}

/* ============================================================
   Step 2 (cart4.tpl) — order summary / payment / client info
   CSS-only restyles of real HostBill tables/loops - no HTML/Smarty structure
   changed, only added classes for styling hooks.
   ============================================================ */
.order-summary-v4 table{width:100%;border-collapse:collapse}
.order-summary-v4 th{text-align:left;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted);font-weight:700;padding:0 0 10px;
  border-bottom:1px solid var(--line) !important}
.order-summary-v4 td{border:none !important;font-size:13.5px;padding:6px 0;color:var(--ink)}
.order-summary-v4 tr.srow td{padding-top:14px;font-weight:600}
.order-summary-v4 td.blighter,
.order-summary-v4 td.fs11{color:var(--muted);font-size:12.5px;padding:2px 0}
.order-summary-v4 a{color:var(--brand);font-weight:600;text-decoration:none;font-size:12px}
.order-summary-v4 a:hover{text-decoration:underline}
.order-summary-v4 .cart_total{font-size:26px;font-weight:900;color:var(--ink)}
.order-summary-v4 #promocode{margin-top:8px}
.order-summary-v4 #appendedInputButton,
.order-summary-v4 input[name="promocode"]{border:1px solid var(--line);border-radius:8px 0 0 8px;
  padding:8px 10px;font-size:13px}
.order-summary-v4 .padded.btn{border-radius:0 8px 8px 0;background:var(--ink);color:#fff;
  border:0;padding:8px 14px;cursor:pointer}

.payment-method-v4 .pm-grid{display:flex;flex-wrap:wrap;gap:14px 22px;
  align-items:center;justify-content:center;padding:6px 0}
.payment-method-v4 .pm-grid input[type="radio"]{width:16px;height:16px;
  accent-color:var(--ink);margin-right:6px;vertical-align:middle;cursor:pointer}

.gatewayform-v4{padding:18px 20px;margin-top:14px}

.tab-toggle-v4{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px}
.tab-toggle-v4 .wbox_menu{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.tab-toggle-v4 .wbox_menu li{padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:600}
.tab-toggle-v4 .wbox_menu li.bgon2{background:var(--ink);color:#fff}
.tab-toggle-v4 .wbox_menu li.bgoff2{background:#f4f6f9;color:var(--muted)}
.tab-toggle-v4 .wbox_menu input[type="radio"]{margin-right:6px;vertical-align:middle;cursor:pointer}

/* ============================================================
   Billing cycle comparison cards (cart3.tpl)
   ============================================================ */
.co-v4-scope .cycle-block{margin-top:2px}
/* Savings hint now lives in the card's .hd header (next to "Choose billing
   cycle"), pushed to the right by the existing .card .hd flex layout. */
.co-v4-scope .cycle-save-hint{font-size:12.5px;font-weight:700;color:var(--save)}
/* The real, authoritative <select name="cycle"> stays functional and in the
   DOM (form submission + onchange logic — pickCycle()/simulateCart() —
   depend on it) but is visually hidden off-canvas, matching the approved
   design: the 3 cards below are the only cycle picker a visitor sees. */
.co-v4-scope select.cycle-native-select{position:absolute;left:-9999px;top:-9999px;
  width:1px;height:1px;overflow:hidden;margin:0}
.co-v4-scope .bcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.co-v4-scope .bcard{position:relative;border:2px solid var(--line);border-radius:12px;
  padding:16px 14px;cursor:pointer;transition:.15s;background:#fff}
.co-v4-scope .bcard:hover{border-color:#c7ccd6}
.co-v4-scope .bcard.active{border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,19,35,.08)}
.co-v4-scope .bc-badge{position:absolute;top:-11px;left:14px;background:#f5a623;color:#3a2a00;
  font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:.02em}
.co-v4-scope .bc-badge.alt{background:var(--ink);color:#fff}
.co-v4-scope .bc-term{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.co-v4-scope .bc-was{font-size:12px;color:var(--muted);text-decoration:line-through}
.co-v4-scope .bc-price{font-size:24px;font-weight:900;color:var(--ink);line-height:1.15}
.co-v4-scope .bc-price span{font-size:13px;font-weight:600;color:var(--muted)}
.co-v4-scope .bc-save{margin-top:4px;font-size:12px;font-weight:700;color:var(--save)}
.co-v4-scope .bc-billed{margin-top:8px;font-size:11.5px;color:var(--muted)}
/* v=72: line added under the price of a billing-cycle card while a promo code is active (cart3.tpl v4ApplyPromoToCycles) */
.co-v4-scope .bc-promo{margin-top:2px;font-size:11.5px;font-weight:700;color:var(--brand-strong)}
.co-v4-scope .bcard.small .bc-was{font-size:11px}
/* width:100%/flex:0 0 100% is belt-and-suspenders: .cycle-block isn't a
   flex/grid container, so display:block alone should already put these on
   their own line - forced explicitly since a stale-CSS report showed them
   sharing a row live. */
.co-v4-scope .cycle-more-toggle{display:block;width:100%;flex:0 0 100%;margin-top:10px;font-size:12.5px;
  color:var(--brand);font-weight:600;cursor:pointer}
.co-v4-scope .cycle-more{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;width:100%}
.co-v4-scope .cycle-more + .bump-row{margin-top:20px}
.co-v4-scope .bump-row{width:100%;flex:0 0 100%}
.co-v4-scope .bcard.small{padding:10px 14px;flex:1 1 120px}
.co-v4-scope .bcard.small .bc-term{margin-bottom:2px;font-size:12px}
.co-v4-scope .bcard.small .bc-price{font-size:16px}

/* ============================================================
   Addon / subproduct option cards (cart3.tpl "Components" /
   "Power-ups" grid — replaces the old plain checkbox rows)
   ============================================================ */
.co-v4-scope .opts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
/* v=53 fix: main.css's `#cart label{display:inline-block}` (ID selector)
   beats `.co-v4-scope .opt-card`'s own display:flex regardless of load
   order, since every .opt-card is a <label> under #cart. Same mechanism as
   .bump-row (v=33). Fixed with the same defensive !important. */
.co-v4-scope .opt-card{position:relative;display:flex !important;flex-direction:column !important;gap:8px;
  border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;
  transition:.15s;background:#fff}
/* v=54 fix: the v=53 !important above broke tab filtering - a stylesheet
   rule with !important always beats an inline style without one, so it
   overrode v4SwitchTab()'s inline `display:none` and every tab's cards
   showed at once. Same fix pattern as .bump-row (v=31): toggle a dedicated
   !important class instead of inline style; v4SwitchTab() now toggles
   .v4-tab-hidden. */
.co-v4-scope .opt-card.v4-tab-hidden{display:none !important}
.co-v4-scope label.opt-card:hover{border-color:#c7ccd6}
.co-v4-scope label.opt-card:has(.opt-card-check:checked){border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(13,19,35,.06)}
.co-v4-scope .opt-card-check{position:absolute;top:14px;right:14px;width:18px;height:18px;
  accent-color:var(--ink);cursor:pointer}
.co-v4-scope .opt-card-icon{width:38px;height:38px;border-radius:10px;background:#f4f6f9;
  color:var(--ink);display:grid;place-items:center;flex:0 0 38px;font-size:18px;line-height:1}
.co-v4-scope .opt-card-body{padding-right:26px}
.co-v4-scope .opt-card-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.co-v4-scope .opt-card-name b{font-weight:700}
.co-v4-scope .opt-card-desc{font-size:12px;color:var(--muted);margin-top:2px}
.co-v4-scope .opt-card-price{margin-top:auto;font-size:13px;font-weight:700;color:var(--ink)}
.co-v4-scope .opt-card-price select{width:100%;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;font-size:12.5px;margin-top:2px}
.co-v4-scope .opt-card-price .fakeselect{color:var(--muted);font-weight:600;font-size:12.5px}

/* Two card layouts, matching the design reference: a compact vertical grid
   tile (Performance tab, simple on/off toggles) vs. a horizontal row
   (Security/Control panels/Networking, which usually carry a cycle
   <select>). v4ClassifyAndSync() (cart3.tpl) adds .v4-cat-grid to any
   category once its item count passes a threshold (re-evaluated on every
   refresh), so a category with many items (e.g. many Control panel
   licenses) falls back to the compact grid tile instead of a long list of
   full-width rows. Icons are decorative only, assigned by keyword match
   against the item's real name in v4IconFor() (cart3.tpl) - never touches
   real name/price/description text.
   (full history in the changelog, v=32 through v=49) */
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid){
  grid-column:1/-1;flex-direction:row !important;align-items:center;gap:12px;padding:12px 14px}
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-check{
  position:static;order:-1;flex:0 0 auto;margin:0}
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-icon{
  width:34px;height:34px;flex:0 0 34px;font-size:16px}
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-body{
  flex:1 1 auto;min-width:0;padding-right:0}
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-price{
  flex:0 0 auto;margin-top:0;white-space:nowrap;display:flex;align-items:center;gap:8px}
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-price select{width:auto;margin-top:0}
@media(max-width:480px){
  .co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid){flex-wrap:wrap}
  .co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-price{width:100%;justify-content:flex-end}
}
/* Config-field card: the {$cf.configtemplates.cart} include renders its own raw
   checkboxes/inputs (markup we don't control). Style them so a multi-item
   custom field group reads as a tidy checklist inside its card. */
.co-v4-scope .opt-card-config{grid-column:1 / -1}
.co-v4-scope .opt-card-config .opt-card-price{font-weight:400;color:var(--ink)}
/* Same #cart label{display:inline-block} override as .opt-card above -
   fixed defensively here too, though v4RebuildComponentCards() normally
   removes this wrapper before it's visible (only relevant with JS
   disabled/failed). */
.co-v4-scope .opt-card-config .opt-card-price label{display:flex !important;align-items:flex-start;gap:8px;
  padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px;cursor:pointer}
.co-v4-scope .opt-card-config .opt-card-price label:last-child{border-bottom:0}
.co-v4-scope .opt-card-config .opt-card-price input[type="checkbox"],
.co-v4-scope .opt-card-config .opt-card-price input[type="radio"]{width:17px;height:17px;
  flex:0 0 17px;accent-color:var(--ink);margin-top:1px;cursor:pointer}
.co-v4-scope .opt-card-config .opt-card-price select,
.co-v4-scope .opt-card-config .opt-card-price input[type="text"]{width:auto;min-width:180px}

/* v=59 fix: a REQUIRED custom config field (e.g. a license's mandatory IP
   Address field) must not read as just another optional add-on card inside
   the "Power-ups & licenses" grid, or an easy-to-miss plain field in Domain
   Configuration - see the cart3.tpl/cart2.tpl comments at these fields for
   the full reasoning. #c62828 reuses the same red this project already uses
   for Parsley validation-error text, so "Required" reads with the same
   "needs your attention" meaning that color already has here, not a new
   ad-hoc one. */
.co-v4-scope .opt-card-config.opt-card-required{border-color:#c62828}
.co-v4-scope .v4-required-badge{display:inline-block;margin-left:6px;padding:2px 8px;
  border-radius:20px;background:#fdecea;color:#c62828;font-size:10.5px;font-weight:800;
  letter-spacing:.02em;text-transform:uppercase;vertical-align:middle}

/* v=61 fix (corrected - see v=62 note below): the v=60 "Required
   configuration" card's own field rendered as a cramped, right-aligned pill
   (width:auto;min-width:180px, from the generic .opt-card-config rule
   above) sitting beside its label instead of a proper, full-width input
   matching step 2's own form fields (.fld input).

   Root cause: v=60 deliberately removed data-cat from this card when moving
   it out of #v4OptsGrid (v4SwitchTab() can't reach it either way now, so the
   attribute no longer serves any purpose there - see that comment in
   cart3.tpl). But the pre-existing ":not([data-cat=\"performance\"])" row
   layout rule above (built for Security/Control panels/Networking's
   horizontal addon rows, matching data-cat="security" etc.) also matches
   anything with NO data-cat at all, not just a different category value -
   so dropping the attribute silently switched this card from the intended
   vertical stack to that horizontal row layout, squeezing the input into
   the narrow trailing slot that layout reserves for a short price/cycle
   label, not a real text field.

   v=62 note: the first attempt at this fix (.opt-card.opt-card-required)
   LOST the specificity fight against that same row-layout rule and its own
   .opt-card-body/.opt-card-price descendant rules - `.co-v4-scope
   .opt-card:not([data-cat="performance"]):not(.v4-cat-grid)` alone already
   carries 4 class-equivalent selectors (the two :not() arguments each count
   same as a class), and its own `.opt-card-price`/`.opt-card-body`
   descendant versions carry 5 - both beat a plain two-class selector like
   `.opt-card.opt-card-required` (2), `!important` on the base rule or not.
   That's what produced the v=62 regression: flex-direction silently stayed
   `row`, so .opt-card-body (flex:1 1 auto;min-width:0 from that same
   competing rule) shrank to a sliver and wrapped its description text
   letter-by-letter next to the still-pill-width input.

   Fixed for real by raising this rule's own specificity comfortably above
   both competing selectors instead of guessing at !important alone:
   `.opts-grid .opt-card.opt-card-config.opt-card-required` (5) beats the
   base row rule's 4, and the same prefix extended with a descendant class
   (6) beats its .opt-card-body/.opt-card-price versions (5 each). Scoped to
   .opt-card-required throughout so no other .opt-card-config (an actual
   optional custom field elsewhere, still meant to stay a compact pill) is
   affected. The input/select values below are the exact same ones `.fld
   input`/`.fld select` already use for every step-2 form field, copied
   rather than shared via one class since this field isn't wrapped in `.fld`
   markup - kept in sync with that rule if it ever changes. */
.co-v4-scope .opts-grid .opt-card.opt-card-config.opt-card-required{
  flex-direction:column !important}
.co-v4-scope .opts-grid .opt-card.opt-card-config.opt-card-required .opt-card-body{
  flex:none;min-width:0;width:100%}
.co-v4-scope .opts-grid .opt-card.opt-card-config.opt-card-required .opt-card-price{
  flex:none;margin-top:8px;width:100%;white-space:normal;display:block}
.co-v4-scope .opts-grid .opt-card.opt-card-config.opt-card-required .opt-card-price input,
.co-v4-scope .opts-grid .opt-card.opt-card-config.opt-card-required .opt-card-price select{
  width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--line);
  border-radius:10px;padding:13px 14px;font-size:15px;line-height:1.3;background:#fff;
  color:var(--text);height:48px;font-family:inherit}
.co-v4-scope .opts-grid .opt-card.opt-card-config.opt-card-required .opt-card-price input:focus,
.co-v4-scope .opts-grid .opt-card.opt-card-config.opt-card-required .opt-card-price select:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,19,35,.10)}

/* ============================================================
   Category tabs (Performance / Licenses / ...) above the
   configuration & add-ons grid
   ============================================================ */
.co-v4-scope .v4-tabs{display:flex;gap:6px;flex-wrap:wrap}
.co-v4-scope .v4-tab{border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:6px 14px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;
  transition:.15s}
.co-v4-scope .v4-tab:hover{border-color:#c7ccd6}
.co-v4-scope .v4-tab.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* Custom config-field card (dropdowns/checkboxes/text rendered by
   HostBill's own $cf.configtemplates.cart include) — no absolute checkbox,
   just label + description on top and the real control below. */
.co-v4-scope .opt-card.opt-card-config{cursor:default}
.co-v4-scope label.opt-card-name{cursor:pointer}

/* Order bump ("Add automatic backups"), inside the billing-cycle card's
   .bd. !important on layout-critical properties defensively defeats
   bootstrap's generic label{display:block}. Border/fill match the user's
   design reference (dashed border, light-gray fill). */
.co-v4-scope .bump-row{display:flex !important;align-items:center !important;gap:12px;padding:14px 16px;
  border:1.5px dashed #000;border-radius:12px;background:#eef1f6;margin-top:16px;
  cursor:pointer;flex-wrap:nowrap;transition:.15s}
/* v=31 fix: toggling inline style.display from JS lost to the !important
   rule above regardless of hide/show. Fixed by moving the hidden state to
   its own higher-specificity !important class (.v4-bump-hidden) and having
   cart3.tpl's JS toggle that instead of style.display. */
.co-v4-scope .bump-row.v4-bump-hidden{display:none !important}
.co-v4-scope .bump-row:hover{border-color:#c7ccd6}
.co-v4-scope .bump-row:has(input[type="checkbox"]:checked){border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(13,19,35,.06)}
.co-v4-scope .bump-row input[type="checkbox"]{width:19px;height:19px;flex:0 0 19px;
  accent-color:var(--ink);cursor:pointer;margin:0}
.co-v4-scope .bump-body{flex:1 1 auto;min-width:0}
.co-v4-scope .bump-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.co-v4-scope .bump-desc{font-size:12px;color:var(--muted);margin-top:1px}
.co-v4-scope .bump-price{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;margin-left:auto}
@media (max-width: 480px) {
  .co-v4-scope .bump-row{flex-wrap:wrap}
  .co-v4-scope .bump-price{margin-left:0;width:100%;text-align:right}
}

/* ============================================================
   Resource specs grid — turns whatever <ul><li> bullet list is in
   the product's own $product.description into a row of small stat
   cards, without needing to parse or know its exact content.
   Falls back gracefully (just shows the description normally) if a
   product's description isn't a plain bullet list.
   ============================================================ */
.co-v4-scope .specs-grid{margin-top:14px}
.co-v4-scope .specs-grid ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px;list-style:none;margin:0;padding:0}
.co-v4-scope .specs-grid li{border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:var(--ink);line-height:1.4;background:#fafbfc}
.co-v4-scope .specs-grid li strong,
.co-v4-scope .specs-grid li b{display:block;font-size:11px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:2px}
.co-v4-scope .specs-grid p{margin:8px 0 0;font-size:13px;color:var(--muted)}
/* Only the first 4 description bullets (CPU/RAM/Storage/Bandwidth) show as
   stat tiles, matching the approved design; the rest stay in the
   description text. Purely cosmetic - full list stays in the DOM. */
.co-v4-scope .specs-grid li:nth-child(n+5){display:none}

/* "Free products" cross-sell widget - a HostBill CORE widget, not a Smarty
   template in this project. Selectors (#cart-offers/.cart-offer/...) are
   copied verbatim from the real rendered markup (via browser Inspect), not
   guessed - no template file exists to edit, so this is pure CSS restyling;
   real text/data is untouched. Scoped with :has(#cart-offers) so it never
   affects other .wbox elements. !important on the Claim button defeats an
   unrelated sitewide .btn.btn-primary rule of unknown specificity (same
   defensive pattern as .orderbox elsewhere). Colors are hardcoded (not
   var(--ink) etc.) since this widget's DOM position relative to
   .co-v4-scope is unconfirmed, so custom properties might not resolve;
   values match this file's existing design tokens.
   v=36: cart.tpl's v4MoveFreeOffersCard() relocates the real .wbox node to
   sit above the Client Information card in .col-main, so it takes that
   column's card width instead of a full-width container. */
.wbox:has(#cart-offers){
  background:#fff;border:1px solid #e6ebf2;border-radius:14px;
  box-shadow:0 1px 2px rgba(13,19,35,.04),0 12px 34px rgba(13,19,35,.07);
  margin-bottom:18px;overflow:hidden
}
/* v=37 fix: header background switched to #eef1f6 to match "Order
   Summary"'s header fill - the two cards sit at the same pixel row, but a
   white header here read as starting lower than the gray header there,
   even though both were already aligned. */
.wbox:has(#cart-offers) .wbox_header{
  padding:16px 20px;font-weight:700;color:#0d1323;font-size:15px;
  border-bottom:1px solid #e6ebf2;background:#eef1f6
}
/* Decorative gift emoji prefix, matching the approved design
   reference's own "Free bonus for your order" header - added via
   ::before so the real header text (whatever it says) is untouched. */
.wbox:has(#cart-offers) .wbox_header:before{content:"\1F381\0020"}
.wbox:has(#cart-offers) .wbox_content{padding:20px}
#cart-offers .cart-offer{
  display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"icon title act" "icon body act";
  align-items:center;column-gap:14px;row-gap:3px;
  padding:14px 16px;border:1.5px solid #d3dae6;background:#eef1f6;
  border-radius:12px;margin:0 0 12px}
#cart-offers .cart-offer:last-child{margin-bottom:0}
#cart-offers .cart-offer-title{grid-area:title;color:#0d1323;font-weight:800;font-size:14px}
#cart-offers .cart-offer-title strong{font-weight:800}
#cart-offers .cart-offer-body{grid-area:body;color:#64707f;font-size:12.5px}
#cart-offers .cart-offer-act{grid-area:act;align-self:center;float:none;margin:0}
#cart-offers .cart-offer-act .btn{
  background:#0d1323 !important;color:#fff !important;border:0 !important;
  box-shadow:none !important;border-radius:10px;padding:11px 18px;
  font-weight:800;font-size:13px;white-space:nowrap}
#cart-offers .cart-offer-act .btn:hover{background:#1a2438 !important}
/* Icon badge - only added by v4TagVpnOffers() (cart.tpl) when an offer's
   title contains "VPN". Absent otherwise; the icon column collapses to 0
   width with no gap left behind. */
#cart-offers .cart-offer-icon{
  grid-area:icon;width:44px;height:44px;border-radius:12px;
  background:#0d1323;color:#fff;display:grid;place-items:center;
  font-size:22px;align-self:start}
@media (max-width:480px){
  #cart-offers .cart-offer{grid-template-columns:auto 1fr;
    grid-template-areas:"icon title" "icon body" "act act"}
  #cart-offers .cart-offer-act{margin-top:10px}
  #cart-offers .cart-offer-act .btn{width:100%}
}

/* v=39 fix: the widget's EXPANDED state (after "Claim offer") uses a
   different markup shape (.cart-offer-items > .cart-offer-item.well.card >
   .offer-item-body > .offer-item-title + .btn.btn-primary) than the
   collapsed row above, so none of those rules matched it - it rendered
   with Bootstrap's default .well/.card box and the unrelated sitewide red
   .btn-primary. Restyled purely by class name (not by offer text), so any
   other claimed offer picks up the same treatment. grid-column:1/-1 +
   width:100% are defensive: harmless if already outside .cart-offer's
   grid, but forces a full-width row if this ends up as an unplaced grid
   item inside it. */
#cart-offers .cart-offer-items{grid-column:1/-1;width:100%;margin-top:10px}
#cart-offers .cart-offer-item.well.card{
  background:#fff !important;border:1px solid #e6ebf2 !important;
  border-radius:10px;box-shadow:none !important;margin:0 !important
}
#cart-offers .cart-offer-item .offer-item-body.card-body{
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap
}
#cart-offers .offer-item-title{color:#0d1323;font-weight:700;font-size:13.5px}
#cart-offers .offer-item-body .btn.btn-primary{
  background:#0d1323 !important;color:#fff !important;border:0 !important;
  box-shadow:none !important;border-radius:10px;padding:10px 16px;
  font-weight:800;font-size:13px;white-space:nowrap;margin:0}
#cart-offers .offer-item-body .btn.btn-primary:hover{background:#1a2438 !important}
@media (max-width:480px){
  #cart-offers .cart-offer-item .offer-item-body.card-body{flex-direction:column;align-items:stretch}
  #cart-offers .offer-item-body .btn.btn-primary{width:100%;text-align:center}
}

/* v=41: cart2.tpl ($step==2, domain config + contacts) never linked this
   stylesheet before and kept HostBill's original look. cart2.tpl now links
   this file and wraps its content in .co-v4-scope; .card/.hd/.bd rules
   above already style the box shells. Rules below cover what those don't
   reach: the domain/period table, edit-config/nameservers tables, and the
   plain .styled inputs/selects used throughout. No Smarty logic touched;
   shared common/contacts.tpl and ajax.signup.tpl left alone. No design
   reference for this page, so it reuses this project's own tokens. */
.co-v4-scope table.checker,.co-v4-scope table.newchecker{
  width:100%;border-collapse:collapse;font-size:13.5px
}
.co-v4-scope table.checker th{
  text-align:left;font-weight:700;color:var(--ink);font-size:12.5px;
  padding:0 0 10px;border-bottom:1px solid var(--line)
}
.co-v4-scope table.checker td{
  padding:10px 0;border-bottom:1px solid var(--line);vertical-align:middle
}
.co-v4-scope table.checker tr:last-child td{border-bottom:0}
.co-v4-scope table.newchecker td{
  padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle
}
.co-v4-scope table.newchecker tr:last-child td{border-bottom:0}
.co-v4-scope table.newchecker td.bord{border-right:1px solid var(--line)}
.co-v4-scope table.checker .configtd{padding:0;border-top:1px solid var(--line)}
/* v=47 fix: WHOIS Protection / domain-ID-number rows felt cramped - label,
   control and helper text ran together with no separation from the row
   above. cart2.tpl now wraps each field in a .v4-cfield div (see its own
   v=47 comment); border-top gives each row a divider. .v4-cfield is a
   wrapping flex row so a checkbox field reads as one line, while a text
   field's input (flex:1 1 100%) wraps to its own full-width line below the
   label - works regardless of field type/order since it only reacts to
   HostBill's own real input markup. Stray trailing <br> hidden since a
   line break isn't needed once layout is flex-driven. */
.co-v4-scope .v4-cfield{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  padding:16px 0
}
.co-v4-scope .v4-cfield label.styled{margin:0}
.co-v4-scope .v4-cfield br{display:none}
.co-v4-scope .v4-cfield input[type="checkbox"]{
  width:18px;height:18px;flex:0 0 18px;accent-color:var(--ink);
  cursor:pointer;margin:0
}
.co-v4-scope .v4-cfield input.form-control,
.co-v4-scope .v4-cfield input[type="text"],
.co-v4-scope .v4-cfield select{
  flex:1 1 100%;width:100%;max-width:380px;box-sizing:border-box;margin-top:2px
}
/* v=52 fix: plain text custom fields (e.g. "ID number") in this .v4-cfield
   slot looked less polished than step-2's .fld inputs. Bumped to match
   .fld's proven sizing (15px/13px 14px/height:48px) - safe here since this
   field always sits alone on its own full-width row, unlike the tight
   table columns elsewhere on this page. Select-type fields in this slot
   are left at existing size - no report has shown one actually rendered
   here, so no need to add the .v4-select-wrap clipping fix preemptively. */
.co-v4-scope .v4-cfield input.form-control,
.co-v4-scope .v4-cfield input[type="text"]{
  padding:13px 14px;font-size:15px;height:48px
}

/* v=48 fix: the domain/period row (domain name, period select, remove-x
   icon) had two issues - period select missing its "styled" class (fixed
   in cart2.tpl) and the remove icon misaligned once its sibling select
   became taller with .styled's padding/border. Root cause: the <img>
   relied on default baseline vertical-align, fine only while the select
   was a similar height. Fixed with a flex-centered hit-area instead of
   another vertical-align tweak, using the existing --brand-tinted hover
   token. */
.co-v4-scope table.checker td .v4-domain-remove{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;transition:.15s
}
.co-v4-scope table.checker td .v4-domain-remove:hover{background:#fbdedc}
.co-v4-scope table.checker td .v4-domain-remove img{display:block;vertical-align:middle}
/* Neutralize the legacy alternating-row tint (colgroup.alternatecol /
   tr.even) to match this redesign's flat look - kept as a no-op override
   rather than removing the classes, in case another untouched HostBill
   core page relies on them. */
.co-v4-scope table.checker tr.even td,.co-v4-scope table.newchecker .alternatecol,
.co-v4-scope table.styled .alternatecol,.co-v4-scope table.styled .firstcol{
  background:none !important
}
/* v=42: table.styled ("Edit Configuration"/"Nameservers" tables) had no
   row treatment at v=41 - only table.checker/newchecker did. Gave it the
   same row spacing/dividers as table.checker. */
.co-v4-scope table.styled{
  width:100%;border-collapse:collapse;font-size:13.5px
}
.co-v4-scope table.styled td{
  padding:10px 0;border-bottom:1px solid var(--line);vertical-align:middle
}
.co-v4-scope table.styled tr:last-child td{border-bottom:0}
.co-v4-scope input.styled,.co-v4-scope select.styled{
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  font-size:13.5px;color:var(--ink);background:#fff;font-family:inherit
}
/* v=51/v=52 fix: the domain/period select (v=48) wasn't fully showing its
   selected value - same appearance:menulist-vs-padding clipping issue
   already diagnosed for .fld select (see that rule's own writeup), which
   select.styled never got when introduced (v=41/42). Forcing native
   appearance:menulist is a no-op on engines that already render natively
   (e.g. Chromium, where this couldn't be reproduced), so no regression
   risk. v=52 live retest showed clipping persisted, so the same
   .v4-select-wrap technique already used for .fld select was added
   directly in cart2.tpl (see its own v=52 comment) - this rule stays,
   still needed. */
.co-v4-scope select.styled{
  -webkit-appearance:menulist !important;
  -moz-appearance:menulist !important;
  appearance:menulist !important;
  cursor:pointer
}
.co-v4-scope input.styled:focus,.co-v4-scope select.styled:focus{
  outline:none;border-color:var(--ink)
}
.co-v4-scope label.styled{font-weight:700;color:var(--ink);font-size:13px}
.co-v4-scope .vtip_description{color:var(--muted)}
/* The Continue button's legacy .orderbox/.orderboxpadding gradient frame -
   same override already defined above for cart.tpl's CTA; cart2.tpl's
   markup carries the same wrapper classes, so no new rule needed. */

/* v=75/v=80: monthly price of an add-on / component / the backup bump (cart3.tpl v4AddMonthlyHints).
   v=80: the /mo figure is the primary, large price (same hierarchy as the billing-cycle cards);
   the original "<price> <cycle>" text becomes the smaller muted secondary line below it. */
.co-v4-scope .v4-mo{order:-1;font-size:16px;font-weight:800;color:var(--ink);line-height:1.2;margin:0;white-space:nowrap}
.co-v4-scope .v4-mo-unit{font-size:12px;font-weight:600;color:var(--muted);margin-left:1px}
.co-v4-scope .opt-card-price:has(.v4-mo),
.co-v4-scope .bump-price:has(.v4-mo){display:flex;flex-direction:column;gap:2px;
  font-size:12px;font-weight:600;color:var(--muted)}
.co-v4-scope .bump-price:has(.v4-mo){align-items:flex-end;text-align:right}
.co-v4-scope .opt-card-price:has(.v4-mo) .v4-cyc-static{font-size:12px;font-weight:600;color:var(--muted)}

/* v=77: a category with more than 4 add-ons is shown as a list of rows instead of tiles.
   Security / Control panels / Networking get this simply by not receiving .v4-cat-grid
   (cart3.tpl v4ClassifyAndSync); Performance is tile-styled by default, so its cards get
   .v4-cat-row, which repeats the row layout above for it. */
.co-v4-scope .opt-card.v4-cat-row{
  grid-column:1/-1;flex-direction:row !important;align-items:center;gap:12px;padding:12px 14px}
.co-v4-scope .opt-card.v4-cat-row .opt-card-check{position:static;order:-1;flex:0 0 auto;margin:0}
.co-v4-scope .opt-card.v4-cat-row .opt-card-icon{width:34px;height:34px;flex:0 0 34px;font-size:16px}
.co-v4-scope .opt-card.v4-cat-row .opt-card-body{flex:1 1 auto;min-width:0;padding-right:0}
.co-v4-scope .opt-card.v4-cat-row .opt-card-price{
  flex:0 0 auto;margin-top:0;white-space:nowrap;display:flex;align-items:center;gap:8px}
.co-v4-scope .opt-card.v4-cat-row .opt-card-price select{width:auto;margin-top:0}
@media(max-width:480px){
  .co-v4-scope .opt-card.v4-cat-row{flex-wrap:wrap}
  .co-v4-scope .opt-card.v4-cat-row .opt-card-price{width:100%;justify-content:flex-end}
}

/* v=78/v=80: in row layouts the price cell stacks the large /mo price over the small cycle text,
   right-aligned (the cell was a flex row in v=78). */
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-price:has(.v4-mo),
.co-v4-scope .opt-card.v4-cat-row .opt-card-price:has(.v4-mo){flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.co-v4-scope .opt-card:not([data-cat="performance"]):not(.v4-cat-grid) .opt-card-price select,
.co-v4-scope .opt-card.v4-cat-row .opt-card-price select{margin:0;align-self:center}

/* v=79: add-on cycle select is locked to the main service - hidden (still submitted) and shown as plain text */
.co-v4-scope select.v4-cyc-hidden{display:none !important}
.co-v4-scope .v4-cyc-static{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}