/* WebHostGB — WHMCS client area and order form, styled to match webhostgb.com.
   For the Twenty-One theme with the standard_cart order form.
   WHMCS Cloud has no file access: paste this into Addons → Theme Editor → (theme) → custom.css. */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap");

:root {
  --wh-ink: #0f1521;
  --wh-ink-2: #374151;
  --wh-muted: #6b7280;
  --wh-line: #e5e7eb;
  --wh-bg-2: #f9fafb;
  --wh-brand: #12a05c;
  --wh-brand-deep: #06733f;
  --wh-brand-tint: #e9f8f0;
  --wh-navy-2: #182132;
  --wh-navy-line: #263043;
  --wh-radius: 16px;
  --wh-font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wh-shadow: 0 1px 2px rgba(15,21,33,.06), 0 12px 32px -12px rgba(15,21,33,.18);
}

/* Base */
body { font-family: var(--wh-font); color: var(--wh-ink); background: #fff; font-size: 16px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--wh-font); font-weight: 600; letter-spacing: -0.02em; color: var(--wh-ink); }
a { color: var(--wh-brand-deep); }
a:hover { color: var(--wh-ink); }
.text-muted { color: var(--wh-muted) !important; }
::selection { background: var(--wh-brand-tint); }
:focus-visible { outline: 3px solid var(--wh-brand); outline-offset: 2px; }

/* Header */
.header .topbar { background: var(--wh-ink); color: #cbd5e1; }
.header .topbar a, .header .topbar .btn { color: #fff; }
.header .navbar { background: #fff; }
.header .navbar-brand .logo-img { max-height: 40px; }
.header .main-navbar-wrapper { background: #fff; border-top: 1px solid var(--wh-line); border-bottom: 1px solid var(--wh-line); }
.header .main-navbar-wrapper .navbar-nav .nav-link { color: var(--wh-ink); font-weight: 500; font-size: 15px; }
.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
.header .main-navbar-wrapper .navbar-nav .active > .nav-link { color: var(--wh-brand-deep); }
.header .search .form-control,
.header .search .btn { border-color: var(--wh-line); }
.header .cart-btn .badge { background: var(--wh-brand); color: #fff; }
.dropdown-menu { border: 1px solid var(--wh-line); border-radius: 12px; box-shadow: var(--wh-shadow); }
.dropdown-item.active, .dropdown-item:active { background: var(--wh-brand-tint); color: var(--wh-brand-deep); }

/* Breadcrumb */
.master-breadcrumb { background: var(--wh-bg-2); border-bottom: 1px solid var(--wh-line); }
.master-breadcrumb .breadcrumb { background: transparent; font-size: 14px; }
.master-breadcrumb .breadcrumb a { color: var(--wh-muted); }

/* Body */
#main-body { background: #fff; padding-top: 48px; padding-bottom: 80px; }
h1, .header-lined h1 { margin-bottom: 24px; }
.list-group-item { padding: 12px 20px; }
.form-group { margin-bottom: 20px; }
.table td, .table th { padding: 14px 16px; }
/* Twenty-One puts .primary-bg-color on <body>, so this colours the strip below the footer */
body.primary-bg-color { background: var(--wh-bg-2); }
/* One border per box: overflow clips inner parts to the rounded corners, and a list straight under a header loses its own top line */
.card { border: 1px solid var(--wh-line); border-radius: var(--wh-radius); box-shadow: none; overflow: hidden; margin-bottom: 24px; }
.card-header { background: #fff; border-bottom: 1px solid var(--wh-line); padding: 16px 24px; }
.card-header:first-child, .card-footer:last-child { border-radius: 0; }
.card-header + .list-group, .card-header + .list-group-flush, .card-header + .collapsable-card-body > .list-group:first-child { border-top: 0; }
.card .list-group-flush > .list-group-item:first-child { border-top: 0; }
.card .list-group-flush > .list-group-item:last-child { border-bottom: 0; }
.card-body { padding: 24px; }
.card-footer { background: var(--wh-bg-2); border-top: 1px solid var(--wh-line); padding: 16px 24px; }
.card .card { box-shadow: none; }
.card-title { font-weight: 600; }
.tiles .tile { border-radius: var(--wh-radius); }
.tiles .tile .stat { color: var(--wh-ink); font-weight: 600; }
.tiles .tile .highlight { background: var(--wh-brand) !important; }

/* Sidebar */
.card-sidebar .card-header { background: #fff; }
.card-sidebar .list-group-item { border-color: var(--wh-line); color: var(--wh-ink-2); padding: 11px 20px; }
.card-sidebar .card-header { padding: 14px 20px; }
.sidebar .card-sidebar, .card-sidebar { margin-bottom: 24px; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus,
.card-sidebar .list-group-item.active { background: var(--wh-brand-tint); border-color: var(--wh-line); color: var(--wh-brand-deep); font-weight: 600; }
.list-group-item.active .badge { background: var(--wh-brand); color: #fff; }

/* Buttons: pill shape, ink primary, green for the order and checkout actions */
.btn { border-radius: 999px; font-weight: 500; padding-left: 20px; padding-right: 20px; transition: background .15s ease, border-color .15s ease; }
.btn-sm { padding-left: 14px; padding-right: 14px; }
.btn-primary, .btn-info { background: var(--wh-ink); border-color: var(--wh-ink); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active,
.btn-info:hover, .btn-info:focus { background: #253045; border-color: #253045; color: #fff; }
.btn-success { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:not(:disabled):not(.disabled):active { background: var(--wh-brand-deep); border-color: var(--wh-brand-deep); }
.btn-default, .btn-secondary, .btn-light, .btn-outline-primary { background: #fff; color: var(--wh-ink); border: 1px solid var(--wh-ink); }
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover { background: var(--wh-bg-2); color: var(--wh-ink); border-color: var(--wh-ink); }
.btn-link { color: var(--wh-brand-deep); }

/* Forms */
.form-control, .custom-select, .input-group-text { border-color: #d1d5db; border-radius: 10px; }
.form-control:focus, .custom-select:focus { border-color: var(--wh-brand); box-shadow: 0 0 0 3px rgba(18,160,92,.2); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--wh-brand); border-color: var(--wh-brand); }
.label-success, .badge-success, .status-active { background: var(--wh-brand) !important; }
.alert { border-radius: 12px; }
.alert-success { background: var(--wh-brand-tint); border-color: #b3e5c9; color: var(--wh-brand-deep); }
.alert-info { background: var(--wh-bg-2); border-color: var(--wh-line); color: var(--wh-ink-2); }
.pagination .page-item.active .page-link { background: var(--wh-ink); border-color: var(--wh-ink); }
.page-link { color: var(--wh-ink); }
.table thead th { border-bottom-color: var(--wh-line); color: var(--wh-muted); font-size: 13px; font-weight: 600; text-transform: none; }

/* Login / register */
/* .login-form is the full-width <form>, so only the card inside it gets the shadow */
.login-form .card, .card.mw-540 { box-shadow: var(--wh-shadow); }
.login-form .card-body { padding: 40px 48px; }

/* Footer: light, like webhostgb.com */
footer.footer { background: var(--wh-bg-2); color: var(--wh-muted); border-top: 1px solid var(--wh-line); padding: 48px 0 40px; }
footer.footer a, footer.footer .nav-link { color: var(--wh-ink-2); }
footer.footer a:hover, footer.footer .nav-link:hover { color: var(--wh-ink); }
footer.footer .btn { border-color: var(--wh-line); color: var(--wh-ink); background: #fff; }
footer.footer .btn:hover { background: var(--wh-brand-tint); }
footer.footer .copyright { color: var(--wh-muted); font-size: 14px; }

/* Order form (standard_cart). Its stylesheet loads after this one, so these selectors start with body to win */
body #order-standard_cart .header-lined h1 { font-weight: 600; letter-spacing: -0.03em; }
body #order-standard_cart .sub-heading { border-top-color: var(--wh-line); }
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span { color: var(--wh-ink); font-weight: 600; background: #fff; }
body #order-standard_cart .products .product { border: 1px solid var(--wh-line); border-radius: var(--wh-radius); overflow: hidden; background: #fff; padding: 0; margin-bottom: 24px; box-shadow: none; }
body #order-standard_cart .products .product header { background: var(--wh-bg-2); border-bottom: 1px solid var(--wh-line); padding: 18px 24px; margin: 0; }
body #order-standard_cart .products .product div.product-desc { padding: 20px 24px; }
body #order-standard_cart .products .product footer { padding: 20px 24px; }
body #order-standard_cart .products .product header span { color: var(--wh-ink); font-weight: 600; font-size: 20px; }
body #order-standard_cart .products .product div.product-pricing span.price { color: var(--wh-ink); font-weight: 700; font-size: 32px; letter-spacing: -0.03em; }
body #order-standard_cart .products .product .btn-order-now { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }
body #order-standard_cart .products .product .btn-order-now:hover { background: var(--wh-brand-deep); border-color: var(--wh-brand-deep); color: #fff; }
body #order-standard_cart .product-info { background: var(--wh-bg-2); border: 1px solid var(--wh-line); border-radius: var(--wh-radius); }
body #order-standard_cart .product-info .product-title { color: var(--wh-ink); font-weight: 600; }
body #order-standard_cart .domain-selection-options .option { border-radius: 12px; border-color: var(--wh-line); }
body #order-standard_cart .domain-selection-options .option-selected:has(input[type=radio]:checked) { background: var(--wh-brand-tint); border-color: #b3e5c9; }
body #order-standard_cart .domain-checker-container { background: linear-gradient(180deg, #075e3a 0%, #0e8a50 100%); border-radius: var(--wh-radius); }
body #order-standard_cart .domain-checker-bg { background: none; }
body #order-standard_cart .domain-checker-available { color: var(--wh-brand-deep); }
body #order-standard_cart .view-cart-items .item-title { color: var(--wh-ink); font-weight: 600; }
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] { color: var(--wh-brand-deep); }
body #order-standard_cart .order-summary .total-due-today .amt { color: var(--wh-ink); font-weight: 700; }
body #order-standard_cart .btn-checkout, body #order-standard_cart #btnCompleteOrder, body #order-standard_cart #btnCompleteProductConfig {
  background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; font-weight: 600;
}
body #order-standard_cart .btn-checkout:hover, body #order-standard_cart #btnCompleteOrder:hover, body #order-standard_cart #btnCompleteProductConfig:hover { background: var(--wh-brand-deep); border-color: var(--wh-brand-deep); color: #fff; }
body #order-standard_cart .cart-sidebar .list-group-item.active { background: var(--wh-brand-tint); color: var(--wh-brand-deep); border-color: var(--wh-line); }
body #order-standard_cart .field-icon { color: var(--wh-muted); }
body #order-standard_cart .already-registered { background: var(--wh-bg-2); border-radius: 12px; border: 1px solid var(--wh-line); }
body #order-standard_cart .cc-input-container, body #order-standard_cart .account-select-container div.account { border-radius: 12px; }
body #order-standard_cart .account-select-container div.account.active { background: var(--wh-brand-tint); border-color: #b3e5c9; }

/* Checkout: cart and checkout steps drop the category sidebar and use full width, so the page is about the order only */
body #order-standard_cart:has(.view-cart-items, #frmCheckout) .cart-sidebar,
body #order-standard_cart:has(.view-cart-items, #frmCheckout) .sidebar-collapsed { display: none; }
body #order-standard_cart:has(.view-cart-items, #frmCheckout) .cart-body { width: 100%; max-width: 100%; flex: 0 0 100%; float: none; }
body #order-standard_cart .header-lined { margin-bottom: 8px; }
body #order-standard_cart .header-lined h1 { font-size: 40px; }

/* Cart items */
body #order-standard_cart .view-cart-items-header { background: transparent; color: var(--wh-muted); border: 0; border-radius: 0; padding: 0 24px 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
body #order-standard_cart .view-cart-items { border: 1px solid var(--wh-line); border-radius: var(--wh-radius); overflow: hidden; background: #fff; box-shadow: var(--wh-shadow); }
body #order-standard_cart .view-cart-items .item { padding: 22px 24px; background: #fff; border-bottom: 1px solid var(--wh-line); }
body #order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
body #order-standard_cart .view-cart-items .item-title { font-size: 18px; letter-spacing: -0.01em; }
body #order-standard_cart .view-cart-items .item-group,
body #order-standard_cart .view-cart-items .item-domain { display: block; margin-top: 4px; color: var(--wh-muted); font-size: 14px; }
body #order-standard_cart .view-cart-items .item-price { font-size: 20px; font-weight: 600; color: var(--wh-ink); }
body #order-standard_cart .view-cart-items .item-price .cycle,
body #order-standard_cart .view-cart-items .item-price .renewal { display: block; font-size: 13px; font-weight: 400; color: var(--wh-muted); }
body #order-standard_cart .view-cart-items .btn-remove-from-cart { color: var(--wh-muted); padding: 4px 8px; }
body #order-standard_cart .view-cart-items .btn-remove-from-cart:hover { color: #b42318; }
body #order-standard_cart .empty-cart { margin-top: 12px; text-align: right; }
body #order-standard_cart .empty-cart .btn { background: transparent; border: 0; color: var(--wh-muted); padding: 0; font-size: 14px; }
body #order-standard_cart .empty-cart .btn:hover { color: #b42318; }

/* Promo code and tax estimate */
body #order-standard_cart .view-cart-tabs { margin-top: 24px; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); overflow: hidden; background: #fff; }
body #order-standard_cart .view-cart-tabs .nav-tabs { background: var(--wh-bg-2); border-bottom: 1px solid var(--wh-line); padding: 0 12px; }
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link { border: 0; border-radius: 0; background: transparent; color: var(--wh-muted); font-weight: 500; font-size: 14px; padding: 14px 12px; margin: 0; }
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] { color: var(--wh-ink); box-shadow: inset 0 -2px 0 var(--wh-brand); }
body #order-standard_cart .view-cart-tabs .tab-content { border: 0; padding: 20px 24px; background: #fff; }
body #order-standard_cart .view-cart-tabs .tab-content .form-group { margin-bottom: 12px; }

/* Order summary: white card that stays in view while scrolling */
body #order-standard_cart .order-summary { background: #fff; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); box-shadow: var(--wh-shadow); position: sticky; top: 24px; overflow: hidden; }
body #order-standard_cart .order-summary h2 { background: #fff; color: var(--wh-ink); text-align: left; font-size: 20px; padding: 22px 24px 4px; margin: 0; }
body #order-standard_cart .summary-container { background: #fff; padding: 8px 24px 24px; border: 0; }
body #order-standard_cart .summary-container .subtotal,
body #order-standard_cart .summary-container .recurring-totals,
body #order-standard_cart .summary-container .bordered-totals { padding: 12px 0; font-size: 15px; color: var(--wh-ink-2); border-bottom: 1px solid var(--wh-line); margin: 0; }
body #order-standard_cart .summary-container .total-due-today { margin: 20px 0 0; padding: 0; text-align: left; background: transparent; border: 0; }
body #order-standard_cart .summary-container .total-due-today .amt { display: block; font-size: 40px; letter-spacing: -0.03em; line-height: 1.1; }
body #order-standard_cart .summary-container .total-due-today span:not(.amt) { color: var(--wh-muted); font-size: 14px; }
body #order-standard_cart .order-summary .btn-checkout { display: block; width: 100%; margin-top: 20px; padding: 14px 20px; font-size: 17px; box-shadow: 0 6px 16px -6px rgba(18,160,92,.5); }
body #order-standard_cart .order-summary .btn-continue-shopping,
body #order-standard_cart .order-summary a:not(.btn) { display: block; margin-top: 12px; text-align: center; color: var(--wh-muted); font-size: 14px; }

/* Checkout form */
body #order-standard_cart #frmCheckout .sub-heading { height: auto; border-top: 1px solid var(--wh-line); padding-top: 28px; margin: 32px 0 16px; text-align: left; }
body #order-standard_cart #frmCheckout .sub-heading span { padding: 0; font-size: 20px; background: transparent; }
body #order-standard_cart #frmCheckout .sub-heading:first-of-type { margin-top: 16px; }
body #order-standard_cart #frmCheckout .field,
body #order-standard_cart #frmCheckout .form-control { height: 48px; border-radius: 10px; font-size: 15px; }
body #order-standard_cart #frmCheckout .prepend-icon .field { padding-left: 44px; }
body #order-standard_cart #frmCheckout .prepend-icon .field-icon { width: 44px; line-height: 48px; }
body #order-standard_cart #frmCheckout textarea.form-control { height: auto; }
body #order-standard_cart .already-registered { padding: 16px 20px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body #order-standard_cart .already-registered p { margin: 0; color: var(--wh-ink-2); }
body #order-standard_cart .already-registered .btn { float: none; flex-shrink: 0; }
body #order-standard_cart #paymentGatewaysContainer { padding: 8px 0 16px; }
body #order-standard_cart #paymentGatewaysContainer label { border: 1px solid var(--wh-line); border-radius: 12px; padding: 12px 16px; margin: 0 8px 8px 0; cursor: pointer; }
body #order-standard_cart #paymentGatewaysContainer label:has(input:checked) { border-color: var(--wh-brand); background: var(--wh-brand-tint); }
body #order-standard_cart #frmCheckout .btn-checkout,
body #order-standard_cart #btnCompleteOrder { padding: 16px 40px; font-size: 18px; box-shadow: 0 6px 16px -6px rgba(18,160,92,.5); }
body #order-standard_cart .text-center .marketing-email-optin,
body #order-standard_cart .marketing-email-optin { background: var(--wh-bg-2); border-radius: 12px; padding: 16px 20px; border: 0; }
body #order-standard_cart .already-registered { flex-direction: row-reverse; }
body #order-standard_cart .cc-input-container { background: #fff; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); padding: 20px 24px; }
body #order-standard_cart #frmCheckout #totalDueToday { border-radius: 12px; padding: 16px 20px; font-size: 18px; }
body #order-standard_cart .checkout-security-msg { background: var(--wh-bg-2); border: 1px solid var(--wh-line); color: var(--wh-muted); border-radius: 12px; padding: 16px 20px; font-size: 13px; }
body #order-standard_cart .checkout-security-msg i { color: var(--wh-brand); }
/* WHMCS's tick and radio icons are blue images, so shift them to the brand green */
.iradio_square-blue, .icheckbox_square-blue { filter: hue-rotate(-60deg) saturate(.9); }

/* Logo: same green mark and lowercase wordmark as webhostgb.com (the template prints the company name as text) */
.header .navbar-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 0; color: var(--wh-ink); text-decoration: none; }
.header .navbar-brand::before { content: ""; width: 28px; height: 28px; border-radius: 8px; background: var(--wh-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 9l4 14 7-10 7 10 4-14' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.header .navbar-brand::after { content: "webhostgb"; font-size: 20px; font-weight: 700; letter-spacing: -0.04em; }
.header .navbar-brand:has(img)::before, .header .navbar-brand:has(img)::after { display: none; }

/* Inputs: match the contact form on webhostgb.com */
.form-control, .custom-select, .field { height: 48px; padding: 12px 14px; font-size: 16px; color: var(--wh-ink); background-color: #fff; border: 1px solid #d1d5db; border-radius: 10px; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
textarea.form-control { height: auto; min-height: 120px; }
.form-control-sm, .custom-select-sm { height: 38px; padding: 6px 12px; font-size: 14px; }
.form-control::placeholder, .field::placeholder { color: #9ca3af; }
.form-control:focus, .custom-select:focus, .field:focus { border-color: var(--wh-brand); box-shadow: 0 0 0 3px var(--wh-brand-tint); outline: none; }
label, .control-label, .col-form-label { font-size: 14.5px; font-weight: 500; color: var(--wh-ink-2); }
.input-group-text { background: #fff; border-color: #d1d5db; color: var(--wh-muted); padding: 0 14px; }
.input-group-merge .input-group-prepend .input-group-text { border-right: 0; border-radius: 10px 0 0 10px; }
.input-group-merge .input-group-prepend + .form-control { border-left: 0; padding-left: 0; }
.input-group-merge .input-group-append .input-group-text, .input-group-merge .input-group-append .btn { border-left: 0; border-radius: 0 10px 10px 0; background: #fff; border-color: #d1d5db; color: var(--wh-muted); }
.input-group-merge:focus-within .input-group-text, .input-group-merge:focus-within .btn { border-color: var(--wh-brand); }
.input-group-merge:focus-within { box-shadow: 0 0 0 3px var(--wh-brand-tint); border-radius: 10px; }
.input-group-merge .form-control:focus { box-shadow: none; }
body #order-standard_cart .prepend-icon .field-icon { height: 48px; line-height: 48px; color: #9ca3af; }
body #order-standard_cart .prepend-icon .field { padding-left: 42px; }
.btn { padding-top: 10px; padding-bottom: 10px; }
.btn-sm, .btn-xs { padding-top: 5px; padding-bottom: 5px; }
.btn-lg { padding: 14px 28px; font-size: 17px; }

/* Reassurance under the order summary */
body #order-standard_cart .order-summary::after { content: "Questions? Email hello@webhostgb.com"; display: block; padding: 14px 24px; border-top: 1px solid var(--wh-line); background: var(--wh-bg-2); color: var(--wh-muted); font-size: 13px; text-align: center; }

/* Domain step */
body #order-standard_cart .domain-selection-options .option { padding: 16px 20px; margin-bottom: 12px; border: 1px solid var(--wh-line); background: #fff; }
body #order-standard_cart .domain-selection-options .option label { font-weight: 600; color: var(--wh-ink); }
body #order-standard_cart .domain-checker-container { padding: 32px; }
body #order-standard_cart .domain-checker-container .input-group-box { background: #fff; border-radius: 12px; padding: 6px; }
/* ---- Order flow. WHMCS Cloud blocks scripts in templates, so everything here is CSS, keyed off what each step's page contains ---- */

/* Focused checkout on every step: no menu, breadcrumb, search or category sidebar, just the logo, a secure badge and the cart */
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) :is(.header .main-navbar-wrapper, .master-breadcrumb, .header .navbar form, #order-standard_cart .cart-sidebar, #order-standard_cart .sidebar-collapsed) { display: none !important; }
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) #order-standard_cart .cart-body { width: 100%; max-width: 100%; flex: 0 0 100%; float: none; }
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .header .navbar { border-bottom: 1px solid var(--wh-line); padding-top: 14px; padding-bottom: 14px; }
body:has(#order-standard_cart) .header .navbar .toolbar { margin-left: auto; }
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .header .navbar .container:has(> .navbar-brand)::before { content: "Secure checkout"; order: 1; display: inline-flex; align-items: center; height: 28px; margin-left: 4px; padding: 0 12px 0 30px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--wh-brand-deep); background: var(--wh-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='2' fill='%2306733f'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 015 0v2' fill='none' stroke='%2306733f' stroke-width='1.6'/%3E%3C/svg%3E") 12px center / 13px no-repeat; }
body:has(#order-standard_cart) .header .navbar .container > form { order: 2; }
body:has(#order-standard_cart) .header .navbar .container > .toolbar { order: 3; }
@media (max-width: 575px) { body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .header .navbar .container:has(> .navbar-brand)::before { content: ""; padding: 0; width: 28px; } }
body #order-standard_cart .domain-selection-options, body #order-standard_cart #frmProductDomain { max-width: 760px; }

/* Progress: a four-step wizard header (Domain, About your business, Review, Details and payment).
   The stepper is an SVG background so it needs no template changes; phones get a bar and "Step x of 4" text instead. */
body #order-standard_cart .header-lined { position: relative; padding-top: 92px; margin-top: 4px; }
body #order-standard_cart .header-lined::before { position: absolute; top: 0; left: 0; width: 100%; max-width: 880px; height: 64px; content: none; background: no-repeat left top / contain; }
body #order-standard_cart .header-lined::after { display: none; position: absolute; top: 18px; left: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--wh-brand-deep); content: none; }
body #order-standard_cart:has(.domain-selection-options, #frmProductDomain) .header-lined::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 64'%3E%3Crect x='132' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Crect x='352' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Crect x='572' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Ccircle cx='110' cy='20' r='19' fill='%23e9f8f0'/%3E%3Ccircle cx='110' cy='20' r='15' fill='%230f1521'/%3E%3Ctext x='110' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%23fff'%3E1%3C/text%3E%3Ctext x='110' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%230f1521'%3EYour domain%3C/text%3E%3Ccircle cx='330' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='330' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E2%3C/text%3E%3Ctext x='330' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EYour options%3C/text%3E%3Ccircle cx='550' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='550' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E3%3C/text%3E%3Ctext x='550' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EReview%3C/text%3E%3Ccircle cx='770' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='770' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E4%3C/text%3E%3Ctext x='770' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EDetails and payment%3C/text%3E%3C/svg%3E"); }
body #order-standard_cart:has(#frmConfigureProduct, #frmConfigureDomains) .header-lined::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 64'%3E%3Crect x='132' y='19' width='176' height='3' rx='1.5' fill='%2312a05c'/%3E%3Crect x='352' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Crect x='572' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Ccircle cx='110' cy='20' r='16' fill='%2312a05c'/%3E%3Cpath d='M104 20l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='110' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%2306733f'%3EYour domain%3C/text%3E%3Ccircle cx='330' cy='20' r='19' fill='%23e9f8f0'/%3E%3Ccircle cx='330' cy='20' r='15' fill='%230f1521'/%3E%3Ctext x='330' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%23fff'%3E2%3C/text%3E%3Ctext x='330' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%230f1521'%3EYour options%3C/text%3E%3Ccircle cx='550' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='550' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E3%3C/text%3E%3Ctext x='550' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EReview%3C/text%3E%3Ccircle cx='770' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='770' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E4%3C/text%3E%3Ctext x='770' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EDetails and payment%3C/text%3E%3C/svg%3E"); }
body #order-standard_cart:has(.view-cart-items) .header-lined::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 64'%3E%3Crect x='132' y='19' width='176' height='3' rx='1.5' fill='%2312a05c'/%3E%3Crect x='352' y='19' width='176' height='3' rx='1.5' fill='%2312a05c'/%3E%3Crect x='572' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Ccircle cx='110' cy='20' r='16' fill='%2312a05c'/%3E%3Cpath d='M104 20l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='110' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%2306733f'%3EYour domain%3C/text%3E%3Ccircle cx='330' cy='20' r='16' fill='%2312a05c'/%3E%3Cpath d='M324 20l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='330' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%2306733f'%3EYour options%3C/text%3E%3Ccircle cx='550' cy='20' r='19' fill='%23e9f8f0'/%3E%3Ccircle cx='550' cy='20' r='15' fill='%230f1521'/%3E%3Ctext x='550' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%23fff'%3E3%3C/text%3E%3Ctext x='550' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%230f1521'%3EReview%3C/text%3E%3Ccircle cx='770' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='770' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E4%3C/text%3E%3Ctext x='770' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EDetails and payment%3C/text%3E%3C/svg%3E"); }
body #order-standard_cart:has(#frmCheckout) .header-lined::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 64'%3E%3Crect x='132' y='19' width='176' height='3' rx='1.5' fill='%2312a05c'/%3E%3Crect x='352' y='19' width='176' height='3' rx='1.5' fill='%2312a05c'/%3E%3Crect x='572' y='19' width='176' height='3' rx='1.5' fill='%2312a05c'/%3E%3Ccircle cx='110' cy='20' r='16' fill='%2312a05c'/%3E%3Cpath d='M104 20l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='110' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%2306733f'%3EYour domain%3C/text%3E%3Ccircle cx='330' cy='20' r='16' fill='%2312a05c'/%3E%3Cpath d='M324 20l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='330' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%2306733f'%3EYour options%3C/text%3E%3Ccircle cx='550' cy='20' r='16' fill='%2312a05c'/%3E%3Cpath d='M544 20l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='550' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%2306733f'%3EReview%3C/text%3E%3Ccircle cx='770' cy='20' r='19' fill='%23e9f8f0'/%3E%3Ccircle cx='770' cy='20' r='15' fill='%230f1521'/%3E%3Ctext x='770' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%23fff'%3E4%3C/text%3E%3Ctext x='770' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%230f1521'%3EDetails and payment%3C/text%3E%3C/svg%3E"); }
body #order-standard_cart:has(.domain-selection-options, #frmProductDomain) .header-lined::after { content: "Step 1 of 4 \00B7  Your domain"; }
body #order-standard_cart:has(#frmConfigureProduct, #frmConfigureDomains) .header-lined::after { content: "Step 2 of 4 \00B7  Your options"; }
body #order-standard_cart:has(.view-cart-items) .header-lined::after { content: "Step 3 of 4 \00B7  Review your order"; }
body #order-standard_cart:has(#frmCheckout) .header-lined::after { content: "Step 4 of 4 \00B7  Your details and payment"; }
@media (max-width: 767px) {
  body #order-standard_cart .header-lined { padding-top: 42px; }
  body #order-standard_cart .header-lined::before { height: 6px; border-radius: 999px; background-image: none !important; background: var(--wh-line); }
  body #order-standard_cart .header-lined::after { display: block; }
  body #order-standard_cart:has(.domain-selection-options, #frmProductDomain) .header-lined::before { background: linear-gradient(90deg, var(--wh-brand) 25%, var(--wh-line) 25%); }
  body #order-standard_cart:has(#frmConfigureProduct, #frmConfigureDomains) .header-lined::before { background: linear-gradient(90deg, var(--wh-brand) 50%, var(--wh-line) 50%); }
  body #order-standard_cart:has(.view-cart-items) .header-lined::before { background: linear-gradient(90deg, var(--wh-brand) 75%, var(--wh-line) 75%); }
  body #order-standard_cart:has(#frmCheckout) .header-lined::before { background: var(--wh-brand); }
}

/* Plain step headings in place of WHMCS's defaults ("Choose a Domain...", "Configure", "Review & Checkout", "Checkout") */
body #order-standard_cart:is(:has(.domain-selection-options, #frmProductDomain), :has(#frmConfigureProduct, #frmConfigureDomains), :has(.view-cart-items), :has(#frmCheckout)) .header-lined h1 { font-size: 0 !important; line-height: 0; margin: 0 0 8px; }
body #order-standard_cart .header-lined h1::before { display: block; font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; }
body #order-standard_cart:has(.domain-selection-options, #frmProductDomain) .header-lined h1::before { content: "Choose your domain name"; }
body #order-standard_cart:has(#frmConfigureProduct, #frmConfigureDomains) .header-lined h1::before { content: "Choose your plan options"; }
body #order-standard_cart:has(.view-cart-items) .header-lined h1::before { content: "Review your order"; }
body #order-standard_cart:has(#frmCheckout) .header-lined h1::before { content: "Your details and payment"; }
body #order-standard_cart .header-lined h1::after { display: block; margin-top: 10px; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--wh-muted); max-width: 640px; }
body #order-standard_cart:has(.domain-selection-options, #frmProductDomain) .header-lined h1::after { content: "Register a new .co.uk or .com, transfer one you already have, or keep your domain where it is."; }
body #order-standard_cart:has(#frmConfigureProduct, #frmConfigureDomains) .header-lined h1::after { content: "Choose monthly or yearly billing. You can move to a bigger plan at any time."; }
body #order-standard_cart:has(.view-cart-items) .header-lined h1::after { content: "Check everything looks right. No setup fee, cancel any time."; }
body #order-standard_cart:has(#frmCheckout) .header-lined h1::after { content: "Create your account and choose how to pay. We'll be in touch within one working day."; }
@media (max-width: 767px) { body #order-standard_cart .header-lined h1::before { font-size: 30px; } }

/* Step 2, About your business: the questions as one numbered card */
body #order-standard_cart #frmConfigureProduct:has(#customfield62) > p:first-child, body #order-standard_cart #frmConfigureProduct:has(#customfield62) .secondary-cart-body > p:first-child { display: none; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .product-info { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px 18px 84px; position: relative; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='12' fill='%2312a05c'/%3E%3Cpath d='M13 17l4 14 7-10 7 10 4-14' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 20px center / 48px no-repeat; box-shadow: 0 1px 2px rgba(15,21,33,.04); margin-bottom: 24px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .product-info .product-title { font-size: 18px; font-weight: 700; margin: 0; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .product-info p { margin: 0; color: var(--wh-muted); }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .sub-heading { border: 0; margin: 8px 0 6px; height: auto; text-align: left; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .sub-heading span { font-size: 0; padding: 0; background: none; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .sub-heading span::before { content: "Your business"; font-size: 20px; font-weight: 700; color: var(--wh-ink); letter-spacing: -0.02em; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container { counter-reset: q; background: #fff; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); padding: 8px 28px 12px; box-shadow: var(--wh-shadow); margin-bottom: 24px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group { counter-increment: q; position: relative; padding: 20px 0 20px 48px; margin: 0; border-bottom: 1px solid var(--wh-line); }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group:last-child { border-bottom: 0; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group::before { content: counter(q); position: absolute; left: 0; top: 18px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-weight: 700; font-size: 14px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group:focus-within::before { background: var(--wh-brand); color: #fff; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container label { font-size: 16px; font-weight: 600; color: var(--wh-ink); margin-bottom: 8px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container textarea.form-control { height: auto; min-height: 112px; padding-top: 12px; line-height: 1.5; resize: vertical; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .field-help-text, body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-text { display: block; margin-top: 8px; font-size: 13.5px; color: var(--wh-muted); }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group:has(input[type=checkbox]) label { display: flex; gap: 10px; align-items: center; font-weight: 500; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--wh-brand); }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) p.small.text-muted, body #order-standard_cart #frmConfigureProduct:has(#customfield62) .text-muted.small { display: none; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) #btnCompleteProductConfig { font-size: 0; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) #btnCompleteProductConfig::before { content: "Continue to review \2192"; font-size: 17px; }
@media (max-width: 767px) { body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container { padding: 4px 18px 8px; } body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group { padding-left: 0; padding-top: 58px; } }

/* Cart lines get an icon tile: the logo for products, a globe for domains (domain lines have no product group) */
body #order-standard_cart .view-cart-items .item > .row > [class*="col-sm-7"] { position: relative; padding-left: 80px; min-height: 52px; }
body #order-standard_cart .view-cart-items .item > .row > [class*="col-sm-7"]::before { content: ""; position: absolute; left: 15px; top: 0; width: 48px; height: 48px; border-radius: 12px; background: var(--wh-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / 24px no-repeat; }
body #order-standard_cart .view-cart-items .item:has(.item-group) > .row > [class*="col-sm-7"]::before { background: var(--wh-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 9l4 14 7-10 7 10 4-14' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; }
body #order-standard_cart .view-cart-items .item-title .btn-link { font-size: 13px; padding: 0 0 0 8px; vertical-align: 2px; }
body #order-standard_cart .view-cart-items .item:hover { background: #fcfdfc; }

/* Order summary: a short reassurance list above the total */
body #order-standard_cart .summary-container .total-due-today::before { content: "\2713  Secure card and Direct Debit payments\A\2713  UK-based support team\A\2713  Order confirmation by email"; display: block; white-space: pre; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-size: 13.5px; font-weight: 500; line-height: 1.9; }

/* Fields: 50px, a firmer border on hover and a soft green ring on focus */
.form-control, .custom-select, .field { height: 50px; border-radius: 12px; border-color: #d1d5db; }
.form-control:hover, .custom-select:hover, .field:hover { border-color: #9ca3af; }
.form-control:focus, .custom-select:focus, .field:focus { border-color: var(--wh-brand); box-shadow: 0 0 0 4px rgba(18,160,92,.14); }
.form-control::placeholder, .field::placeholder { color: #6b7280; }
select.form-control, .custom-select, select.field { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; }
.form-control.is-invalid, .has-error .form-control { border-color: #d92d20; box-shadow: 0 0 0 4px rgba(217,45,32,.1); }
.custom-control-label::before { border-radius: 6px; border-color: #d1d5db; }
body #order-standard_cart .prepend-icon .field-icon { width: 46px; height: 50px; line-height: 50px; color: #9ca3af; }
body #order-standard_cart .prepend-icon .field { padding-left: 46px; }
body #order-standard_cart .prepend-icon:focus-within .field-icon { color: var(--wh-brand); }
body #order-standard_cart #frmCheckout .field, body #order-standard_cart #frmCheckout .form-control { height: 50px; border-radius: 12px; }
body #order-standard_cart #frmCheckout .prepend-icon .field-icon { width: 46px; line-height: 50px; }
body #order-standard_cart #frmCheckout .form-group { margin-bottom: 16px; }

/* Checkout sections as white cards rather than lines */
body #order-standard_cart #frmCheckout #containerNewUserSignup,
body #order-standard_cart #frmCheckout #containerExistingUserSignin:not(.w-hidden),
body #order-standard_cart #frmCheckout #containerNewUserSecurity,
body #order-standard_cart #frmCheckout #paymentGatewaysContainer { background: #fff; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); padding: 8px 28px 20px; margin-bottom: 24px; box-shadow: 0 1px 2px rgba(15,21,33,.04); }
body #order-standard_cart #frmCheckout #containerNewUserSignup .sub-heading:first-of-type,
body #order-standard_cart #frmCheckout #containerNewUserSecurity .sub-heading:first-of-type { border-top: 0; margin-top: 12px; padding-top: 12px; }

/* Domain step: the choices as selectable cards */
body #order-standard_cart .domain-selection-options .option { border-radius: 14px; padding: 18px 22px; transition: border-color .15s, background .15s; }
body #order-standard_cart .domain-selection-options .option:hover { border-color: #9ca3af; }
body #order-standard_cart .domain-selection-options .option:has(input[name=domainoption]:checked) { border-color: var(--wh-brand); background: var(--wh-brand-tint); box-shadow: 0 0 0 3px rgba(18,160,92,.12); }
body #order-standard_cart .domain-selection-options textarea, body #order-standard_cart .domain-selection-options input[type=text] { min-height: 50px; border-radius: 12px; }
body #order-standard_cart .products .product .btn-order-now { white-space: nowrap; padding-left: 18px; padding-right: 18px; }
body #order-standard_cart .products .product footer { padding: 20px 16px 20px 0; }

/* ---- Checkboxes and radios: drawn in CSS instead of WHMCS's blue image sprites (iCheck's own CSS loads later, hence body and !important) ---- */
body .icheckbox_square-blue, body .iradio_square-blue { filter: none; width: 22px; height: 22px; background: #fff !important; border: 1.5px solid #9ca3af !important; border-radius: 7px !important; transition: border-color .15s, background-color .15s, box-shadow .15s; vertical-align: -5px; margin-right: 8px; }
body .iradio_square-blue { border-radius: 50% !important; }
body .icheckbox_square-blue.hover, body .iradio_square-blue.hover, body label:hover > .icheckbox_square-blue, body label:hover > .iradio_square-blue { border-color: var(--wh-brand) !important; }
body .icheckbox_square-blue.checked { background: var(--wh-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat !important; border-color: var(--wh-brand) !important; }
body .iradio_square-blue.checked { background: var(--wh-brand) !important; border-color: var(--wh-brand) !important; box-shadow: inset 0 0 0 4px #fff; }
body .icheckbox_square-blue.disabled, body .iradio_square-blue.disabled { opacity: .5; }
body .icheckbox_square-blue.focus, body .iradio_square-blue.focus { box-shadow: 0 0 0 4px rgba(18,160,92,.18); }
body .iradio_square-blue.checked.focus { box-shadow: inset 0 0 0 4px #fff, 0 0 0 4px rgba(18,160,92,.18); }
input[type=checkbox], input[type=radio] { accent-color: var(--wh-brand); width: 18px; height: 18px; vertical-align: -3px; }

/* ---- Domain step: each option's fields read as one search bar ---- */
body #order-standard_cart .domain-selection-options .option > label { display: flex; align-items: center; margin: 0; font-size: 16px; font-weight: 600; cursor: pointer; }
body #order-standard_cart .domain-input-group { margin-top: 16px; }
body #order-standard_cart .domain-input-group > .row { display: flex; align-items: stretch; flex-wrap: nowrap; gap: 10px; margin: 0; }
body #order-standard_cart .domain-input-group > .row + .row { margin-top: 10px; }
body #order-standard_cart .domain-input-group > .row > [class*="col-sm-8"] { flex: 1 1 0; min-width: 0; width: auto; max-width: none; margin-left: 0; padding: 0; }
body #order-standard_cart .domain-input-group > .row > [class*="col-sm-2"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
body #order-standard_cart .domain-input-group .btn-block { width: auto; }
body #order-standard_cart .domains-row:not(:has(.multiselect)) { display: flex; flex-wrap: nowrap; margin: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 12px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
body #order-standard_cart .domains-row:not(:has(.multiselect)):hover { border-color: #9ca3af; }
body #order-standard_cart .domains-row:not(:has(.multiselect)):focus-within { border-color: var(--wh-brand); box-shadow: 0 0 0 4px rgba(18,160,92,.14); }
body #order-standard_cart .domains-row > [class*="col-"] { padding: 0; }
body #order-standard_cart .domains-row > .col-9 { flex: 1 1 auto; max-width: none; }
body #order-standard_cart .domains-row > .col-3 { flex: 0 0 130px; max-width: 130px; border-left: 1px solid var(--wh-line); }
body #order-standard_cart .domains-row .input-group { flex-wrap: nowrap; }
body #order-standard_cart .domains-row .form-control, body #order-standard_cart .domains-row .input-group-text, body #order-standard_cart .domains-row textarea { height: 54px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background-color: transparent; }
body #order-standard_cart .domains-row .input-group-text { padding: 0 4px 0 16px; color: var(--wh-muted); font-size: 16px; }
body #order-standard_cart .domains-row .input-group-prepend + .form-control { padding-left: 0; }
body #order-standard_cart .domains-row textarea { width: 100%; height: 84px; padding: 15px 16px; resize: none; font-size: 16px; line-height: 1.5; }
body #order-standard_cart .domain-input-group .btn { height: 100%; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 26px; border-radius: 12px; font-weight: 600; background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }
body #order-standard_cart .domain-input-group .btn:hover { background: var(--wh-brand-deep); border-color: var(--wh-brand-deep); }
body #order-standard_cart .domain-input-group .btn br { display: none; }
body #order-standard_cart .domains-row:has(.multiselect) { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 0; padding: 0 4px; font-size: 13.5px; }
body #order-standard_cart .domains-row:has(.multiselect) .btn { background: transparent; border: 0; color: var(--wh-ink-2); min-height: 0; height: auto; padding: 4px 6px; font-weight: 500; font-size: 13.5px; }
body #order-standard_cart .domains-row:has(.multiselect) label { font-size: 13.5px; font-weight: 500; }

/* Search results */
body #order-standard_cart #DomainSearchResults { margin-top: 28px; max-width: 760px; }
body #order-standard_cart .primary-domain-header, body #order-standard_cart .suggested-domains .card-header { background: transparent; border: 0; padding: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--wh-muted); text-transform: uppercase; letter-spacing: .05em; }
body #order-standard_cart .domain-lookup-result { padding: 22px 24px; border: 1px solid var(--wh-line); border-radius: 14px; background: #fff; text-align: left; }
body #order-standard_cart .domain-lookup-result .headline { font-size: 20px; font-weight: 600; }
body #order-standard_cart .domain-checker-available, body #order-standard_cart .domain-available { color: var(--wh-brand-deep); }
body #order-standard_cart .domain-checker-unavailable, body #order-standard_cart .domain-unavailable { color: #b42318; }
body #order-standard_cart .domain-price { margin-top: 6px; color: var(--wh-muted); font-size: 14px; }
body #order-standard_cart .suggested-domains { margin-top: 24px; border: 0; background: transparent; }
body #order-standard_cart .suggested-domains .card-body { padding: 0; border: 1px solid var(--wh-line); border-radius: 14px; overflow: hidden; background: #fff; }
body #order-standard_cart .domain-suggestion { padding: 14px 20px; border-bottom: 1px solid var(--wh-line); }
body #order-standard_cart .domain-suggestion:last-child { border-bottom: 0; }
body #order-standard_cart .domain-suggestions-warning p { margin-top: 12px; font-size: 12.5px; color: var(--wh-muted); }
body #order-standard_cart #btnDomainContinue { margin-top: 24px; padding: 14px 34px; background: var(--wh-brand); border-color: var(--wh-brand); }

/* ---- Domain configuration: one card, add-ons as selectable tiles, labels above fields ---- */
body #order-standard_cart #frmConfigureDomains { max-width: 820px; padding: 28px 32px 32px; background: #fff; border: 1px solid var(--wh-line); border-radius: var(--wh-radius); box-shadow: 0 1px 2px rgba(15,21,33,.04); }
body #order-standard_cart #frmConfigureDomains > p:first-of-type { color: var(--wh-muted); }
body #order-standard_cart #frmConfigureDomains .sub-heading { height: auto; border-top: 0; margin: 20px 0 12px; text-align: left; }
body #order-standard_cart #frmConfigureDomains .sub-heading span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 44px; border-radius: 12px; background: var(--wh-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") 14px center / 20px no-repeat; color: var(--wh-brand-deep); font-size: 18px; font-weight: 600; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row { margin: 0 0 8px; padding: 14px 4px; border-bottom: 1px solid var(--wh-line); }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row .form-group { margin: 0; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row label { display: block; font-size: 13px; color: var(--wh-muted); font-weight: 500; }
body #order-standard_cart .addon-products { margin-top: 16px; }
body #order-standard_cart .panel-addon { height: 100%; display: flex; flex-direction: column; margin: 0; border: 1px solid var(--wh-line); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .15s, background .15s, box-shadow .15s; }
body #order-standard_cart .panel-addon:hover { border-color: #9ca3af; }
body #order-standard_cart .panel-addon.panel-addon-selected, body #order-standard_cart .panel-addon:has(input:checked) { border-color: var(--wh-brand); background: var(--wh-brand-tint); box-shadow: 0 0 0 3px rgba(18,160,92,.12); }
body #order-standard_cart .panel-addon .panel-body { flex: 1; padding: 18px 20px 8px; font-size: 14px; color: var(--wh-ink-2); text-align: left; }
body #order-standard_cart .panel-addon .panel-body label { display: flex; align-items: center; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--wh-ink); }
body #order-standard_cart .panel-addon .panel-price { padding: 0 20px 14px; background: transparent; color: var(--wh-ink); font-size: 15px; font-weight: 600; text-align: left; }
body #order-standard_cart .panel-addon .panel-add { margin: 0 20px 18px; padding: 9px 14px; border: 1px solid var(--wh-ink); border-radius: 999px; background: #fff; color: var(--wh-ink); font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; }
body #order-standard_cart .panel-addon .panel-add:hover { background: var(--wh-bg-2); }
body #order-standard_cart .panel-addon.panel-addon-selected .panel-add, body #order-standard_cart .panel-addon:has(input:checked) .panel-add { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }
body #order-standard_cart #frmConfigureDomains .form-group.row { margin: 18px 0 0; }
body #order-standard_cart #frmConfigureDomains .form-group.row > [class*="col-sm-4"], body #order-standard_cart #frmConfigureDomains .form-group.row > [class*="col-sm-8"] { flex: 0 0 100%; max-width: 100%; padding: 0; text-align: left !important; }
body #order-standard_cart #frmConfigureDomains .form-group.row > [class*="col-sm-4"] { margin-bottom: 6px; font-size: 14.5px; font-weight: 500; color: var(--wh-ink-2); }
body #order-standard_cart #frmConfigureDomains .input-250, body #order-standard_cart #frmConfigureDomains .input-inline { width: 100% !important; max-width: none; display: block; }
body #order-standard_cart #frmConfigureDomains .form-group.row:has(input[type=checkbox]) { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; padding: 14px 16px; border: 1px solid var(--wh-line); border-radius: 12px; }
body #order-standard_cart #frmConfigureDomains .form-group.row:has(input[type=checkbox]) > [class*="col-"] { flex: 0 1 auto; width: auto; margin: 0; order: 2; }
body #order-standard_cart #frmConfigureDomains .form-group.row:has(input[type=checkbox]) > [class*="col-sm-8"] { order: 1; flex: 0 0 auto; }
body #order-standard_cart #frmConfigureDomains .btn-primary, body #order-standard_cart #frmConfigureDomains button[type=submit] { margin-top: 28px; padding: 14px 34px; background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }

/* ---- Store: product cards with room to breathe, features as a ticked list, price and button in a footer ---- */
body #order-standard_cart .products .row-eq-height > [class*="col-"] { display: flex; margin-bottom: 24px; }
body #order-standard_cart .products .product { display: flex; flex-direction: column; width: 100%; margin: 0; border-radius: 20px; box-shadow: 0 1px 2px rgba(15,21,33,.04); transition: border-color .2s, box-shadow .2s, transform .2s; }
body #order-standard_cart .products .product:hover { border-color: #b3e5c9; box-shadow: var(--wh-shadow); transform: translateY(-2px); }
body #order-standard_cart .products .product header { background: #fff; border-bottom: 0; padding: 28px 28px 0; }
body #order-standard_cart .products .product header::before { content: ""; display: block; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 12px; background: var(--wh-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E") center / 24px no-repeat; }
body #order-standard_cart .products .product header span { font-size: 22px; letter-spacing: -0.02em; }
body #order-standard_cart .products .product div.product-desc { float: none; width: 100%; flex: 1; padding: 10px 28px 0; color: var(--wh-ink-2); font-size: 15px; }
body #order-standard_cart .products .product div.product-desc p { margin: 0 0 12px; }
body #order-standard_cart .products .product div.product-desc ul { list-style: none; margin: 8px 0 0; padding: 0; }
body #order-standard_cart .products .product div.product-desc li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid var(--wh-line); }
body #order-standard_cart .products .product div.product-desc li::before { content: ""; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; border-radius: 50%; background: var(--wh-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6' fill='none' stroke='%2306733f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
body #order-standard_cart .products .product div.product-desc li .feature-value { font-weight: 600; color: var(--wh-ink); }
body #order-standard_cart .products .product footer { float: none; width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 20px 28px 26px; border-top: 1px solid var(--wh-line); background: var(--wh-bg-2); text-align: left; font-size: 13px; color: var(--wh-muted); }
body #order-standard_cart .products .product div.product-pricing { margin: 0; text-align: left; line-height: 1.3; }
body #order-standard_cart .products .product div.product-pricing span.price { display: block; margin: 2px 0; font-size: 34px; }
body #order-standard_cart .products .product .btn-order-now { flex: none; padding: 12px 22px; font-size: 15px; font-weight: 600; }

/* ---- Polish pass: depth at the top of each page, calmer type, consistent spacing and small interactions ---- */

/* A soft green glow behind the top of every page, echoing the gradients on webhostgb.com */
#main-body { position: relative; background: radial-gradient(900px 340px at 85% -80px, rgba(18,160,92,.10), transparent 70%), linear-gradient(180deg, var(--wh-bg-2) 0, #fff 260px); }
.master-breadcrumb { background: var(--wh-bg-2); border-bottom: 0; }
.master-breadcrumb .breadcrumb { padding: 14px 0 0; margin: 0; }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #c4c9cf; }
.master-breadcrumb .breadcrumb-item.active { color: var(--wh-ink-2); }

/* Header: taller logo bar and pill-shaped menu states */
.header .navbar:not(.main-navbar-wrapper) { padding-top: 16px; padding-bottom: 16px; }
.header .main-navbar-wrapper { border-top: 1px solid var(--wh-line); border-bottom: 1px solid var(--wh-line); padding: 6px 0; }
.header .main-navbar-wrapper .navbar-nav .nav-link { padding: 8px 14px !important; border-radius: 999px; transition: background .15s, color .15s; }
.header .main-navbar-wrapper .navbar-nav .nav-link:hover { background: var(--wh-bg-2); color: var(--wh-ink); }
.header .main-navbar-wrapper .navbar-nav .active > .nav-link, .header .main-navbar-wrapper .navbar-nav .nav-link.active { background: var(--wh-brand-tint); color: var(--wh-brand-deep); }
.header .search .form-control { height: 42px; border-radius: 999px 0 0 999px; background: var(--wh-bg-2); }
.header .search .btn { height: 42px; border-radius: 0 999px 999px 0; background: var(--wh-bg-2); }
.header .toolbar .nav-link, .header .cart-btn { border-radius: 12px; }
.dropdown-menu { padding: 8px; }
.dropdown-item { border-radius: 8px; padding: 9px 12px; font-size: 15px; }
.dropdown-item:hover { background: var(--wh-bg-2); }

/* Type: headings in ink, a touch tighter; card titles get a short green rule */
.primary-content h1, .primary-content .h1 { font-size: 34px; letter-spacing: -0.03em; }
.card-body > .card-title, .card-body > h3.card-title { position: relative; margin-bottom: 20px; padding-bottom: 14px; font-size: 22px; letter-spacing: -0.02em; }
.card-body > .card-title::after, .card-body > h3.card-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 3px; background: var(--wh-brand); }
.card-body { padding: 28px 32px; }
.card { box-shadow: 0 1px 2px rgba(15,21,33,.04); }

/* Links that are whole cards lift slightly */
a.card, .kb-category, .card-link-hover, .tiles .tile { transition: transform .2s, box-shadow .2s, border-color .2s; }
a.card:hover, .kb-category:hover, .tiles .tile:hover { transform: translateY(-2px); box-shadow: var(--wh-shadow); border-color: #b3e5c9; }

/* Buttons: slight lift on hover, soft shadow on the main actions */
.btn { transition: background .15s, border-color .15s, box-shadow .15s, transform .15s; }
.btn-primary:hover, .btn-success:hover, body #order-standard_cart .btn-checkout:hover, body #order-standard_cart #btnCompleteOrder:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(15,21,33,.35); }
.btn:active { transform: none; }

/* Login: captcha and "remember me" on tidy rows */
.login-form .card-body h6, .login-form .card-body .h3 { margin-bottom: 4px; }
.login-form .text-center .captchaimage, .captchaimage { border-radius: 8px; border: 1px solid var(--wh-line); }
.login-form #default-captcha-domainchecker, .login-form .captcha-container, #default-captcha-domainchecker { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
#inputCaptcha, input[name=code] { width: 140px !important; height: 44px; text-align: center; letter-spacing: .15em; font-weight: 600; }
.login-form .card-body .float-left + .text-right, .login-form .card-body .d-flex { align-items: center; }
.login-form .form-check, .login-form .custom-checkbox, .login-form label[for=inputRememberMe] { font-size: 14.5px; color: var(--wh-ink-2); }
.login-form .card-footer { text-align: center; font-size: 14.5px; }

/* Announcements and articles: ink headings, quieter excerpts */
.announcements .announcement { padding: 26px 0; border-bottom: 1px solid var(--wh-line); }
.announcements .announcement:first-child { padding-top: 4px; }
.announcements .announcement:last-child { border-bottom: 0; }
.announcements .announcement h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 6px; }
.announcements .announcement h1 a { color: var(--wh-ink); text-decoration: none; }
.announcements .announcement h1 a:hover { color: var(--wh-brand-deep); }
.announcements .announcement .list-inline { margin-bottom: 12px; font-size: 13.5px; color: var(--wh-muted); }
.announcements .announcement article, .announcements .announcement blockquote { margin: 0 0 16px; padding: 0; border: 0; background: transparent; color: var(--wh-ink-2); font-size: 15.5px; line-height: 1.7; }
.kb-article-content, .announcement-single, .primary-content article { font-size: 16.5px; line-height: 1.75; color: var(--wh-ink-2); }

/* Pagination as rounded chips */
.pagination { gap: 6px; }
.pagination .page-link { border-radius: 10px !important; border-color: var(--wh-line); min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 12px; }
.pagination .page-item.active .page-link { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }

/* Ticket form: tidy Markdown editor and file input */
.md-editor { border: 1px solid #d1d5db !important; border-radius: 12px; overflow: hidden; box-shadow: none !important; }
.md-editor.active { border-color: var(--wh-brand) !important; box-shadow: 0 0 0 4px rgba(18,160,92,.14) !important; }
.md-editor > .md-header { padding: 8px; background: var(--wh-bg-2); border-bottom: 1px solid var(--wh-line); }
.md-editor .btn-group { margin-right: 6px; }
.md-editor .btn { padding: 5px 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent; color: var(--wh-ink-2); font-size: 13px; }
.md-editor .btn:hover, .md-editor .btn.active { background: #fff; color: var(--wh-ink); box-shadow: 0 1px 2px rgba(15,21,33,.08); }
.md-editor > textarea { border: 0 !important; padding: 16px !important; font-size: 15.5px; background: #fff !important; }
.md-editor > .md-footer, .md-editor .md-footer { background: var(--wh-bg-2); border-top: 1px solid var(--wh-line); font-size: 12px; }
.custom-file-label, input[type=file].form-control { height: 50px; border-radius: 12px; display: flex; align-items: center; }
.custom-file-label::after { height: 100%; display: flex; align-items: center; border-radius: 0 12px 12px 0; background: var(--wh-bg-2); }

/* Sidebar: icons in brand green, a little more air */
.card-sidebar .card-header .card-title { font-size: 15.5px; font-weight: 600; }
.card-sidebar .card-header .card-title i, .card-sidebar .list-group-item i { color: var(--wh-brand); width: 18px; }
.card-sidebar .list-group-item:hover { background: var(--wh-bg-2); color: var(--wh-ink); }
.card-sidebar .badge { background: var(--wh-bg-2); color: var(--wh-muted); font-weight: 500; border-radius: 999px; padding: 4px 8px; }

/* Alerts and labels */
.alert { padding: 14px 18px; font-size: 15px; border-width: 1px; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.badge, .label { border-radius: 999px; font-weight: 600; padding: 4px 10px; }

/* Footer: more room, pill hovers on the links */
footer.footer { padding: 56px 0 48px; }
footer.footer .nav-link { padding: 6px 14px; border-radius: 999px; }
footer.footer .nav-link:hover { background: #fff; }

/* Login card: captcha in its own soft panel, "Remember me" above a full-width sign-in button */
.login-form .card-body { display: flex; flex-direction: column; }
.login-form .card-body > .text-right { order: 1; text-align: left !important; margin: 4px 0 18px; }
.login-form .card-body > .text-right label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 500; cursor: pointer; }
.login-form .card-body > .text-right .form-check-input { position: static; margin: 0; }
.login-form .card-body > .float-left { order: 2; float: none !important; }
.login-form #login { width: 100%; height: 50px; font-size: 16px; font-weight: 600; }
.login-form .row.justify-content-center { margin: 0 0 12px; }
.login-form .row.justify-content-center > [class*="col-md-8"] { flex: 0 0 100%; max-width: 100%; padding: 0; margin-bottom: 0 !important; }
#default-captcha-domainchecker { margin: 0 !important; padding: 16px; border-radius: 12px; background: var(--wh-bg-2); border: 1px solid var(--wh-line); }
#default-captcha-domainchecker p { flex: 0 0 100%; margin: 0 0 4px; font-size: 13.5px; color: var(--wh-muted); text-align: left; }
#default-captcha-domainchecker > [class*="col-"] { flex: 0 0 auto; max-width: none; width: auto; padding: 0; }
#default-captcha-domainchecker .captchaimage img { display: block; height: 44px; border-radius: 8px; }
.badge-info, .label-info, .badge-primary { background: var(--wh-brand-tint) !important; color: var(--wh-brand-deep) !important; }

/* ---- Background and heading scale ---- */
/* Soft grey runs the full height of the page (white cards sit on it); the footer is white so the edge stays clear */
#main-body { background: radial-gradient(900px 340px at 85% -80px, rgba(18,160,92,.10), transparent 70%), var(--wh-bg-2); min-height: calc(100vh - 320px); }
footer.footer { background: #fff; }
body.primary-bg-color { background: #fff; }
.primary-content h1, .primary-content .h1 { font-size: 28px; line-height: 1.2; }
.primary-content h2, .primary-content .h2 { font-size: 22px; }
.primary-content h3, .primary-content .h3 { font-size: 19px; }
.primary-content h4, .primary-content .h4 { font-size: 17px; }
.card-body > .card-title, .card-body > h3.card-title { font-size: 18px; }
body #order-standard_cart .header-lined h1 { font-size: 32px; }
body #order-standard_cart .products .product header span { font-size: 20px; }
body #order-standard_cart .products .product div.product-pricing span.price { font-size: 30px; }
body #order-standard_cart .summary-container .total-due-today .amt { font-size: 34px; }

/* ---- Knowledgebase ---- */
/* Search: one large rounded bar with an icon */
.kb-search { position: relative; flex-wrap: nowrap; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 10px 30px -14px rgba(15,21,33,.18); }
.kb-search::before { content: ""; position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); z-index: 4; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.kb-search .form-control { height: 60px; padding-left: 54px; font-size: 17px; border-radius: 16px 0 0 16px !important; border-right: 0; }
.kb-search .btn { height: 60px; padding: 0 28px; border-radius: 0 16px 16px 0 !important; background: var(--wh-brand); border-color: var(--wh-brand); font-weight: 600; }
.kb-search .btn:hover { background: var(--wh-brand-deep); border-color: var(--wh-brand-deep); }
form:has(> .kb-search) { margin-bottom: 32px !important; }

/* Category tiles: icon, title and article count on one line, description underneath */
.kb-category { height: calc(100% - 24px); margin-bottom: 24px !important; }
.kb-category a.card-body { display: block; height: 100%; padding: 22px 24px; color: var(--wh-ink); text-decoration: none; }
.kb-category .h5 { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--wh-ink); }
.kb-category .h5 > i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-size: 17px; }
.kb-category .h5 > .badge { order: 3; float: none !important; margin-left: auto; flex: none; background: var(--wh-bg-2) !important; color: var(--wh-muted) !important; font-weight: 500; }
.kb-category .h5 > .btn { order: 4; }
.kb-category a.card-body > p, .kb-category a.card-body > small, .kb-category a.card-body > .text-muted { display: block; margin: 8px 0 0 54px; font-size: 14px; line-height: 1.55; color: var(--wh-muted); }
.kb-category:hover .h5 > i { background: var(--wh-brand); color: #fff; }

/* Article lists */
.kb-article-item { display: block; padding: 16px 24px 16px 60px !important; position: relative; color: var(--wh-ink) !important; font-size: 16px; font-weight: 600; text-decoration: none; }
.kb-article-item > i { position: absolute; left: 24px; top: 17px; width: 24px; color: var(--wh-brand) !important; font-size: 17px; }
.kb-article-item small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--wh-muted); }
.kb-article-item:hover { background: var(--wh-bg-2); color: var(--wh-brand-deep) !important; }

/* Article page */
.primary-content .card-body > h1:first-child { font-size: 26px; margin-bottom: 10px; }
.primary-content .card-body > h1:first-child + .list-inline { font-size: 13.5px; color: var(--wh-muted); }
.primary-content .card-body > hr { border-color: var(--wh-line); margin: 24px 0; }
.primary-content .card-body > article { font-size: 16.5px; line-height: 1.8; color: var(--wh-ink-2); }
.primary-content .card-body > article p + p { margin-top: 1em; }
.primary-content .card-body > article ol, .primary-content .card-body > article ul { padding-left: 1.4em; margin: 1em 0; }
.primary-content .card-body > article li + li { margin-top: .4em; }
.primary-content .card-body > article li::marker { color: var(--wh-brand); font-weight: 600; }
.primary-content .card-body > article img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--wh-line); margin: 12px 0; }
.primary-content .card-body > article strong { color: var(--wh-ink); }
.primary-content .card-body > article code { padding: 2px 6px; border-radius: 6px; background: var(--wh-bg-2); font-size: .9em; }
.primary-content .card-body > h4 { margin-top: 8px; font-size: 16px; font-weight: 600; }
.primary-content .card-body > h4 + form { gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--wh-bg-2); align-items: center; }
.primary-content .card-body > h4 + form .btn { margin-right: 6px; }
.kb-search.input-group > .form-control:not(textarea) { height: 60px !important; padding-top: 0; padding-bottom: 0; line-height: 60px; border: 1px solid var(--wh-line); border-right: 0; }
.kb-category .h5 > .show-on-card-hover { position: absolute; right: 16px; top: 16px; }
.kb-category a.card-body { position: relative; }
/* The grey content area fills the window so the footer always sits at the bottom */
body.primary-bg-color { min-height: 100vh; display: flex; flex-direction: column; }
body.primary-bg-color > #main-body { flex: 1 0 auto; min-height: 0; }

/* =====================================================================
   Order flow v2 (Nov 2026): a calm, roomy four-step wizard.
   Sage background, white question cards, a dark green order summary
   that follows you down the page, and big obvious buttons.
   ===================================================================== */
body:has(#order-standard_cart) { background: #f9fafb; }
body:has(#order-standard_cart) #main-body { padding: 40px 0 96px; background: transparent; }
body:has(#order-standard_cart) #main-body > .container { max-width: 1160px; }
body #order-standard_cart { font-size: 16px; }
body #order-standard_cart .header-lined { margin-bottom: 36px; }

/* Cards: white, soft, generous */
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container:not(:has(#inputBillingcycle)),
body #order-standard_cart .view-cart-items,
body #order-standard_cart .view-cart-tabs,
body #order-standard_cart #frmCheckout #containerNewUserSignup,
body #order-standard_cart #frmCheckout #containerExistingUserSignin:not(.w-hidden),
body #order-standard_cart #frmCheckout #containerNewUserSecurity,
body #order-standard_cart #frmCheckout #paymentGatewaysContainer,
body #order-standard_cart .domain-selection-options .option {
  background: #fff; border: 0; border-radius: 24px; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -24px rgba(15,21,33,.22);
}

/* Inputs: tall, quiet, obvious when focused */
body #order-standard_cart .form-control, body #order-standard_cart .field, body #order-standard_cart .custom-select { height: 56px; border-radius: 14px; border: 1.5px solid #dde4dc; background-color: #f9fbf8; font-size: 16px; padding-left: 16px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
body #order-standard_cart textarea.form-control { height: auto; padding-top: 14px; }
body #order-standard_cart .form-control:hover, body #order-standard_cart .field:hover { border-color: #b9c6b8; }
body #order-standard_cart .form-control:focus, body #order-standard_cart .field:focus { background-color: #fff; border-color: var(--wh-brand); box-shadow: 0 0 0 5px rgba(18,160,92,.14); }
body #order-standard_cart .prepend-icon .field { padding-left: 50px; }
body #order-standard_cart .prepend-icon .field-icon { width: 50px; height: 56px; line-height: 56px; }

/* Step 1, domain: three big choice cards */
body #order-standard_cart .domain-selection-options { max-width: 760px; }
body #order-standard_cart .domain-selection-options .option { padding: 22px 26px; margin-bottom: 14px; border: 2px solid transparent; }
body #order-standard_cart .domain-selection-options .option:hover { border-color: #cfe0cf; }
body #order-standard_cart .domain-selection-options .option.option-selected { border-color: var(--wh-brand); background: #f3fbf6; box-shadow: 0 0 0 5px rgba(18,160,92,.12), 0 18px 40px -24px rgba(15,21,33,.25); }
body #order-standard_cart .domain-selection-options .option label { font-size: 17px; }
body #order-standard_cart .domain-selection-options .option .domain-input-group { margin-top: 16px; }
body #order-standard_cart .domain-selection-options .btn-primary { height: 56px; border-radius: 14px; padding: 0 28px; font-weight: 700; }
body #order-standard_cart .domain-selection-options + p, body #order-standard_cart #frmProductDomain + p { color: var(--wh-muted); font-size: 14px; }

/* Step 2, about your business */
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container:has(#inputBillingcycle) { display: none; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .product-info { display: none; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .sub-heading { display: none; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container { padding: 12px 40px 24px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group { padding: 28px 0 28px 56px; border-bottom: 1px solid #eef0f2; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group::before { top: 26px; width: 36px; height: 36px; border-radius: 12px; font-size: 15px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container label { font-size: 17px; margin-bottom: 10px; display: block; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .field-help-text { font-size: 14px; margin-top: 10px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container textarea.form-control { min-height: 120px; }
/* Optional questions get their own quieter group */
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .form-group:has(#customfield67) { margin-top: 28px; padding-top: 72px; border-top: 0; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .form-group:has(#customfield67)::after { content: "Optional, but it helps us get your first draft right"; position: absolute; left: -40px; right: -40px; top: 0; padding: 14px 40px; background: #f6f9f5; border-top: 1px solid #eef0f2; border-bottom: 1px solid #eef0f2; font-size: 14px; font-weight: 600; color: var(--wh-brand-deep); }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .form-group:has(#customfield66) { border-bottom: 0; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .alert-warning.info-text-sm { background: transparent; border: 0; padding: 0 4px; color: var(--wh-muted); font-size: 14px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .alert-warning.info-text-sm .alert-link { color: var(--wh-brand-deep); }

/* The order summary: dark green, sticky, the one place to look */
body #order-standard_cart .secondary-cart-sidebar { padding-left: 32px; }
body #order-standard_cart .order-summary { background: #053a24; color: #fff; border: 0; border-radius: 24px; padding: 32px 30px 28px; box-shadow: 0 30px 60px -30px rgba(6,51,31,.6); overflow: hidden; position: relative; }
body #order-standard_cart .order-summary::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(126,226,173,.25), transparent); }
body #order-standard_cart .order-summary h2 { color: #9fd9b9; font-size: 13px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 18px; padding: 0; border: 0; background: none; text-align: left; }
body #order-standard_cart .summary-container { background: transparent; border: 0; padding: 0; color: rgba(255,255,255,.86); font-size: 15px; }
body #order-standard_cart .summary-container .product-name { color: #fff; font-size: 20px; font-weight: 700; display: block; margin-bottom: 2px; }
body #order-standard_cart .summary-container .product-group { color: rgba(255,255,255,.55); font-style: normal; font-size: 13px; display: block; margin-bottom: 14px; }
body #order-standard_cart .summary-container .clearfix { padding: 6px 0; }
body #order-standard_cart .summary-container .summary-totals { border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); margin: 10px 0 18px; padding: 8px 0; }
body #order-standard_cart .order-summary .loader { background: rgba(5,58,36,.85); color: #fff; }
body #order-standard_cart .summary-container .total-due-today { text-align: left; padding: 0; margin: 0; }
body #order-standard_cart .summary-container .total-due-today .amt { display: block; color: #fff; font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
body #order-standard_cart .summary-container .total-due-today span:not(.amt) { color: rgba(255,255,255,.6); font-size: 14px; }
body #order-standard_cart .summary-container .total-due-today::before { content: "\2713  No setup fee\A\2713  No contract, cancel any time\A\2713  UK support team\A\2713  Secure card, PayPal or Direct Debit"; background: rgba(255,255,255,.07); color: #c8f1da; border-radius: 14px; margin: 0 0 22px; padding: 14px 16px; line-height: 2; font-size: 14px; }
body #order-standard_cart .summary-container .total-due-today { display: flex; flex-direction: column; }
body #order-standard_cart .order-summary + .text-center, body #order-standard_cart #scrollingPanelContainer > .text-center { margin-top: 18px; }
body #order-standard_cart .order-summary .btn-checkout, body #order-standard_cart .order-summary #checkout { margin-top: 22px; }
body #order-standard_cart .secondary-cart-sidebar #continueShopping, body #order-standard_cart .order-summary #continueShopping { display: none !important; }

/* Big obvious buttons */
body #order-standard_cart #btnCompleteProductConfig, body #order-standard_cart #checkout, body #order-standard_cart .btn-checkout, body #order-standard_cart #btnCompleteOrder {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; border-radius: 999px; border: 0; background: #2bd17e; color: #06331f; font-size: 17px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(43,209,126,.6); transition: transform .15s, box-shadow .15s, background .15s; }
body #order-standard_cart #btnCompleteProductConfig:hover, body #order-standard_cart #checkout:hover, body #order-standard_cart .btn-checkout:hover, body #order-standard_cart #btnCompleteOrder:hover { background: #45dd90; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(43,209,126,.7); }
body #order-standard_cart #btnCompleteOrder { background: var(--wh-brand); color: #fff; max-width: 420px; margin: 8px auto 0; }
body #order-standard_cart #btnCompleteOrder:hover { background: var(--wh-brand-deep); }
body #order-standard_cart #btnCompleteProductConfig::before { color: #06331f; }

/* Step 3, review: one tidy line per item, less noise */
body #order-standard_cart .view-cart-items-header { background: transparent; color: var(--wh-muted); border: 0; padding: 0 24px 10px; font-size: 12px; letter-spacing: .1em; }
body #order-standard_cart .view-cart-items { padding: 8px 8px; margin-bottom: 18px; }
body #order-standard_cart .view-cart-items .item { padding: 22px 18px; border-bottom: 1px solid #eef0f2; border-radius: 16px; }
body #order-standard_cart .view-cart-items .item:last-child { border-bottom: 0; }
body #order-standard_cart .view-cart-items .item-price span:first-child { font-size: 26px; font-weight: 700; color: var(--wh-ink); }
body #order-standard_cart .view-cart-tabs { padding: 22px 26px 26px; }
body #order-standard_cart .view-cart-tabs .nav-tabs { border: 0; margin-bottom: 14px; }
body #order-standard_cart .view-cart-tabs .nav-tabs a[href="#calcTaxes"] { display: none; }
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link { border: 0; padding: 0; font-weight: 600; color: var(--wh-ink); background: none; }
body #order-standard_cart .view-cart-tabs .tab-content { border: 0; padding: 0; background: none; }
body #order-standard_cart .view-cart-tabs .btn { height: 52px; border-radius: 14px; }
body #order-standard_cart .empty-cart .btn { color: var(--wh-muted); font-size: 13px; }

/* Step 4, details and payment: numbered sections */
body #order-standard_cart #frmCheckout { counter-reset: sec; }
body #order-standard_cart #frmCheckout #containerNewUserSignup, body #order-standard_cart #frmCheckout #containerNewUserSecurity, body #order-standard_cart #frmCheckout #paymentGatewaysContainer { padding: 16px 36px 28px; margin-bottom: 22px; }
body #order-standard_cart #frmCheckout .sub-heading { counter-increment: sec; text-align: left; border: 0; height: auto; margin: 22px 0 18px; padding: 0; }
body #order-standard_cart #frmCheckout .sub-heading span { display: inline-flex; align-items: center; gap: 12px; background: none !important; padding: 0; font-size: 20px; font-weight: 700; color: var(--wh-ink); }
body #order-standard_cart #frmCheckout .sub-heading span::before { content: counter(sec); width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-size: 14px; }
body #order-standard_cart #frmCheckout .form-group { margin-bottom: 18px; }
body #order-standard_cart #frmCheckout .generate-password { border-radius: 999px; background: #f9fafb; border: 0; color: var(--wh-brand-deep); font-weight: 600; padding: 8px 16px; }
body #order-standard_cart #frmCheckout .password-strength-meter .progress { height: 6px; border-radius: 999px; background: #eef0f2; }
body #order-standard_cart #frmCheckout #totalDueToday { background: #053a24; color: #fff; border: 0; border-radius: 18px; padding: 18px; font-size: 16px; }
body #order-standard_cart #frmCheckout #totalDueToday strong { color: #7ee2ad; font-size: 22px; }
body #order-standard_cart #frmCheckout #paymentGatewaysContainer > p { display: none; }
body #order-standard_cart #frmCheckout #paymentGatewaysContainer .text-center { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; text-align: left !important; }
body #order-standard_cart #frmCheckout #paymentGatewaysContainer .radio-inline { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 18px; border: 2px solid #e3e9e2; border-radius: 16px; font-weight: 600; cursor: pointer; background: #fff; }
body #order-standard_cart #frmCheckout #paymentGatewaysContainer .radio-inline:has(.checked) { border-color: var(--wh-brand); background: #f3fbf6; box-shadow: 0 0 0 4px rgba(18,160,92,.1); }
body #order-standard_cart #frmCheckout .captchaimage img { border-radius: 12px; }
body #order-standard_cart #frmCheckout .alert-info, body #order-standard_cart #frmCheckout .marketing-email-optin { border: 0; border-radius: 16px; background: #fff; }

/* Mobile: one column, summary after the questions */
@media (max-width: 991px) {
  body #order-standard_cart .secondary-cart-sidebar { padding-left: 0; margin-top: 24px; }
  body #order-standard_cart #frmCheckout #paymentGatewaysContainer .text-center { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body:has(#order-standard_cart) #main-body { padding-top: 20px; }
  body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container { padding: 4px 20px 16px; }
  body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group { padding: 64px 0 24px 0; }
  body #order-standard_cart #frmConfigureProduct:has(#customfield62) .field-container .form-group::before { top: 22px; }
  body #order-standard_cart #frmConfigureProduct:has(#customfield62) .form-group:has(#customfield67) { padding-top: 112px; }
  body #order-standard_cart #frmConfigureProduct:has(#customfield62) .form-group:has(#customfield67)::before { top: 70px; }
  body #order-standard_cart #frmConfigureProduct:has(#customfield62) .form-group:has(#customfield67)::after { left: -20px; right: -20px; padding: 14px 20px; }
  body #order-standard_cart #frmCheckout #containerNewUserSignup, body #order-standard_cart #frmCheckout #containerNewUserSecurity, body #order-standard_cart #frmCheckout #paymentGatewaysContainer { padding: 8px 20px 20px; }
  body #order-standard_cart .order-summary { padding: 26px 22px; }
}
/* v2 fixes: summary rows, footer note and badge positions on the dark card */
body #order-standard_cart .summary-container .subtotal, body #order-standard_cart .summary-container .recurring-totals, body #order-standard_cart .summary-container .bordered-totals { color: rgba(255,255,255,.82); border-bottom-color: rgba(255,255,255,.14); }
body #order-standard_cart .summary-container .recurring-totals .cost { color: #fff; font-weight: 600; }
body #order-standard_cart .summary-container .total-due-today { margin-top: 22px; text-align: left; }
body #order-standard_cart .order-summary { position: sticky; top: 24px; }
body #order-standard_cart .order-summary::after { background: transparent; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.6); margin: 22px -30px -28px; padding: 16px 24px; }
body #order-standard_cart .order-summary .text-right { text-align: left !important; }
body #order-standard_cart .order-summary .btn-checkout.disabled { opacity: .45; }
body #order-standard_cart .order-summary .btn-checkout .fas, body #order-standard_cart .order-summary .btn-checkout i { margin-left: 8px; }
body #order-standard_cart #frmConfigureProduct:has(#customfield62) .form-group:has(#customfield67)::before { top: 98px; }
@media (max-width: 767px) { body #order-standard_cart .order-summary::after { margin: 22px -22px -26px; } body #order-standard_cart .order-summary { position: static; } }

/* Domain settings (only when registering a new domain): sits inside step 2, as tidy cards */
body #order-standard_cart:has(#frmConfigureDomains) .header-lined h1::before { content: "Your domain settings"; }
body #order-standard_cart:has(#frmConfigureDomains) .header-lined h1::after { content: "Check the details for your domain. The extras below are optional, and most businesses don't need them."; }
body #order-standard_cart #frmConfigureDomains { max-width: 760px; background: #fff; border-radius: 24px; padding: 32px 40px 36px; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -24px rgba(15,21,33,.22); }
body #order-standard_cart #frmConfigureDomains > p:first-of-type { display: none; }
body #order-standard_cart #frmConfigureDomains .sub-heading { margin: 0 0 18px; border: 0; height: auto; text-align: left; }
body #order-standard_cart #frmConfigureDomains .sub-heading span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--wh-brand-tint) !important; color: var(--wh-brand-deep); font-size: 18px; font-weight: 700; }
body #order-standard_cart #frmConfigureDomains .sub-heading span::before { content: "Your domain"; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3b8d63; padding-right: 10px; border-right: 1px solid #bfe3cf; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row > [class*=col]:not(:has(input, select, textarea)) { display: none; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row:has(input, select, textarea) { margin-bottom: 8px; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row > [class*=col]:has(input, select, textarea) { flex: 0 0 100%; max-width: 100%; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row label { display: block; font-size: 15px; font-weight: 600; color: var(--wh-ink); margin-bottom: 8px; }
body #order-standard_cart #frmConfigureDomains .addon-products { margin: 8px -8px 10px; }
body #order-standard_cart #frmConfigureDomains .addon-products::before { content: "Optional extras"; display: block; width: 100%; padding: 0 8px 12px; font-size: 14px; font-weight: 600; color: var(--wh-muted); }
body #order-standard_cart #frmConfigureDomains .addon-products > [class*=col] { padding: 0 8px; }
body #order-standard_cart #frmConfigureDomains .panel-addon { height: 100%; display: flex; flex-direction: column; border: 2px solid #e3e9e2; border-radius: 18px; box-shadow: none; background: #fbfcfb; transition: border-color .15s, background .15s; }
body #order-standard_cart #frmConfigureDomains .panel-addon:hover { border-color: #c5d6c4; }
body #order-standard_cart #frmConfigureDomains .panel-addon:has(.checked), body #order-standard_cart #frmConfigureDomains .panel-addon.panel-addon-selected { border-color: var(--wh-brand); background: #f3fbf6; }
body #order-standard_cart #frmConfigureDomains .panel-addon .panel-body { flex: 1; padding: 18px 18px 8px; font-size: 13.5px; line-height: 1.5; color: var(--wh-muted); }
body #order-standard_cart #frmConfigureDomains .panel-addon .panel-body label { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--wh-ink); margin-bottom: 6px; }
body #order-standard_cart #frmConfigureDomains .panel-addon .panel-price { padding: 0 18px 12px; background: none; color: var(--wh-ink); font-weight: 700; font-size: 15px; text-align: left; }
body #order-standard_cart #frmConfigureDomains .panel-addon .panel-add { margin: 0 18px 18px; padding: 10px; border-radius: 999px; border: 1.5px solid #cfdccf; background: #fff; color: var(--wh-brand-deep); font-weight: 600; font-size: 14px; text-align: center; cursor: pointer; }
body #order-standard_cart #frmConfigureDomains .panel-addon:has(.checked) .panel-add, body #order-standard_cart #frmConfigureDomains .panel-addon.panel-addon-selected .panel-add { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }
/* Nominet details: stacked labels, full-width fields, in their own section */
body #order-standard_cart #frmConfigureDomains .addon-products + .form-group.row { margin-top: 28px; padding-top: 52px; border-top: 1px solid #eef0f2; position: relative; }
body #order-standard_cart #frmConfigureDomains .addon-products + .form-group.row::before { content: "Who owns the domain"; position: absolute; top: 20px; left: 15px; font-size: 18px; font-weight: 700; color: var(--wh-ink); }
body #order-standard_cart #frmConfigureDomains .form-group.row { margin-bottom: 18px; }
body #order-standard_cart #frmConfigureDomains .form-group.row > .col-sm-4 { flex: 0 0 100%; max-width: 100%; text-align: left !important; font-weight: 600; font-size: 15px; color: var(--wh-ink); margin-bottom: 8px; }
body #order-standard_cart #frmConfigureDomains .form-group.row > .col-sm-8 { flex: 0 0 100%; max-width: 100%; }
body #order-standard_cart #frmConfigureDomains .form-group.row .form-control { width: 100% !important; max-width: 100%; }
body #order-standard_cart #frmConfigureDomains .form-group.row:has(.icheckbox_square-blue) { display: flex; flex-wrap: nowrap; align-items: center; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; }
body #order-standard_cart #frmConfigureDomains .form-group.row:has(.icheckbox_square-blue) > [class*=col] { flex: 0 0 auto; max-width: none; width: auto; margin: 0; padding: 0 0 0 15px; }
body #order-standard_cart #frmConfigureDomains .form-group.row:has(.icheckbox_square-blue) > .col-sm-4 { padding-left: 0; font-weight: 500; }
body #order-standard_cart #frmConfigureDomains .text-center.pt-4 { padding-top: 12px !important; }
body #order-standard_cart #frmConfigureDomains button[type=submit] { width: 100%; height: 60px; border-radius: 999px; border: 0; background: #2bd17e; color: #06331f; font-size: 0; box-shadow: 0 10px 24px -10px rgba(43,209,126,.6); }
body #order-standard_cart #frmConfigureDomains button[type=submit]::before { content: "Continue to review \2192"; font-size: 17px; font-weight: 700; }
body #order-standard_cart #frmConfigureDomains button[type=submit]:hover { background: #45dd90; }
@media (max-width: 767px) { body #order-standard_cart #frmConfigureDomains { padding: 22px 20px 26px; } }

/* Review: every line white, totals upright */
body #order-standard_cart .view-cart-items .item { background: #fff !important; }
body #order-standard_cart .view-cart-items .item:hover { background: #fafcf9 !important; }
body #order-standard_cart .summary-container .recurring-charges, body #order-standard_cart .summary-container .recurring-charges * { font-style: normal; }
body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active { border-bottom: 0; }

/* Checkout: fewer fields and one flow of cards */
body #order-standard_cart #frmCheckout .col-sm-12:has(#inputTaxId) { display: none; }
body #order-standard_cart #frmCheckout #containerNewUserSignup + .sub-heading,
body #order-standard_cart #frmCheckout #containerNewUserSignup + .sub-heading + p.small,
body #order-standard_cart #frmCheckout #containerNewUserSignup + .sub-heading + p.small + .row.margin-bottom { display: none; }
body #order-standard_cart #frmCheckout > .sub-heading:has(+ .row textarea), body #order-standard_cart #frmCheckout > .row:has(textarea) { display: none; }
body #order-standard_cart .already-registered { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; border: 0; box-shadow: none; padding: 0 4px 16px; margin: 0; color: var(--wh-muted); font-size: 15px; }
body #order-standard_cart .already-registered p { margin: 0; text-align: left; }
body #order-standard_cart .already-registered .btn { border-radius: 999px; background: #fff; color: var(--wh-ink); border: 1.5px solid #d5dfd4; font-weight: 600; padding: 9px 18px; }
body #order-standard_cart #frmCheckout .intl-tel-input .form-control, body #order-standard_cart #frmCheckout .intl-tel-input input[type=tel] { padding-left: 96px !important; }
body #order-standard_cart #frmCheckout .intl-tel-input .selected-flag { padding-left: 16px; background: transparent !important; }
body #order-standard_cart #frmCheckout > .sub-heading + .text-center:has(.captchaimage, #inputCaptcha, [class*=captcha]) { background: #fff; border-radius: 24px; padding: 22px 28px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -24px rgba(15,21,33,.22); }
body #order-standard_cart #frmCheckout #default-captcha-domainchecker { background: none; border: 0; margin: 0; padding: 0; }
body #order-standard_cart #frmCheckout #default-captcha-domainchecker p { font-size: 14px; color: var(--wh-muted); }
body #order-standard_cart #frmCheckout #creditCardInputFields { background: #fff; border-radius: 24px; padding: 24px 32px; margin: -6px 0 22px; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -24px rgba(15,21,33,.22); border: 0; }
body #order-standard_cart #frmCheckout .marketing-email-optin { padding: 20px 26px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(15,21,33,.05); }
body #order-standard_cart #frmCheckout > .text-center:last-child { background: #fff; border-radius: 24px; padding: 28px 32px 32px; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -24px rgba(15,21,33,.22); }
body #order-standard_cart #frmCheckout > .text-center:last-child label { font-size: 15px; margin-bottom: 16px; }
body #order-standard_cart .checkout-security-msg { background: transparent; border: 0; color: var(--wh-muted); font-size: 13.5px; text-align: center; }

/* Store product cards: price footer sits flush on the bottom edge */
body #order-standard_cart .products .product { overflow: hidden; }
body #order-standard_cart .products .product footer { margin: auto 0 0 !important; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* Step 2 has two faces: the managed website asks about the business, hosting plans just choose billing */
body #order-standard_cart:has(#customfield62) .header-lined::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 64'%3E%3Crect x='132' y='19' width='176' height='3' rx='1.5' fill='%2312a05c'/%3E%3Crect x='352' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Crect x='572' y='19' width='176' height='3' rx='1.5' fill='%23e5e7eb'/%3E%3Ccircle cx='110' cy='20' r='16' fill='%2312a05c'/%3E%3Cpath d='M104 20l4 4 8-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='110' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%2306733f'%3EYour domain%3C/text%3E%3Ccircle cx='330' cy='20' r='19' fill='%23e9f8f0'/%3E%3Ccircle cx='330' cy='20' r='15' fill='%230f1521'/%3E%3Ctext x='330' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%23fff'%3E2%3C/text%3E%3Ctext x='330' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='700' fill='%230f1521'%3EAbout your business%3C/text%3E%3Ccircle cx='550' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='550' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E3%3C/text%3E%3Ctext x='550' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EReview%3C/text%3E%3Ccircle cx='770' cy='20' r='15' fill='%23fff' stroke='%23d1d5db' stroke-width='2'/%3E%3Ctext x='770' y='25' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='600' fill='%239ca3af'%3E4%3C/text%3E%3Ctext x='770' y='56' text-anchor='middle' font-family='Inter Tight,system-ui,-apple-system,Segoe UI,sans-serif' font-size='14' font-weight='500' fill='%236b7280'%3EDetails and payment%3C/text%3E%3C/svg%3E") !important; }
body #order-standard_cart:has(#customfield62) .header-lined::after { content: "Step 2 of 4 \00B7  About your business" !important; }
body #order-standard_cart:has(#customfield62) .header-lined h1::before { content: "Tell us about your business" !important; }
body #order-standard_cart:has(#customfield62) .header-lined h1::after { content: "A few quick questions so we can start your first draft. Takes about three minutes, and you can change anything later." !important; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) > .row > .secondary-cart-body > p:first-child { display: none; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .product-info { background: #fff; border: 0; border-radius: 24px; padding: 28px 36px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -24px rgba(15,21,33,.22); color: var(--wh-ink-2); font-size: 15px; line-height: 1.9; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .product-info .product-title { font-size: 22px; font-weight: 700; color: var(--wh-ink); margin: 0 0 6px; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .product-info .product-title::after { content: "What's included"; display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wh-brand-deep); margin-top: 4px; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .field-container { background: #fff; border: 0; border-radius: 24px; padding: 26px 36px 30px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -24px rgba(15,21,33,.22); }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .field-container label { display: block; font-size: 18px; font-weight: 700; color: var(--wh-ink); margin-bottom: 12px; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .field-container label[for=inputBillingcycle] { font-size: 0; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .field-container label[for=inputBillingcycle]::before { content: "How would you like to pay?"; font-size: 18px; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .field-container label[for=inputBillingcycle] + br { display: none; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) #inputBillingcycle { width: 100%; max-width: 100%; font-weight: 600; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .field-container:has(option[value=annually])::after { content: "Pay yearly and get two months free."; display: block; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-size: 14px; font-weight: 600; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .sub-heading { border: 0; height: auto; text-align: left; margin: 8px 0 12px; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .sub-heading span { background: none !important; padding: 0; font-size: 18px; font-weight: 700; color: var(--wh-ink); }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .alert-warning.info-text-sm { background: transparent; border: 0; padding: 0 4px; color: var(--wh-muted); font-size: 14px; text-align: left; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) #btnCompleteProductConfig { font-size: 0; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) #btnCompleteProductConfig::before { content: "Continue to review \2192"; font-size: 17px; }
@media (max-width: 767px) { body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .product-info, body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .field-container { padding: 22px 20px; } }

/* Transfers: the EPP / authorisation code field, full width with a clear label */
body #order-standard_cart #frmConfigureDomains .sub-heading + .row .form-group { width: 100%; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row .form-group::before { content: "Transfer authorisation code (EPP code)"; display: block; font-size: 15px; font-weight: 600; color: var(--wh-ink); margin-bottom: 8px; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row .form-group:not(:has(input[name^=epp])):not(:has(input[name*=epp]))::before { content: none; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row input { width: 100% !important; max-width: 100%; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row .form-group .field-icon { top: 31px; }
body #order-standard_cart #frmConfigureDomains .sub-heading + .row .form-text, body #order-standard_cart #frmConfigureDomains .sub-heading + .row small, body #order-standard_cart #frmConfigureDomains .sub-heading + .row p { font-size: 13.5px; color: var(--wh-muted); margin-top: 8px; }
/* Hosting options: payment choice first, then what's included */
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .secondary-cart-body { display: flex; flex-direction: column; }
body #order-standard_cart #frmConfigureProduct:not(:has(#customfield62)) .secondary-cart-body > .field-container { order: -1; }

/* =====================================================================
   Client area v2 (Nov 2026): the same calm sage-and-white look as the
   order flow. White cards with soft shadows, roomy tables, pill statuses
   and a dark green accent. Scoped away from the order form.
   ===================================================================== */
body.primary-bg-color:not(:has(#order-standard_cart)) { --ca-card: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -26px rgba(15,21,33,.25); }
body:not(:has(#order-standard_cart)) #main-body { background: #f9fafb; padding: 32px 0 80px; }
body:not(:has(#order-standard_cart)) .master-breadcrumb { background: transparent; border: 0; }
body:not(:has(#order-standard_cart)) .master-breadcrumb .breadcrumb { padding: 14px 0 0; font-size: 13.5px; }

/* Cards everywhere: white, rounded, no hard borders */
body:not(:has(#order-standard_cart)) #main-body .card { border: 0; border-radius: 20px; background: #fff; box-shadow: var(--ca-card); overflow: hidden; margin-bottom: 22px; }
body:not(:has(#order-standard_cart)) #main-body .card-header { background: #fff; border-bottom: 1px solid #eef0f2; padding: 18px 22px; }
body:not(:has(#order-standard_cart)) #main-body .card-header .card-title, body:not(:has(#order-standard_cart)) #main-body .card-title { font-size: 16px; font-weight: 700; color: var(--wh-ink); letter-spacing: -0.01em; }
body:not(:has(#order-standard_cart)) #main-body .card-header .card-title::after { display: none; }
body:not(:has(#order-standard_cart)) #main-body .card-header .card-title > .fas, body:not(:has(#order-standard_cart)) #main-body .card-header .card-title > .far { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; margin-right: 8px; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-size: 13px; }
body:not(:has(#order-standard_cart)) #main-body .card-body { padding: 22px; }
body:not(:has(#order-standard_cart)) #main-body .card-footer { background: #fafcf9; border-top: 1px solid #eef0f2; padding: 12px 22px; font-size: 14px; }
body:not(:has(#order-standard_cart)) #main-body .card[class*=card-accent-] { border-top: 0; }

/* Sidebar menus: quiet list, active item in green */
body:not(:has(#order-standard_cart)) .sidebar .card .list-group-item { border: 0; border-bottom: 1px solid #f0f3ef; padding: 12px 20px; font-size: 14.5px; color: var(--wh-ink-2); }
body:not(:has(#order-standard_cart)) .sidebar .card .list-group-item:last-child { border-bottom: 0; }
body:not(:has(#order-standard_cart)) .sidebar .card .list-group-item:hover { background: #f6f9f5; color: var(--wh-ink); }
body:not(:has(#order-standard_cart)) .sidebar .card .list-group-item.active { background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--wh-brand); }
body:not(:has(#order-standard_cart)) .sidebar .card .list-group-item .badge { border-radius: 999px; background: var(--wh-brand); color: #fff; }
body:not(:has(#order-standard_cart)) .sidebar .card .card-body { font-size: 14.5px; line-height: 1.6; }

/* Dashboard tiles: four white stat cards */
body .tiles { margin: 0 -8px 24px !important; }
body .tiles .row { margin: 0; }
body .tiles .row > [class*=col] { padding: 8px; }
body .tiles .tile { position: relative; display: block; height: 100%; padding: 22px 22px 20px; border: 0 !important; border-radius: 20px; background: #fff; box-shadow: var(--ca-card); text-decoration: none; transition: transform .15s, box-shadow .15s; }
body .tiles .tile:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15,21,33,.06), 0 24px 44px -24px rgba(15,21,33,.32); }
body .tiles .tile > i { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 18px; color: var(--wh-brand-deep); background: var(--wh-brand-tint); opacity: 1; }
body .tiles .tile .stat { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--wh-ink); line-height: 1; margin-top: 4px; }
body .tiles .tile .title { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wh-muted); }
body .tiles .tile .highlight { display: none; }
body .tiles .row > [class*=col]:last-child .tile > i { color: #9a5b00; background: #fff4e0; }

/* Home panels: hide the third-party Cloud Hosting promo, tidy the rest */
body .client-home-cards .card.card-accent-blue:not([id]) { display: none; }
body .client-home-cards .list-group-item { border: 0; border-bottom: 1px solid #f0f3ef; padding: 14px 22px; }
body .client-home-cards .list-group-item:last-child { border-bottom: 0; }
body .client-home-cards .list-group-item:hover { background: #fafcf9; }
body .client-home-cards .card-header .btn { border-radius: 999px; font-size: 12.5px; padding: 5px 12px; }

/* Status labels as soft pills */
body:not(:has(#order-standard_cart)) #main-body .label, body:not(:has(#order-standard_cart)) #main-body .status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; border: 0; line-height: 1.4; }
body:not(:has(#order-standard_cart)) #main-body .label::before, body:not(:has(#order-standard_cart)) #main-body .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body:not(:has(#order-standard_cart)) #main-body :is(.label, .status) { background: #eef1f4 !important; color: #475467 !important; }
body:not(:has(#order-standard_cart)) #main-body :is(.status-active, .status-paid, .status-completed, .status-answered, .label-success) { background: #e6f7ee !important; color: #087443 !important; }
body:not(:has(#order-standard_cart)) #main-body :is(.status-pending, .status-pending-transfer, .status-customer-reply, .status-in-progress, .status-onhold, .label-warning, .status-draft) { background: #fff4e0 !important; color: #9a5b00 !important; }
body:not(:has(#order-standard_cart)) #main-body :is(.status-unpaid, .status-overdue, .status-suspended, .status-terminated, .status-fraud, .status-expired, .status-open, .label-danger) { background: #fdecea !important; color: #b42318 !important; }
body:not(:has(#order-standard_cart)) #main-body :is(.status-cancelled, .status-closed, .status-refunded, .status-collections, .label-default) { background: #eef1f4 !important; color: #475467 !important; }

/* Tables (services, domains, invoices, tickets, emails): roomy rows in a white card */
body:not(:has(#order-standard_cart)) .table-container, body:not(:has(#order-standard_cart)) .dataTables_wrapper { background: #fff; border-radius: 20px; padding: 10px 6px 14px; box-shadow: var(--ca-card); }
body:not(:has(#order-standard_cart)) .table-list { border: 0 !important; margin: 0 !important; background: transparent; }
body:not(:has(#order-standard_cart)) .table-list > thead > tr > th { background: transparent !important; border: 0 !important; border-bottom: 1px solid #eef0f2 !important; padding: 14px 16px !important; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wh-muted); }
body:not(:has(#order-standard_cart)) .table-list > tbody > tr > td { border: 0 !important; border-bottom: 1px solid #f9fafb !important; padding: 18px 16px !important; background: #fff !important; vertical-align: middle; font-size: 14.5px; color: var(--wh-ink-2); }
body:not(:has(#order-standard_cart)) .table-list > tbody > tr:last-child > td { border-bottom: 0 !important; }
body:not(:has(#order-standard_cart)) .table-list > tbody > tr:hover > td { background: #f8fbf7 !important; cursor: pointer; }
body:not(:has(#order-standard_cart)) .table-list strong, body:not(:has(#order-standard_cart)) .table-list a { color: var(--wh-ink); font-weight: 600; }
body:not(:has(#order-standard_cart)) .table-list .text-domain { color: var(--wh-muted); font-size: 13px; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_info { padding: 12px 16px 0; font-size: 13px; color: var(--wh-muted); }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length, body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_paginate { padding: 8px 16px 0; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter input { height: 42px; border-radius: 999px; border: 1.5px solid #dde4dc; background: #f9fbf8; padding: 0 16px 0 38px; min-width: 240px; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_paginate .page-link, body:not(:has(#order-standard_cart)) .pagination .page-link { border: 0; border-radius: 999px !important; margin: 0 2px; min-width: 36px; text-align: center; color: var(--wh-ink-2); background: transparent; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_paginate .active .page-link, body:not(:has(#order-standard_cart)) .pagination .active .page-link { background: var(--wh-brand); color: #fff; }
body:not(:has(#order-standard_cart)) .table-list .sorting::after, body:not(:has(#order-standard_cart)) .table-list .sorting_asc::after, body:not(:has(#order-standard_cart)) .table-list .sorting_desc::after { opacity: .35; }

/* Product and domain detail pages */
body:not(:has(#order-standard_cart)) .product-details .product-status { border-radius: 20px; overflow: hidden; box-shadow: var(--ca-card); }
body:not(:has(#order-standard_cart)) .product-details .product-icon { border-radius: 20px 20px 0 0; padding: 32px 20px; }
body:not(:has(#order-standard_cart)) .product-details .product-status-text { padding: 12px; font-weight: 700; letter-spacing: .04em; }
body:not(:has(#order-standard_cart)) #main-body .nav-tabs, body:not(:has(#order-standard_cart)) #main-body .responsive-tabs-sm { border: 0; gap: 6px; margin-bottom: 16px; display: flex; flex-wrap: wrap; }
body:not(:has(#order-standard_cart)) #main-body .nav-tabs .nav-link { border: 0; border-radius: 999px; padding: 9px 18px; background: #fff; color: var(--wh-ink-2); font-weight: 600; font-size: 14px; box-shadow: 0 1px 2px rgba(15,21,33,.06); }
body:not(:has(#order-standard_cart)) #main-body .nav-tabs .nav-link.active, body:not(:has(#order-standard_cart)) #main-body .nav-tabs .active > .nav-link { background: var(--wh-ink); color: #fff; }
body:not(:has(#order-standard_cart)) #main-body .tab-content { background: #fff; border: 0; border-radius: 20px; padding: 26px; box-shadow: var(--ca-card); }
body:not(:has(#order-standard_cart)) #main-body .tab-content .card { box-shadow: none; border: 1px solid #eef0f2; }

/* Forms in the client area: same fields as checkout */
body:not(:has(#order-standard_cart)) #main-body .form-control:not(textarea):not([type=file]), body:not(:has(#order-standard_cart)) #main-body .custom-select { height: 50px; border-radius: 14px; border: 1.5px solid #dde4dc; background-color: #f9fbf8; }
body:not(:has(#order-standard_cart)) #main-body textarea.form-control { border-radius: 14px; border: 1.5px solid #dde4dc; background-color: #f9fbf8; }
body:not(:has(#order-standard_cart)) #main-body .form-control:focus { background-color: #fff; border-color: var(--wh-brand); box-shadow: 0 0 0 5px rgba(18,160,92,.14); }
body:not(:has(#order-standard_cart)) #main-body label, body:not(:has(#order-standard_cart)) #main-body .col-form-label { font-weight: 600; color: var(--wh-ink); font-size: 14.5px; }
body:not(:has(#order-standard_cart)) #main-body .form-group { margin-bottom: 20px; }
body:not(:has(#order-standard_cart)) #main-body form .card-body .row + .row { margin-top: 0; }

/* Buttons */
body:not(:has(#order-standard_cart)) #main-body .btn { border-radius: 999px; font-weight: 600; }
body:not(:has(#order-standard_cart)) #main-body .btn-default, body:not(:has(#order-standard_cart)) #main-body .btn-outline-secondary { background: #fff; border: 1.5px solid #d5dfd4; color: var(--wh-ink); }
body:not(:has(#order-standard_cart)) #main-body .btn-default:hover { border-color: var(--wh-ink); }
body:not(:has(#order-standard_cart)) #main-body .btn-primary, body:not(:has(#order-standard_cart)) #main-body .btn-success { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; }
body:not(:has(#order-standard_cart)) #main-body .btn-primary:hover, body:not(:has(#order-standard_cart)) #main-body .btn-success:hover { background: var(--wh-brand-deep); border-color: var(--wh-brand-deep); }
body:not(:has(#order-standard_cart)) #main-body .btn-lg { padding: 13px 26px; }
body:not(:has(#order-standard_cart)) #main-body .btn:disabled, body:not(:has(#order-standard_cart)) #main-body .btn.disabled { opacity: .45; }

/* Alerts: soft rounded banners */
body:not(:has(#order-standard_cart)) .alert { border: 0; border-radius: 16px; padding: 14px 18px; font-size: 14.5px; }
body:not(:has(#order-standard_cart)) .alert-warning { background: #fff4e0; color: #7a4700; }
body:not(:has(#order-standard_cart)) .alert-info { background: #eaf3fd; color: #1d4f86; }
body:not(:has(#order-standard_cart)) .alert-success { background: #e6f7ee; color: #087443; }
body:not(:has(#order-standard_cart)) .alert-danger { background: #fdecea; color: #b42318; }
body .verification-banner, body .email-verification { background: #fff4e0; border: 0; }
body .email-verification .btn, body .verification-banner .btn { border-radius: 999px; background: var(--wh-ink); border: 0; color: #fff; }

/* Tickets: conversation as cards, staff replies tinted */
body:not(:has(#order-standard_cart)) .ticket-reply { border: 0; border-radius: 20px; background: #fff; box-shadow: var(--ca-card); margin-bottom: 18px; overflow: hidden; }
body:not(:has(#order-standard_cart)) .ticket-reply .posted-by, body:not(:has(#order-standard_cart)) .ticket-reply .card-header { background: #fafcf9; border-bottom: 1px solid #eef0f2; }
body:not(:has(#order-standard_cart)) .ticket-reply.staff .posted-by, body:not(:has(#order-standard_cart)) .ticket-reply.staff .card-header { background: var(--wh-brand-tint); }
body:not(:has(#order-standard_cart)) .ticket-reply .message, body:not(:has(#order-standard_cart)) .ticket-reply .card-body { padding: 22px; font-size: 15px; line-height: 1.65; }

/* Invoices and quotes (viewinvoice.php has its own page) */
body .invoice-container { max-width: 960px; margin: 32px auto; padding: 44px 48px; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 30px 60px -30px rgba(15,21,33,.3); }
body:has(.invoice-container) { background: #f9fafb; }
body .invoice-container .invoice-status { font-weight: 700; letter-spacing: .04em; }
body .invoice-container .invoice-status .paid { color: #087443; }
body .invoice-container .invoice-status .unpaid, body .invoice-container .invoice-status .overdue { color: #b42318; }
body .invoice-container .table { border-radius: 14px; overflow: hidden; }
body .invoice-container .table thead td, body .invoice-container .table thead th { background: #f6f9f5; border: 0; font-weight: 700; }
body .invoice-container .table td { border-color: #eef0f2; padding: 12px 14px; }
body .invoice-container .btn { border-radius: 999px; }
body .invoice-container .payment-btn-container .btn, body .invoice-container .btn-success { background: var(--wh-brand); border-color: var(--wh-brand); color: #fff; font-weight: 700; padding: 10px 24px; }
@media (max-width: 767px) { body .invoice-container { padding: 24px 20px; margin: 12px; border-radius: 18px; } }

/* Dashboard: the quick domain search panel needs a CAPTCHA on this setup, so send people to the full search instead */
body .client-home-cards #registerDomainPanel { display: none; }

/* Product details: a calm summary card, facts as a list, cancellation kept low-key */
body .product-details .product-status { background: #fff; border: 1px solid #eef0f2; box-shadow: none; border-radius: 20px; }
body .product-details .product-icon { background: linear-gradient(160deg, #f3fbf6, #e3f4ea); padding: 30px 20px 24px; border-radius: 0; }
body .product-details .product-icon .fa-stack { font-size: 26px; }
body .product-details .product-icon .fa-circle { color: var(--wh-brand); }
body .product-details .product-icon h3 { font-size: 22px; font-weight: 700; margin: 14px 0 2px; color: var(--wh-ink); }
body .product-details .product-icon h4 { font-size: 14px; font-weight: 500; color: var(--wh-muted); margin: 0; }
body .product-details .product-status-text { background: #e6f7ee !important; color: #087443 !important; font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 10px; }
body .product-details :is(.product-status-suspended, .product-status-terminated) .product-status-text { background: #fdecea !important; color: #b42318 !important; }
body .product-details :is(.product-status-pending) .product-status-text { background: #fff4e0 !important; color: #9a5b00 !important; }
body .product-details :is(.product-status-cancelled) .product-status-text { background: #eef1f4 !important; color: #475467 !important; }
body .product-details .product-actions-wrapper .btn-danger { background: transparent !important; border: 0 !important; color: #b42318 !important; font-size: 13.5px; font-weight: 600; padding: 6px; box-shadow: none !important; }
body .product-details .product-actions-wrapper .btn-danger:hover { text-decoration: underline; transform: none; }
body .product-details .col-md-6.text-center { text-align: left !important; display: grid; grid-template-columns: 1fr; align-content: start; padding-top: 6px; font-size: 16px; font-weight: 600; color: var(--wh-ink); }
body .product-details .col-md-6.text-center h4 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wh-muted); margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid #f0f3ef; }
body .product-details .col-md-6.text-center h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body .product-details-tab-container { text-align: left; }
body .product-details-tab-container > .tab-pane.text-center { text-align: left !important; }
body .product-details-tab-container .tab-pane > .row { margin: 0; padding: 12px 0; border-bottom: 1px solid #f0f3ef; }
body .product-details-tab-container .tab-pane > .row:last-of-type { border-bottom: 0; }
body .product-details-tab-container .tab-pane > .row > .col-sm-5 { text-align: left !important; color: var(--wh-muted); }
body .product-details-tab-container .tab-pane > .row > .col-sm-5 strong { font-weight: 600; color: var(--wh-muted); font-size: 14px; }
body .product-details-tab-container .tab-pane > .row > .col-sm-7 { font-weight: 600; color: var(--wh-ink); }
body .product-details-tab-container .tab-pane > p, body .product-details-tab-container .tab-pane > .btn, body .product-details-tab-container .tab-pane .text-center { margin-top: 16px; }
body .responsive-tabs-sm-connector { display: none; }
body #tabOverview > .card { box-shadow: none; border: 0; margin-bottom: 18px; }
body .tab-content.margin-bottom { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
body .tab-content.margin-bottom > .tab-pane > .card { background: #fff; box-shadow: var(--ca-card) !important; }

/* ---- Client area polish pass 2 ---- */
/* One card per table: the DataTables wrapper sits flat inside the container */
body:not(:has(#order-standard_cart)) .table-container .dataTables_wrapper { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
body:not(:has(#order-standard_cart)) .table-container { padding: 8px 8px 16px; overflow: hidden; }
/* Nothing jumps on hover: cards, tiles and list items stay put and only change colour or shadow */
body:not(:has(#order-standard_cart)) #main-body :is(a.card, .tile, .list-group-item, .kb-category, .btn):hover { transform: none !important; }
body .tiles .tile, body .tiles .tile:hover { transform: none !important; }
body .tiles .tile:hover { box-shadow: 0 0 0 2px var(--wh-brand-tint), var(--ca-card); }
body .tiles .tile > i { pointer-events: none; }
body:not(:has(#order-standard_cart)) #main-body .card .list-group { overflow: hidden; border-radius: 0 0 20px 20px; }
body:not(:has(#order-standard_cart)) #main-body .card .list-group-item { position: relative; transition: background .15s, color .15s; }
body:not(:has(#order-standard_cart)) #main-body .sidebar .list-group-item i, body:not(:has(#order-standard_cart)) #main-body .sidebar .sidebar-menu-item-icon { width: 18px; text-align: center; margin-right: 8px; color: var(--wh-brand); }
body:not(:has(#order-standard_cart)) #main-body .card-header .card-minimise { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; background: #f9fafb; color: var(--wh-muted); transition: background .15s; }
body:not(:has(#order-standard_cart)) #main-body .card-header .card-minimise:hover { background: var(--wh-brand-tint); color: var(--wh-brand-deep); }
/* Table search box with an icon, and calmer header row */
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter label { position: relative; margin: 0; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter label::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_filter { padding: 8px 12px 0; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_info { padding-top: 18px; }
body:not(:has(#order-standard_cart)) .table-list > thead > tr > th { text-align: left !important; }
body:not(:has(#order-standard_cart)) .table-list > tbody > tr > td { text-align: left; }
body:not(:has(#order-standard_cart)) .table-list > tbody > tr > td img { width: 22px; height: auto; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length select { height: 38px !important; border-radius: 999px !important; padding: 0 30px 0 14px !important; }
body:not(:has(#order-standard_cart)) .dataTables_wrapper .dataTables_length label { font-weight: 500; color: var(--wh-muted); font-size: 13.5px; }

/* ---- Store and Product Addons (cart.php?gid=...): roomy cards, price and button that never squash ---- */
body #order-standard_cart .products .row > [class*=col] { display: flex; margin-bottom: 22px; }
body #order-standard_cart .products .product { flex: 1; display: flex; flex-direction: column; margin: 0; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -26px rgba(15,21,33,.25); transition: box-shadow .15s; }
body #order-standard_cart .products .product:hover { box-shadow: 0 0 0 2px var(--wh-brand-tint), 0 18px 40px -26px rgba(15,21,33,.3); transform: none; }
body #order-standard_cart .products .product > form.form-inline { display: flex; flex-direction: column; align-items: stretch; flex: 1; width: 100%; }
body #order-standard_cart .products .product header { padding: 24px 26px 6px; font-size: 18px; font-weight: 700; color: var(--wh-ink); line-height: 1.3; background: none; border: 0; }
body #order-standard_cart .products .product .product-desc { flex: 1; padding: 6px 26px 18px; width: 100%; max-width: 100%; font-size: 14px; line-height: 1.6; color: var(--wh-muted); }
body #order-standard_cart .products .product .product-desc p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
body #order-standard_cart .products .product .product-desc .form-group { display: block; width: 100%; margin: 0; }
body #order-standard_cart .products .product .product-desc select { width: 100% !important; }
body #order-standard_cart .products .product footer { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 26px 22px !important; margin: auto 0 0 !important; width: 100%; max-width: 100%; text-align: left !important; background: #f8fbf7; border-top: 1px solid #eef0f2; }
body #order-standard_cart .products .product footer .product-pricing { margin: 0; text-align: left; }
body #order-standard_cart .products .product footer .product-pricing .price { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--wh-ink); line-height: 1.2; }
body #order-standard_cart .products .product footer .btn { white-space: nowrap; border-radius: 999px; padding: 10px 20px; font-weight: 700; font-size: 14px; flex-shrink: 0; }
/* Store sidebar: same quiet list as the client area */
body #order-standard_cart .cart-sidebar .card { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,21,33,.05), 0 18px 40px -26px rgba(15,21,33,.25); margin-bottom: 18px; }
body #order-standard_cart .cart-sidebar .list-group-item { border: 0; border-bottom: 1px solid #f0f3ef; padding: 11px 18px; font-size: 14px; color: var(--wh-ink-2); }
body #order-standard_cart .cart-sidebar .list-group-item:last-child { border-bottom: 0; }
body #order-standard_cart .cart-sidebar .list-group-item:hover { background: #f6f9f5; }
body #order-standard_cart .cart-sidebar .list-group-item.active { background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-weight: 600; box-shadow: inset 3px 0 0 var(--wh-brand); }
body #order-standard_cart .cart-body .header-lined h1 { margin-bottom: 18px; }
body #order-standard_cart .products .product > form.form-inline { flex-wrap: nowrap; }
body #order-standard_cart .products .product > form.form-inline > * { flex: 0 0 auto; max-width: 100%; }
body #order-standard_cart .products .product > form.form-inline > .product-desc { flex: 1 1 auto; }
/* Dashboard: with the promo and domain panels gone, tickets and news share the full width */
body .client-home-cards > .row > [class*=col-md-6]:has(#registerDomainPanel):not(:has(.card:not(#registerDomainPanel):not(.card-accent-blue:not([id]))))  { display: none; }
body .client-home-cards > .row > [class*=col-md-6]:has(#ticketsPanel) { flex: 0 0 100%; max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
@media (max-width: 767px) { body .client-home-cards > .row > [class*=col-md-6]:has(#ticketsPanel) { grid-template-columns: 1fr; } }

/* =====================================================================
   v3 signature (Nov 2026): one look from header to footer.
   Deep green bands drawn with contour lines (the hills of the Marches),
   an icon menu, page titles taken from the breadcrumb, and one style of
   field everywhere. Scoped away from the order flow, which keeps its own.
   ===================================================================== */
:root {
  --v3-deep: #053a24;
  --v3-deep-2: #0a4a2f;
  --v3-sage: #f9fafb;
  --v3-line: #e5e7eb;
  --v3-line-2: #d1d5db;
  --v3-field: #ffffff;
  --v3-ring: 0 0 0 4px rgba(18,160,92,.16);
  --v3-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='1.3'%3E%3Cpath d='M1001 150 1005 153 1007 157 1006 161 1004 164 1000 167 995 170 989 172 982 173 976 174 970 175 964 176 959 177 955 178 950 179 945 180 940 181 935 182 930 182 925 182 919 181 914 181 909 180 904 179 899 178 893 177 888 177 882 175 876 174 871 172 866 169 864 166 862 163 863 160 864 156 867 153 870 150 874 147 876 145 878 143 879 140 879 138 879 134 879 131 879 128 881 124 884 121 888 118 893 116 899 115 905 114 912 114 918 114 924 114 930 115 936 115 941 116 947 117 952 118 957 120 961 122 965 124 967 127 970 129 971 132 973 134 975 136 978 138 982 140 986 142 991 144 996 147 1001 150Z'/%3E%3Cpath d='M1074 150 1080 157 1084 164 1083 172 1079 179 1071 185 1060 189 1047 193 1033 195 1020 197 1007 199 996 200 987 202 978 204 969 207 960 209 951 212 941 214 930 216 919 216 908 216 897 215 887 213 876 211 866 208 856 206 845 203 834 200 824 197 814 193 806 188 801 182 798 175 798 169 801 162 806 156 812 150 818 145 823 140 826 135 828 130 828 125 827 119 826 112 827 105 830 97 835 91 844 85 854 81 866 78 879 77 893 77 906 78 918 80 930 81 941 83 952 85 962 87 972 89 981 92 990 95 998 99 1004 103 1010 108 1015 113 1019 117 1024 121 1030 125 1037 129 1046 134 1055 138 1065 144 1074 150Z'/%3E%3Cpath d='M1147 150 1155 160 1160 171 1158 182 1151 192 1139 201 1122 208 1102 214 1082 217 1061 219 1043 221 1027 223 1012 225 1000 229 987 233 975 238 961 243 946 248 930 251 913 253 895 253 878 251 862 248 846 244 831 240 817 235 803 230 788 225 775 219 762 212 751 204 743 196 738 187 738 177 741 168 747 158 755 150 762 142 769 135 773 128 775 120 775 112 773 102 772 92 773 81 777 69 785 59 797 50 813 44 832 40 853 38 874 39 894 42 913 46 930 50 946 54 961 57 976 60 990 63 1004 66 1018 70 1030 75 1042 80 1052 86 1061 92 1069 99 1077 105 1087 112 1097 118 1109 125 1122 132 1135 141 1147 150Z'/%3E%3Cpath d='M1219 150 1228 164 1232 178 1230 192 1220 206 1204 217 1182 226 1156 233 1129 238 1102 240 1078 243 1056 245 1038 248 1021 253 1006 260 990 267 972 275 952 283 930 289 906 292 882 293 858 291 836 286 815 280 796 272 778 264 761 256 745 247 729 239 714 230 701 220 690 209 684 197 681 185 683 173 688 161 696 150 704 140 711 130 716 120 718 109 718 98 717 85 716 71 717 56 723 41 734 27 750 15 772 6 798 1 826 0 855 2 882 7 907 13 930 20 951 26 970 31 988 36 1007 39 1025 42 1044 46 1063 50 1080 56 1096 62 1111 70 1124 79 1136 87 1149 96 1162 106 1176 115 1191 126 1206 137 1219 150Z'/%3E%3Cpath d='M1288 150 1297 167 1300 184 1296 202 1284 218 1264 232 1238 244 1207 252 1174 258 1142 262 1112 264 1086 267 1064 272 1044 278 1025 287 1005 298 983 309 958 319 930 328 900 333 868 335 837 332 809 326 783 316 760 305 740 293 721 281 704 269 688 257 672 245 656 233 643 220 633 207 628 193 626 178 629 164 635 150 642 137 649 124 654 111 657 98 657 83 657 67 657 49 660 31 668 12 682 -5 704 -20 732 -31 765 -36 800 -37 836 -34 871 -27 902 -18 930 -8 955 1 978 8 1000 13 1022 17 1046 20 1070 22 1095 26 1120 31 1144 38 1165 46 1184 56 1201 68 1216 80 1231 92 1246 105 1261 119 1276 134 1288 150Z'/%3E%3Cpath d='M1354 150 1361 170 1362 190 1356 210 1342 229 1320 246 1291 260 1256 270 1219 278 1182 283 1148 287 1118 291 1091 297 1068 305 1045 316 1021 330 995 344 964 357 930 369 892 376 854 378 816 374 781 366 750 353 724 338 702 321 684 305 667 289 650 273 634 259 617 245 601 231 587 216 576 200 570 183 568 167 570 150 574 134 580 118 586 101 589 85 592 67 593 48 596 27 602 5 613 -17 632 -37 659 -54 693 -66 733 -73 776 -73 819 -68 860 -59 897 -47 930 -35 959 -23 985 -14 1011 -8 1037 -5 1066 -3 1096 -2 1129 0 1162 4 1194 11 1223 21 1249 33 1270 47 1289 62 1304 78 1319 95 1332 113 1344 131 1354 150Z'/%3E%3Cpath d='M1415 150 1418 172 1417 195 1409 218 1394 239 1371 258 1340 275 1304 288 1265 298 1225 305 1187 311 1152 317 1121 324 1094 335 1067 348 1039 363 1007 380 971 397 930 410 885 418 839 421 794 416 753 405 718 389 689 370 666 348 648 327 632 307 617 288 600 271 582 256 563 240 544 224 526 207 513 189 504 170 500 150 501 130 505 111 510 91 516 71 521 50 527 27 534 4 544 -20 561 -44 585 -67 617 -85 657 -99 703 -106 753 -106 803 -100 850 -89 893 -75 930 -60 963 -47 993 -37 1022 -30 1052 -27 1086 -26 1124 -27 1164 -26 1206 -23 1247 -17 1285 -7 1318 7 1344 24 1365 43 1380 64 1392 85 1402 106 1409 128 1415 150Z'/%3E%3Cpath d='M1202 300 1199 303 1195 305 1191 307 1188 309 1184 311 1181 312 1178 314 1175 316 1173 317 1170 319 1167 320 1164 322 1160 323 1156 324 1152 324 1148 325 1144 325 1140 326 1136 326 1131 327 1126 327 1121 328 1116 328 1110 327 1106 326 1102 324 1099 322 1097 319 1096 316 1097 313 1097 311 1098 308 1098 306 1097 304 1096 302 1094 300 1092 298 1090 295 1088 293 1088 290 1088 287 1090 285 1092 282 1096 281 1100 279 1105 278 1109 277 1113 276 1118 275 1122 274 1127 274 1131 273 1136 273 1140 273 1144 274 1148 275 1152 276 1155 278 1158 279 1161 281 1165 282 1168 282 1172 283 1177 284 1183 284 1188 285 1193 287 1198 289 1201 291 1203 294 1203 297 1202 300Z'/%3E%3Cpath d='M1263 300 1257 305 1249 310 1241 314 1232 318 1225 321 1218 324 1213 327 1208 330 1204 334 1200 337 1195 341 1189 344 1182 347 1174 349 1166 351 1157 352 1149 353 1140 353 1131 354 1122 354 1112 355 1102 355 1092 354 1082 353 1073 350 1066 347 1060 342 1056 337 1055 331 1054 326 1055 321 1056 316 1056 312 1055 308 1052 304 1048 300 1043 296 1038 291 1035 285 1033 279 1033 274 1036 269 1042 264 1050 260 1059 257 1068 255 1078 253 1088 252 1097 251 1106 251 1114 250 1123 249 1131 249 1140 249 1148 250 1156 251 1164 253 1171 255 1178 258 1184 260 1191 262 1198 263 1207 265 1217 266 1227 268 1238 270 1248 274 1257 278 1263 283 1266 288 1266 294 1263 300Z'/%3E%3Cpath d='M1322 300 1313 308 1301 315 1288 321 1275 326 1263 330 1254 335 1246 339 1240 344 1234 350 1229 356 1222 362 1214 368 1205 373 1193 377 1181 380 1167 382 1154 383 1140 383 1126 383 1112 382 1098 382 1084 381 1070 379 1056 376 1043 373 1032 368 1023 361 1017 354 1014 346 1013 339 1013 331 1013 324 1013 318 1011 312 1006 306 1000 300 992 293 985 286 979 277 976 269 976 260 981 252 990 245 1002 239 1016 235 1032 232 1048 231 1063 230 1077 229 1091 229 1103 228 1116 227 1128 226 1140 226 1152 226 1164 227 1176 229 1187 231 1198 234 1209 237 1220 240 1231 243 1244 245 1258 248 1273 251 1288 255 1302 260 1315 267 1323 274 1328 283 1327 291 1322 300Z'/%3E%3Cpath d='M1379 300 1367 310 1351 320 1334 327 1316 334 1301 340 1288 345 1278 351 1271 358 1265 366 1259 374 1251 384 1241 392 1229 400 1214 407 1197 411 1178 413 1159 414 1140 413 1121 412 1103 410 1085 408 1067 405 1050 402 1033 398 1016 393 1002 387 990 379 981 370 975 361 971 351 970 342 969 333 967 324 964 316 958 308 949 300 939 291 930 280 922 269 917 257 918 246 925 235 937 225 954 218 974 213 996 210 1018 209 1040 209 1059 209 1077 209 1093 209 1109 208 1124 206 1140 205 1156 203 1172 203 1189 204 1205 206 1221 209 1236 212 1251 216 1267 220 1283 224 1301 229 1320 234 1338 240 1356 247 1371 256 1381 266 1387 277 1386 289 1379 300Z'/%3E%3Cpath d='M1432 300 1418 313 1399 324 1378 334 1358 342 1339 349 1323 356 1312 363 1303 372 1296 382 1290 394 1281 406 1270 418 1254 429 1235 438 1213 444 1189 447 1164 447 1140 445 1116 441 1094 437 1073 432 1052 427 1031 422 1011 417 992 411 974 404 958 396 945 386 936 375 929 364 925 353 921 342 918 331 912 321 905 311 895 300 884 288 872 275 863 261 859 246 860 231 869 218 885 206 906 197 933 191 961 188 990 187 1017 188 1042 190 1064 191 1084 191 1103 189 1121 187 1140 184 1160 181 1181 179 1202 178 1224 179 1245 181 1266 185 1286 190 1306 196 1326 202 1346 209 1367 216 1387 225 1407 235 1423 246 1435 258 1441 272 1440 286 1432 300Z'/%3E%3Cpath d='M682 330 681 332 679 334 678 335 678 337 677 339 675 341 674 342 672 344 669 345 667 347 664 348 661 349 658 350 655 352 652 353 648 354 644 356 640 357 635 357 631 357 626 357 622 356 619 354 616 352 614 350 613 347 611 345 610 343 609 342 607 340 604 339 601 337 598 336 595 334 593 332 591 330 590 328 591 325 592 323 594 321 597 319 599 318 602 316 605 315 608 313 611 312 614 311 617 309 621 309 625 308 629 308 633 308 637 309 640 310 643 310 647 310 650 310 654 310 658 310 663 309 668 309 673 309 678 310 682 311 686 313 688 315 689 318 689 321 688 323 686 326 684 328 682 330Z'/%3E%3Cpath d='M722 330 718 334 716 337 714 340 713 344 712 348 710 351 708 355 705 359 701 362 696 365 690 368 684 370 677 372 671 374 664 377 656 379 648 381 640 383 631 383 622 383 613 382 605 380 598 377 593 373 589 368 586 364 583 360 581 356 578 353 574 350 568 348 562 345 555 342 549 338 543 334 539 330 538 325 538 321 541 316 546 312 552 308 558 305 565 302 572 300 578 297 584 295 591 293 597 291 604 289 611 288 618 287 626 287 633 288 640 288 647 289 654 289 661 289 668 289 677 289 686 288 696 288 706 288 716 290 725 292 732 296 736 301 738 306 738 311 735 317 731 322 726 326 722 330Z'/%3E%3Cpath d='M760 330 754 335 750 340 748 345 747 350 746 356 746 362 744 368 740 374 735 380 728 385 719 389 709 393 698 396 687 398 676 401 665 403 653 405 640 407 627 408 614 408 601 406 590 403 579 399 571 393 564 387 559 381 555 375 551 369 546 365 539 361 531 357 522 353 511 348 501 343 492 337 486 330 483 323 484 316 489 309 496 302 506 297 518 293 529 289 540 286 551 283 560 280 569 277 578 274 588 271 598 269 608 267 618 266 629 265 640 266 651 266 661 266 672 267 684 266 697 266 710 266 725 266 740 267 754 270 767 274 777 280 783 286 786 294 785 302 780 310 774 318 767 324 760 330Z'/%3E%3Cpath d='M796 330 788 337 783 343 781 350 781 357 782 365 782 373 781 382 778 391 771 399 762 406 749 412 735 417 720 421 704 423 688 425 672 427 656 428 640 430 623 430 607 430 590 428 575 424 561 419 549 413 540 405 532 398 526 390 519 383 512 377 503 372 492 366 479 361 465 355 451 348 439 339 431 330 427 320 428 310 435 301 447 293 462 286 478 281 495 276 511 273 525 270 538 266 550 263 561 258 573 254 585 250 597 246 611 244 625 242 640 241 655 241 670 241 685 242 701 242 718 242 735 243 754 244 773 246 791 250 807 256 820 264 828 273 832 283 830 294 824 304 815 314 805 322 796 330Z'/%3E%3Cpath d='M832 330 823 338 817 346 815 355 816 364 818 374 820 385 820 396 817 408 809 419 798 429 782 437 763 442 743 446 722 448 701 449 680 450 660 450 640 450 620 450 600 449 580 447 562 443 544 438 528 432 515 424 504 415 494 407 485 398 475 391 463 384 450 377 434 369 417 361 400 352 386 342 376 330 371 318 374 305 383 294 398 284 418 275 440 269 462 264 483 261 502 257 518 254 533 249 546 244 559 238 572 232 587 226 603 221 621 217 640 215 659 214 679 214 699 215 719 216 740 218 761 220 783 222 805 226 826 232 845 239 860 249 870 260 874 273 873 285 866 298 855 310 844 321 832 330Z'/%3E%3Cpath d='M284 40 284 42 284 43 284 45 283 46 282 48 281 49 279 51 278 52 276 54 275 56 273 57 271 59 268 61 265 62 262 63 258 64 254 64 250 63 246 62 243 61 240 59 238 58 236 56 234 55 231 54 229 53 226 53 223 52 219 51 216 50 213 49 211 48 209 46 209 44 209 42 209 40 210 38 211 36 212 35 213 33 215 31 216 30 218 28 220 27 223 26 226 25 229 24 232 24 236 24 239 24 241 23 244 23 247 22 250 21 253 20 257 19 261 18 265 18 270 18 274 18 277 20 280 21 282 23 283 25 283 28 283 30 283 32 283 34 283 35 283 37 284 38 284 40Z'/%3E%3Cpath d='M317 40 318 43 319 46 320 50 319 53 317 57 315 60 312 63 308 66 305 69 301 72 296 75 292 78 286 81 280 84 273 86 266 87 258 87 250 85 243 83 236 81 231 78 226 75 222 72 217 70 213 68 208 67 201 66 194 65 187 63 180 61 174 59 169 56 166 52 164 48 165 44 167 40 169 36 172 33 176 30 179 26 182 23 185 20 189 17 193 15 198 12 203 10 208 9 215 8 221 7 227 6 232 5 238 4 244 3 250 1 257 -1 264 -3 273 -4 281 -5 290 -5 298 -4 305 -1 310 2 313 7 315 11 316 16 315 20 314 24 313 28 313 31 314 34 315 37 317 40Z'/%3E%3Cpath d='M348 40 352 45 355 50 357 55 357 60 355 66 352 71 347 76 341 80 334 84 327 89 320 93 312 97 303 100 294 104 284 106 273 108 261 108 250 106 239 104 230 100 221 96 214 92 208 88 201 85 194 82 186 80 176 79 165 77 154 75 143 72 133 69 126 64 121 58 119 52 120 46 123 40 129 34 135 29 141 25 147 20 153 16 158 12 163 8 168 4 174 -0 180 -4 188 -7 196 -9 205 -11 214 -13 222 -14 231 -16 240 -18 250 -20 260 -23 272 -25 284 -27 297 -28 310 -27 321 -25 332 -21 339 -16 344 -10 347 -3 347 4 345 11 343 17 342 22 341 27 342 31 345 36 348 40Z'/%3E%3Cpath d='M380 40 386 46 392 53 396 61 397 68 396 76 392 83 385 90 376 95 365 101 355 106 343 110 332 114 319 118 307 122 293 125 279 127 264 127 250 126 236 123 223 119 212 115 202 110 193 105 183 101 173 98 162 95 149 93 135 91 120 88 105 84 92 79 81 72 74 65 72 56 74 48 80 40 89 33 98 26 108 20 118 15 126 10 133 4 139 -1 145 -6 151 -12 159 -17 167 -22 177 -26 188 -30 200 -33 212 -35 224 -38 237 -40 250 -43 264 -45 279 -48 296 -49 312 -50 329 -49 344 -46 357 -41 367 -34 374 -25 377 -16 376 -7 374 2 372 10 369 17 369 23 371 29 375 34 380 40Z'/%3E%3C/svg%3E");
  --v3-i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --v3-i-services: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E");
  --v3-i-domains: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  --v3-i-billing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
  --v3-i-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m5.6 5.6 3.6 3.6m5.6 5.6 3.6 3.6m0-12.8-3.6 3.6m-5.6 5.6-3.6 3.6'/%3E%3C/svg%3E");
  --v3-i-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3Cpath d='M12 9v6M9 12h6'/%3E%3C/svg%3E");
  --v3-i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  --v3-i-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l6 4V6L7 10H4a1 1 0 0 0-1 1zM17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
  --v3-i-kb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z'/%3E%3Cpath d='M4 19.5V5.5'/%3E%3C/svg%3E");
  --v3-i-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-8 4 16 3-8h4'/%3E%3C/svg%3E");
  --v3-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --v3-i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --v3-i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --v3-i-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --v3-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --v3-i-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}

/* ---- Top strip (signed in): dark, quiet, rounded controls ---- */
html body .header .topbar { background: var(--v3-deep); color: rgba(255,255,255,.75); font-size: 13px; padding: 6px 0; border: 0; }
html body .header .topbar .btn, html body .header .topbar .input-group-text { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px !important; background: rgba(255,255,255,.08); color: #fff; font-size: 12.5px; font-weight: 500; }
html body .header .topbar .input-group-text { background: transparent; color: rgba(255,255,255,.6); padding-right: 6px; }
html body .header .topbar .btn-group { gap: 6px; }
html body .header .topbar .btn:hover { background: rgba(255,255,255,.16); }
html body .header .topbar .btn-return-to-admin { background: #2bd17e; color: var(--v3-deep); }

/* ---- Logo bar: mark, a "Client area" tag, pill search and a round cart ---- */
html body .header > .navbar:not(.main-navbar-wrapper) { background: #fff; padding: 16px 0; }
html body .header > .navbar:not(.main-navbar-wrapper) > .container { display: flex; align-items: center; flex-wrap: nowrap; }
html body .header .navbar-brand { order: 0; margin-right: 0 !important; }
html body .header .navbar-brand::before { width: 34px; height: 34px; border-radius: 10px; background-size: 21px; box-shadow: 0 6px 16px -6px rgba(18,160,92,.55); }
html body .header .navbar-brand::after { font-size: 22px; }
html body:not(:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout))) .header > .navbar:not(.main-navbar-wrapper) > .container::before { content: "Client area"; order: 1; margin-left: 14px; padding: 5px 11px; border-radius: 999px; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
html body .header > .navbar:not(.main-navbar-wrapper) > .container > form { order: 2; margin-left: auto !important; }
html body .header > .navbar:not(.main-navbar-wrapper) > .container > .toolbar { order: 3; }
html body .header .search { width: 300px; height: 44px; flex-wrap: nowrap; border-radius: 999px; background: var(--v3-sage); border: 1.5px solid transparent; transition: border-color .15s, background .15s, box-shadow .15s; overflow: hidden; }
html body .header .search:focus-within { background: #fff; border-color: var(--wh-brand); box-shadow: var(--v3-ring); }
html body .header .search .btn, html body .header .search .form-control { height: 41px; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html body .header .search .btn { width: 44px; padding: 0; color: transparent; position: relative; }
html body .header .search .btn::before { content: ""; position: absolute; inset: 0; margin: auto; width: 17px; height: 17px; background: #7b877d; -webkit-mask: var(--v3-i-search) center / contain no-repeat; mask: var(--v3-i-search) center / contain no-repeat; }
html body .header .search .btn > * { display: none; }
html body .header .search .form-control { padding: 0 16px 0 0; font-size: 14.5px; font-weight: 400 !important; color: var(--wh-ink); }
html body .header .search .form-control::placeholder { color: #8a948c; }
html body .header .toolbar .cart-btn { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--v3-line); background: #fff; display: grid; place-items: center; color: transparent; }
html body .header .toolbar .cart-btn::before { content: ""; width: 19px; height: 19px; background: var(--wh-ink); -webkit-mask: var(--v3-i-bag) center / contain no-repeat; mask: var(--v3-i-bag) center / contain no-repeat; }
html body .header .toolbar .cart-btn > i { display: none; }
html body .header .toolbar .cart-btn:hover { border-color: var(--wh-ink); }
html body .header .toolbar .cart-btn .badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--wh-brand); color: #fff; border: 2px solid #fff; }
html body .header .toolbar .cart-btn .badge:empty, html body .header .toolbar .cart-btn #cartItemCount:is([data-count="0"]) { display: none; }

/* ---- Main menu: an icon for every item, pill hover, a soft panel for each dropdown ---- */
/* Twenty-One moves menu items into "More" while #nav is taller than 30px, so the list stays 30px high and the 40px pills overflow it evenly */
@media (min-width: 1200px) {
  html body .header .main-navbar-wrapper .navbar-nav { height: 30px; align-items: center; }
  html body .header .main-navbar-wrapper .navbar-nav > li:not(.d-none) { display: flex !important; align-items: center; height: 30px; }
}
html body .header .main-navbar-wrapper { background: #fff; border-top: 1px solid #eef0f2; border-bottom: 1px solid var(--v3-line); padding: 13px 0; box-shadow: 0 10px 24px -22px rgba(5,58,36,.5); }
html body .header .main-navbar-wrapper .navbar-nav > li > a { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0 2px; padding: 0 14px !important; border-radius: 999px; color: var(--wh-ink-2) !important; font-size: 14.5px; font-weight: 500; background: transparent; transition: background .15s, color .15s; }
html body .header .main-navbar-wrapper .navbar-nav > li > a:hover, html body .header .main-navbar-wrapper .navbar-nav > li.show > a { background: var(--v3-sage); color: var(--wh-ink) !important; }
html body .header .main-navbar-wrapper .navbar-nav > li.active > a, html body .header .main-navbar-wrapper .navbar-nav > li > a.active { background: var(--wh-brand-tint); color: var(--wh-brand-deep) !important; }
html body .header .main-navbar-wrapper .navbar-nav > li > a::before { content: ""; flex: 0 0 17px; width: 17px; height: 17px; background: currentColor; opacity: .85; -webkit-mask: var(--v3-icon, var(--v3-i-chev)) center / contain no-repeat; mask: var(--v3-icon, var(--v3-i-chev)) center / contain no-repeat; }
html body .header .main-navbar-wrapper .navbar-nav > li:not([id]) > a::before { display: none; }
html body .header .main-navbar-wrapper .navbar-nav > li > a.dropdown-toggle::after { content: ""; border: 0; width: 12px; height: 12px; margin-left: -2px; vertical-align: 0; background: currentColor; opacity: .5; -webkit-mask: var(--v3-i-down) center / contain no-repeat; mask: var(--v3-i-down) center / contain no-repeat; transition: transform .2s; }
html body .header .main-navbar-wrapper .navbar-nav > li.show > a.dropdown-toggle::after { transform: rotate(180deg); }
/* Twenty-One's "More" item only when something has been moved into it */
html body .header #nav > li.collapsable-dropdown:not(:has(.collapsable-dropdown-menu > li)) { display: none !important; }
#Primary_Navbar-Home { --v3-icon: var(--v3-i-home); }
#Primary_Navbar-Services { --v3-icon: var(--v3-i-services); }
#Primary_Navbar-Domains { --v3-icon: var(--v3-i-domains); }
#Primary_Navbar-Billing { --v3-icon: var(--v3-i-billing); }
#Primary_Navbar-Support { --v3-icon: var(--v3-i-support); }
#Primary_Navbar-Open_Ticket { --v3-icon: var(--v3-i-ticket); }
#Primary_Navbar-Store { --v3-icon: var(--v3-i-store); }
#Primary_Navbar-Announcements { --v3-icon: var(--v3-i-news); }
#Primary_Navbar-Knowledgebase { --v3-icon: var(--v3-i-kb); }
#Primary_Navbar-Network_Status { --v3-icon: var(--v3-i-status); }
#Primary_Navbar-Contact_Us { --v3-icon: var(--v3-i-mail); }
#Secondary_Navbar-Account, #Secondary_Navbar-Login, #Secondary_Navbar-Register { --v3-icon: var(--v3-i-user); }
/* "Open Ticket" is the one action in the menu, so it reads as a button */
@media (min-width: 1200px) {
  html body .header .main-navbar-wrapper #Primary_Navbar-Open_Ticket > a { background: var(--v3-deep); color: #fff !important; margin-left: 8px; }
  html body .header .main-navbar-wrapper #Primary_Navbar-Open_Ticket > a:hover { background: var(--wh-brand-deep); }
  html body .header .main-navbar-wrapper #Secondary_Navbar-Account > a { border: 1.5px solid var(--v3-line); }
}
/* Dropdowns */
html body .header .main-navbar-wrapper .dropdown-menu { min-width: 250px; margin-top: 4px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; box-shadow: 0 2px 4px rgba(5,58,36,.04), 0 24px 48px -18px rgba(5,58,36,.3); }
html body .header .main-navbar-wrapper .dropdown-menu > li.dropdown-item { padding: 0; background: transparent !important; }
html body .header .main-navbar-wrapper .dropdown-menu a.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px !important; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--wh-ink-2); white-space: nowrap; }
html body .header .main-navbar-wrapper .dropdown-menu a.dropdown-item::after { content: ""; margin-left: auto; width: 12px; height: 12px; background: currentColor; opacity: 0; transform: translateX(-4px); -webkit-mask: var(--v3-i-chev) center / contain no-repeat; mask: var(--v3-i-chev) center / contain no-repeat; transition: opacity .15s, transform .15s; }
html body .header .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover { background: var(--v3-sage); color: var(--v3-deep); }
html body .header .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover::after { opacity: .6; transform: none; }
html body .header .main-navbar-wrapper .dropdown-menu .dropdown-divider { margin: 6px 8px; border-color: #eef0f2; }
/* Store menu: only the things we sell now (the old categories stay in WHMCS, just not in the menu) */
:is(#Primary_Navbar-Store-Website_Builder, #Primary_Navbar-Store-Web_Design, #Primary_Navbar-Store-Reseller_Hosting, [id="Primary_Navbar-Store-Online_Marketing_&_SEO"], #Primary_Navbar-Store-Products, #Primary_Navbar-Store-Managed_Services, #Primary_Navbar-Store-VPS_Hosting, #Primary_Navbar-Store-VPN) { display: none !important; }
/* Small screens: the menu opens as a tidy list */
@media (max-width: 1199.98px) {
  html body .header .main-navbar-wrapper { padding: 0; }
  html body .header .main-navbar-wrapper .navbar-collapse { padding: 8px 0 14px; }
  html body .header .main-navbar-wrapper .navbar-nav > li > a { display: flex; margin: 2px 0; height: 46px; }
  html body .header .main-navbar-wrapper .dropdown-menu { box-shadow: none; border: 0; background: var(--v3-sage); margin: 0 0 6px; }
  html body .header .search { width: 100%; }
  html body:not(:has(#order-standard_cart)) .header > .navbar:not(.main-navbar-wrapper) > .container::before { display: none; }
}

/* ---- Page band: deep green with contour lines; the breadcrumb sits on top and its last step becomes the page title ---- */
html body .master-breadcrumb { flex-shrink: 0; position: relative; overflow: hidden; background: var(--v3-deep) var(--v3-contour) right -80px center / 1250px auto no-repeat; border: 0; padding: 26px 0 30px; }
html body .master-breadcrumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 220px at 8% 0%, rgba(43,209,126,.22), transparent 70%); pointer-events: none; }
html body .master-breadcrumb .container { position: relative; }
html body .master-breadcrumb .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 2px; margin: 0; padding: 0; background: transparent; font-size: 13px; }
html body .master-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; padding: 0; color: rgba(255,255,255,.7); }
html body .master-breadcrumb .breadcrumb-item a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.82); font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
html body .master-breadcrumb .breadcrumb-item a:hover { background: rgba(255,255,255,.18); color: #fff; }
html body .master-breadcrumb .breadcrumb-item:first-child a { width: 28px; padding: 0; justify-content: center; font-size: 0; }
html body .master-breadcrumb .breadcrumb-item:first-child a::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--v3-i-home) center / contain no-repeat; mask: var(--v3-i-home) center / contain no-repeat; }
html body .master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: ""; float: none; width: 12px; height: 12px; padding: 0; margin: 0 4px; background: rgba(255,255,255,.4); -webkit-mask: var(--v3-i-chev) center / contain no-repeat; mask: var(--v3-i-chev) center / contain no-repeat; }
html body .master-breadcrumb .breadcrumb-item.active { order: 99; flex-basis: 100%; margin-top: 12px; color: #fff; font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
html body .master-breadcrumb .breadcrumb-item.active::before { display: none !important; }
/* the chips line keeps its own row even when the title is long */
html body .master-breadcrumb .breadcrumb-item.active:first-child { margin-top: 0; }
html body:not(:has(#order-standard_cart)) #main-body { padding-top: 36px; }
/* The email check banner sits between the band and the page: a slim strip rather than a block */
html body:not(:has(#order-standard_cart)) :is(.verification-banner, .email-verification) { padding: 10px 0; font-size: 14px; background: #fff4e0; border-bottom: 1px solid #f3dfb8; }
html body:not(:has(#order-standard_cart)) :is(.verification-banner, .email-verification) .btn { height: 34px; padding: 0 16px; font-size: 13px; }

/* ---- Fields everywhere outside the order flow: one height, one border, icons centred ---- */
html body:not(:has(#order-standard_cart)) :is(#main-body, .modal) :is(input.form-control, input.field, select.form-control, select.field, .custom-select):not([type=file]):not([type=checkbox]):not([type=radio]) { height: 52px; padding: 0 16px; border: 1.5px solid var(--v3-line); border-radius: 14px; background-color: var(--v3-field); font-size: 15.5px; color: var(--wh-ink); box-shadow: none; transition: border-color .15s, box-shadow .15s, background-color .15s; }
html body:not(:has(#order-standard_cart)) :is(#main-body, .modal) textarea.form-control { padding: 14px 16px; border: 1.5px solid var(--v3-line); border-radius: 14px; background-color: var(--v3-field); font-size: 15.5px; }
html body:not(:has(#order-standard_cart)) :is(#main-body, .modal) :is(.form-control, .field, .custom-select):hover:not(:focus) { border-color: var(--v3-line-2); }
html body:not(:has(#order-standard_cart)) :is(#main-body, .modal) :is(.form-control, .field, .custom-select):focus { border-color: var(--wh-brand); background-color: #fff; box-shadow: var(--v3-ring); outline: 0; }
html body:not(:has(#order-standard_cart)) :is(#main-body, .modal) :is(.form-control, .field)::placeholder { color: #8f998f; }
html body:not(:has(#order-standard_cart)) #main-body .form-control[disabled], html body:not(:has(#order-standard_cart)) #main-body .form-control[readonly] { background-color: #f1f4f0; color: #5d6a60; }
html body:not(:has(#order-standard_cart)) #main-body .prepend-icon { position: relative; }
html body:not(:has(#order-standard_cart)) #main-body .prepend-icon .field-icon { position: absolute; top: 0; left: 0; z-index: 3; width: 48px; height: 52px; margin: 0; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 14px; color: #97a398; pointer-events: none; transition: color .15s; }
html body:not(:has(#order-standard_cart)) #main-body .prepend-icon :is(.field, .form-control, select) { padding-left: 46px !important; }
html body:not(:has(#order-standard_cart)) #main-body .prepend-icon:focus-within .field-icon { color: var(--wh-brand); }
html body:not(:has(#order-standard_cart)) input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px var(--v3-field) inset !important; -webkit-text-fill-color: var(--wh-ink); caret-color: var(--wh-ink); }
html body:not(:has(#order-standard_cart)) input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 60px #fff inset, var(--v3-ring) !important; }
/* Phone: the country picker reads as part of the field */
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input { width: 100%; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input .flag-container { top: 1.5px; bottom: 1.5px; left: 1.5px; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input .selected-flag { height: 100%; border-radius: 12px 0 0 12px; background: #eef3ed !important; padding: 0 10px 0 12px; }
/* Grouped fields (login, password, search): the group is the box, the parts sit inside it */
html body:not(:has(#order-standard_cart)) #main-body .input-group-merge, html body:not(:has(#order-standard_cart)) .login-form .input-group { flex-wrap: nowrap; height: 52px; border: 1.5px solid var(--v3-line); border-radius: 14px; background: var(--v3-field); overflow: hidden; transition: border-color .15s, box-shadow .15s, background .15s; }
html body:not(:has(#order-standard_cart)) #main-body .input-group-merge:hover, html body:not(:has(#order-standard_cart)) .login-form .input-group:hover { border-color: var(--v3-line-2); }
html body:not(:has(#order-standard_cart)) #main-body .input-group-merge:focus-within, html body:not(:has(#order-standard_cart)) .login-form .input-group:focus-within { border-color: var(--wh-brand); background: #fff; box-shadow: var(--v3-ring); }
html body:not(:has(#order-standard_cart)) :is(#main-body .input-group-merge, .login-form .input-group) :is(.form-control, .input-group-text, .btn) { height: 49px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body:not(:has(#order-standard_cart)) :is(#main-body .input-group-merge, .login-form .input-group) .input-group-text { width: 46px; padding: 0; justify-content: center; color: #97a398; }
html body:not(:has(#order-standard_cart)) :is(#main-body .input-group-merge, .login-form .input-group):focus-within .input-group-text { color: var(--wh-brand); }
html body:not(:has(#order-standard_cart)) :is(#main-body .input-group-merge, .login-form .input-group) .form-control { padding-left: 0; }
html body:not(:has(#order-standard_cart)) :is(#main-body .input-group-merge, .login-form .input-group) .btn { padding: 0 16px; color: #7b877d; }
html body:not(:has(#order-standard_cart)) :is(#main-body .input-group-merge, .login-form .input-group) .btn:hover { color: var(--wh-ink); }
html body:not(:has(#order-standard_cart)) :is(#main-body .input-group-merge, .login-form .input-group) input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px var(--v3-field) inset !important; }
/* Labels above fields, and the little helper text */
html body:not(:has(#order-standard_cart)) #main-body label:not(.field-icon):not(.form-check-label):not(.custom-control-label) { margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--wh-ink); }
html body:not(:has(#order-standard_cart)) #main-body .form-text, html body:not(:has(#order-standard_cart)) #main-body small.text-muted { font-size: 13px; color: #6a766c !important; }
/* Checkboxes and radios in brand green */
html body:not(:has(#order-standard_cart)) #main-body input[type=checkbox]:not(.toggle-switch-success), html body:not(:has(#order-standard_cart)) #main-body input[type=radio] { accent-color: var(--wh-brand); width: 18px; height: 18px; vertical-align: -3px; }

/* ---- Sign in, password reset: a deep band behind a floating card ---- */
html body:has(.login-form) #main-body, html body:has(#main-body .card.mw-540) #main-body { background: linear-gradient(var(--v3-deep), var(--v3-deep)) top / 100% 300px no-repeat, var(--v3-sage); position: relative; padding-top: 56px; }
html body:has(.login-form) #main-body::before, html body:has(#main-body .card.mw-540) #main-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 300px; background: var(--v3-contour) right -80px center / 1250px auto no-repeat, radial-gradient(600px 240px at 10% 0%, rgba(43,209,126,.22), transparent 70%); pointer-events: none; }
html body:has(.login-form) #main-body > .container, html body:has(#main-body .card.mw-540) #main-body > .container { position: relative; }
html body .login-form::before { content: "Welcome back"; display: block; margin: 0 auto 18px; text-align: center; color: #fff; font-size: clamp(28px, 4vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
html body .login-form .card, html body #main-body .card.mw-540 { border: 0; border-radius: 24px; box-shadow: 0 2px 4px rgba(5,58,36,.05), 0 40px 80px -36px rgba(5,58,36,.45); }
html body .login-form .card-body { padding: 36px 40px 30px; }
html body .login-form .card-body > :is(h1, h2, h3, h4, h5, h6, .h3):first-child { font-size: 22px; font-weight: 700; }
html body .login-form #login { height: 54px; border-radius: 999px; background: var(--wh-brand); border: 0; font-size: 16px; font-weight: 700; box-shadow: 0 12px 24px -12px rgba(18,160,92,.7); }
html body .login-form #login:hover { background: var(--wh-brand-deep); }
html body .login-form .card-footer { background: var(--v3-sage); border-top: 0; padding: 18px; }
html body .login-form .card-footer a { font-weight: 700; }
@media (max-width: 575px) { html body .login-form .card-body { padding: 26px 22px; } }

/* ---- Register ---- */
html body #registration #frmCheckout .card .card-title, html body #registration .sub-heading { font-size: 17px; font-weight: 700; }
html body #registration .bootstrap-switch { height: 34px; border: 1.5px solid var(--v3-line); border-radius: 999px; overflow: hidden; background: #fff; }
html body #registration .bootstrap-switch .bootstrap-switch-handle-on, html body #registration .bootstrap-switch .bootstrap-switch-handle-off, html body #registration .bootstrap-switch .bootstrap-switch-label { height: 31px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
html body #registration .bootstrap-switch .bootstrap-switch-handle-on { background: var(--wh-brand); color: #fff; }
html body #registration .bootstrap-switch .bootstrap-switch-handle-off { background: #eef1f4; color: #475467; }
html body #registration .bootstrap-switch .bootstrap-switch-label { background: #fff; }
html body #registration .progress, html body #main-body .password-strength-meter .progress { height: 8px; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
html body #registration .progress-bar { border-radius: 999px; }
html body #registration :is(input[type=submit], button[type=submit]).btn-primary { min-width: 260px; height: 56px; border-radius: 999px; font-size: 16.5px; font-weight: 700; box-shadow: 0 14px 28px -14px rgba(18,160,92,.75); }
html body #main-body :is(.captcha-container, #default-captcha-domainchecker, .text-center:has(> .captchaimage)) { padding: 16px; border-radius: 16px; background: #fff; border: 1.5px dashed var(--v3-line); }
html body #main-body .captchaimage { border-radius: 10px; }
html body #main-body input[name=code], html body #main-body #inputCaptcha { max-width: 180px; text-align: center; letter-spacing: .2em; font-weight: 600; }

/* ---- Cards, everywhere: a touch more finish ---- */
html body:not(:has(#order-standard_cart)) #main-body .card { border-radius: 22px; }
html body:not(:has(#order-standard_cart)) #main-body .card-header { padding: 18px 22px; }
html body:not(:has(#order-standard_cart)) #main-body .primary-content > :is(h1, h2, h3):first-child, html body:not(:has(#order-standard_cart)) #main-body .header-lined h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
html body .modal-content { border: 0; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(5,58,36,.45); overflow: hidden; }
html body .modal-header { border-bottom: 1px solid #eef0f2; padding: 18px 24px; }
html body .modal-footer { border-top: 0; background: var(--v3-sage); padding: 14px 24px; }
html body .modal-backdrop.show { opacity: .55; background: var(--v3-deep); }

/* ---- Footer: the deep green band again, with a short line about us ---- */
html body #footer.footer { position: relative; overflow: hidden; margin: 0; padding: 56px 0 36px; border: 0; background: var(--v3-deep) var(--v3-contour) right -160px bottom -40px / 1300px auto no-repeat; color: rgba(255,255,255,.7); }
html body #footer.footer > .container { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px 40px; align-items: center; }
html body #footer.footer > .container::before { content: "webhostgb"; grid-column: 1; grid-row: 1; padding-left: 46px; min-height: 34px; display: flex; align-items: center; color: #fff; font-size: 24px; font-weight: 700; letter-spacing: -0.04em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Crect width='34' height='34' rx='10' fill='%2312a05c'/%3E%3Cpath d='M7 11l4 13 6-9 6 9 4-13' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center / 34px no-repeat; }
html body #footer.footer > .container::after { content: "Websites, hosting and domain names for UK small businesses."; grid-column: 1; grid-row: 2; font-size: 15px; color: rgba(255,255,255,.66); }
html body #footer.footer .list-inline { grid-column: 2; grid-row: 1; float: none !important; margin: 0 !important; }
html body #footer.footer .list-inline:empty { display: none; }
html body #footer.footer .nav { grid-column: 2; grid-row: 2; margin: 0 !important; gap: 6px; justify-content: flex-end !important; }
html body #footer.footer .nav .nav-link { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: 14px; font-weight: 500; }
html body #footer.footer .nav .nav-link:hover { background: rgba(255,255,255,.18); }
html body #footer.footer .copyright { grid-column: 1 / -1; grid-row: 3; margin-top: 28px !important; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.5); text-align: left; }
@media (max-width: 767px) {
  html body #footer.footer > .container { grid-template-columns: 1fr; }
  html body #footer.footer .nav { grid-column: 1; grid-row: 3; justify-content: flex-start !important; margin-top: 14px !important; }
  html body #footer.footer .copyright { grid-row: 4; }
}
html body.primary-bg-color { background: var(--v3-deep); }

/* ---- v3 details ---- */
/* Dashboard lists: the same padding as the card header */
html body .client-home-cards .card .list-group-item { padding: 14px 22px !important; }
html body .client-home-cards .card .list-group-item small { color: #7b877d; }
/* Sidebar "Your recent tickets": subject on one line, status and age on the next */
html body .card-sidebar .sidebar-menu-item-wrapper:has(.recent-ticket), html body .card-sidebar .sidebar-menu-item-label:has(.recent-ticket) { display: block; width: 100%; min-width: 0; }
html body .card-sidebar .recent-ticket { width: 100%; }
html body .card-sidebar .recent-ticket .truncate { font-weight: 600; color: var(--wh-ink); }
html body .card-sidebar .recent-ticket small { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 12.5px; color: #7b877d; }
html body .card-sidebar .recent-ticket small .float-right { float: none !important; }
/* Open a ticket: each department as a tile */
@media (min-width: 768px) {
  html body #main-body .primary-content .card-body .row > .offset-sm-1:has(> p.h5) { display: grid; grid-auto-flow: column; grid-template-rows: auto 1fr; grid-auto-columns: 1fr; column-gap: 14px; margin-left: 0; max-width: 100%; flex: 0 0 100%; }
}
html body #main-body .primary-content .offset-sm-1:has(> p.h5) > p.h5 { margin: 0; padding: 18px 18px 6px; border: 1.5px solid var(--v3-line); border-bottom: 0; border-radius: 18px 18px 0 0; background: var(--v3-field); font-size: 16px; font-weight: 700; }
html body #main-body .primary-content .offset-sm-1:has(> p.h5) > p.h5 a { display: flex; flex-direction: column; gap: 12px; color: var(--wh-ink); text-decoration: none; }
html body #main-body .primary-content .offset-sm-1:has(> p.h5) > p.h5 a > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wh-brand-tint); color: var(--wh-brand-deep); font-size: 16px; }
html body #main-body .primary-content .offset-sm-1:has(> p.h5) > p.h5 + p { margin: 0 0 14px; padding: 0 18px 18px; border: 1.5px solid var(--v3-line); border-top: 0; border-radius: 0 0 18px 18px; background: var(--v3-field); font-size: 14px; line-height: 1.5; }
html body #main-body .primary-content .offset-sm-1:has(> p.h5) > p.h5:hover, html body #main-body .primary-content .offset-sm-1:has(> p.h5) > p.h5:hover + p { border-color: var(--wh-brand); background: #fff; }
html body #main-body .primary-content .offset-sm-1:has(> p.h5) > p.h5:hover a { color: var(--wh-brand-deep); }
/* Ticket and service tables: no stray column rules */
html body:not(:has(#order-standard_cart)) .table-list > tbody > tr > td, html body:not(:has(#order-standard_cart)) .table-list > thead > tr > th { border-left: 0 !important; border-right: 0 !important; }
/* The page is a flex column at least the window's height: nothing in it may shrink (the band and footer were being squashed) */
html body.primary-bg-color { height: auto; min-height: 100vh; }
html body > :is(header, .master-breadcrumb, #main-body, footer, .verification-banner, .email-verification) { flex-shrink: 0; }
/* Phone: room for the country code (Intl Tel Input marks the code length with iti-sdc-N) */
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.separate-dial-code .selected-flag { width: 84px; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.separate-dial-code input { padding-left: 96px !important; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.iti-sdc-2 .selected-flag { width: 76px; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.iti-sdc-2 input { padding-left: 88px !important; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.iti-sdc-4 .selected-flag { width: 92px; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.iti-sdc-4 input { padding-left: 104px !important; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.iti-sdc-5 .selected-flag { width: 100px; }
html body:not(:has(#order-standard_cart)) #main-body .intl-tel-input.iti-sdc-5 input { padding-left: 112px !important; }

/* Old store categories: hidden in the store sidebar and its phone dropdown too (still live in WHMCS) */
html body :is(a, option):is(
  [menuItemName="Website Builder"], [menuItemName="Web Design"], [menuItemName="Reseller Hosting"],
  [menuItemName="Online Marketing & SEO"], [menuItemName="Products"], [menuItemName="Managed Services"],
  [menuItemName="VPS Hosting"], [menuItemName="VPN"]
):not([id^="Primary_Navbar"]):not([id^="Secondary_Navbar"]) { display: none !important; }

/* =====================================================================
   v4: the webhostgb.com look, end to end.
   Header, footer and page heroes copied from the main site (tpl/header.tpl, tpl/footer.tpl),
   on the main site's own tokens. Everything above this line is the earlier stylesheet with its
   colours moved onto the same palette.
   ===================================================================== */
:root {
  --s-bg-2: #f9fafb;
  --s-ink: #0f1521;
  --s-ink-2: #374151;
  --s-muted: #6b7280;
  --s-line: #e5e7eb;
  --s-brand: #12a05c;
  --s-brand-deep: #06733f;
  --s-brand-tint: #e9f8f0;
  --s-mint: #34d07f;
  --s-deep: #053a24;
  --s-deep-2: #0a4a2f;
  --s-deep-line: #1a5c3e;
  --s-deep-muted: #a7d7bd;
  --s-radius: 16px;
  --s-radius-lg: 24px;
  --s-shadow: 0 1px 2px rgba(15,21,33,.06), 0 12px 32px -12px rgba(15,21,33,.18);
  --s-font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html body { font-family: var(--s-font); color: var(--s-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html body .container { max-width: 1240px; padding-left: 24px; padding-right: 24px; }

/* ---- Buttons, as on webhostgb.com ---- */
.wh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font: 500 16px/1 var(--s-font); text-decoration: none !important; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.wh-btn:active { transform: scale(.98); }
.wh-btn--sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
.wh-btn--ink { background: var(--s-ink); color: #fff !important; box-shadow: 0 6px 16px -8px rgba(15,21,33,.6); }
.wh-btn--ink:hover { background: #253045; }
.wh-btn--ghost { background: #fff; color: var(--s-ink) !important; border-color: var(--s-ink); }
.wh-btn--ghost:hover { background: var(--s-bg-2); }
.wh-arrow::after { content: "→"; margin-left: 2px; transition: transform .2s; }
.wh-arrow:hover::after { transform: translateX(3px); }
.wh-link { color: var(--s-brand-deep); font-weight: 500; text-decoration: none; }
.wh-link:hover { color: var(--s-brand-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Account strip (signed in): notifications, who you are, return to admin ---- */
html body .wh-topbar { background: var(--s-deep); color: #d8efe2; font-size: 13.5px; padding: 5px 0; border: 0; }
html body .wh-topbar .btn, html body .wh-topbar .input-group-text { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 999px !important; background: rgba(255,255,255,.08); color: #fff; font-size: 13.5px; }
html body .wh-topbar .input-group-text { background: transparent; color: var(--s-deep-muted); padding-right: 4px; }
html body .wh-topbar .btn-group { gap: 6px; }
html body .wh-topbar .btn:hover { background: rgba(255,255,255,.16); color: #fff; }
html body .wh-topbar .btn-return-to-admin { background: var(--s-mint); color: var(--s-deep); font-weight: 600; }

/* ---- Client area bar: one frosted white bar with the logo and a "Client area" tag, WHMCS's menu, basket and account ---- */
.wh-header { position: sticky; top: 0; z-index: 1030; isolation: isolate; }
.wh-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 rgba(15,21,33,.07); }
html body .wh-bar { padding: 0; background: transparent; }
html body .wh-bar > .container { padding-left: 24px; padding-right: 24px; }
.wh-nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 28px; height: 68px; }
.wh-logo { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--s-ink) !important; font-weight: 700; font-size: 20px; letter-spacing: -0.04em; text-decoration: none !important; }
.wh-logo-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--s-brand); color: #fff; }
.wh-tag { margin-left: 2px; padding: 3px 9px; border-radius: 6px; background: var(--s-bg-2); border: 1px solid var(--s-line); color: var(--s-muted); font-size: 12px; font-weight: 600; letter-spacing: 0; }
html body .wh-bar .navbar-collapse { align-items: center; gap: 8px; min-width: 0; }
html body .wh-bar #nav { height: auto; flex-wrap: nowrap; }
html body .wh-bar .navbar-nav > li > a { display: inline-flex; align-items: center; height: 38px; margin: 0 1px; padding: 0 12px !important; border-radius: 999px; color: var(--s-ink-2) !important; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
html body .wh-bar .navbar-nav > li > a:hover, html body .wh-bar .navbar-nav > li.show > a { background: rgba(15,21,33,.05); color: var(--s-ink) !important; }
html body .wh-bar .navbar-nav > li.active > a, html body .wh-bar .navbar-nav > li > a.active { background: var(--s-brand-tint); color: var(--s-brand-deep) !important; }
html body .wh-bar #Primary_Navbar-Open_Ticket > a { margin-left: 6px; background: var(--s-ink) !important; color: #fff !important; }
html body .wh-bar #Primary_Navbar-Open_Ticket > a:hover { background: #253045 !important; }
html body .wh-bar .wh-account > li > a { border: 1px solid var(--s-line); }
.wh-portal-search { flex: 0 1 220px; min-width: 160px; }
.wh-portal-search .form-control { height: 38px !important; padding: 0 14px 0 36px !important; border-radius: 999px !important; border: 1px solid var(--s-line) !important; background: var(--s-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 13px center / 15px no-repeat !important; font-size: 14px !important; box-shadow: none !important; }
.wh-portal-search .form-control:focus { background-color: #fff !important; border-color: var(--s-brand) !important; box-shadow: 0 0 0 4px rgba(18,160,92,.14) !important; }
.wh-cta { flex: none; display: flex; align-items: center; gap: 6px; }
.wh-cart { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--s-ink) !important; transition: background .15s; }
.wh-cart:hover { background: rgba(15,21,33,.05); }
.wh-cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--s-brand); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.wh-cart-count.is-empty { display: none; }
.wh-burger { display: none; width: 42px; height: 42px; place-items: center; border-radius: 999px; border: 1px solid var(--s-line); background: #fff; color: var(--s-ink); cursor: pointer; }
/* Twenty-One's "More" item, only when its script has moved something into it */
html body .wh-bar #nav > li.collapsable-dropdown:not(:has(.collapsable-dropdown-menu > li)) { display: none !important; }
/* Store menu: only the things we sell now (the old categories stay in WHMCS) */
:is(#Primary_Navbar-Store-Website_Builder, #Primary_Navbar-Store-Web_Design, #Primary_Navbar-Store-Reseller_Hosting, [id="Primary_Navbar-Store-Online_Marketing_&_SEO"], #Primary_Navbar-Store-Products, #Primary_Navbar-Store-Managed_Services, #Primary_Navbar-Store-VPS_Hosting, #Primary_Navbar-Store-VPN) { display: none !important; }
/* ---- Page hero: white with the soft green glow and faint grid from the main site ---- */
/* The old page painted body dark green to meet a green footer; the footer is light now */
html, html body.primary-bg-color { background: var(--s-bg-2); }
html body .master-breadcrumb { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 36px; background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--s-line) !important; }
html body .master-breadcrumb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 420px at 85% -30%, rgba(52,208,127,.18), transparent 70%), radial-gradient(600px 300px at 0% 0%, rgba(52,208,127,.08), transparent 70%); }
html body .master-breadcrumb::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(15,21,33,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,21,33,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 90% at 75% 10%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 75% 10%, #000, transparent 75%); }
html body .master-breadcrumb .breadcrumb-item { color: var(--s-muted); }
html body .master-breadcrumb .breadcrumb-item a { height: 28px; background: rgba(15,21,33,.05); color: var(--s-ink-2); }
html body .master-breadcrumb .breadcrumb-item a:hover { background: var(--s-brand-tint); color: var(--s-brand-deep); }
html body .master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { background: #9ca3af; }
html body .master-breadcrumb .breadcrumb .breadcrumb-item.active { margin-top: 14px; color: var(--s-ink); font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; }
html body .master-breadcrumb .breadcrumb .breadcrumb-item.active:first-child { margin-top: 0; }

/* ---- Footer: slim, like the bottom of a checkout ---- */
.wh-footer { flex-shrink: 0; padding: 28px 0 32px; background: #fff; border-top: 1px solid var(--s-line); color: var(--s-muted); font-size: 13.5px; }
.wh-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0 0 18px; list-style: none; border-bottom: 1px solid var(--s-line); }
.wh-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--s-ink-2); font-size: 13.5px; font-weight: 500; }
.wh-trust li:not(:first-child)::before { content: ""; width: 14px; height: 14px; background: var(--s-brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.wh-trust svg { color: var(--s-brand); }
.wh-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; }
.wh-footer-bottom nav { display: flex; align-items: center; gap: 20px; }
.wh-footer-bottom a, .wh-locale { color: var(--s-muted); text-decoration: none; }
.wh-footer-bottom a:hover, .wh-locale:hover { color: var(--s-ink); }
.wh-locale { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* ---- Small screens: the burger opens the menu, account and search as one list under the bar ---- */
@media (max-width: 1199.98px) {
  .wh-burger { display: grid; }
  .wh-nav { height: auto; min-height: 64px; flex-wrap: wrap; gap: 0 12px; }
  .wh-cta { margin-left: auto; }
  html body .wh-bar .navbar-collapse { order: 5; flex: 0 0 100%; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 18px; border-top: 1px solid var(--s-line); }
  html body .wh-bar .navbar-collapse.show, html body .wh-bar .navbar-collapse.collapsing { display: flex; }
  html body .wh-bar .navbar-nav { margin: 0 !important; height: auto !important; }
  html body .wh-bar .navbar-nav > li:not(.d-none) { display: block !important; height: auto !important; }
  html body .wh-bar .navbar-nav > li > a { display: flex !important; height: 48px; padding: 0 12px !important; border-radius: 12px; font-size: 16px; }
  html body .wh-bar .wh-account > li > a { border: 0; }
  html body .wh-bar #Primary_Navbar-Open_Ticket > a { margin: 6px 0; justify-content: center; }
  html body .wh-bar .dropdown-menu { position: static; float: none; margin: 0 0 6px; border: 0; box-shadow: none; background: var(--s-bg-2); }
  .wh-portal-search { flex: none; margin-top: 8px; }
  .wh-portal-search .form-control { height: 46px !important; }
}
@media (max-width: 767.98px) {
  .wh-tag { display: none; }
  html body .master-breadcrumb { padding: 28px 0; }
}

/* Menu dropdowns (Store, Account) */
html body .wh-bar .dropdown-menu { min-width: 240px; margin-top: 6px; padding: 8px; border: 1px solid var(--s-line); border-radius: var(--s-radius); background: #fff; box-shadow: 0 2px 4px rgba(15,21,33,.04), 0 24px 48px -18px rgba(15,21,33,.28); }
html body .wh-bar .dropdown-menu > li.dropdown-item { padding: 0; background: transparent !important; }
html body .wh-bar .dropdown-menu a.dropdown-item { display: flex; align-items: center; padding: 10px 12px !important; border-radius: 10px; color: var(--s-ink-2); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
html body .wh-bar .dropdown-menu a.dropdown-item:hover, html body .wh-bar .dropdown-menu a.dropdown-item.active { background: var(--s-bg-2); color: var(--s-ink); }
html body .wh-bar .dropdown-menu .dropdown-divider { margin: 6px 8px; border-color: var(--s-line); }
html body .wh-bar .navbar-nav > li > a.dropdown-toggle::after { margin-left: 6px; border-top-width: 4px; border-left-width: 4px; border-right-width: 4px; opacity: .6; }

/* Pages with their own heading skip the hero: sign in and password pages (their green band), and the whole order flow */
html body:has(.login-form, .password-reset-container, #order-standard_cart) .master-breadcrumb { display: none; }

/* ---- Focused checkout: on every order step the header is just the logo, a secure badge and the basket,
   and the footer is the legal line only, so nothing pulls people away mid-order ---- */
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) :is(.wh-tag, .wh-bar .navbar-collapse, .wh-burger) { display: none !important; }
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .wh-logo::after { content: "Secure checkout"; display: inline-flex; align-items: center; height: 28px; margin-left: 12px; padding: 0 12px 0 30px; border-radius: 999px; background: var(--s-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") 11px center / 14px no-repeat; color: var(--s-brand-deep); font-size: 13px; font-weight: 600; letter-spacing: 0; }
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .wh-header::before { background: #fff; }
body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .wh-cta::before { content: "Questions? hello@webhostgb.com"; margin-right: 8px; color: var(--s-muted); font-size: 14px; }
@media (max-width: 575px) {
  body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .wh-logo::after { content: ""; width: 28px; padding: 0; background-position: center; }
  body:has(#order-standard_cart :is(.domain-selection-options, #frmConfigureProduct, #frmConfigureDomains, .view-cart-items, #frmCheckout)) .wh-cta::before { display: none; }
}

/* ---- Domain search: a deep green search panel like the plan bands on webhostgb.com, full width, no category sidebar ---- */
body #order-standard_cart:has(#frmDomainChecker, #frmDomainTransfer) .cart-sidebar { display: none !important; }
body #order-standard_cart:has(#frmDomainChecker, #frmDomainTransfer) .cart-body { width: 100%; max-width: 100%; flex: 0 0 100%; float: none; }
body #order-standard_cart:has(#frmDomainChecker, #frmDomainTransfer) .header-lined { padding-top: 8px; margin-bottom: 8px; text-align: center; }
body #order-standard_cart:has(#frmDomainChecker, #frmDomainTransfer) .header-lined h1 { font-size: clamp(34px, 4.4vw, 54px) !important; font-weight: 600; letter-spacing: -0.045em; }
body #order-standard_cart:has(#frmDomainChecker, #frmDomainTransfer) .cart-body > p { text-align: center; color: var(--s-ink-2); font-size: 18px; margin-bottom: 28px; }
body #order-standard_cart .domain-checker-container { margin: 0 0 48px; padding: 0; border-radius: var(--s-radius-lg); overflow: hidden; background: radial-gradient(900px 420px at 80% 0%, rgba(52,208,127,.24), transparent 70%), radial-gradient(700px 400px at 0% 100%, rgba(52,208,127,.12), transparent 70%), var(--s-deep) !important; box-shadow: 0 40px 80px -48px rgba(5,58,36,.7); }
body #order-standard_cart .domain-checker-bg { margin: 0 !important; padding: 56px 32px 48px !important; background: none !important; }
body #order-standard_cart .domain-checker-container .row > [class*="col-"] { flex: 0 0 100%; max-width: 760px; margin: 0 auto !important; }
body #order-standard_cart .domain-checker-container .input-group-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 10px 12px 22px !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6) !important; }
body #order-standard_cart .domain-checker-container .input-group-box::before { content: ""; order: 1; flex: 0 0 100%; height: 0; }
body #order-standard_cart .domain-checker-container .input-group-box textarea { flex: 1 1 0; min-width: 0; height: 58px !important; min-height: 58px; padding: 16px 0 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; resize: none; font-size: 17px !important; line-height: 1.4; color: var(--s-ink); }
body #order-standard_cart .domain-checker-container .domain-check-availability { order: 0; position: static !important; flex: none; margin: 0 !important; inset: auto !important; height: 52px !important; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important; background: var(--s-brand) !important; color: #fff !important; font-weight: 600; font-size: 16px; box-shadow: 0 10px 22px -10px rgba(18,160,92,.8) !important; }
body #order-standard_cart .domain-checker-container .domain-check-availability:hover { background: var(--s-brand-deep) !important; }
body #order-standard_cart .domain-checker-container .input-group-box > .btn-group, body #order-standard_cart .domain-checker-container .input-group-box > label { order: 2; margin: 0; }
body #order-standard_cart .domain-checker-container .input-group-box > .btn-group:first-of-type { margin-left: 0; }
body #order-standard_cart .domain-checker-container .input-group-box .multiselect { height: 30px; padding: 0 12px !important; border: 1px solid var(--s-line) !important; border-radius: 999px !important; background: var(--s-bg-2) !important; color: var(--s-ink-2) !important; font-size: 13.5px !important; }
body #order-standard_cart .domain-checker-container .input-group-box > label { display: inline-flex; align-items: center; gap: 8px; color: var(--s-ink-2); font-size: 13.5px; font-weight: 500; }
body #order-standard_cart .domain-checker-container .input-group-box > .btn-group:first-of-type { padding-left: 0; }
body #order-standard_cart .domain-checker-container .captcha-container { margin: 20px auto 0 !important; padding: 0 !important; background: none !important; border: 0 !important; text-align: center; }
body #order-standard_cart .domain-checker-container .default-captcha { display: inline-block; margin: 0 auto; padding: 14px 18px; border-radius: var(--s-radius); background: rgba(255,255,255,.07); border: 1px solid var(--s-deep-line); color: var(--s-deep-muted); }
body #order-standard_cart .domain-checker-container .default-captcha p { margin: 0 0 10px; color: var(--s-deep-muted); font-size: 13.5px; }
body #order-standard_cart .domain-checker-container .default-captcha input { height: 40px !important; border-radius: 10px !important; border: 0 !important; }

/* TLD prices: a clean white table card with filter chips above */
body #order-standard_cart .domain-pricing h4 { font-size: 22px !important; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
body #order-standard_cart .domain-pricing .tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body #order-standard_cart .domain-pricing .tld-filters .badge { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--s-line); background: #fff; color: var(--s-ink-2); font-size: 14px; font-weight: 500; }
body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success, body #order-standard_cart .domain-pricing .tld-filters .badge:hover { background: var(--s-ink); border-color: var(--s-ink); color: #fff; }
body #order-standard_cart .domain-pricing .bg-white { border: 1px solid var(--s-line) !important; border-radius: var(--s-radius-lg) !important; overflow: hidden; box-shadow: 0 30px 60px -48px rgba(15,21,33,.4); }
body #order-standard_cart .domain-pricing .tld-pricing-header { background: var(--s-bg-2); border-bottom: 1px solid var(--s-line); color: var(--s-muted); font-size: 13px; font-weight: 600; text-transform: none; }
body #order-standard_cart .domain-pricing .tld-pricing-header > div, body #order-standard_cart .domain-pricing .tld-pricing-header .col-4 { padding: 12px 0; background: transparent !important; color: var(--s-muted) !important; border: 0 !important; }
body #order-standard_cart .domain-pricing .tld-row { min-height: 60px; align-items: center; border-bottom: 1px solid var(--s-line); background: #fff !important; }
body #order-standard_cart .domain-pricing .tld-row:last-child { border-bottom: 0; }
body #order-standard_cart .domain-pricing .tld-row:hover { background: var(--s-bg-2) !important; }
body #order-standard_cart .domain-pricing .tld-row strong { font-size: 17px; font-weight: 600; color: var(--s-ink); }
body #order-standard_cart .domain-pricing .tld-row .col-4 { color: var(--s-ink); font-weight: 600; font-size: 15px; border: 0 !important; }
body #order-standard_cart .domain-pricing .tld-row small { color: var(--s-muted); font-weight: 400; }
body #order-standard_cart .domain-pricing .tld-sale-group { margin-left: 6px; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
body #order-standard_cart .domain-pricing .tld-sale-group-hot { background: #fff1e6; color: #c2410c; }
body #order-standard_cart .domain-pricing .tld-pricing-header, body #order-standard_cart .domain-pricing .tld-pricing-header * { background: var(--s-bg-2) !important; border: 0 !important; }
body #order-standard_cart .domain-pricing .tld-row > div, body #order-standard_cart .domain-pricing .tld-row .col-4 { border: 0 !important; background: transparent !important; }

/* Upsells under the domain search: two cards with a green icon tile and an ink button */
body #order-standard_cart .domain-promo-box { position: relative; height: calc(100% - 24px); margin-bottom: 24px; padding: 28px 28px 28px 104px; border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: #fff; }
body #order-standard_cart .domain-promo-box > .clearfix > i { position: absolute; left: 28px; top: 28px; float: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--s-brand-tint); color: var(--s-brand-deep); font-size: 24px !important; margin: 0; }
body #order-standard_cart .domain-promo-box h3 { margin: 0 0 6px; font-size: 22px !important; font-weight: 600; letter-spacing: -0.02em; white-space: normal; }
body #order-standard_cart .domain-promo-box p { margin: 0 0 6px; color: var(--s-ink-2); font-size: 15px; }
body #order-standard_cart .domain-promo-box p.font-bold { color: var(--s-brand-deep) !important; font-weight: 600; }
body #order-standard_cart .domain-promo-box .btn { margin-top: 14px; height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border: 0; border-radius: 999px; background: var(--s-ink) !important; color: #fff !important; font-weight: 500; }
body #order-standard_cart .domain-promo-box .btn:hover { background: #253045 !important; }
@media (max-width: 767.98px) {
  body #order-standard_cart .domain-checker-bg { padding: 20px 14px 22px !important; }
  body #order-standard_cart .domain-checker-container .input-group-box { padding: 12px !important; gap: 10px; }
  body #order-standard_cart .domain-checker-container .input-group-box textarea { flex: 0 0 100%; height: 72px !important; padding: 6px 4px 0 !important; }
  body #order-standard_cart .domain-checker-container .domain-check-availability { flex: 1 0 100%; }
  body #order-standard_cart .domain-checker-container .input-group-box::before { display: none; }
  body #order-standard_cart .domain-checker-container .input-group-box > .btn-group, body #order-standard_cart .domain-checker-container .input-group-box > label { order: 0; }
  body #order-standard_cart .domain-checker-container .default-captcha { display: block; }
  body #order-standard_cart .domain-promo-box { padding: 24px; }
  body #order-standard_cart .domain-promo-box > .clearfix > i { position: static; margin-bottom: 14px; }
}


/* Twenty-One folds menu items into "More" once #nav is taller than its 30px line, so the list stays 30px high
   and the 38px pills overflow it evenly */
@media (min-width: 1200px) {
  html body .wh-bar #nav { height: 30px; align-items: center; }
  html body .wh-bar #nav > li:not(.d-none) { display: flex !important; align-items: center; height: 30px; }
}
/* Signed out, the bar keeps to what people come for: home, the store, help guides and contact */
html body .wh-bar #nav > li:is(#Primary_Navbar-Announcements, #Primary_Navbar-Network_Status) { display: none !important; }
@media (min-width: 1200px) { .wh-portal-search { display: none; } }

/* ---- Store: categories as a segmented control above the plans, plans three across, like a pricing page ---- */
body #order-standard_cart:has(#products) > .row { flex-direction: column; }
body #order-standard_cart:has(#products) .cart-sidebar { order: 0; width: 100%; max-width: none; flex: none; padding: 0; margin: 0 0 8px; text-align: center; }
body #order-standard_cart:has(#products) .cart-sidebar .card-sidebar + .card-sidebar, body #order-standard_cart:has(#products) .cart-sidebar .card-header, body #order-standard_cart:has(#products) .cart-sidebar .sidebar-collapsed { display: none !important; }
body #order-standard_cart:has(#products) .cart-sidebar .card-sidebar { display: inline-block; margin: 0 !important; padding: 5px; border: 1px solid var(--s-line) !important; border-radius: 999px !important; background: #fff; box-shadow: 0 1px 2px rgba(15,21,33,.04) !important; overflow: visible; }
body #order-standard_cart:has(#products) .cart-sidebar .list-group { display: flex !important; flex-direction: row; gap: 4px; }
body #order-standard_cart:has(#products) .cart-sidebar .list-group-item { height: 40px; display: inline-flex; align-items: center; padding: 0 18px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--s-ink-2) !important; font-size: 14.5px; font-weight: 500; white-space: nowrap; box-shadow: none !important; }
body #order-standard_cart:has(#products) .cart-sidebar .list-group-item::before, body #order-standard_cart:has(#products) .cart-sidebar .list-group-item::after { display: none !important; }
body #order-standard_cart:has(#products) .cart-sidebar .list-group-item:hover { background: var(--s-bg-2) !important; color: var(--s-ink) !important; }
body #order-standard_cart:has(#products) .cart-sidebar .list-group-item.active { background: var(--s-ink) !important; color: #fff !important; }
body #order-standard_cart:has(#products) .cart-body { order: 1; width: 100%; max-width: none; flex: none; padding: 0; }
body #order-standard_cart:has(#products) .header-lined { padding-top: 32px; margin: 0 auto 40px; text-align: center; }
body #order-standard_cart:has(#products) .header-lined h1 { font-size: clamp(34px, 4.4vw, 54px) !important; font-weight: 600; letter-spacing: -0.045em; }
body #order-standard_cart:has(#products) .header-lined p { margin-top: 12px; color: var(--s-ink-2); font-size: 18px; }
body #order-standard_cart #products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
body #order-standard_cart #products > .row { display: contents; }
body #order-standard_cart #products > .row > [class*="col-"] { display: flex; width: auto; max-width: none; flex: none; padding: 0; margin: 0; }
body #order-standard_cart #products .product { width: 100%; margin: 0; border-radius: var(--s-radius-lg); transition: box-shadow .2s, transform .2s; }
body #order-standard_cart #products .product:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgba(15,21,33,.35); }
/* The middle plan is the one most people pick, so it gets the main site's "popular" treatment */
body #order-standard_cart #products > .row:first-child > [class*="col-"]:nth-child(2) .product { box-shadow: 0 0 0 2px var(--s-brand), 0 30px 60px -30px rgba(5,58,36,.4); }
@media (max-width: 991.98px) { body #order-standard_cart #products { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) {
  body #order-standard_cart:has(#products) .cart-sidebar { overflow-x: auto; text-align: left; }
  body #order-standard_cart:has(#products) .cart-sidebar .list-group-item { padding: 0 14px !important; font-size: 14px; }
}
body #order-standard_cart #products .product { position: relative; overflow: visible; }
body #order-standard_cart #products > .row:first-child > [class*="col-"]:nth-child(2) .product::before { content: "Most popular"; position: absolute; top: -12px; left: 24px; z-index: 2; padding: 4px 12px; border-radius: 999px; background: var(--s-brand); color: #fff; font-size: 12.5px; font-weight: 600; }
body #order-standard_cart:has(#products) .cart-body { padding-top: 12px; }

/* =====================================================================
   v4.1 polish: more air, calmer lines and fewer boxes, so every step reads like a premium checkout
   ===================================================================== */
html body #main-body { padding-top: 48px; padding-bottom: 96px; }
html body #order-standard_cart .header-lined h1 { font-size: clamp(32px, 3.6vw, 44px) !important; font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; }
html body #order-standard_cart .header-lined p { margin-top: 10px; color: var(--s-muted); font-size: 16.5px; }

/* ---- Plan cards: name, price, button, then what's included, as on webhostgb.com ---- */
html body #order-standard_cart #products .product { display: flex !important; flex-direction: column; padding: 32px 28px 30px !important; border: 1px solid var(--s-line) !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15,21,33,.04) !important; }
html body #order-standard_cart #products > .row:first-child > [class*="col-"]:nth-child(2) .product { border-color: var(--s-brand) !important; box-shadow: 0 0 0 3px var(--s-brand-tint), 0 30px 60px -32px rgba(5,58,36,.35) !important; }
html body #order-standard_cart #products .product header { order: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body #order-standard_cart #products .product header::before, html body #order-standard_cart #products .product header::after { display: none !important; }
html body #order-standard_cart #products .product header span { display: block; color: var(--s-ink) !important; font-size: 21px !important; font-weight: 600 !important; letter-spacing: -0.02em; }
html body #order-standard_cart #products .product footer { order: 1; display: flex !important; flex-direction: column; align-items: stretch; gap: 18px; margin: 18px 0 26px !important; padding: 0 0 26px !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--s-line) !important; border-radius: 0 !important; }
html body #order-standard_cart #products .product-pricing { display: flex; align-items: baseline; gap: 8px; margin: 0 !important; padding: 0 !important; color: var(--s-muted) !important; font-size: 15px !important; text-align: left !important; }
html body #order-standard_cart #products .product-pricing br { display: none; }
html body #order-standard_cart #products .product-pricing .price { color: var(--s-ink) !important; font-size: 46px !important; font-weight: 600 !important; letter-spacing: -0.045em; line-height: 1; }
html body #order-standard_cart #products .btn-order-now { width: 100%; height: 50px; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 22px !important; border: 0 !important; border-radius: 999px !important; background: var(--s-ink) !important; color: #fff !important; font-size: 16px !important; font-weight: 500 !important; box-shadow: 0 8px 18px -10px rgba(15,21,33,.7) !important; transition: background .15s, transform .15s; }
html body #order-standard_cart #products .btn-order-now:hover { background: #253045 !important; }
html body #order-standard_cart #products .btn-order-now i { display: none; }
html body #order-standard_cart #products .btn-order-now::after { content: "→"; margin-left: 8px; transition: transform .2s; }
html body #order-standard_cart #products .btn-order-now:hover::after { transform: translateX(3px); }
html body #order-standard_cart #products > .row:first-child > [class*="col-"]:nth-child(2) .btn-order-now { background: var(--s-brand) !important; box-shadow: 0 10px 22px -10px rgba(18,160,92,.8) !important; }
html body #order-standard_cart #products > .row:first-child > [class*="col-"]:nth-child(2) .btn-order-now:hover { background: var(--s-brand-deep) !important; }
html body #order-standard_cart #products .product-desc { order: 2; margin: 0 !important; padding: 0 !important; }
html body #order-standard_cart #products .product-desc ul { display: grid; gap: 13px; margin: 0; padding: 0; }
html body #order-standard_cart #products .product-desc li { position: relative; display: block; margin: 0 !important; padding: 0 0 0 30px !important; border: 0 !important; color: var(--s-ink-2); font-size: 15px; line-height: 1.4; }
html body #order-standard_cart #products .product-desc li::before { content: ""; position: absolute !important; left: 0 !important; top: 1px !important; width: 18px !important; height: 18px !important; margin: 0 !important; border-radius: 50%; background: var(--s-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat !important; border: 0 !important; -webkit-mask: none !important; mask: none !important; }
html body #order-standard_cart #products .product-desc .feature-value { color: var(--s-ink); font-weight: 600; }

/* ---- Option steps: roomier cards, the plan's features as a two-column ticked list ---- */
html body #order-standard_cart #frmConfigureProduct .field-container, html body #order-standard_cart #frmConfigureProduct .product-info { padding: 30px 32px !important; border-radius: 22px !important; }
html body #order-standard_cart #frmConfigureProduct .product-info .product-title { margin: 0 0 4px; font-size: 21px !important; font-weight: 600; letter-spacing: -0.02em; }
html body #order-standard_cart #frmConfigureProduct .product-info .product-title + p { columns: 2; column-gap: 32px; margin: 12px 0 0; color: var(--s-ink-2); font-size: 15px; line-height: 2.1; }
html body #order-standard_cart .order-summary, html body #order-standard_cart #orderSummary { top: 96px; }

/* ---- Review: items and the promo code in one quiet card ---- */
html body #order-standard_cart .view-cart-items .item { padding: 24px 26px !important; }
html body #order-standard_cart .view-cart-tabs { padding: 24px 26px !important; }
html body #order-standard_cart .view-cart-tabs .nav-tabs { margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link { padding: 0 !important; border: 0 !important; background: none !important; color: var(--s-ink) !important; font-size: 16px; font-weight: 600; text-decoration: none !important; box-shadow: none !important; }
html body #order-standard_cart .view-cart-tabs .tab-content { padding: 0 !important; border: 0 !important; background: none !important; }
html body #order-standard_cart .view-cart-tabs form { display: flex; gap: 10px; }
html body #order-standard_cart .view-cart-tabs form .form-group { flex: 1; margin: 0 !important; }
html body #order-standard_cart .view-cart-tabs form .btn { width: auto !important; flex: none; height: 50px; margin: 0 !important; padding: 0 22px !important; border-radius: 999px !important; }

/* ---- Checkout: a narrower column, clear gaps between sections, one big button to finish ---- */
html body #order-standard_cart:has(#frmCheckout) { max-width: 920px; margin: 0 auto; }
html body #order-standard_cart #frmCheckout > .already-registered, html body #order-standard_cart .already-registered { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--s-line); border-radius: 16px; background: #fff; color: var(--s-ink-2); font-size: 15px; text-align: left; }
html body #order-standard_cart .already-registered p { margin: 0 !important; }
html body #order-standard_cart #frmCheckout .sub-heading { margin: 36px 0 18px !important; padding-top: 30px; border-top: 1px solid var(--s-line); }
html body #order-standard_cart #frmCheckout #containerNewUserSignup > .sub-heading:first-child, html body #order-standard_cart #frmCheckout > .sub-heading:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
html body #order-standard_cart #frmCheckout .sub-heading span { font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.015em; }
html body #order-standard_cart #frmCheckout .form-group { margin-bottom: 14px; }
html body #order-standard_cart #frmCheckout .generate-password { height: 38px; padding: 0 16px !important; border-radius: 999px !important; border: 1px solid var(--s-line) !important; background: #fff !important; color: var(--s-ink-2) !important; font-weight: 500; }
html body #order-standard_cart #frmCheckout #totalDueToday { display: flex; align-items: baseline; justify-content: space-between; padding: 22px 26px !important; border: 0 !important; border-radius: 18px !important; background: radial-gradient(600px 200px at 90% 0%, rgba(52,208,127,.2), transparent 70%), var(--s-deep) !important; color: var(--s-deep-muted) !important; font-size: 16px !important; text-align: left !important; }
html body #order-standard_cart #frmCheckout #totalDueToday strong { color: #fff !important; font-size: 30px !important; font-weight: 600; letter-spacing: -0.03em; }
html body #order-standard_cart #frmCheckout .marketing-email-optin { padding: 24px 26px !important; border: 1px solid var(--s-line) !important; border-radius: 18px !important; background: #fff !important; }
html body #order-standard_cart #frmCheckout .marketing-email-optin h4 { font-size: 16px !important; font-weight: 600; }
html body #order-standard_cart #frmCheckout .marketing-email-optin p { color: var(--s-muted); font-size: 14.5px; }
html body #order-standard_cart #frmCheckout #btnCompleteOrder { width: 100%; max-width: 100%; height: 58px; margin-top: 6px; border: 0 !important; border-radius: 999px !important; background: var(--s-brand) !important; color: #fff !important; font-size: 17px !important; font-weight: 600 !important; box-shadow: 0 14px 28px -14px rgba(18,160,92,.8) !important; }
html body #order-standard_cart #frmCheckout #btnCompleteOrder:hover { background: var(--s-brand-deep) !important; }

/* ---- Sign in and register: a little more room inside the cards ---- */
html body .login-form .card-body, html body .login-form .card .card-body { padding: 36px 36px 30px !important; }
html body #main-body .card-body { padding: 28px 30px; }
html body #main-body .card-header { padding: 20px 30px; }

@media (max-width: 767.98px) {
  html body #main-body { padding-top: 28px; padding-bottom: 64px; }
  html body #order-standard_cart #products .product { padding: 26px 22px 24px !important; }
  html body #order-standard_cart #frmConfigureProduct .product-info .product-title + p { columns: 1; }
  html body #order-standard_cart #frmConfigureProduct .field-container, html body #order-standard_cart #frmConfigureProduct .product-info { padding: 24px 22px !important; }
  html body #order-standard_cart .already-registered { flex-direction: column; align-items: stretch; text-align: center; }
  html body .login-form .card-body { padding: 26px 22px !important; }
}

/* =====================================================================
   v4.2 details: icons in line, buttons that never touch, one surface per card
   ===================================================================== */
/* Buttons: icon and label on one line with a proper gap, wherever WHMCS puts the icon */
html body :is(#main-body, #order-standard_cart, .modal) .btn:not(.dropdown-toggle-split):not(.multiselect) { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; vertical-align: middle; }
html body :is(#main-body, #order-standard_cart) .btn-block { display: flex !important; width: 100%; }
html body :is(#main-body, #order-standard_cart, .modal) .btn > :is(i, .fa, .fas, .far, .fal, .fad, svg) { margin: 0 !important; line-height: 1; font-size: .95em; }
html body :is(#main-body, #order-standard_cart) .btn br { display: none; }

/* Button groups: separate pills with a gap, except split buttons (label plus arrow), which stay joined */
html body #main-body .btn-group:not(.bootstrap-switch-container) { flex-wrap: wrap; gap: 8px; }
html body #main-body .btn-group:not(.bootstrap-switch-container):not(.btn-group-primary):not(.d-none) { display: inline-flex; }
html body #main-body .btn-group > .btn, html body #main-body .btn-group > .btn-group > .btn { margin: 0 !important; border-radius: 999px !important; }
html body #main-body .btn-group:has(> .dropdown-toggle-split) { gap: 0; flex-wrap: nowrap; }
/* A label button followed by its own little dropdown (Log in to cPanel ▾) also reads as one joined button */
html body #main-body .btn-group:has(> .btn:first-child + .btn-group:last-child > .dropdown-toggle) { gap: 0; flex-wrap: nowrap; }
html body #main-body .btn-group:has(> .btn:first-child + .btn-group:last-child > .dropdown-toggle) > .btn { border-radius: 999px 0 0 999px !important; }
html body #main-body .btn-group:has(> .btn:first-child + .btn-group:last-child > .dropdown-toggle) > .btn-group > .dropdown-toggle { margin-left: -1px !important; border-radius: 0 999px 999px 0 !important; padding: 0 12px 0 10px; }
html body #main-body .btn-group:has(> .dropdown-toggle-split) > .btn:first-child { border-radius: 999px 0 0 999px !important; padding-right: 12px; }
html body #main-body .btn-group:has(> .dropdown-toggle-split) > .dropdown-toggle-split { border-radius: 0 999px 999px 0 !important; margin-left: -1px !important; padding: 0 12px 0 10px; }

/* Card titles: icon tile, title and the collapse arrow on one centred line */
html body #main-body :is(.card-title, .panel-title, .card-header h3, .card-header h4) { display: flex; align-items: center; gap: 12px; margin: 0; line-height: 1.25; }
html body #main-body :is(.card-title, .panel-title) > i:not(.card-minimise):not(.panel-minimise) { flex: none; margin: 0 !important; }
html body #main-body :is(.card-title, .panel-title) .card-minimise, html body #main-body :is(.card-title, .panel-title) .panel-minimise { margin-left: auto !important; float: none !important; }
html body #main-body .card-header:has(> .card-title) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html body #main-body .card-header > :is(.card-title, .panel-title) { flex: 1 1 auto; min-width: 0; }
/* WHMCS puts the header's button inside the title, before the icon: send it to the far right */
html body #main-body :is(.card-title, .panel-title) > :is(.float-right, .pull-right) { order: 9; margin-left: auto !important; float: none !important; }
html body #main-body .card-header > .card-title + .btn, html body #main-body .card-header .float-right, html body #main-body .card-header .pull-right { float: none !important; margin: 0 0 0 auto !important; }

/* One surface per card: anything card-like inside a card or tab panel sits flat, so there are no doubled edges or shadows */
html body #main-body :is(.card, .tab-content, .table-container) :is(.table-container, .dataTables_wrapper, .listtable), html body #main-body .card .card { box-shadow: none !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; margin-left: 0; margin-right: 0; }
html body #main-body .tab-content .table-container { padding: 0 !important; }
/* Empty card footers drew a grey strip under several dashboard panels */
html body #main-body .card-footer:empty, html body #main-body .card-footer:not(:has(*)):not(:has(a)) { display: none !important; }
html body #main-body .card-footer { padding: 14px 24px !important; background: #fff !important; border-top: 1px solid var(--s-line) !important; font-size: 14px; }

/* Captcha everywhere: the image and its box side by side, the same height */
html body .default-captcha > div, html body .captcha-container .default-captcha > div { display: flex !important; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
html body .default-captcha img { height: 44px; width: auto; border-radius: 10px; }
html body .default-captcha input { width: 150px !important; height: 44px !important; margin: 0 !important; }

/* Domain price table: header cells line up with the rows below them */
html body #order-standard_cart .domain-pricing .tld-pricing-header, html body #order-standard_cart .domain-pricing .tld-pricing-header .row, html body #order-standard_cart .domain-pricing .tld-row, html body #order-standard_cart .domain-pricing .tld-row .row { align-items: center; margin: 0 !important; }
html body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column, html body #order-standard_cart .domain-pricing .tld-row > .col-md-4 { padding-left: 26px !important; text-align: left !important; justify-content: flex-start !important; }
html body #order-standard_cart .domain-pricing .tld-pricing-header > div { padding-top: 14px !important; padding-bottom: 14px !important; }
html body #order-standard_cart .domain-pricing .tld-row .col-4 { padding-top: 12px; padding-bottom: 12px; line-height: 1.3; }
html body #main-body a:not(.btn):not(.list-group-item):not(.dropdown-item):not(.nav-link) { color: var(--s-brand-deep); }
html body #main-body a:not(.btn):not(.list-group-item):not(.dropdown-item):not(.nav-link):hover { color: var(--s-ink); }
/* WHMCS hides some buttons with a class until they're needed (for example "Create a new account" on checkout) */
/* Not !important: WHMCS reveals these with an inline style (jQuery show), which must still win, e.g. the domain step's Continue button */
html body :is(#main-body, #order-standard_cart, .modal) .btn:is(.w-hidden, .hidden, [hidden]) { display: none; }
html body #order-standard_cart .already-registered .float-right { order: 1 !important; display: flex; gap: 8px; float: none !important; }
html body #order-standard_cart .already-registered p { order: 0 !important; flex: 1; margin: 0 !important; }
html body #order-standard_cart #frmCheckout #containerNewUserSignup { padding-top: 30px !important; }
html body #order-standard_cart .already-registered .btn { height: 42px; padding: 0 18px !important; border-radius: 999px !important; border: 1px solid var(--s-ink) !important; background: #fff !important; color: var(--s-ink) !important; font-weight: 500; }
html body #order-standard_cart #frmCheckout #containerNewUserSignup > div:first-child + .sub-heading { margin-top: 0 !important; padding-top: 0; border-top: 0; }

/* =====================================================================
   v4.3 details
   ===================================================================== */
/* Sidebar menus: the active item is shown by its tint and colour, without a coloured bar on its edge */
html body #main-body .sidebar .list-group-item.active, html body #main-body .card-sidebar .list-group-item.active, html body #order-standard_cart .cart-sidebar .list-group-item.active { box-shadow: none !important; border-left-color: transparent !important; }
html body #main-body .sidebar .list-group-item.active::before, html body #main-body .card-sidebar .list-group-item.active::before { display: none !important; }

/* A field with a suffix ("name" + "@yourdomain.co.uk"): one joined control with matching corners, height and border */
html body #main-body .input-group:has(> .input-group-append > .input-group-text) { flex-wrap: nowrap; align-items: stretch; }
html body #main-body .input-group:has(> .input-group-append > .input-group-text) > .form-control { border-radius: 14px 0 0 14px !important; border-right: 0 !important; }
html body #main-body .input-group:has(> .input-group-append > .input-group-text) > .input-group-append { margin-left: 0; }
html body #main-body .input-group:has(> .input-group-append > .input-group-text) > .input-group-append > .input-group-text { height: auto; padding: 0 16px; border: 1px solid #e5e7eb !important; border-left: 1px solid #e5e7eb !important; border-radius: 0 14px 14px 0 !important; background: var(--s-bg-2) !important; color: var(--s-muted); font-size: 14.5px; font-weight: 500; }
html body #main-body .input-group:has(> .input-group-append > .input-group-text):focus-within > .form-control, html body #main-body .input-group:has(> .input-group-append > .input-group-text):focus-within > .input-group-append > .input-group-text { border-color: var(--s-brand) !important; }
html body #main-body .input-group:has(> .input-group-append > .input-group-text):focus-within { border-radius: 14px; box-shadow: 0 0 0 4px rgba(18,160,92,.14); }
html body #main-body .input-group:has(> .input-group-append > .input-group-text) > .form-control:focus { box-shadow: none !important; }
/* The create button lines up with the fields beside it */
html body #main-body #cpanel-email-password ~ .btn, html body #main-body .row:has(#cpanel-email-password) .btn-block { height: 52px; }

/* Dashboard tiles: Twenty-One blows the icon up to 70px on hover; keep it still, and level with the number */
html body #main-body .tiles .tile:hover { background: #fff !important; }
html body #main-body .tiles .tile i, html body #main-body .tiles .tile:hover i { top: 25px !important; font-size: 18px !important; color: inherit; }
html body #main-body .tiles .tile:hover i { color: inherit !important; }

/* Cards holding a list (Your Active Products/Services): one line between rows, square inner edges, no doubled lines at the header or footer */
html body #main-body .card > .list-group { border: 0 !important; border-radius: 0 !important; margin: 0 !important; }
html body #main-body .card > .list-group > .list-group-item { margin: 0 !important; border: 0 !important; border-top: 1px solid var(--s-line) !important; border-radius: 0 !important; box-shadow: none !important; }
html body #main-body .card > .card-header + .list-group > .list-group-item:first-child, html body #main-body .card > .list-group:first-child > .list-group-item:first-child { border-top: 0 !important; }
html body #main-body .card > .list-group + .card-footer { border-top: 1px solid var(--s-line) !important; }
html body #main-body .card > .card-header { border-bottom: 1px solid var(--s-line) !important; }

/* =====================================================================
   v4.4 system: the same card, button, list and table styles as webhostgb.com, on every client area page
   ===================================================================== */
html body #main-body { font-size: 15.5px; line-height: 1.55; color: var(--s-ink-2); }

/* Cards: white, a hairline border and the faintest shadow, as on the main site */
html body #main-body .card:not(.card .card) { border: 1px solid var(--s-line) !important; border-radius: 20px !important; background: #fff; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 12px 32px -24px rgba(15,21,33,.16) !important; overflow: hidden; }
html body #main-body .tab-content:has(.table-container), html body #main-body .table-container:not(.tab-content .table-container) { border: 1px solid var(--s-line) !important; border-radius: 20px !important; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 12px 32px -24px rgba(15,21,33,.16) !important; }
html body #main-body .card-header { padding: 18px 24px !important; background: #fff !important; }
html body #main-body .card-body { padding: 24px !important; }
html body #main-body :is(.card-header .card-title, .card-header .panel-title) { color: var(--s-ink) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: -0.01em; }
/* Icon tiles in card titles and the collapse button: the same 32px rounded square */
html body #main-body :is(.card-title, .panel-title) > i:not(.card-minimise):not(.panel-minimise), html body #main-body :is(.card-title, .panel-title) .card-minimise, html body #main-body :is(.card-title, .panel-title) .panel-minimise { width: 32px !important; height: 32px !important; display: inline-grid !important; place-items: center; border-radius: 9px !important; background: var(--s-brand-tint) !important; color: var(--s-brand-deep) !important; font-size: 13px !important; line-height: 1 !important; }
html body #main-body :is(.card-title, .panel-title) .card-minimise, html body #main-body :is(.card-title, .panel-title) .panel-minimise { background: var(--s-bg-2) !important; color: var(--s-muted) !important; cursor: pointer; transition: background .15s, color .15s; }
html body #main-body :is(.card-title, .panel-title) .card-minimise:hover { background: var(--s-line) !important; color: var(--s-ink) !important; }

/* Buttons: white pills with a hairline border, ink for the main action, green for buying and saving */
html body #main-body .btn { min-height: 38px; padding: 0 16px; border-radius: 999px !important; font-size: 14.5px; font-weight: 500; letter-spacing: 0; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
html body #main-body :is(.btn-sm, .btn-group-sm > .btn) { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
html body #main-body .btn-xs { min-height: 30px; padding: 0 12px; font-size: 13px; }
html body #main-body .btn-lg { min-height: 50px; padding: 0 24px; font-size: 16px; }
html body #main-body :is(.btn-default, .btn-light, .btn-outline-secondary, .btn-secondary, .bg-color-gold) { border: 1px solid #d1d5db !important; background: #fff !important; color: var(--s-ink) !important; box-shadow: 0 1px 2px rgba(15,21,33,.05) !important; }
html body #main-body :is(.btn-default, .btn-light, .btn-outline-secondary, .btn-secondary, .bg-color-gold):hover { border-color: var(--s-ink) !important; background: #fff !important; }
html body #main-body :is(.btn-primary, .btn-info) { border: 1px solid var(--s-ink) !important; background: var(--s-ink) !important; color: #fff !important; box-shadow: 0 6px 16px -10px rgba(15,21,33,.7) !important; }
html body #main-body :is(.btn-primary, .btn-info):hover { background: #253045 !important; border-color: #253045 !important; }
html body #main-body .btn-success { border: 1px solid var(--s-brand) !important; background: var(--s-brand) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(18,160,92,.8) !important; }
html body #main-body .btn-success:hover { background: var(--s-brand-deep) !important; border-color: var(--s-brand-deep) !important; }
html body #main-body .btn-danger { border: 1px solid #fecaca !important; background: #fff !important; color: #b91c1c !important; box-shadow: none !important; }
html body #main-body .btn-danger:hover { background: #fef2f2 !important; }

/* Sidebar lists: calm rows, icons in brand green, the active row tinted */
html body #main-body .sidebar .list-group-item { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 24px !important; border: 0 !important; border-top: 1px solid var(--s-line) !important; color: var(--s-ink-2) !important; font-size: 14.5px; font-weight: 500; background: #fff; }
html body #main-body .sidebar .list-group-item:first-child { border-top: 0 !important; }
html body #main-body .sidebar .list-group-item:hover { background: var(--s-bg-2) !important; color: var(--s-ink) !important; }
html body #main-body .sidebar .list-group-item.active { background: var(--s-brand-tint) !important; color: var(--s-brand-deep) !important; font-weight: 600; }
html body #main-body .sidebar .list-group-item i { width: 16px; color: var(--s-brand); text-align: center; }
html body #main-body .sidebar .list-group-item .badge { margin-left: auto; }

/* Tables: sentence-case headings in grey, roomy rows, a soft hover */
html body #main-body .table thead th, html body #main-body table.dataTable thead th { padding: 14px 16px !important; border-top: 0 !important; border-bottom: 1px solid var(--s-line) !important; background: #fff !important; color: var(--s-muted) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #main-body .table tbody td { padding: 16px !important; border-top: 1px solid var(--s-line) !important; color: var(--s-ink-2); font-size: 14.5px; vertical-align: middle !important; }
html body #main-body .table tbody tr:hover td { background: var(--s-bg-2) !important; }
html body #main-body .dataTables_info { color: var(--s-muted); font-size: 13.5px; }

/* Dashboard tiles: the label in plain grey sentence case */
html body #main-body .tiles .tile .title { color: var(--s-muted) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #main-body .tiles .tile .stat { color: var(--s-ink) !important; font-size: 38px !important; font-weight: 600 !important; letter-spacing: -0.04em; }
html body #main-body .tiles .tile { border: 1px solid var(--s-line) !important; border-radius: 20px !important; box-shadow: 0 1px 2px rgba(15,21,33,.04) !important; }
html body #main-body .tiles .tile:hover { border-color: #b3e5c9 !important; }

/* Status pills */
html body #main-body :is(.label, .status, .badge) { border-radius: 999px; font-weight: 600; letter-spacing: 0; }
/* Sidebar rows wrap their icon, label and count in one div: let it fill the row so the count sits at the right */
html body #main-body .sidebar .list-group-item > .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
html body #main-body .sidebar .sidebar-menu-item-label { flex: 1; min-width: 0; }
html body #main-body .sidebar .sidebar-menu-item-badge { margin-left: auto; }
html body #main-body .sidebar .sidebar-menu-item-badge .badge { min-width: 24px; height: 22px; display: inline-grid; place-items: center; padding: 0 7px; border-radius: 999px; background: var(--s-bg-2) !important; color: var(--s-ink-2) !important; border: 1px solid var(--s-line); font-size: 12px; }
html body #main-body .sidebar .list-group-item.active .sidebar-menu-item-badge .badge { background: #fff !important; color: var(--s-brand-deep) !important; border-color: #b3e5c9; }

/* ---- Lists (services, domains, invoices, tickets): a clean toolbar, roomy rows, pill pagination ---- */
html body #main-body .dataTables_wrapper { padding: 0 !important; }
html body #main-body .table-container { padding: 20px 8px 16px !important; }
html body #main-body .dataTables_wrapper .listtable { display: grid; grid-template-columns: 1fr auto; align-items: center; }
html body #main-body .dataTables_wrapper .listtable > .dataTables_info { grid-row: 1; grid-column: 1; padding: 0 16px !important; color: var(--s-muted); font-size: 13.5px; }
html body #main-body .dataTables_wrapper .listtable > .dataTables_filter { grid-row: 1; grid-column: 2; margin: 0 !important; padding: 0 16px 0 0; float: none !important; }
html body #main-body .dataTables_wrapper .listtable > table { grid-column: 1 / -1; margin-top: 14px !important; }
html body #main-body .dataTables_filter label { margin: 0; }
html body #main-body .dataTables_filter input { width: 240px !important; height: 40px !important; margin: 0 !important; padding: 0 14px 0 38px !important; border: 1px solid var(--s-line) !important; border-radius: 999px !important; background: var(--s-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 15px no-repeat !important; box-shadow: none !important; font-size: 14px; }
html body #main-body .dataTables_filter input:focus { background-color: #fff !important; border-color: var(--s-brand) !important; box-shadow: 0 0 0 4px rgba(18,160,92,.14) !important; }
html body #main-body .dataTables_wrapper > .dataTables_paginate, html body #main-body .dataTables_wrapper > .dataTables_length { margin-top: 14px; padding: 0 16px; }
html body #main-body .dataTables_length { color: var(--s-muted); font-size: 13.5px; }
html body #main-body .dataTables_length select { height: 34px !important; margin: 0 6px; border-radius: 999px !important; }

/* Rows: plan name in ink, domain in grey beneath, every column left aligned under its heading */
html body #main-body table.table-list { margin: 0 !important; border-collapse: separate; border-spacing: 0; }
html body #main-body table.table-list :is(th, td) { text-align: left !important; }
html body #main-body table.table-list :is(th, td).ssl-info, html body #main-body table.table-list thead th:first-child:empty { width: 56px; text-align: center !important; }
html body #main-body table.table-list tbody td { padding: 18px 16px !important; }
html body #main-body table.table-list tbody tr { cursor: pointer; }
html body #main-body table.table-list tbody td strong { display: block; color: var(--s-ink); font-size: 15px; font-weight: 600; }
html body #main-body table.table-list tbody td strong + br { display: none; }
html body #main-body table.table-list tbody td strong ~ a { display: block; margin-top: 2px; color: var(--s-muted) !important; font-size: 13.5px; font-weight: 400; text-decoration: none; }
html body #main-body table.table-list tbody td small.text-muted { color: var(--s-muted) !important; font-size: 13px; }
html body #main-body table.table-list .ssl-state { width: 22px; height: auto; opacity: .85; }
html body #main-body table.table-list thead th.sorting::before, html body #main-body table.table-list thead th.sorting::after, html body #main-body table.table-list thead th[class*="sorting_"]::before, html body #main-body table.table-list thead th[class*="sorting_"]::after { opacity: .25 !important; font-size: 11px; }

/* Pagination: small pills, ink for the current page */
html body #main-body .pagination { display: flex; gap: 6px; margin: 0 !important; }
html body #main-body .pagination .page-item .page-link { min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 12px !important; margin: 0 !important; border: 1px solid var(--s-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--s-ink-2) !important; font-size: 13.5px; font-weight: 500; box-shadow: none !important; }
html body #main-body .pagination .page-item .page-link:hover { border-color: var(--s-ink) !important; color: var(--s-ink) !important; }
html body #main-body .pagination .page-item.active .page-link { border-color: var(--s-ink) !important; background: var(--s-ink) !important; color: #fff !important; }
html body #main-body .pagination .page-item.disabled .page-link { color: #b6bcc6 !important; border-color: var(--s-line) !important; background: #fff !important; }

/* ---- Domain search: category chips like the store switcher, ink when selected ---- */
html body #order-standard_cart .domain-pricing .tld-filters { gap: 8px; }
html body #order-standard_cart .domain-pricing .tld-filters .badge { height: 38px; padding: 0 16px !important; border: 1px solid var(--s-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--s-ink-2) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1; box-shadow: 0 1px 2px rgba(15,21,33,.04); transition: border-color .15s, background .15s, color .15s; }
html body #order-standard_cart .domain-pricing .tld-filters .badge:hover { border-color: var(--s-ink) !important; color: var(--s-ink) !important; }
html body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success { border-color: var(--s-ink) !important; background: var(--s-ink) !important; color: #fff !important; }
html body #order-standard_cart .domain-pricing h4 { margin-top: 8px; }
@media (max-width: 767.98px) {
  html body #main-body .dataTables_wrapper .listtable { grid-template-columns: 1fr; }
  html body #main-body .dataTables_wrapper .listtable > .dataTables_filter { grid-row: 2; grid-column: 1; padding: 10px 16px 0; }
  html body #main-body .dataTables_filter input { width: 100% !important; }
}

/* ---- Knowledgebase search: one pill-shaped bar with the icon, the field and the button inside it ---- */
html body #main-body .kb-search { position: relative; display: flex !important; align-items: center; flex-wrap: nowrap; height: 62px; padding: 6px !important; border: 1px solid #d1d5db !important; border-radius: 999px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 16px 36px -24px rgba(15,21,33,.25) !important; transition: border-color .15s, box-shadow .15s; }
html body #main-body .kb-search::before, html body #main-body .kb-search::after { display: none !important; }
html body #main-body .kb-search:focus-within { border-color: var(--s-brand) !important; box-shadow: 0 0 0 4px rgba(18,160,92,.14), 0 16px 36px -24px rgba(15,21,33,.25) !important; }
html body #main-body .kb-search > .form-control { flex: 1; min-width: 0; height: 48px !important; padding: 0 16px 0 46px !important; border: 0 !important; border-radius: 999px !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 16px center / 18px no-repeat !important; box-shadow: none !important; color: var(--s-ink); font-size: 16px !important; font-weight: 400 !important; }
html body #main-body .kb-search > .form-control::placeholder { color: #9ca3af; }
html body #main-body .kb-search > .input-group-append { margin: 0; }
html body #main-body .kb-search .btn { height: 48px !important; min-height: 48px; padding: 0 24px !important; border-radius: 999px !important; font-size: 15px; }
@media (max-width: 575.98px) { html body #main-body .kb-search .btn { padding: 0 16px !important; } html body #main-body .kb-search > .form-control { font-size: 15px !important; } }

/* ---- Knowledgebase articles: the title once, in the article card, and comfortable reading type ---- */
html body:has(.primary-content .card-body > article) .master-breadcrumb .breadcrumb-item.active { display: none; }
html body:has(.primary-content .card-body > article) .master-breadcrumb { padding: 28px 0 24px; }
html body #main-body .card-body:has(> article) { padding: 36px 40px !important; }
html body #main-body .card-body:has(> article) > h1 { display: flex; align-items: flex-start; gap: 16px; margin: 0 0 8px; color: var(--s-ink); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.15; }
html body #main-body .card-body:has(> article) > h1 > .float-right { order: 2; flex: none; margin: 4px 0 0 auto !important; float: none !important; }
html body #main-body .card-body:has(> article) > .list-inline { margin: 0; color: var(--s-muted); }
html body #main-body .card-body:has(> article) > hr { margin: 22px 0; border-color: var(--s-line); }
html body #main-body .card-body > article { max-width: 72ch; color: var(--s-ink-2); font-size: 16px; line-height: 1.75; }
html body #main-body .card-body > article :is(h2, h3, h4) { margin: 28px 0 10px; color: var(--s-ink); font-weight: 600; letter-spacing: -0.02em; }
html body #main-body .card-body > article img { max-width: 100%; height: auto; margin: 12px 0; border: 1px solid var(--s-line); border-radius: 12px; }
html body #main-body .card-body > article a { color: var(--s-brand-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(6,115,63,.35); word-break: break-word; }
html body #main-body .card-body:has(> article) > h4 { margin: 0 0 12px; color: var(--s-ink); font-size: 16px; font-weight: 600; }
html body #main-body .card-body:has(> article) > form { gap: 10px; justify-content: flex-start !important; }
/* Related article lists */
html body #main-body .kb-article-item { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 24px !important; color: var(--s-ink) !important; font-weight: 500; }
html body #main-body .kb-article-item small { flex-basis: 100%; padding-left: 26px; color: var(--s-muted); font-weight: 400; }
html body #main-body .kb-article-item > i { color: var(--s-brand) !important; }
@media (max-width: 767.98px) { html body #main-body .card-body:has(> article) { padding: 24px 22px !important; } }

/* =====================================================================
   v4.5 forms: checkboxes, radios and switches drawn to match the main site
   ===================================================================== */
html body :is(#main-body, .modal) input[type="checkbox"]:not(.no-icheck):not([class*="icheck"] > input):not([class*="toggle-switch"]), html body :is(#main-body, .modal) input[type="radio"]:not(.no-icheck):not([class*="icheck"] > input):not([class*="iradio"] > input) { -webkit-appearance: none; appearance: none; flex: none; width: 20px !important; height: 20px !important; margin: 0 !important; position: static !important; border: 1.5px solid #c4c9d1; background: #fff center / 13px no-repeat; cursor: pointer; vertical-align: middle; transition: background-color .15s, border-color .15s, box-shadow .15s; }
html body :is(#main-body, .modal) input[type="checkbox"]:not(.no-icheck):not([class*="icheck"] > input):not([class*="toggle-switch"]) { border-radius: 6px; }
html body :is(#main-body, .modal) input[type="radio"]:not(.no-icheck):not([class*="icheck"] > input):not([class*="iradio"] > input) { border-radius: 50%; }
html body :is(#main-body, .modal) input[type="checkbox"]:not(.no-icheck):not([class*="icheck"] > input):not([class*="toggle-switch"]):checked { border-color: var(--s-brand); background-color: var(--s-brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.5 4.5 8.5-10'/%3E%3C/svg%3E"); }
html body :is(#main-body, .modal) input[type="radio"]:not(.no-icheck):not([class*="icheck"] > input):not([class*="iradio"] > input):checked { border-color: var(--s-brand); box-shadow: inset 0 0 0 4px #fff; background: var(--s-brand); }
html body :is(#main-body, .modal) input:is([type="checkbox"], [type="radio"]):not(.no-icheck):not([class*="icheck"] > input):not([class*="iradio"] > input):focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(18,160,92,.18); }
html body :is(#main-body, .modal) input:is([type="checkbox"], [type="radio"]):not(.no-icheck):not([class*="icheck"] > input):not([class*="iradio"] > input):hover:not(:checked) { border-color: var(--s-ink-2); }
/* Their labels: box and text on one line with a proper gap, normal weight */
html body #main-body :is(.form-check, .checkbox, .radio) > label, html body #main-body label:has(> input[type="checkbox"]:not(.no-icheck):not([class*="icheck"] > input)), html body #main-body label:has(> input[type="radio"]:not(.no-icheck):not([class*="icheck"] > input):not([class*="iradio"] > input)) { display: inline-flex !important; align-items: center; gap: 12px; margin: 0; padding: 7px 0; color: var(--s-ink-2); font-size: 15px; font-weight: 400 !important; line-height: 1.4; cursor: pointer; }
html body #main-body .form-check { padding-left: 0; }
html body #main-body .form-check + .form-check, html body #main-body .controls.form-check > label + label { margin-top: 2px; }
html body #main-body .controls.form-check > label { display: flex !important; }

/* Bootstrap switches (mailing list): a simple pill toggle, green when on */
html body :is(#main-body, #order-standard_cart) .bootstrap-switch { position: relative; width: 52px !important; height: 30px; border: 0 !important; border-radius: 999px !important; background: #d1d5db !important; box-shadow: none !important; overflow: hidden; cursor: pointer; transition: background .2s; }
html body :is(#main-body, #order-standard_cart) .bootstrap-switch.bootstrap-switch-on { background: var(--s-brand) !important; }
html body :is(#main-body, #order-standard_cart) .bootstrap-switch .bootstrap-switch-container { position: absolute; inset: 0; width: 100% !important; margin: 0 !important; transform: none !important; }
html body :is(#main-body, #order-standard_cart) .bootstrap-switch :is(.bootstrap-switch-handle-on, .bootstrap-switch-handle-off) { display: none !important; }
html body :is(#main-body, #order-standard_cart) .bootstrap-switch .bootstrap-switch-label { position: absolute; inset: 0; width: 100% !important; background: transparent !important; color: transparent !important; border: 0 !important; }
html body :is(#main-body, #order-standard_cart) .bootstrap-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,21,33,.3); transition: transform .2s; pointer-events: none; }
html body :is(#main-body, #order-standard_cart) .bootstrap-switch.bootstrap-switch-on::after { transform: translateX(22px); }

/* Section headings inside cards: no green underline, the same weight as card headers */
html body #main-body .card-body > .card-title, html body #main-body .card-body > h3.card-title { margin: 0 0 16px !important; padding: 0 !important; color: var(--s-ink) !important; font-size: 17px !important; font-weight: 600 !important; }
html body #main-body .card-body > .card-title::after, html body #main-body .card-body > h3.card-title::after { display: none !important; }
html body #main-body .form-group label, html body #main-body label.col-form-label { color: var(--s-ink); font-size: 14px; font-weight: 600; }
html body :is(#main-body, #order-standard_cart) .bootstrap-switch { min-width: 0 !important; max-width: 52px; }

/* Plain tables (users, payment methods, contacts): white header row, no grey band */
html body #main-body .table :is(thead, thead tr, thead th) { background: #fff !important; }
html body #main-body .table thead th { color: var(--s-muted) !important; font-size: 13px !important; font-weight: 600 !important; }
/* Radio and checkbox options side by side get room between them */
html body #main-body label:has(> input[type="radio"]) + label:has(> input[type="radio"]), html body #main-body .form-check-inline + .form-check-inline { margin-left: 24px !important; }

/* Forms with labels in a narrow left column (change password, security): labels above full-width fields */
html body #main-body .card-body .form-group.row { flex-direction: column; margin-left: 0; margin-right: 0; max-width: 620px; }
html body #main-body .card-body .form-group.row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; text-align: left !important; }
html body #main-body .card-body .form-group.row > label { margin-bottom: 8px; padding-top: 0; }
html body #main-body .card-body .form-group.row .generate-password { margin-top: 10px; }
html body #main-body .password-strength-meter .progress { height: 6px; border-radius: 999px; background: var(--s-line); }

/* Notices: soft tinted panels with a matching border, no Bootstrap blue */
html body :is(#main-body, #order-standard_cart) .alert { padding: 14px 18px; border: 1px solid; border-radius: 14px !important; font-size: 14.5px; box-shadow: none; }
html body :is(#main-body, #order-standard_cart) .alert-info { background: var(--s-bg-2) !important; border-color: var(--s-line) !important; color: var(--s-ink-2) !important; }
html body :is(#main-body, #order-standard_cart) .alert-success { background: var(--s-brand-tint) !important; border-color: #b3e5c9 !important; color: var(--s-brand-deep) !important; }
html body :is(#main-body, #order-standard_cart) .alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
html body :is(#main-body, #order-standard_cart) .alert-danger { background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important; }
html body :is(#main-body, #order-standard_cart) .alert ul { margin: 6px 0 0; padding-left: 18px; }

/* Older prev/next links (network status, announcements) as pill buttons */
html body #main-body :is(.pagination, .pager) a, html body #main-body a.btn-prev-page, html body #main-body a.btn-next-page { border-radius: 999px !important; }
/* Error page icon in brand colours */
html body #main-body .error-container i, html body #main-body .error-container .fa-exclamation-circle { color: var(--s-brand) !important; }
/* Striped tables: no grey bands; a header row written inside the body still reads as a header */
html body #main-body .table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
html body #main-body .table tbody tr:has(> th) th { padding: 12px 16px !important; border-top: 0 !important; border-bottom: 1px solid var(--s-line) !important; background: #fff !important; color: var(--s-muted) !important; font-size: 13px !important; font-weight: 600 !important; }
html body #main-body .table tbody tr:has(> th):hover th { background: #fff !important; }

/* ---- User management: people as a clean list with an avatar, invite as one tidy form ---- */
html body.page-account-user-management #main-body .card-body > .card-title { display: inline-flex; margin-bottom: 4px !important; }
html body.page-account-user-management #main-body .card-body > .card-title + p { margin: 0 0 18px; color: var(--s-muted); font-size: 14px; }
html body.page-account-user-management #main-body .table { margin: 0 -24px; width: calc(100% + 48px); border-top: 1px solid var(--s-line); }
html body.page-account-user-management #main-body .table tbody tr:has(> th) { display: none; }
html body.page-account-user-management #main-body .table tbody tr:hover td { background: transparent !important; }
html body.page-account-user-management #main-body .table tbody td { padding: 18px 24px !important; border-top: 0 !important; border-bottom: 1px solid var(--s-line) !important; }
html body.page-account-user-management #main-body .table tbody td:first-child { position: relative; padding-left: 80px !important; color: var(--s-ink); font-size: 15px; font-weight: 600; line-height: 1.5; }
html body.page-account-user-management #main-body .table tbody td:first-child::before { content: ""; position: absolute; left: 24px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--s-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / 20px no-repeat; }
html body.page-account-user-management #main-body .table tbody td:first-child small { display: block; color: var(--s-muted); font-size: 13px; font-weight: 400; }
html body.page-account-user-management #main-body .table tbody td:first-child br { display: none; }
html body.page-account-user-management #main-body .table tbody td:first-child :is(.label, .badge) { margin-left: 8px; vertical-align: 1px; }
html body.page-account-user-management #main-body .table tbody td:last-child { width: 1%; white-space: nowrap; text-align: right; }
html body.page-account-user-management #main-body .table tbody td:last-child > * { margin: 3px 0 3px 8px !important; }
html body.page-account-user-management #main-body .table + p { margin-top: 16px !important; color: var(--s-muted) !important; font-size: 13.5px; }
/* Invite: email field and permission choice, then the button */
html body.page-account-user-management #main-body form .form-group:first-of-type { max-width: 520px; }
html body.page-account-user-management #main-body form .well { margin: 4px 0 18px; padding: 18px 20px; border: 1px solid var(--s-line); border-radius: 16px; background: var(--s-bg-2); }
html body.page-account-user-management #main-body form .well label { display: flex !important; align-items: flex-start; gap: 12px; margin: 0 !important; padding: 8px 0; }
html body.page-account-user-management #main-body form .well label input { margin-top: 2px !important; }
html body.page-account-user-management #main-body form .well label .text-muted { color: var(--s-muted) !important; font-weight: 400; }
html body.page-account-user-management #main-body form .well > br { display: none; }

/* ---- Account pages ---- */
/* Buttons inside table rows stay quiet: small white pills, so a list of rows isn't a column of black buttons */
html body #main-body table :is(.btn-primary, .btn-info, .btn-default) { min-height: 34px; padding: 0 14px !important; border: 1px solid #d1d5db !important; background: #fff !important; color: var(--s-ink) !important; font-size: 13.5px; box-shadow: 0 1px 2px rgba(15,21,33,.05) !important; }
html body #main-body table :is(.btn-primary, .btn-info, .btn-default):hover { border-color: var(--s-ink) !important; }
html body #main-body table .btn.disabled { opacity: .45; }

/* Payment methods: the card list runs edge to edge, each card with a tinted icon, its status in green */
html body.page-account-paymentmethods #main-body .card-body > p:has(> .btn) { margin: 0 0 20px; }
html body.page-account-paymentmethods #main-body #payMethodList { margin: 0 -24px -24px; width: calc(100% + 48px); border-top: 1px solid var(--s-line); }
html body.page-account-paymentmethods #main-body #payMethodList :is(th, td) { padding-left: 16px !important; padding-right: 16px !important; }
html body.page-account-paymentmethods #main-body #payMethodList :is(th, td):first-child { width: 72px; padding-left: 24px !important; }
html body.page-account-paymentmethods #main-body #payMethodList :is(th, td):last-child { padding-right: 24px !important; text-align: right !important; white-space: nowrap; }
html body.page-account-paymentmethods #main-body #payMethodList td:first-child i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--s-bg-2); border: 1px solid var(--s-line); color: var(--s-ink); font-size: 20px; }
html body.page-account-paymentmethods #main-body #payMethodList td:nth-child(2) { color: var(--s-ink); font-weight: 600; }
html body.page-account-paymentmethods #main-body #payMethodList td:nth-child(4) { color: var(--s-brand-deep); font-weight: 600; font-size: 14px; }
html body.page-account-paymentmethods #main-body #payMethodList td:last-child > .btn { margin-left: 6px; }
html body.page-account-paymentmethods #main-body #payMethodList tbody tr:last-child td { border-bottom: 0 !important; }

/* Contacts: the "choose a contact" picker as a tidy card above the form */
html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info { margin-bottom: 20px; padding: 18px 24px !important; border: 1px solid var(--s-line) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 12px 32px -24px rgba(15,21,33,.16); }
html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info .row { align-items: center; margin: 0; gap: 12px; flex-wrap: nowrap; }
html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info .row > * { flex: none; max-width: none; width: auto; padding: 0; }
html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info .row > .col-md-6 { flex: 1; }
html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info label { margin: 0; color: var(--s-ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info .btn { min-width: 72px; height: 50px; margin: 0 !important; }
@media (max-width: 767.98px) { html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info .row { flex-wrap: wrap; } html body[class*="page-account-contacts"] #main-body .primary-content > .alert-info .row > .col-md-6 { flex: 1 1 100%; } }

/* Account security: room between the notice, the switch and its note */
html body.page-account-security #main-body .card-body > * + * { margin-top: 14px; }
html body.page-account-security #main-body .card-body label { display: inline-flex; align-items: center; gap: 12px; color: var(--s-ink); font-weight: 500; }

/* ---- Choose account: a normal client area page with each account as a row to pick ---- */
html body.page-user-switch-account #main-body { background: var(--s-bg-2) !important; padding-top: 48px !important; }
html body.page-user-switch-account #main-body::before { display: none !important; }
html body.page-user-switch-account #main-body .card.mw-540 { max-width: none !important; margin: 0 !important; border: 1px solid var(--s-line) !important; border-radius: 20px !important; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 12px 32px -24px rgba(15,21,33,.16) !important; }
html body.page-user-switch-account #main-body .card.mw-540 .card-body { padding: 0 !important; }
html body.page-user-switch-account #main-body .card.mw-540 .card-body > p { margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--s-line); color: var(--s-ink); font-size: 16px; font-weight: 600; }
html body.page-user-switch-account #main-body .select-account { margin: 0; padding: 0; border: 0; }
html body.page-user-switch-account #main-body .select-account a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; margin: 0 !important; padding: 16px 56px 16px 24px !important; border: 0 !important; border-bottom: 1px solid var(--s-line) !important; border-radius: 0 !important; background: #fff; color: var(--s-ink) !important; font-size: 15.5px; font-weight: 600; text-decoration: none !important; transition: background .15s; }
html body.page-user-switch-account #main-body .select-account a:last-child { border-bottom: 0 !important; border-radius: 0 0 20px 20px !important; }
html body.page-user-switch-account #main-body .select-account a:hover { background: var(--s-bg-2); }
html body.page-user-switch-account #main-body .select-account a::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--s-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6'/%3E%3C/svg%3E") center / 22px no-repeat; }
html body.page-user-switch-account #main-body .select-account a::after { content: ""; position: absolute; right: 24px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--s-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s; }
html body.page-user-switch-account #main-body .select-account a:hover::after { transform: translateX(3px); background: var(--s-ink); }
html body.page-user-switch-account #main-body .select-account a :is(.label, .badge) { margin-left: 4px; }
html body.page-user-switch-account #main-body .select-account a.disabled, html body.page-user-switch-account #main-body .select-account a[disabled] { color: var(--s-muted) !important; }

/* ---- Domain step result: a calm card with a status icon, the message and the price, then a green Continue ---- */
html body #order-standard_cart #DomainSearchResults { margin-top: 16px; padding: 0 !important; border: 1px solid var(--s-line) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 16px 36px -28px rgba(15,21,33,.25) !important; overflow: hidden; max-width: 760px; }
html body #order-standard_cart #DomainSearchResults #searchDomainInfo, html body #order-standard_cart #DomainSearchResults .domain-lookup-primary-results { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body #order-standard_cart #DomainSearchResults .primary-domain-header { padding: 18px 24px 0; color: var(--s-muted); font-size: 13px; font-weight: 600; }
html body #order-standard_cart #DomainSearchResults :is(.transfer-eligible, .transfer-not-eligible, .domain-available, .domain-unavailable, .domain-invalid) { position: relative; margin: 0 !important; padding: 22px 24px 18px 80px !important; background: none !important; border: 0 !important; text-align: left !important; }
html body #order-standard_cart #DomainSearchResults :is(.transfer-eligible, .domain-available)::before, html body #order-standard_cart #DomainSearchResults :is(.transfer-not-eligible, .domain-unavailable, .domain-invalid)::before { content: ""; position: absolute; left: 24px; top: 22px; width: 40px; height: 40px; border-radius: 12px; background: var(--s-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.5 4.5 8.5-10'/%3E%3C/svg%3E") center / 20px no-repeat; }
html body #order-standard_cart #DomainSearchResults :is(.transfer-not-eligible, .domain-unavailable, .domain-invalid)::before { background: #fef2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 18px no-repeat; }
html body #order-standard_cart #DomainSearchResults :is(.headline, .domain-checker-available, .domain-checker-unavailable) { margin: 0 0 4px !important; padding: 0 !important; background: none !important; color: var(--s-ink) !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.01em; text-align: left !important; }
html body #order-standard_cart #DomainSearchResults :is(.transfer-eligible, .transfer-not-eligible) p:not(.headline) { margin: 0; color: var(--s-muted); font-size: 14.5px; line-height: 1.5; }
html body #order-standard_cart #DomainSearchResults .domain-price { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 !important; padding: 14px 24px 16px 80px !important; border-top: 1px solid var(--s-line); background: var(--s-bg-2); text-align: left !important; }
html body #order-standard_cart #DomainSearchResults .domain-price :is(.transfer-price-label, .register-price-label) { color: var(--s-ink-2); font-size: 14.5px; }
html body #order-standard_cart #DomainSearchResults .domain-price br { display: none; }
html body #order-standard_cart #DomainSearchResults .domain-price .price { color: var(--s-ink); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
/* The step's main button */
html body #order-standard_cart #btnDomainContinue { min-width: 220px; height: 54px; margin-top: 8px; padding: 0 28px !important; border: 0 !important; border-radius: 999px !important; background: var(--s-brand) !important; color: #fff !important; font-size: 16.5px !important; font-weight: 600 !important; box-shadow: 0 14px 28px -14px rgba(18,160,92,.8) !important; }
html body #order-standard_cart #btnDomainContinue:hover { background: var(--s-brand-deep) !important; }
html body #order-standard_cart #btnDomainContinue i { font-size: 15px; }
@media (max-width: 575.98px) { html body #order-standard_cart #DomainSearchResults :is(.transfer-eligible, .transfer-not-eligible, .domain-available, .domain-unavailable, .domain-invalid) { padding-left: 24px !important; padding-top: 74px !important; } html body #order-standard_cart #DomainSearchResults .domain-price { padding-left: 24px !important; } html body #order-standard_cart #btnDomainContinue { width: 100%; } }

/* =====================================================================
   v4.6 cart: one button language for the whole order flow
   ===================================================================== */
/* The summary and its button move together: the column is sticky, not the summary on its own (it slid over the button) */
html body #order-standard_cart .order-summary { position: static !important; }
@media (min-width: 992px) { html body #order-standard_cart #orderSummary { position: sticky; top: 96px; } }
html body #order-standard_cart #orderSummary > .text-center { margin-top: 14px; }

/* Main step actions: brand green with white text, the same size everywhere */
html body #order-standard_cart :is(#btnCompleteProductConfig, #checkout, .btn-checkout, #btnCompleteOrder, #btnDomainContinue, #btnConfigureDomains, .btn-continue) { width: 100%; max-width: 100%; height: 56px; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; padding: 0 28px !important; border: 0 !important; border-radius: 999px !important; background: var(--s-brand) !important; color: #fff !important; font-size: 16.5px !important; font-weight: 600 !important; letter-spacing: 0; text-shadow: none; box-shadow: 0 14px 28px -14px rgba(18,160,92,.8) !important; transform: none !important; }
html body #order-standard_cart :is(#btnCompleteProductConfig, #checkout, .btn-checkout, #btnCompleteOrder, #btnDomainContinue, #btnConfigureDomains, .btn-continue):hover { background: var(--s-brand-deep) !important; }
html body #order-standard_cart :is(#btnCompleteProductConfig, #checkout, .btn-checkout, #btnCompleteOrder, #btnDomainContinue, #btnConfigureDomains, .btn-continue) i { color: #fff; font-size: 15px; }
html body #order-standard_cart #btnDomainContinue { width: auto; min-width: 240px; }

/* Everything else in the cart: white pills with a hairline border, or ink for "do this" buttons inside a card */
html body #order-standard_cart :is(.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-link:not(.btn-link-inline)) { border: 1px solid #d1d5db !important; background: #fff !important; color: var(--s-ink) !important; border-radius: 999px !important; box-shadow: 0 1px 2px rgba(15,21,33,.05) !important; text-decoration: none !important; }
html body #order-standard_cart :is(.btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-link:not(.btn-link-inline)):hover { border-color: var(--s-ink) !important; }
html body #order-standard_cart :is(.btn-primary, .btn-info, .btn-warning):not(:is(#btnCompleteProductConfig, #checkout, .btn-checkout, #btnCompleteOrder, #btnDomainContinue, #btnConfigureDomains, .btn-continue)) { border: 1px solid var(--s-ink) !important; background: var(--s-ink) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 6px 16px -10px rgba(15,21,33,.7) !important; }
html body #order-standard_cart .btn-success:not(:is(#btnCompleteProductConfig, #checkout, .btn-checkout, #btnCompleteOrder, #btnDomainContinue, #btnConfigureDomains, .btn-continue)) { border: 1px solid var(--s-brand) !important; background: var(--s-brand) !important; color: #fff !important; border-radius: 999px !important; }
html body #order-standard_cart .btn-danger { border: 1px solid #fecaca !important; background: #fff !important; color: #b91c1c !important; border-radius: 999px !important; box-shadow: none !important; }

/* "Have questions? Contact sales" under the options: a quiet line, not a yellow strip */
html body #order-standard_cart .alert-warning.info-text-sm, html body #order-standard_cart #frmConfigureProduct .alert-warning:last-child { margin-top: 18px; padding: 0 !important; border: 0 !important; background: none !important; color: var(--s-muted) !important; font-size: 14px; }
html body #order-standard_cart .alert-warning.info-text-sm i, html body #order-standard_cart #frmConfigureProduct .alert-warning:last-child i { color: var(--s-muted) !important; }
html body #order-standard_cart .alert-warning.info-text-sm a, html body #order-standard_cart #frmConfigureProduct .alert-warning:last-child a { color: var(--s-brand-deep) !important; font-weight: 600; }
/* The options step's button shows its own label ("Continue to review →") in place of WHMCS's */
html body #order-standard_cart #btnCompleteProductConfig { font-size: 0 !important; }
html body #order-standard_cart #btnCompleteProductConfig > :not(.loader) { display: none !important; }
html body #order-standard_cart #btnCompleteProductConfig::before { color: #fff !important; font-size: 16.5px !important; font-weight: 600; }

/* ---- Domain step, part 2: filters, results and suggestions ---- */
/* The available/unavailable line keeps its room beside the status icon (the shared headline rule was stripping it) */
html body #order-standard_cart #DomainSearchResults :is(.domain-available, .domain-unavailable).headline { position: relative; display: block; padding: 22px 24px 18px 80px !important; color: var(--s-ink) !important; font-size: 17px !important; font-weight: 500 !important; line-height: 40px; }
html body #order-standard_cart #DomainSearchResults :is(.domain-available, .domain-unavailable).headline strong { font-weight: 700; }
html body #order-standard_cart #DomainSearchResults :is(.domain-available, .domain-unavailable).headline::before { top: 22px !important; }
html body #order-standard_cart #DomainSearchResults .domain-contact-support { margin: 0 24px 18px 80px; }

/* Filter chips under the search (Include TLDs, Maximum length) and their menus */
html body #order-standard_cart :is(#frmProductDomain, #frmDomainChecker) .btn-group > .multiselect { height: 34px !important; display: inline-flex !important; align-items: center; gap: 8px; padding: 0 14px !important; border: 1px solid var(--s-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--s-ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; box-shadow: 0 1px 2px rgba(15,21,33,.04) !important; }
html body #order-standard_cart :is(#frmProductDomain, #frmDomainChecker) .btn-group > .multiselect:hover { border-color: var(--s-ink) !important; }
html body #order-standard_cart .multiselect-container.dropdown-menu { min-width: 220px; max-height: 320px; overflow-y: auto; margin-top: 6px; padding: 6px; border: 1px solid var(--s-line); border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(15,21,33,.04), 0 24px 48px -18px rgba(15,21,33,.28); }
html body #order-standard_cart .multiselect-container .multiselect-option, html body #order-standard_cart .multiselect-container > li > a, html body #order-standard_cart .multiselect-container .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px !important; border-radius: 10px; color: var(--s-ink-2); font-size: 14px; }
html body #order-standard_cart .multiselect-container :is(.multiselect-option, .dropdown-item):hover, html body #order-standard_cart .multiselect-container .active { background: var(--s-bg-2) !important; color: var(--s-ink) !important; }
html body #order-standard_cart .multiselect-container label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 !important; font-weight: 400; cursor: pointer; }
html body #order-standard_cart :is(#frmProductDomain, #frmDomainChecker) label:has(input[name="filter"]) { display: inline-flex; align-items: center; gap: 8px; color: var(--s-ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; }
html body #order-standard_cart :is(#frmProductDomain, #frmDomainChecker) input[name="filter"] { width: 18px; height: 18px; accent-color: var(--s-brand); }
html body #order-standard_cart #frmProductDomain textarea { min-height: 52px; resize: none; }

/* Suggested domains: rows with the name, price and an "Add" pill */
html body #order-standard_cart #DomainSearchResults .suggested-domains { margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid var(--s-line) !important; background: #fff !important; }
html body #order-standard_cart #DomainSearchResults .suggested-domains .panel-heading, html body #order-standard_cart #DomainSearchResults .suggested-domains .card-header, html body #order-standard_cart #DomainSearchResults .suggested-domains > :first-child:not(.list-group) { padding: 16px 24px 8px !important; border: 0 !important; background: none !important; color: var(--s-muted) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #order-standard_cart #DomainSearchResults .domain-suggestion, html body #order-standard_cart #DomainSearchResults .suggested-domains .list-group-item { display: flex !important; align-items: center; gap: 12px; padding: 12px 24px !important; border: 0 !important; border-top: 1px solid var(--s-line) !important; border-radius: 0 !important; background: #fff !important; color: var(--s-ink) !important; font-size: 15px; }
html body #order-standard_cart #DomainSearchResults .domain-suggestion .actions, html body #order-standard_cart #DomainSearchResults .domain-suggestion .price { margin-left: auto; }
html body #order-standard_cart #DomainSearchResults .domain-suggestion .price { color: var(--s-ink); font-weight: 600; }
html body #order-standard_cart #DomainSearchResults .suggested-domains .panel-footer, html body #order-standard_cart #DomainSearchResults .suggested-domains .card-footer, html body #order-standard_cart #DomainSearchResults .suggested-domains .text-muted { padding: 12px 24px 16px !important; border: 0 !important; background: var(--s-bg-2) !important; color: var(--s-muted) !important; font-size: 13px !important; text-align: left !important; }
html body #order-standard_cart .btn-add-to-cart { min-height: 36px; padding: 0 16px !important; border: 1px solid var(--s-ink) !important; border-radius: 999px !important; background: #fff !important; color: var(--s-ink) !important; font-size: 13.5px !important; font-weight: 600 !important; }
html body #order-standard_cart .btn-add-to-cart:hover { background: var(--s-ink) !important; color: #fff !important; }
html body #order-standard_cart .btn-add-to-cart.checkout, html body #order-standard_cart .btn-add-to-cart .added { border-color: var(--s-brand) !important; background: var(--s-brand-tint) !important; color: var(--s-brand-deep) !important; }
html body #order-standard_cart #frmProductDomainSelections .text-center:has(#btnDomainContinue) { margin-top: 24px; text-align: left !important; }

/* ---- Domain settings step: extras as selectable cards, green Continue ---- */
html body #order-standard_cart #frmConfigureDomains button[type="submit"] { width: 100%; height: 56px; border: 0 !important; border-radius: 999px !important; background: var(--s-brand) !important; color: #fff !important; font-size: 16.5px !important; font-weight: 600 !important; box-shadow: 0 14px 28px -14px rgba(18,160,92,.8) !important; }
html body #order-standard_cart #frmConfigureDomains button[type="submit"]:hover { background: var(--s-brand-deep) !important; }
html body #order-standard_cart #frmConfigureDomains button[type="submit"]::before { color: #fff !important; }
html body #order-standard_cart .panel-addon { display: flex; flex-direction: column; height: calc(100% - 16px); margin-bottom: 16px; padding: 0 !important; border: 1px solid var(--s-line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15,21,33,.04) !important; overflow: hidden; transition: border-color .15s, box-shadow .15s, background .15s; }
html body #order-standard_cart .panel-addon:hover { border-color: #b3e5c9 !important; }
html body #order-standard_cart .panel-addon.panel-addon-selected { border-color: var(--s-brand) !important; background: #f6fcf8 !important; box-shadow: 0 0 0 3px var(--s-brand-tint) !important; }
html body #order-standard_cart .panel-addon .panel-body { flex: 1; padding: 18px 20px 8px !important; background: none !important; color: var(--s-muted); font-size: 14px; line-height: 1.5; }
html body #order-standard_cart .panel-addon .panel-body label { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--s-ink); font-size: 15.5px; font-weight: 600; }
html body #order-standard_cart .panel-addon .panel-body > br { display: none; }
html body #order-standard_cart .panel-addon .panel-price { padding: 4px 20px 14px !important; background: none !important; color: var(--s-ink) !important; font-size: 15px; font-weight: 600; }
html body #order-standard_cart .panel-addon .panel-add { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; padding: 12px 20px !important; border: 0 !important; border-top: 1px solid var(--s-line) !important; border-radius: 0 !important; background: var(--s-bg-2) !important; color: var(--s-ink) !important; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
html body #order-standard_cart .panel-addon .panel-add:hover { background: var(--s-brand-tint) !important; color: var(--s-brand-deep) !important; }
html body #order-standard_cart .panel-addon.panel-addon-selected .panel-add { background: var(--s-brand) !important; color: #fff !important; border-top-color: var(--s-brand) !important; }
/* Registrant details: plain labels, and the WHOIS opt-out as a normal checkbox row */
html body #order-standard_cart #frmConfigureDomains .form-group > label, html body #order-standard_cart #frmConfigureDomains .control-label { color: var(--s-ink); font-size: 14px; font-weight: 600; }
html body #order-standard_cart #frmConfigureDomains .form-group:has(input[type="checkbox"]) :is(.form-control, .input-group) { height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }

/* ---- Review step: one price per line, quiet edit/remove/empty controls ---- */
html body #order-standard_cart .view-cart-items .item-price .renewal, html body #order-standard_cart .view-cart-items .item-price .renewal-price { display: block; margin-top: 2px; color: var(--s-muted) !important; font-size: 12.5px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.4; }
html body #order-standard_cart .view-cart-items .item-price .renewal-price { display: inline; }
html body #order-standard_cart .view-cart-items .item-price .cycle { color: var(--s-muted); font-size: 13px; font-weight: 400; }
html body #order-standard_cart .view-cart-items .item-title .btn-link, html body #order-standard_cart #btnEmptyCart { min-height: 0 !important; height: auto; padding: 2px 6px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--s-muted) !important; font-size: 13px !important; font-weight: 500 !important; }
html body #order-standard_cart .view-cart-items .item-title .btn-link:hover, html body #order-standard_cart #btnEmptyCart:hover { color: var(--s-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }
html body #order-standard_cart .view-cart-items .btn-remove-from-cart { width: 32px; height: 32px; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--s-line) !important; border-radius: 50% !important; background: #fff !important; color: var(--s-muted) !important; box-shadow: none !important; }
html body #order-standard_cart .view-cart-items .btn-remove-from-cart:hover { border-color: #fecaca !important; background: #fef2f2 !important; color: #b91c1c !important; }
html body #order-standard_cart .empty-cart { margin: 10px 0 20px !important; text-align: right; }
/* Store plan buttons keep the main site's pattern: ink, with green only on the popular plan */
html body #order-standard_cart #products .product .btn-order-now.btn-order-now { border: 0 !important; background: var(--s-ink) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(15,21,33,.7) !important; }
html body #order-standard_cart #products .product .btn-order-now.btn-order-now:hover { background: #253045 !important; }
html body #order-standard_cart #products > .row:first-child > [class*="col-"]:nth-child(2) .product .btn-order-now.btn-order-now { background: var(--s-brand) !important; box-shadow: 0 10px 22px -10px rgba(18,160,92,.8) !important; }
html body #order-standard_cart #products > .row:first-child > [class*="col-"]:nth-child(2) .product .btn-order-now.btn-order-now:hover { background: var(--s-brand-deep) !important; }
html body #order-standard_cart #frmConfigureDomains button[type="submit"] { font-size: 0 !important; }
html body #order-standard_cart #frmConfigureDomains button[type="submit"] > * { display: none !important; }
html body #order-standard_cart #frmConfigureDomains button[type="submit"]::before { font-size: 16.5px !important; font-weight: 600; }
/* WHOIS opt-out and similar single checkboxes: label and box on one plain line */
html body #order-standard_cart #frmConfigureDomains .form-group.row:has(.icheckbox_square-blue, input[type="checkbox"]) { display: flex; flex-direction: row !important; align-items: center; gap: 12px; margin: 4px 0 18px !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body #order-standard_cart #frmConfigureDomains .form-group.row:has(.icheckbox_square-blue, input[type="checkbox"]) > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; text-align: left !important; }
html body #order-standard_cart #frmConfigureDomains .sub-heading { margin: 32px 0 16px !important; }
/* Hidden buttons stay hidden (stronger than the button display rule, still weaker than WHMCS's inline show()) */
html body :is(#main-body, #order-standard_cart, .modal) .btn.btn.btn:is(.w-hidden, .hidden, [hidden]) { display: none; }
/* Checkout intro buttons: white pills */
html body #order-standard_cart .already-registered .btn.btn:not(#wh-none) { height: 42px; padding: 0 18px !important; border: 1px solid var(--s-ink) !important; background: #fff !important; color: var(--s-ink) !important; box-shadow: none !important; }
html body #order-standard_cart .already-registered .btn.btn:not(#wh-none):hover { background: var(--s-ink) !important; color: #fff !important; }

/* =====================================================================
   v4.7 checkout: one calm sheet, numbered sections, a strong finish
   ===================================================================== */
html body #order-standard_cart #frmCheckout { padding: 40px 44px 36px; border: 1px solid var(--s-line); border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 30px 60px -40px rgba(15,21,33,.3); }
/* Sections inside the sheet sit flat: no card-in-card */
html body #order-standard_cart #frmCheckout > :is(#containerNewUserSignup, #containerNewUserSecurity, #containerExistingUserSignin, .text-center, #paymentGatewaysContainer, #creditCardInputFields, .marketing-email-optin, .row):not(#totalDueToday):not(.alert) { margin-left: 0; margin-right: 0; padding-left: 0 !important; padding-right: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html body #order-standard_cart #frmCheckout #containerNewUserSignup { padding-top: 0 !important; }
html body #order-standard_cart #frmCheckout .sub-heading { display: flex; align-items: center; }
/* Captcha: a soft panel, left aligned with everything else */
html body #order-standard_cart #frmCheckout > .text-center:has(.default-captcha, .captcha-container) { text-align: left !important; }
html body #order-standard_cart #frmCheckout .default-captcha { display: inline-block; padding: 16px 18px !important; border: 1px solid var(--s-line); border-radius: 16px; background: var(--s-bg-2); text-align: left; }
html body #order-standard_cart #frmCheckout .default-captcha p { margin: 0 0 12px; color: var(--s-muted); font-size: 13.5px; }
html body #order-standard_cart #frmCheckout .default-captcha > div { justify-content: flex-start !important; }
/* Payment: the total, then the method tiles, then the card fields full width */
html body #order-standard_cart #frmCheckout #totalDueToday { margin: 0 0 16px !important; }
html body #order-standard_cart #frmCheckout #paymentGatewaysContainer { margin-bottom: 8px !important; }
html body #order-standard_cart #frmCheckout #paymentGatewaysContainer .text-center { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; text-align: left !important; }
html body #order-standard_cart #frmCheckout #paymentGatewaysContainer label { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 14px 16px !important; border: 1px solid var(--s-line) !important; border-radius: 14px !important; background: #fff !important; color: var(--s-ink) !important; font-size: 14.5px; font-weight: 600 !important; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
html body #order-standard_cart #frmCheckout #paymentGatewaysContainer label:hover { border-color: #b3e5c9 !important; }
html body #order-standard_cart #frmCheckout #paymentGatewaysContainer label:has(.checked, input:checked) { border-color: var(--s-brand) !important; background: #f6fcf8 !important; box-shadow: 0 0 0 3px var(--s-brand-tint); }
html body #order-standard_cart #frmCheckout #creditCardInputFields { padding-top: 8px !important; }
html body #order-standard_cart #frmCheckout #creditCardInputFields > ul { margin: 0 0 12px; padding: 0; list-style: none; }
html body #order-standard_cart #frmCheckout #creditCardInputFields > ul label { display: flex; align-items: center; gap: 10px; color: var(--s-ink-2); font-size: 14.5px; font-weight: 500; }
html body #order-standard_cart #frmCheckout :is(.stripe-cards-inputs, #inputDescriptionContainer, #creditCardInputFields [class*="col-md-offset"], #creditCardInputFields .offset-md-2, #creditCardInputFields .offset-md-3) { flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row { margin: 0; gap: 12px; flex-wrap: nowrap; }
html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row > [class*="col-"] { flex: 1 1 0; max-width: none; padding: 0; }
html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row > [class*="col-"]:first-child { flex: 2 1 0; }
html body #order-standard_cart #frmCheckout .stripe-cards-inputs label { margin-bottom: 6px; color: var(--s-ink); font-size: 14px; font-weight: 600; }
html body #order-standard_cart #frmCheckout #stripeElements :is(.StripeElement, .form-control) { height: 52px; padding: 16px 14px !important; border: 1px solid #e5e7eb !important; border-radius: 14px !important; background: #fff !important; }
html body #order-standard_cart #frmCheckout #newCardSaveSettings { margin-top: 4px; }
/* Mailing list: a plain row with the toggle */
html body #order-standard_cart #frmCheckout .marketing-email-optin { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 24px; margin-top: 28px !important; padding-top: 24px !important; border-top: 1px solid var(--s-line) !important; }
html body #order-standard_cart #frmCheckout .marketing-email-optin h4 { grid-column: 1; margin: 0; }
html body #order-standard_cart #frmCheckout .marketing-email-optin p { grid-column: 1; margin: 0; }
html body #order-standard_cart #frmCheckout .marketing-email-optin .bootstrap-switch { grid-column: 2; grid-row: 1 / span 2; }
/* The finish: terms on one line, the green button, then the trust points */
html body #order-standard_cart #frmCheckout > .text-center:has(#btnCompleteOrder) { margin-top: 24px !important; padding-top: 24px !important; border-top: 1px solid var(--s-line) !important; }
html body #order-standard_cart #frmCheckout > .text-center:has(#btnCompleteOrder) > p { display: flex; justify-content: center; margin: 0 0 16px; }
html body #order-standard_cart #frmCheckout > .text-center:has(#btnCompleteOrder) label { display: inline-flex !important; align-items: center; gap: 10px; margin: 0; color: var(--s-ink-2); font-size: 14.5px; font-weight: 500; }
html body #order-standard_cart #frmCheckout > .text-center:has(#btnCompleteOrder)::after { content: "Encrypted checkout   \00B7   Card, PayPal or Direct Debit   \00B7   No contract, cancel any time"; display: block; margin-top: 16px; color: var(--s-muted); font-size: 13px; white-space: pre-wrap; }
/* The fraud notice: a quiet line with a padlock, not a yellow banner */
html body #order-standard_cart .checkout-security-msg { display: block; max-width: 640px; margin: 20px auto 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--s-muted) !important; font-size: 12.5px !important; line-height: 1.5; text-align: center; }
html body #order-standard_cart .checkout-security-msg > i, html body #order-standard_cart .checkout-security-msg .fa-lock { display: none !important; }
html body #order-standard_cart .checkout-security-msg::before { content: ""; display: inline-block; vertical-align: -2px; margin-right: 6px; width: 13px; height: 13px; background: var(--s-muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
html body #order-standard_cart .checkout-security-msg strong { color: var(--s-ink-2); font-weight: 600; }
@media (max-width: 767.98px) {
  html body #order-standard_cart #frmCheckout { padding: 26px 20px 24px; border-radius: 20px; }
  html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row { flex-wrap: wrap; }
  html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row > [class*="col-"]:first-child { flex: 1 1 100%; }
}
html body #order-standard_cart #frmCheckout :is(.text-center.margin-bottom, .row.justify-content-center) { justify-content: flex-start !important; margin-left: 0; margin-right: 0; text-align: left !important; }
html body #order-standard_cart #frmCheckout .row.justify-content-center > [class*="col-"] { flex: 0 0 auto; max-width: 100%; margin: 0 !important; padding: 0; }

/* ---- Card details: one secure panel with a clear header, roomy fields and calm labels ---- */
html body #order-standard_cart #frmCheckout #stripeElements { position: relative; margin: 6px 0 14px !important; padding: 58px 20px 20px !important; border: 1px solid var(--s-line); border-radius: 18px; background: var(--s-bg-2); }
html body #order-standard_cart #frmCheckout #stripeElements::before { content: "Card details"; position: absolute; left: 20px; top: 18px; color: var(--s-ink); font-size: 15px; font-weight: 600; }
html body #order-standard_cart #frmCheckout #stripeElements::after { content: "Encrypted and processed by Stripe"; position: absolute; right: 20px; top: 19px; padding-left: 20px; color: var(--s-brand-deep); font-size: 12.5px; font-weight: 600; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306733f' stroke-width='2.2'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") left center / 13px no-repeat; }
html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row { gap: 14px; }
html body #order-standard_cart #frmCheckout .stripe-cards-inputs label { display: block; margin: 0 0 7px !important; color: var(--s-ink-2) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0; }
html body #order-standard_cart #frmCheckout #stripeElements .StripeElement { height: 52px !important; display: flex; flex-direction: column; justify-content: center; padding: 0 16px !important; border: 1px solid #d1d5db !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15,21,33,.04) !important; transition: border-color .15s, box-shadow .15s; }
html body #order-standard_cart #frmCheckout #stripeElements .StripeElement > div { width: 100%; }
html body #order-standard_cart #frmCheckout #stripeElements .StripeElement--focus { border-color: var(--s-brand) !important; box-shadow: 0 0 0 4px rgba(18,160,92,.14) !important; }
html body #order-standard_cart #frmCheckout #stripeElements .StripeElement--invalid { border-color: #ef4444 !important; }
html body #order-standard_cart #frmCheckout #creditCardInputFields > ul { display: none; }
html body #order-standard_cart #frmCheckout #creditCardInputFields > ul:has(li + li) { display: block; }
html body #order-standard_cart #frmCheckout #newCardSaveSettings .form-control { height: 48px !important; border-radius: 12px !important; }
@media (max-width: 575.98px) { html body #order-standard_cart #frmCheckout #stripeElements { padding-top: 76px !important; } html body #order-standard_cart #frmCheckout #stripeElements::after { left: 20px; right: auto; top: 44px; } }
/* Fraud notice icon: only the small padlock, in grey */
html body #order-standard_cart .checkout-security-msg :is(i, .fas, .far, .fa, svg, img), html body #order-standard_cart .checkout-security-msg > div:first-child:empty { display: none !important; }
html body #order-standard_cart #frmCheckout #newCardSaveSettings, html body #order-standard_cart #frmCheckout #newCardSaveSettings .row { margin-left: 0 !important; margin-right: 0 !important; }
html body #order-standard_cart #frmCheckout #newCardSaveSettings [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
html body #order-standard_cart #frmCheckout #creditCardInputFields { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Checkout rhythm: tighter, so the whole form needs less scrolling */
html body #order-standard_cart #frmCheckout { padding: 30px 36px 28px; }
html body #order-standard_cart #frmCheckout .sub-heading { margin: 22px 0 14px !important; padding-top: 20px !important; }
html body #order-standard_cart #frmCheckout #containerNewUserSignup > div:first-child + .sub-heading { margin-top: 0 !important; padding-top: 0 !important; }
html body #order-standard_cart #frmCheckout .form-group { margin-bottom: 10px !important; }
html body #order-standard_cart #frmCheckout .row > [class*="col-"] { margin-bottom: 0; }
html body #order-standard_cart #frmCheckout #containerPassword { row-gap: 8px; }
html body #order-standard_cart #frmCheckout .default-captcha { padding: 12px 16px !important; }
html body #order-standard_cart #frmCheckout #totalDueToday { padding: 16px 22px !important; margin-bottom: 12px !important; }
html body #order-standard_cart #frmCheckout #stripeElements { margin: 4px 0 10px !important; padding: 50px 18px 16px !important; }
html body #order-standard_cart #frmCheckout #stripeElements::before { top: 16px; left: 18px; }
html body #order-standard_cart #frmCheckout #stripeElements::after { top: 17px; right: 18px; }
html body #order-standard_cart #frmCheckout .marketing-email-optin { margin-top: 18px !important; padding-top: 18px !important; }
html body #order-standard_cart #frmCheckout > .text-center:has(#btnCompleteOrder) { margin-top: 18px !important; padding-top: 18px !important; }
html body #order-standard_cart #frmCheckout > .text-center:has(#btnCompleteOrder) > p { margin-bottom: 12px; }
html body #order-standard_cart .already-registered { margin-bottom: 14px !important; padding: 12px 18px !important; }
html body:has(#order-standard_cart #frmCheckout) #main-body { padding-top: 32px; padding-bottom: 56px; }
html body #order-standard_cart:has(#frmCheckout) .header-lined { margin-bottom: 20px !important; }

/* ---- Phones: the order flow ---- */
@media (max-width: 767.98px) {
  /* Domain step: search box full width, the Check button under it, filters wrapping neatly */
  html body #order-standard_cart .domain-input-group .row { margin-left: 0; margin-right: 0; }
  html body #order-standard_cart .domain-input-group .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-left: 0 !important; padding-left: 0; padding-right: 0; }
  html body #order-standard_cart .domain-input-group .domains-row { margin: 0; }
  html body #order-standard_cart .domain-input-group textarea { width: 100% !important; }
  html body #order-standard_cart .domain-input-group :is(#btnCheckAvailability, .btn-primary, .btn-default) { width: 100%; margin-top: 10px; }
  html body #order-standard_cart .domain-input-group .row:last-child .domains-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  html body #order-standard_cart .domain-input-group .input-group { flex-wrap: wrap; }
  html body #order-standard_cart .domain-input-group .input-group > * { flex: 1 1 100%; border-radius: 14px !important; margin: 0 0 8px !important; }
  html body #order-standard_cart .domain-selection-options .option { padding: 16px !important; }
  /* Store: one compact category picker instead of two boxed menus */
  html body #order-standard_cart .sidebar-collapsed .card + .card, html body #order-standard_cart .sidebar-collapsed .card-header { display: none !important; }
  html body #order-standard_cart .sidebar-collapsed .card { margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body #order-standard_cart .sidebar-collapsed .card-body { padding: 0 !important; }
  html body #order-standard_cart .sidebar-collapsed select { height: 50px !important; border-radius: 999px !important; background-color: #fff !important; font-weight: 600; }
  /* Checkout sheet and steps */
  html body #order-standard_cart .header-lined h1 { font-size: 30px !important; }
  html body #order-standard_cart #frmCheckout #paymentGatewaysContainer .text-center { grid-template-columns: 1fr; }
  html body #order-standard_cart .already-registered { flex-direction: row !important; flex-wrap: wrap; text-align: left !important; }
}
@media (max-width: 767.98px) {
  html body #order-standard_cart .domain-input-group > .row { flex-wrap: wrap !important; gap: 0 !important; }
  html body #order-standard_cart .domain-input-group > .row > [class*="col-"] { flex: 0 0 100% !important; width: 100% !important; }
  html body #order-standard_cart .domain-input-group .btn-block { width: 100% !important; }
  /* Review: title, edit and remove wrap instead of running off the card; no column headings */
  html body #order-standard_cart .view-cart-items-header { display: none !important; }
  html body #order-standard_cart .view-cart-items .item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  html body #order-standard_cart .view-cart-items .item .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  html body #order-standard_cart .view-cart-items .item-price { margin-top: 10px; text-align: left !important; }
  html body #order-standard_cart .view-cart-tabs form { flex-direction: column; }
  html body #order-standard_cart .view-cart-tabs form .btn { width: 100% !important; }
}
@media (max-width: 767.98px) {
  html body #order-standard_cart .already-registered { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 14px 16px !important; }
  html body #order-standard_cart .already-registered p { flex: none !important; }
  html body #order-standard_cart .already-registered .float-right { justify-content: stretch; }
  html body #order-standard_cart .already-registered .float-right .btn { flex: 1; }
  html body #order-standard_cart #frmCheckout { padding: 20px 16px 20px !important; }
  html body #order-standard_cart #frmCheckout :is(#containerNewUserSignup, #containerNewUserSecurity, #containerExistingUserSignin) { padding: 0 !important; }
  html body #order-standard_cart #frmCheckout .row { margin-left: 0 !important; margin-right: 0 !important; }
  html body #order-standard_cart #frmCheckout .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  html body #order-standard_cart #frmCheckout #stripeElements { padding: 74px 14px 14px !important; }
  html body #order-standard_cart #frmCheckout #stripeElements::after { left: 14px; top: 42px; }
  html body #order-standard_cart #frmCheckout #stripeElements::before { left: 14px; }
  html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row { gap: 10px; }
  html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row > [class*="col-"] { flex: 1 1 40% !important; }
  html body #order-standard_cart #frmCheckout .stripe-cards-inputs .row > [class*="col-"]:first-child { flex: 1 1 100% !important; }
  html body #order-standard_cart #frmCheckout .marketing-email-optin { grid-template-columns: 1fr; }
  html body #order-standard_cart #frmCheckout .marketing-email-optin .bootstrap-switch { grid-column: 1; grid-row: auto; margin-top: 8px; }
  html body #order-standard_cart #frmCheckout > .text-center:has(#btnCompleteOrder) > p { justify-content: flex-start; text-align: left; }
}

/* =====================================================================
   v4.8 sign in, forgot password, signed out: one focused card on a light page with the main site's green glow
   ===================================================================== */
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) .master-breadcrumb { display: none !important; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body { position: relative; isolation: isolate; min-height: calc(100vh - 260px); padding: 64px 0 88px !important; background: #f6f9f7 !important; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body::before { content: "" !important; position: absolute; inset: 0; z-index: -1; height: auto !important; background: radial-gradient(900px 480px at 50% -10%, rgba(52,208,127,.22), transparent 70%), radial-gradient(600px 360px at 100% 100%, rgba(52,208,127,.08), transparent 70%) !important; pointer-events: none; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(15,21,33,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,21,33,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 20%, #000, transparent 75%); }
html body .login-form::before { display: none !important; }
/* The card: logo mark on top, centred title, roomy fields */
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540, html body .login-form .card { position: relative; width: 100%; max-width: 448px !important; margin: 0 auto !important; overflow: visible; border: 1px solid var(--s-line) !important; border-radius: 24px !important; background: #fff; box-shadow: 0 1px 2px rgba(15,21,33,.04), 0 40px 80px -48px rgba(5,58,36,.45) !important; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540::before { content: ""; position: absolute; left: 50%; top: -26px; width: 52px; height: 52px; margin-left: -26px; border-radius: 15px; background: var(--s-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 9l4 14 7-10 7 10 4-14' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat; box-shadow: 0 0 0 6px #fff, 0 14px 28px -12px rgba(18,160,92,.7); }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540 > .card-body { padding: 48px 40px 30px !important; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540 .card-body > .mb-4:first-child { margin-bottom: 28px !important; text-align: center; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540 .card-body > .mb-4:first-child :is(h1, h2, h3, h6, .h3) { margin: 0 0 6px !important; color: var(--s-ink) !important; font-size: 28px !important; font-weight: 600 !important; letter-spacing: -0.035em; line-height: 1.15; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540 .card-body > .mb-4:first-child p { color: var(--s-muted) !important; font-size: 15px; }
html body:is(.page-login, [class*="page-password-reset"]) #main-body .card.mw-540 .form-group { margin-bottom: 16px !important; }
html body:is(.page-login, [class*="page-password-reset"]) #main-body .card.mw-540 .form-control-label, html body:is(.page-login, [class*="page-password-reset"]) #main-body .card.mw-540 .form-group > label { margin-bottom: 7px; color: var(--s-ink); font-size: 13.5px; font-weight: 600; }
html body:is(.page-login, [class*="page-password-reset"]) #main-body .card.mw-540 .form-group a.small { color: var(--s-brand-deep) !important; font-size: 13px !important; font-weight: 500; }
/* Captcha: a quiet panel */
html body.page-login .login-form #default-captcha-domainchecker { margin: 4px 0 6px !important; padding: 14px !important; border: 1px solid var(--s-line); border-radius: 16px; background: var(--s-bg-2); }
html body.page-login .login-form #default-captcha-domainchecker p { flex: 0 0 100%; margin: 0 0 4px; color: var(--s-muted); font-size: 13px; text-align: center; }
html body.page-login .login-form #default-captcha-domainchecker > [class*="col-"] { flex: 0 0 auto; max-width: none; padding: 0; }
/* Remember me, then the full-width button */
html body.page-login .login-form .card-body > .text-right label { gap: 10px; color: var(--s-ink-2); font-size: 14.5px; font-weight: 500 !important; }
html body:is(.page-login, [class*="page-password-reset"]) #main-body .card.mw-540 :is(#login, #resetPasswordButton, .btn-primary[type="submit"]) { width: 100%; height: 54px !important; display: flex !important; align-items: center; justify-content: center; border: 0 !important; border-radius: 999px !important; background: var(--s-ink) !important; color: #fff !important; font-size: 16px !important; font-weight: 600 !important; box-shadow: 0 12px 24px -14px rgba(15,21,33,.8) !important; }
html body:is(.page-login, [class*="page-password-reset"]) #main-body .card.mw-540 :is(#login, #resetPasswordButton, .btn-primary[type="submit"]):hover { background: #253045 !important; }
html body:is(.page-login, [class*="page-password-reset"]) #main-body .card.mw-540 :is(#login, #resetPasswordButton)::after { content: "→"; margin-left: 8px; }
html body[class*="page-password-reset"] #main-body .card.mw-540 .form-group.text-center { margin: 22px 0 0 !important; }
/* Footer link row */
html body:is(.page-login, .page-logout, [class*="page-password-reset"]) #main-body .card.mw-540 .card-footer { padding: 18px 24px !important; border-top: 1px solid var(--s-line) !important; border-radius: 0 0 24px 24px !important; background: var(--s-bg-2) !important; color: var(--s-muted); font-size: 14.5px; text-align: center; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"]) #main-body .card.mw-540 .card-footer :is(small, a) { font-size: 14.5px !important; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"]) #main-body .card.mw-540 .card-footer a { margin-left: 4px; color: var(--s-brand-deep) !important; font-weight: 600 !important; }
/* A reassurance line under the card */
html body:is(.page-login, [class*="page-password-reset"]) #main-body .primary-content::after { content: "Secure sign-in   \00B7   UK support by ticket and email"; display: block; margin-top: 22px; color: var(--s-muted); font-size: 13px; text-align: center; white-space: pre-wrap; }
/* Signed out page: same card, a clear way back in */
html body.page-logout #main-body .card :is(.btn-primary, .btn-default) { height: 50px; padding: 0 24px !important; border-radius: 999px !important; }
@media (max-width: 575.98px) {
  html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body { padding: 48px 0 56px !important; }
  html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540 > .card-body { padding: 42px 22px 24px !important; }
  html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540 .card-body > .mb-4:first-child :is(h1, h2, h3, h6, .h3) { font-size: 24px !important; }
}
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540.mw-540 { overflow: visible !important; margin-top: 10px !important; }
/* The logo badge sits above the card edge and anything inside it */
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540.mw-540 { z-index: 1; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540.mw-540::before { z-index: 5; }
html body:is(.page-login, .page-logout, [class*="page-password-reset"], [class*="page-two-factor"]) #main-body .card.mw-540.mw-540 > .card-body { position: relative; z-index: 0; }

/* =====================================================================
   v4.9 register
   ===================================================================== */
/* "Already registered?" box: a heading on one line, the note with room, then the two links */
html body.page-clientregister #main-body .sidebar .card-title { white-space: nowrap; font-size: 15px !important; }
html body.page-clientregister #main-body .sidebar .list-group-item:not(a) { display: block !important; min-height: 0; padding: 16px 24px 14px !important; background: #fff !important; color: var(--s-muted) !important; font-size: 14px; font-weight: 400 !important; line-height: 1.6; cursor: default; }
html body.page-clientregister #main-body .sidebar .list-group-item:not(a):hover { background: #fff !important; }
html body.page-clientregister #main-body .sidebar a.list-group-item { color: var(--s-ink) !important; font-weight: 600; }
html body.page-clientregister #main-body .sidebar a.list-group-item .sidebar-menu-item-icon-wrapper i { color: var(--s-brand); }
/* Form cards: the same padding and rhythm as the rest of the account pages */
html body.page-clientregister #registration .card { margin-bottom: 16px !important; }
html body.page-clientregister #registration .card-body { padding: 26px 28px !important; }
html body.page-clientregister #registration .card-body > .card-title { margin-bottom: 18px !important; }
/* The finish: captcha, terms and the button joined into one card */
html body.page-clientregister #registration form > .row.justify-content-center { margin: 0 !important; padding: 24px 28px 6px; border: 1px solid var(--s-line); border-bottom: 0; border-radius: 20px 20px 0 0; background: #fff; text-align: left !important; justify-content: flex-start !important; }
html body.page-clientregister #registration form > .row.justify-content-center > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin: 0 !important; padding: 0; }
html body.page-clientregister #registration #default-captcha-domainchecker { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 !important; padding: 14px 16px !important; border: 1px solid var(--s-line); border-radius: 16px; background: var(--s-bg-2); text-align: left !important; }
html body.page-clientregister #registration #default-captcha-domainchecker p { flex: 0 0 100%; margin: 0 0 2px; color: var(--s-muted); font-size: 13px; }
html body.page-clientregister #registration #default-captcha-domainchecker > [class*="col-"] { flex: 0 0 auto; max-width: none; padding: 0; }
html body.page-clientregister #registration form > p.text-center:has(.accepttos) { margin: 0 !important; padding: 14px 28px 4px; border-left: 1px solid var(--s-line); border-right: 1px solid var(--s-line); background: #fff; text-align: left !important; }
html body.page-clientregister #registration form > p.text-center:has(.accepttos) label { display: inline-flex !important; align-items: center; gap: 10px; color: var(--s-ink-2); font-size: 14.5px; font-weight: 500; }
html body.page-clientregister #registration form > p.text-center:has(input[type="submit"]) { margin: 0 !important; padding: 14px 28px 26px; border: 1px solid var(--s-line); border-top: 0; border-radius: 0 0 20px 20px; background: #fff; box-shadow: 0 12px 32px -24px rgba(15,21,33,.16); }
html body.page-clientregister #registration form > p.text-center:has(input[type="submit"])::after { content: "No setup fee   \00B7   No contract   \00B7   UK support by ticket and email"; display: block; margin-top: 12px; color: var(--s-muted); font-size: 13px; white-space: pre-wrap; }
html body.page-clientregister #registration input[type="submit"].btn-primary { width: 100%; height: 56px; border: 0 !important; border-radius: 999px !important; background: var(--s-brand) !important; color: #fff !important; font-size: 16.5px !important; font-weight: 600 !important; box-shadow: 0 14px 28px -14px rgba(18,160,92,.8) !important; }
html body.page-clientregister #registration input[type="submit"].btn-primary:hover { background: var(--s-brand-deep) !important; }
@media (max-width: 767.98px) {
  html body.page-clientregister #registration .card-body { padding: 20px 18px !important; }
  html body.page-clientregister #registration form > .row.justify-content-center, html body.page-clientregister #registration form > p.text-center:has(.accepttos), html body.page-clientregister #registration form > p.text-center:has(input[type="submit"]) { padding-left: 18px; padding-right: 18px; }
}

/* ---- Phones: signed-in pages and the domain search ---- */
html body #order-standard_cart .domain-checker-container .btn.domain-check-availability:not(#wh-none) { border: 0 !important; background: var(--s-brand) !important; color: #fff !important; }
@media (max-width: 767.98px) {
  /* Domain search has no category picker */
  html body #order-standard_cart:has(#frmDomainChecker, #frmDomainTransfer) .sidebar-collapsed { display: none !important; }
  /* Account strip: icon-only notifications, the account name trimmed so nothing wraps */
  html body .wh-topbar .container > .d-flex { flex-wrap: nowrap; gap: 8px; }
  html body .wh-topbar #accountNotifications span.d-none, html body .wh-topbar #accountNotifications .d-sm-inline { display: none !important; }
  html body .wh-topbar .btn-active-client span { display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  /* Card headers: title and button stay on one line, the button compact */
  html body #main-body .card-header { flex-wrap: nowrap !important; }
  html body #main-body .card-header :is(.card-title, .panel-title) { min-width: 0; font-size: 15px !important; }
  html body #main-body :is(.card-title, .panel-title) > :is(.float-right, .pull-right) .btn { min-height: 30px; padding: 0 10px !important; font-size: 12.5px !important; white-space: nowrap; }
  /* Dashboard tiles: two by two, number and icon on one line */
  html body #main-body .tiles .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
  html body #main-body .tiles .tile { padding: 16px !important; }
  html body #main-body .tiles .tile .stat { font-size: 30px !important; }
  html body #main-body .tiles .tile i { top: 18px !important; right: 16px !important; }
  /* Lists with actions (active services): status and name on top, buttons on their own row */
  html body #main-body .card > .list-group > .list-group-item { flex-wrap: wrap; gap: 10px; }
  html body #main-body .div-service-buttons, html body #main-body .list-group-item .btn-group-secondary { display: flex !important; flex-wrap: wrap; gap: 8px; }
  /* Tables scroll sideways inside their card instead of squashing */
  html body #main-body :is(.table-container, .dataTables_wrapper, .table-responsive) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html body #main-body table.table-list { min-width: 520px; }
  /* Sidebar rows: icon, label and count stay on one line */
  html body #main-body .sidebar .sidebar-menu-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}