/* ============================================================================
   NCCK order-form skin — child of standard_cart.
   Authority: docs/architecture/ORDERFORM-PLAN.md (§D-2/§D-3) + PUBLIC-SITE-
   DESIGN-SPEC §1 tokens (templates/ncck/css/ncck-tokens.css, frozen).

   Design contract
   ---------------
   - Consumes the frozen design tokens in templates/ncck/css/ncck-tokens.css.
     Order-form pages are wrapped by the NCCK *public* shell header/footer
     (ORDERFORM-PLAN §D-3; header.tpl keeps cart/checkout on the public shell
     because ncckClientShell is false while $inShoppingCart). Rather than rely
     on the shell having loaded the tokens, ncck_cart/common.tpl now injects
     ncck-tokens.css itself (immediately before this file), so the --ncck-*
     custom properties are always in scope on cart.php. This file defines NO
     tokens of its own and hardcodes no brand colours (button text "white"
     comes from --ncck-surface; focus ring via color-mix on the token).
   - Inherits the standard_cart Bootstrap stack; adds only a brand token layer
     on top. No third-party library, no @import, no external url().
   - Every rule is scoped under `.ncck-cart` (emitted on the #order-standard_cart
     root of every ncck_cart flow tpl, and pulled in via ncck_cart/common.tpl)
     so it can never bleed into the surrounding client shell.

   Selector policy
   ---------------
   Every class targeted below is a REAL class present in the standard_cart
   parent markup (verified by reading whmcs-app/templates/orderforms/
   standard_cart/*.tpl). No fabricated hooks. Sampled evidence:
     .btn-success .btn-order-now  -> products.tpl footer CTA
     .btn-success .btn-checkout   -> viewcart.tpl summary CTA
     .btn-primary #btnCompleteOrder / #btnCompleteProductConfig
     .bordered-totals .subtotal .recurring-totals .total-due-today .amt
                                   -> viewcart.tpl / ordersummary.tpl summary
     .sub-heading .primary-bg-color -> section headings (all steps)
     .account .account-select .address .label -> checkout.tpl account switch
     .payment-methods (radio input) .paymethod-info .existing-card
                                   -> checkout.tpl + includes/existing-paymethods.tpl
     .view-cart-items .item .item-title .item-price .cycle -> viewcart.tpl
     .order-confirmation -> complete.tpl ; .error-heading -> error.tpl/fraudcheck.tpl
   ========================================================================== */

/* -------------------------------------------------------- content surface */
.ncck-cart {
  font-family: var(--ncck-font);
  color: var(--ncck-text);
}

.ncck-cart a {
  color: var(--ncck-primary);
}
.ncck-cart a:hover,
.ncck-cart a:focus {
  color: var(--ncck-primary-hover);
}
.ncck-cart a:focus-visible {
  outline: 2px solid var(--ncck-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------- step / headings */
.ncck-cart .header-lined h1,
.ncck-cart .font-size-36,
.ncck-cart .font-size-30 {
  color: var(--ncck-text);
}
/* section sub-headings: standard_cart wraps the label in .primary-bg-color */
.ncck-cart .sub-heading .primary-bg-color {
  color: var(--ncck-primary);
}

/* ------------------------------------------------------- cards / surfaces */
.ncck-cart .card,
.ncck-cart .panel {
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
}
.ncck-cart .card-header,
.ncck-cart .panel-heading {
  background: var(--ncck-bg);
  border-bottom: 1px solid var(--ncck-border);
  color: var(--ncck-text);
}

/* -------------------------------------------------- product catalogue cards */
.ncck-cart .product {
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
}
.ncck-cart .product:hover {
  border-color: var(--ncck-primary);
}
.ncck-cart .product .price,
.ncck-cart .product-pricing .price {
  color: var(--ncck-text);
}
.ncck-cart .product .feature-value {
  color: var(--ncck-primary);
}
.ncck-cart .product .qty {
  color: var(--ncck-text-muted);
}

/* ---------------------------------------------------------- primary actions */
/* Native primary CTAs in standard_cart use .btn-success (order-now, checkout); ...git */
.ncck-cart .btn-success,
.ncck-cart .btn-primary,
.ncck-cart .btn-order-now,
.ncck-cart .btn-checkout {
  background-color: var(--ncck-primary);
  border-color: var(--ncck-primary);
  color: var(--ncck-surface);
  border-radius: var(--ncck-radius-sm);
}
.ncck-cart .btn-success:hover,
.ncck-cart .btn-primary:hover,
.ncck-cart .btn-order-now:hover,
.ncck-cart .btn-checkout:hover {
  background-color: var(--ncck-primary-hover);
  border-color: var(--ncck-primary-hover);
  color: var(--ncck-surface);
}
.ncck-cart .btn-success:focus,
.ncck-cart .btn-success:focus-visible,
.ncck-cart .btn-primary:focus,
.ncck-cart .btn-primary:focus-visible,
.ncck-cart .btn-order-now:focus-visible,
.ncck-cart .btn-checkout:focus-visible {
  outline: 2px solid var(--ncck-primary-hover);
  outline-offset: 2px;
}
.ncck-cart .btn-success:active,
.ncck-cart .btn-primary:active,
.ncck-cart .btn-order-now:active,
.ncck-cart .btn-checkout:active {
  background-color: var(--ncck-primary-hover);
  border-color: var(--ncck-primary-hover);
  color: var(--ncck-surface);
}
.ncck-cart .btn-success:disabled,
.ncck-cart .btn-success.disabled,
.ncck-cart .btn-primary:disabled,
.ncck-cart .btn-primary.disabled,
.ncck-cart .btn-checkout.disabled {
  background-color: var(--ncck-border);
  border-color: var(--ncck-border);
  color: var(--ncck-text-muted);
  cursor: not-allowed;
}

/* ------------------------------------------------ secondary / neutral actions */
.ncck-cart .btn-default {
  border-color: var(--ncck-border);
  color: var(--ncck-text);
  background-color: var(--ncck-surface);
  border-radius: var(--ncck-radius-sm);
}
.ncck-cart .btn-default:hover {
  border-color: var(--ncck-primary);
  color: var(--ncck-primary);
}
.ncck-cart .btn-default:focus-visible {
  outline: 2px solid var(--ncck-primary);
  outline-offset: 2px;
}
.ncck-cart .btn-default:active {
  border-color: var(--ncck-primary-hover);
  color: var(--ncck-primary-hover);
}
.ncck-cart .btn-default:disabled,
.ncck-cart .btn-default.disabled {
  color: var(--ncck-text-muted);
  cursor: not-allowed;
}

/* info / warning helper buttons (checkout: already-registered / create-account) */
.ncck-cart .btn-info {
  background-color: var(--ncck-surface);
  border-color: var(--ncck-primary);
  color: var(--ncck-primary);
  border-radius: var(--ncck-radius-sm);
}
.ncck-cart .btn-info:hover,
.ncck-cart .btn-info:active {
  background-color: var(--ncck-primary);
  color: var(--ncck-surface);
}
.ncck-cart .btn-info:focus-visible {
  outline: 2px solid var(--ncck-primary);
  outline-offset: 2px;
}
.ncck-cart .btn-warning {
  background-color: var(--ncck-surface);
  border-color: var(--ncck-warning);
  color: var(--ncck-warning);
  border-radius: var(--ncck-radius-sm);
}
.ncck-cart .btn-warning:hover,
.ncck-cart .btn-warning:active {
  background-color: var(--ncck-warning);
  color: var(--ncck-surface);
}
.ncck-cart .btn-warning:focus-visible {
  outline: 2px solid var(--ncck-warning);
  outline-offset: 2px;
}

/* link-style buttons (edit / remove / continue-shopping / empty-cart) */
.ncck-cart .btn-link,
.ncck-cart .btn-continue-shopping {
  color: var(--ncck-primary);
}
.ncck-cart .btn-link:hover,
.ncck-cart .btn-continue-shopping:hover {
  color: var(--ncck-primary-hover);
}
.ncck-cart .btn-link:focus-visible {
  outline: 2px solid var(--ncck-primary);
  outline-offset: 2px;
}
.ncck-cart .btn-remove-from-cart {
  color: var(--ncck-text-muted);
}
.ncck-cart .btn-remove-from-cart:hover,
.ncck-cart .btn-remove-from-cart:active {
  color: var(--ncck-danger);
}

/* ------------------------------------------------------------- form fields */
/* Native field names / ids untouched — appearance only. standard_cart adds a
   `.field` class alongside `.form-control` on order-form inputs.
   2026-07-24 correction for CEO rejection #5 (the promo-code field still used
   native Bootstrap): `#order-standard_cart .field,#order-standard_cart .form-control`
   (1,1,0) and `.form-control:focus{border-color:#ddd;box-shadow:none}` (1,2,0)
   outranked the previous `.ncck-cart .form-control` rules (0,2,0/0,3,0), so the
   field skin never applied (the border remained #DDD, the radius 3px, and the
   native rule reset the focus ring). Add the ID prefix to raise specificity to
   (1,2,0)/(1,3,0). Change appearance only; keep dimensions and every name/id/value. */
#order-standard_cart.ncck-cart .form-control,
#order-standard_cart.ncck-cart .field,
#order-standard_cart.ncck-cart .custom-select,
#order-standard_cart.ncck-cart .select-inline {
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius-sm);
  color: var(--ncck-text);
  background-color: var(--ncck-surface);
}
#order-standard_cart.ncck-cart .form-control:hover,
#order-standard_cart.ncck-cart .field:hover,
#order-standard_cart.ncck-cart .custom-select:hover {
  border-color: var(--ncck-text-muted);
}
#order-standard_cart.ncck-cart .form-control:focus,
#order-standard_cart.ncck-cart .field:focus,
#order-standard_cart.ncck-cart .custom-select:focus {
  border-color: var(--ncck-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ncck-primary) 15%, transparent);
  outline: none;
}
#order-standard_cart.ncck-cart .form-control:disabled,
#order-standard_cart.ncck-cart .form-control[readonly],
#order-standard_cart.ncck-cart .field:disabled {
  background-color: var(--ncck-bg);
  color: var(--ncck-text-muted);
  cursor: not-allowed;
}
/* prepend-icon field affordance + validation text */
#order-standard_cart.ncck-cart .prepend-icon .field-icon,
#order-standard_cart.ncck-cart .field-icon i {
  color: var(--ncck-text-muted);
}
.ncck-cart .field-help-text {
  color: var(--ncck-text-muted);
}
.ncck-cart .field-error-msg {
  color: var(--ncck-danger);
}

/* native radios / checkboxes: tint the control, keep name/value intact */
.ncck-cart input[type="radio"],
.ncck-cart input[type="checkbox"] {
  accent-color: var(--ncck-primary);
}
.ncck-cart input[type="radio"]:focus-visible,
.ncck-cart input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ncck-primary);
  outline-offset: 2px;
}

/* --------------------------------------------- billing-cycle select (native) */
/* standard_cart renders the billing cycle as a native <select id=inputBillingcycle ...git */

/* ----------------------------------------------------- addon option panels */
.ncck-cart .panel-addon {
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
}
.ncck-cart .panel-addon:hover {
  border-color: var(--ncck-primary);
}
.ncck-cart .panel-addon-selected {
  border-color: var(--ncck-primary);
  box-shadow: inset 0 0 0 1px var(--ncck-primary);
}
.ncck-cart .panel-price {
  color: var(--ncck-text);
}
.ncck-cart .panel-add {
  color: var(--ncck-primary);
}

/* ----------------------------------------------------- order summary rail */
.ncck-cart .order-summary {
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
}
.ncck-cart .order-summary .subtotal,
.ncck-cart .summary-container .subtotal {
  color: var(--ncck-text);
}
/* Discount / tax block — the ID prefix lets this rule outrank the native
   `#order-standard_cart .order-summary .bordered-totals` (1,2,0) #ddd border. */
#order-standard_cart.ncck-cart .bordered-totals {
  border-top: 1px solid var(--ncck-border);
  border-bottom: 1px solid var(--ncck-border);
  color: var(--ncck-text-muted);
}
.ncck-cart .summary-totals {
  color: var(--ncck-text-muted);
  border-top: 1px solid var(--ncck-border);
}
.ncck-cart .recurring-totals,
.ncck-cart .recurring-charges {
  color: var(--ncck-text-muted);
}
/* total due today — the headline number */
.ncck-cart .total-due-today {
  border-top: 1px solid var(--ncck-border);
  color: var(--ncck-text);
}
.ncck-cart .total-due-today .amt {
  color: var(--ncck-primary);
}
/* VIEWCART summary-card interior: the native `#order-standard_cart .summary-container`
   (1,1,0) applies a #f8f8f8 background and 0.8em text, nesting a gray box inside
   the white card. The C2 outer card, radius, and shadow come from
   #order-standard_cart.ncck-conf .order-summary; restore this interior to a
   transparent white background and a normal 14px font. */
#order-standard_cart.ncck-viewcart .summary-container {
  padding: 0;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  font-size: 14px;
}
#order-standard_cart.ncck-viewcart .order-summary .subtotal {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ncck-border);
  font-size: 14px;
}
#order-standard_cart.ncck-viewcart .order-summary .recurring-charges {
  font-size: 13px;
  font-style: normal;
  color: var(--ncck-text-muted);
}
#order-standard_cart.ncck-viewcart .order-summary .btn-continue-shopping {
  color: var(--ncck-primary);
  font-size: 14px;
}

/* --------------------------------------------------------- cart line items */
.ncck-cart .view-cart-items-header {
  color: var(--ncck-text-muted);
  border-bottom: 1px solid var(--ncck-border);
}
.ncck-cart .view-cart-items .item {
  border-bottom: 1px solid var(--ncck-border);
}
.ncck-cart .item-title {
  color: var(--ncck-text);
}
.ncck-cart .item-group,
.ncck-cart .item-domain,
.ncck-cart .cycle {
  color: var(--ncck-text-muted);
}
.ncck-cart .item-price {
  color: var(--ncck-text);
}
.ncck-cart .view-cart-empty {
  color: var(--ncck-text-muted);
}

/* ---- VIEWCART line-item card (CEO rejection #1: retire the native dark-blue header) ---
   Native standard_cart renders the line items as a "dark-blue tab + zebra-gray rows
   + dark-blue 2px closing rule":
     #order-standard_cart .view-cart-items-header {background-color:#058;color:#fff}
     #order-standard_cart .view-cart-items       {border-bottom:2px solid #058}
     #order-standard_cart .view-cart-items .item:nth-child(even){background:#eee}
   These rules are all ID-scoped (1,1,0/1,2,0/1,3,0), so the previous layer
   (0,2,0/0,3,0) could not override them. Use the NCCK white-card treatment:
   a light-gray header with small labels, white rows, and 1px token dividers.
   The `.ncck-cart-items-card` shell is a presentation-only div added in
   viewcart.tpl; it contains no name/id/form mechanics. Its radius and shadow
   match the accepted confproduct white card. */
#order-standard_cart.ncck-viewcart .ncck-cart-items-card {
  margin: 0 0 20px;
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04), 0 12px 30px -18px rgba(14, 24, 48, 0.14);
  overflow: hidden;
}
#order-standard_cart.ncck-viewcart .view-cart-items-header {
  margin: 0;
  padding: 13px 20px;
  background-color: var(--ncck-bg);
  border-bottom: 1px solid var(--ncck-border);
  border-radius: 0;
  color: var(--ncck-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#order-standard_cart.ncck-viewcart .view-cart-items {
  margin: 0;
  border-bottom: 0;
}
/* Empty-cart state: column labels (Product/Options·Price/Cycle) are meaningless
   without rows, so hide the header and leave a clean empty-state card. This is
   CSS-only (:has) and changes no render condition; unsupported browsers retain
   the light-gray header instead of the native dark-blue one. */
#order-standard_cart.ncck-viewcart .ncck-cart-items-card:has(.view-cart-empty) .view-cart-items-header {
  display: none;
}
/* Rows: remove zebra gray and 0.8em shrinking; use 1px token dividers except after the last row. */
#order-standard_cart.ncck-viewcart .view-cart-items .item,
#order-standard_cart.ncck-viewcart .view-cart-items .item:nth-child(even) {
  padding: 16px 20px;
  background-color: transparent;
  border-bottom: 1px solid var(--ncck-border);
  border-radius: 0;
  font-size: 14px;
}
#order-standard_cart.ncck-viewcart .view-cart-items .item:last-child {
  border-bottom: 0;
}
#order-standard_cart.ncck-viewcart .view-cart-items .item:hover {
  background-color: var(--ncck-bg);
}
/* In-row type scale: native chained em values (.item 0.8em plus 1.6em/1.2em) reduce body text to 11px. */
#order-standard_cart.ncck-viewcart .view-cart-items .item-title {
  font-size: 16px;
  font-weight: 600;
}
#order-standard_cart.ncck-viewcart .view-cart-items .item-group {
  font-size: 13px;
}
#order-standard_cart.ncck-viewcart .view-cart-items .item-domain {
  font-size: 13px;
  color: var(--ncck-text-muted);   /* native #056 dark teal */
}
#order-standard_cart.ncck-viewcart .view-cart-items .item-price span {
  font-size: 16px;
  font-weight: 700;
}
#order-standard_cart.ncck-viewcart .view-cart-items .item-price .cycle {
  font-size: 13px;
  font-weight: 400;
}
#order-standard_cart.ncck-viewcart .view-cart-items .item small {
  font-size: 13px;
  color: var(--ncck-text-muted);
}
/* Empty Cart: native UI makes this a dark-blue tab hanging from the card bottom
   (#058 with a negative margin). Use a subdued NCCK text button that turns danger
   on hover; keep id=btnEmptyCart and the modal hook unchanged. */
#order-standard_cart.ncck-viewcart .empty-cart {
  margin: 12px 0 0;
}
#order-standard_cart.ncck-viewcart .empty-cart .btn {
  padding: 6px 10px;
  background-color: transparent;
  border: 0;
  border-radius: var(--ncck-radius-sm);
  color: var(--ncck-text-muted);
}
#order-standard_cart.ncck-viewcart .empty-cart .btn:hover {
  color: var(--ncck-danger);
}

/* ------------------------------------------------------------------ tables */
.ncck-cart table {
  color: var(--ncck-text);
}
.ncck-cart table th {
  color: var(--ncck-text-muted);
  border-bottom: 1px solid var(--ncck-border);
}
.ncck-cart table td {
  border-color: var(--ncck-border);
}

/* --------------------------------------- promo / estimate-taxes tab block */
.ncck-cart .view-cart-tabs .nav-tabs {
  border-bottom: 1px solid var(--ncck-border);
}
.ncck-cart .view-cart-tabs .nav-link {
  color: var(--ncck-text-muted);
}
.ncck-cart .view-cart-tabs .nav-link:hover {
  color: var(--ncck-primary);
}
.ncck-cart .view-cart-tabs .nav-link.active {
  color: var(--ncck-primary);
  border-bottom: 2px solid var(--ncck-primary);
}
.ncck-cart .view-cart-promotion-code {
  color: var(--ncck-success);
}

/* ---- VIEWCART promotion-code / tax-estimate card (CEO rejections #2–#5) ----
   Native UI renders this as Bootstrap gray tabs, a gray panel, and gray-white buttons:
     #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"]
        {border-color:#dee2e6 #dee2e6 #f8f8f8;background-color:#f8f8f8}   (1,3,1)
     #order-standard_cart .view-cart-tabs .tab-content{background-color:#f8f8f8}(1,2,0)
     #order-standard_cart .view-cart-promotion-code   {border:1px dashed #ccc}(1,1,0)
   The previous layer (0,3,0/0,4,0) could not override it, leaving the native UI.
   Convert the whole section to an NCCK white card: light-gray tab rail (active =
   blue text plus a 2px blue underline, no gray background or border), white panel,
   blue-outline secondary buttons, and 44px fields. The action/name/id attributes
   of the promocode, validatepromo, and setstateandcountry forms are untouched. */
#order-standard_cart.ncck-viewcart .view-cart-tabs {
  margin: 0 0 20px;
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04), 0 12px 30px -18px rgba(14, 24, 48, 0.14);
  overflow: hidden;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .nav-tabs {
  margin: 0;
  padding: 0 20px;
  background-color: var(--ncck-bg);
  border-bottom: 1px solid var(--ncck-border);
  font-size: 14px;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .nav-tabs .nav-link {
  margin: 0;
  padding: 13px 0;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ncck-text-muted);
  font-weight: 600;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .nav-tabs .nav-item + .nav-item {
  margin-left: 26px;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .nav-tabs .nav-link:hover {
  color: var(--ncck-primary);
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .nav-tabs .nav-link.active,
#order-standard_cart.ncck-viewcart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart.ncck-viewcart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
  background-color: transparent;
  border-color: transparent;
  border-bottom-color: var(--ncck-primary);
  color: var(--ncck-primary);
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .tab-content {
  padding: 20px;
  background-color: var(--ncck-surface);
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .promo .form-group {
  margin-bottom: 12px;
}
#order-standard_cart.ncck-viewcart .ncck-cart-promo-hint {
  margin: 0 0 12px;
  color: var(--ncck-text-muted);
  font-size: 13px;
}
/* Inputs/selects: 44px high with 8px radius (the shared field base supplies the
   blue focus ring); match the prepend-icon slot to 44px so it remains aligned. */
#order-standard_cart.ncck-viewcart .view-cart-tabs .tab-content .form-control,
#order-standard_cart.ncck-viewcart .view-cart-tabs .tab-content .field {
  height: 44px;
  padding: 10px 14px;
  border-radius: var(--ncck-radius);
  font-size: 14px;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .prepend-icon .field {
  padding-left: 44px;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .prepend-icon .field-icon {
  width: 44px;
  height: 44px;
  line-height: 44px;
}
/* Secondary buttons use the NCCK outline treatment (Validate Code / Update Totals / Remove Promotion Code). */
#order-standard_cart.ncck-viewcart .view-cart-tabs .btn-default {
  padding: 10px 20px;
  background-color: var(--ncck-surface);
  border: 1px solid var(--ncck-primary);
  border-radius: var(--ncck-radius);
  color: var(--ncck-primary);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .btn-default:hover,
#order-standard_cart.ncck-viewcart .view-cart-tabs .btn-default:focus {
  background-color: var(--ncck-primary);
  border-color: var(--ncck-primary);
  color: var(--ncck-surface);
  box-shadow: 0 8px 18px -10px rgba(15, 92, 255, 0.55);
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .btn-block {
  min-height: 42px;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .btn-xs {
  padding: 6px 14px;
  border-radius: var(--ncck-radius-sm);
  font-size: 12px;
}
#order-standard_cart.ncck-viewcart .view-cart-tabs .control-label {
  color: var(--ncck-text-muted);
  font-size: 13px;
  font-weight: 600;
}
/* Applied promotion code: native dashed gray frame → NCCK green-tinted notice. */
#order-standard_cart.ncck-viewcart .view-cart-promotion-code {
  margin: 0 0 12px;
  padding: 12px 16px;
  background-color: color-mix(in srgb, var(--ncck-success) 7%, var(--ncck-surface));
  border: 1px solid color-mix(in srgb, var(--ncck-success) 32%, var(--ncck-surface));
  border-radius: var(--ncck-radius);
  color: var(--ncck-success);
  font-weight: 600;
}
/* Gateway quick-checkout slot: native #e8e8e8 solid gray block → NCCK light-gray outlined block. */
#order-standard_cart.ncck-viewcart .view-cart-gateway-checkout {
  margin: 0 0 20px;
  padding: 16px;
  background-color: var(--ncck-bg);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
}

/* --------------------------------------------------------- native alerts */
/* promo-applied = alert-success ; promo-invalid/expired = alert-warning /
   alert-danger ; info states = alert-info (state colours from tokens).
   2026-07-24: backgrounds still used native Bootstrap colors (#d4edda and other
   saturated green/yellow values). Add NCCK pale tones and an 8px radius to match
   the card language; standard_cart has no .alert override, so (0,2,0) beats Bootstrap. */
.ncck-cart .alert {
  border-radius: var(--ncck-radius);
  border-width: 1px;
}
.ncck-cart .alert-success {
  color: var(--ncck-success);
  border-color: color-mix(in srgb, var(--ncck-success) 32%, var(--ncck-surface));
  background-color: color-mix(in srgb, var(--ncck-success) 7%, var(--ncck-surface));
}
.ncck-cart .alert-danger {
  color: var(--ncck-danger);
  border-color: color-mix(in srgb, var(--ncck-danger) 32%, var(--ncck-surface));
  background-color: color-mix(in srgb, var(--ncck-danger) 7%, var(--ncck-surface));
}
.ncck-cart .alert-warning {
  color: var(--ncck-warning);
  border-color: color-mix(in srgb, var(--ncck-warning) 32%, var(--ncck-surface));
  background-color: color-mix(in srgb, var(--ncck-warning) 8%, var(--ncck-surface));
}
.ncck-cart .alert-info {
  color: var(--ncck-primary);
  border-color: color-mix(in srgb, var(--ncck-primary) 28%, var(--ncck-surface));
  background-color: color-mix(in srgb, var(--ncck-primary) 6%, var(--ncck-surface));
}
.ncck-cart .alert-link {
  color: var(--ncck-primary);
  text-decoration: underline;
}
.ncck-cart .alert-link:hover {
  color: var(--ncck-primary-hover);
}

/* -------------------------------------------- checkout: account switcher */
.ncck-cart .account {
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
  background: var(--ncck-surface);
}
.ncck-cart .account:hover {
  border-color: var(--ncck-primary);
}
.ncck-cart .account.active {
  border-color: var(--ncck-primary);
  box-shadow: inset 0 0 0 1px var(--ncck-primary);
}
.ncck-cart .account .address {
  color: var(--ncck-text);
}
.ncck-cart .account-select:focus-visible {
  outline: 2px solid var(--ncck-primary);
  outline-offset: 2px;
}
.ncck-cart .label-default {
  background-color: var(--ncck-text-muted);
  color: var(--ncck-surface);
}
.ncck-cart .label-info {
  background-color: var(--ncck-primary);
  color: var(--ncck-surface);
}

/* --------------------------------------------- checkout: payment methods */
/* Payment surface must never read blank (ORDERFORM-PLAN §D-2 C4). The gateway ...git */
.ncck-cart #paymentGatewaysContainer {
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
  background: var(--ncck-surface);
}
.ncck-cart .gateway-errors {
  color: var(--ncck-danger);
  border-color: var(--ncck-danger);
}
/* stored / existing cards grid */
.ncck-cart .cc-input-container,
.ncck-cart .existing-cc-grid {
  border-color: var(--ncck-border);
}
.ncck-cart .paymethod-info {
  color: var(--ncck-text);
  border-color: var(--ncck-border);
}
.ncck-cart .existing-card:focus-visible {
  outline: 2px solid var(--ncck-primary);
  outline-offset: 2px;
}
.ncck-cart .new-card-container {
  color: var(--ncck-text);
}

/* checkout headline total (alert-success .large-text) + secure msg */
.ncck-cart .large-text {
  color: var(--ncck-success);
  border-color: var(--ncck-success);
}
.ncck-cart .checkout-security-msg {
  color: var(--ncck-warning);
  border-color: var(--ncck-warning);
}
.ncck-cart .checkout-error-feedback {
  color: var(--ncck-danger);
  border-color: var(--ncck-danger);
}

/* password strength meter (new-account checkout) */
.ncck-cart .password-strength-meter .progress {
  background-color: var(--ncck-bg);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius-sm);
}
.ncck-cart .password-strength-meter .progress-bar-success {
  background-color: var(--ncck-success);
}

/* ------------------------------------------- order-complete confirmation */
.ncck-cart .order-confirmation {
  color: var(--ncck-primary);
  border-color: var(--ncck-primary);
}
.ncck-cart .order-confirmation span {
  color: var(--ncck-text);
  font-weight: 600;
}

/* ------------------------------------------------ error / fraud headings */
.ncck-cart .error-heading {
  color: var(--ncck-danger);
  border-color: var(--ncck-danger);
}

/* ---------------------------------------- shell footer -> compact (§D-2:54) ...git */
body.ncck-public:has(.ncck-cart) .ncck-footer-grid {
  display: none;
}

/* ============================================================================ ...git */

/* ---- cart-empty (#89) --------------------------------------------------- */
/* W0·icon third batch (CEO audit 2026-07-24): retire this family in favor of
   the shared .ncck-empty component (single source of truth in ncck-public.css,
   which the cart loads):
     .ncck-cart-empty        shell geometry → .ncck-empty (flex column / centered / 48px 24px)
     .ncck-cart-empty-icon   72px circle + light-blue background + 28px glyph →
                             .ncck-empty-ico (44px unadorned monochrome glyph)
                             ← the specifically called-out colored empty-state icon
     .ncck-cart-empty-title  → .ncck-empty-title
     .ncck-cart-empty-sub    → .ncck-empty-sub
   The two remaining classes have non-icon-system responsibilities, so retain them:
     .ncck-cart-empty-cta    CTA minimum width (cart button uses .ncck-cart .btn-primary skin)
     .ncck-cart-empty-return secondary return-link spacing */
.ncck-cart-empty-cta {
  min-width: 220px;
}
.ncck-cart-empty-return {
  margin-top: 14px;
}

/* ---- cart-error demo panel (#90) — see viewcart.tpl doc-comment for the ...git */
.ncck-cart-loadfail {
  display: none;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--ncck-danger);
  border-radius: var(--ncck-radius);
  background: color-mix(in srgb, var(--ncck-danger) 6%, var(--ncck-surface));
  color: var(--ncck-text);
}
.ncck-cart-loadfail > .fa-exclamation-circle {
  color: var(--ncck-danger);
  font-size: 22px;
  line-height: 1.3;
}
.ncck-cart-loadfail-title {
  color: var(--ncck-text);
  font-weight: 700;
  margin: 0 0 4px;
}
.ncck-cart-loadfail-sub {
  color: var(--ncck-text-muted);
  margin: 0 0 14px;
}
.ncck-cart-demo-error .view-cart-items,
.ncck-cart-demo-error .ncck-cart-items-heading,
.ncck-cart-demo-error .ncck-cart-items-card,   /* line-item white-card shell (added 2026-07-24) */
.ncck-cart-demo-error .view-cart-empty {
  display: none;
}
.ncck-cart-demo-error .ncck-cart-loadfail {
  display: flex;
}

/* ---- cart-populated (#91) ------------------------------------------------ */
.ncck-cart-items-heading {
  color: var(--ncck-text);
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
}
.ncck-cart-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ncck-radius-sm);
  background: color-mix(in srgb, var(--ncck-primary) 8%, var(--ncck-surface));
  color: var(--ncck-primary);
  margin-right: 10px;
  vertical-align: middle;
}
/* 2026-07-24 populated-cart fix: native `#order-standard_cart .view-cart-items .item
   span:not(.caret):not(.renewal-price){display:block}` (1,4,1) makes the icon block-level,
   putting it on its own line and the title on the next. Reserve icon width in the
   icon-bearing column and absolutely position the icon at the row start. This selector
   has equal specificity (1,4,1) and loads later; :has only narrows icon-bearing columns,
   while unsupported browsers retain the original block-icon behavior without functional impact. */
#order-standard_cart.ncck-viewcart .view-cart-items .item .row > div:first-child {
  position: relative;
  padding-left: 67px;   /* 15 (column inset) + 40 (icon) + 12 (gap); rows without icons
                           (add-ons/renewals/upgrades) retain the same slot for aligned titles */
}
#order-standard_cart.ncck-viewcart .view-cart-items .item span.ncck-cart-item-icon {
  position: absolute;
  left: 15px;
  top: 1px;
  display: flex;
  margin-right: 0;
}
.ncck-cart .view-cart-items .item {
  transition: background-color .15s ease;
}
.ncck-cart .view-cart-items .item:hover {
  background: var(--ncck-bg);
}
#order-standard_cart .ncck-cart-credit-notice {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--ncck-border);
  border-left: 3px solid var(--ncck-primary);
  border-radius: var(--ncck-radius-sm);
  background: var(--ncck-surface);
}
#order-standard_cart .ncck-cart-credit-notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ncck-text);
  font-size: 13px;
  font-weight: 600;
}
#order-standard_cart .ncck-cart-credit-notice-head strong {
  color: var(--ncck-text);
  font-variant-numeric: tabular-nums;
}
#order-standard_cart .ncck-cart-credit-notice p {
  margin: 4px 0 0;
  color: var(--ncck-text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.ncck-cart-secure-note {
  color: var(--ncck-text-muted);
  font-size: 13px;
  text-align: center;
  margin: 10px 0;
}
.ncck-cart-secure-note .fa-lock {
  margin-right: 5px;
}

/* ---- checkout-processing (#92) + checkout-submit-error (#93): REMOVED. ...git */

/* ---- order-created (#94; B17R rework — paid-success screen rebuilt to ...git */
.ncck-cart-oc-title {
  margin: 0 0 4px;
}
.ncck-cart-oc-subtitle {
  color: var(--ncck-text-muted);
  margin: 0 0 24px;
}
.ncck-cart-oc-card {
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
  padding: 28px 32px;
}
.ncck-cart-paid-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ncck-success);
  border-radius: var(--ncck-radius);
  background: color-mix(in srgb, var(--ncck-success) 6%, var(--ncck-surface));
  margin-bottom: 24px;
}
.ncck-cart-paid-banner .fa-check-circle {
  color: var(--ncck-success);
  font-size: 22px;
  margin-top: 2px;
}
.ncck-cart-paid-title {
  color: var(--ncck-success);
  font-weight: 700;
  margin: 0 0 4px;
}
.ncck-cart-paid-sub {
  color: var(--ncck-text-muted);
  margin: 0;
}
.ncck-cart-order-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin: 0 0 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ncck-border);
}
.ncck-cart-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--ncck-border);
}
/* last row in each column drops its own rule so the container border-bottom
   above reads as one continuous divider before the tracker (desktop). */
.ncck-cart-order-details-col .ncck-cart-detail-row:last-child {
  border-bottom: none;
}
.ncck-cart-detail-label {
  color: var(--ncck-text-muted);
}
.ncck-cart-detail-value {
  color: var(--ncck-text);
  font-weight: 600;
}
.ncck-cart-status-paid {
  color: var(--ncck-success);
}
.ncck-cart-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 24px 0 28px;
  gap: 8px;
}
.ncck-cart-progress-step {
  flex: 1;
  text-align: center;
  position: relative;
}
.ncck-cart-progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--ncck-border);
  z-index: 0;
}
.ncck-cart-progress-step.is-complete:not(:last-child)::after {
  background: var(--ncck-success);
}
.ncck-cart-progress-marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ncck-border);
  background: var(--ncck-surface);
  color: var(--ncck-surface);
  margin-bottom: 8px;
}
.ncck-cart-progress-step.is-complete .ncck-cart-progress-marker {
  background: var(--ncck-success);
  border-color: var(--ncck-success);
}
.ncck-cart-progress-step.is-current .ncck-cart-progress-marker {
  border-color: var(--ncck-primary);
}
.ncck-cart-progress-step.is-current .ncck-cart-progress-marker::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ncck-primary);
}
.ncck-cart-progress-text {
  display: block;
}
.ncck-cart-progress-label {
  display: block;
  color: var(--ncck-text);
  font-weight: 600;
  font-size: 13px;
}
.ncck-cart-progress-state {
  display: block;
  font-size: 12px;
  color: var(--ncck-text-muted);
}
.ncck-cart-progress-step.is-complete .ncck-cart-progress-state {
  color: var(--ncck-success);
}
.ncck-cart-progress-step.is-current .ncck-cart-progress-state {
  color: var(--ncck-primary);
}
.ncck-cart-order-ctas .btn {
  min-width: 160px;
  margin: 0 6px;
}
.ncck-cart-provisioning-note {
  text-align: center;
  color: var(--ncck-text-muted);
  font-size: 13px;
  margin-top: 14px;
}

/* ---- error.tpl visual harmonization (icon-circle, same family as
   cart-error) — $errortitle content/logic is untouched, wrapper only. ---- */
.ncck-cart-error-panel {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* .ncck-cart-error-icon (36px circle) was retired in W0·icon third batch;
   the shared .ncck-ico.ncck-ico--danger container primitive now handles it (error.tpl:22). */

/* ---- mobile pairing (B19 debt note: this is the first @media rule this ...git */
@media (max-width: 767.98px) {
  /* The retired .ncck-cart-empty mobile padding is now provided centrally by
     .ncck-empty @media(max-width:767.98px){padding:40px 16px} (W0·icon third batch). */
  .ncck-cart-empty-cta {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .ncck-cart-loadfail {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }
  /* order-created: dissolve the desktop wrapper card so the banner, details and
     tracker below each read as their own card, per mobile-order-created.png. */
  .ncck-cart-oc-card {
    border: none;
    background: transparent;
    padding: 0;
  }
  .ncck-cart-order-details {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 20px;
    padding: 4px 16px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
  }
  /* single stacked column: restore per-row dividers, drop only the final one. */
  .ncck-cart-order-details-col .ncck-cart-detail-row:last-child {
    border-bottom: 1px solid var(--ncck-border);
  }
  .ncck-cart-order-details-col:last-child .ncck-cart-detail-row:last-child {
    border-bottom: none;
  }
  .ncck-cart-order-ctas .btn {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
  }
  .ncck-cart-progress {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 20px;
    padding: 20px 18px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
  }
  .ncck-cart-progress-step {
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    width: 100%;
    padding-bottom: 22px;
  }
  .ncck-cart-progress-step:last-child {
    padding-bottom: 0;
  }
  /* vertical connector between markers (30px marker, centre at 15px); the
     is-complete tint rule above paints it green for finished steps. */
  .ncck-cart-progress-step:not(:last-child)::after {
    display: block;
    top: 32px;
    bottom: -6px;
    left: 15px;
    width: 2px;
    height: auto;
  }
  .ncck-cart-progress-marker {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

/* ============================================================================ ...git */

/* ---- processing: checkout button loading variant ------------------------ */
.ncck-cart #checkout .ncck-cart-chk-busy {
  display: none;
}
.ncck-cart #checkout.ncck-cart-chk-loading .ncck-cart-chk-idle,
.ncck-cart-demo-processing #checkout .ncck-cart-chk-idle {
  display: none;
}
.ncck-cart #checkout.ncck-cart-chk-loading .ncck-cart-chk-busy,
.ncck-cart-demo-processing #checkout .ncck-cart-chk-busy {
  display: inline;
}
.ncck-cart #checkout.ncck-cart-chk-loading,
.ncck-cart-demo-processing #checkout {
  background-color: color-mix(in srgb, var(--ncck-primary) 14%, var(--ncck-surface));
  border-color: color-mix(in srgb, var(--ncck-primary) 30%, var(--ncck-surface));
  color: var(--ncck-primary);
  cursor: wait;
  pointer-events: none;
}
.ncck-cart-chk-busy .fa-circle-notch {
  margin-right: 6px;
}

/* don't-close reassurance note (hidden until the processing state) */
.ncck-cart-chk-processing-note {
  display: none;
  color: var(--ncck-text-muted);
  font-size: 13px;
  text-align: center;
  margin: 10px 0;
}
.ncck-cart-chk-processing-note .fa-shield-alt {
  margin-right: 5px;
  color: var(--ncck-primary);
}
.ncck-cart #checkout.ncck-cart-chk-loading ~ .ncck-cart-chk-processing-note,
.ncck-cart-demo-processing .ncck-cart-chk-processing-note {
  display: block;
}
/* in the processing state the secure-note + continue-shopping give way to the
   don't-close note, matching the right column of checkout-processing.png. */
.ncck-cart #checkout.ncck-cart-chk-loading ~ .ncck-cart-secure-note,
.ncck-cart #checkout.ncck-cart-chk-loading ~ #continueShopping,
.ncck-cart-demo-processing .ncck-cart-secure-note,
.ncck-cart-demo-processing #continueShopping {
  display: none;
}

/* ---- submit-error: red panel at the top of the Order Summary ------------ */
.ncck-cart-chk-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--ncck-danger);
  border-radius: var(--ncck-radius-sm);
  background: color-mix(in srgb, var(--ncck-danger) 6%, var(--ncck-surface));
}
.ncck-cart-chk-error > .fa-exclamation-triangle {
  color: var(--ncck-danger);
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}
.ncck-cart-chk-error-title {
  color: var(--ncck-danger);
  font-weight: 700;
  margin: 0 0 4px;
}
.ncck-cart-chk-error-sub {
  color: var(--ncck-text-muted);
  margin: 0;
}
/* retry / change-payment actions (full-width, stacked) */
.ncck-cart-chk-actions {
  margin-bottom: 12px;
}
.ncck-cart-chk-actions .btn {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
.ncck-cart-chk-actions .btn:last-child {
  margin-bottom: 0;
}
/* in the submit-error state the normal checkout button + continue-shopping give ...git */
.ncck-cart-demo-submiterror #checkout,
.ncck-cart-demo-submiterror #continueShopping {
  display: none;
}

/* ---- CHK-R mobile pairing (matches the file's single-breakpoint policy) -- */
@media (max-width: 767.98px) {
  .ncck-cart-chk-error {
    padding: 14px;
  }
  .ncck-cart-chk-processing-note {
    margin: 12px 0;
  }
}

/* ============================== C2: Configure product page (CEO 1:1 correction, 2026-07-23) ...git */

/* The domain sidebar is no longer rendered by the template, so the configuration
   body fills the available width. The ID prefix (1,2,0) overrides the native
   #order-standard_cart .cart-body (1,1,0) sidebar reservation (855px not filled
   in browser evidence). */
#order-standard_cart.ncck-conf .cart-body {
  width: 100%;
  float: none;
  margin: 0;
}

/* Page title "Configure" — Lagom main-header-title above the card (correction #2: restore H1). */
.ncck-conf .header-lined {
  margin: 4px 0 20px;
}
.ncck-conf .header-lined h1 {
  margin: 0;
  color: var(--ncck-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
}

/* Left white card: wraps group-product title, product name, description, and all configuration sections (Lagom panel.panel-form). */
.ncck-conf-card {
  padding: 28px 30px;
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
}
/* Group name - product name (Lagom h2.gap-2x, 22px/900). */
.ncck-conf-grpprod {
  margin: 0 0 16px;
  color: var(--ncck-text);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
}
/* Product name (Lagom h3, 36px/700). */
.ncck-conf-prodname {
  margin: 0 0 16px;
  color: var(--ncck-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
}

/* Rich product-description HTML — presentation layout only; description HTML is unchanged. */
.ncck-conf-desc {
  margin-bottom: 8px;
}
/* Hide a product-name h3 embedded in the description because it duplicates .ncck-conf-prodname above. */
.ncck-conf-desc > h3:first-child {
  display: none;
}
/* Description body paragraphs (Lagom muted 14px). */
.ncck-conf-desc p {
  margin: 0 0 16px;
  color: var(--ncck-text-muted);
  font-size: 14px;
  line-height: 1.65;
}
/* Included/Available/Notes headings (correction #3: Lagom h4, 26px/300 light plain text, without card, outline, or blue check). */
.ncck-conf-desc h4 {
  margin: 20px 0 12px;
  color: var(--ncck-text);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.25;
}
/* Specification list — plain Lagom disc ul (correction #3: remove blue checks and card). */
.ncck-conf-desc ul {
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: disc;
}
.ncck-conf-desc ul li {
  margin: 4px 0;
  color: var(--ncck-text);
  font-size: 14px;
  line-height: 1.6;
}
/* Cloud-type description table — plain Lagom table without a card. */
.ncck-conf-desc table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}
.ncck-conf-desc table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ncck-border);
  color: var(--ncck-text);
  font-size: 14px;
}
.ncck-conf-desc table tr:last-child td {
  border-bottom: 0;
}
.ncck-conf-desc table td:first-child {
  width: 38%;
  color: var(--ncck-text-muted);
  font-weight: 600;
}

/* Section heading (sub-heading): remove native blue-background badge; shared by the configure/checkout cart family. ...git */
.ncck-conf .sub-heading {
  margin: 24px 0 12px;
}
.ncck-conf .sub-heading .primary-bg-color {
  background: transparent;
  padding: 0;
  color: var(--ncck-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
/* Configure-specific: align section headings to Lagom confproduct's 26px/300 light type.
   The ID prefix (1,3,0) preserves precedence over the shared rule above (0,3,0). */
#order-standard_cart.ncck-confprod .sub-heading .primary-bg-color {
  font-size: 26px;
  font-weight: 300;
  line-height: 1.25;
}

/* Right-side Configuration Summary (correction #4) — Lagom white panel.
   The ID prefix (1,2,0) overrides the native .order-summary dark-gray background and white text. */
#order-standard_cart.ncck-conf .order-summary {
  padding: 22px 24px;
  background: var(--ncck-surface);
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius);
  color: var(--ncck-text);
}
#order-standard_cart.ncck-conf .order-summary h2 {
  margin: 0 0 16px;
  color: var(--ncck-text);
  font-size: 20px;
  font-weight: 300;
  background: transparent;
}
.ncck-conf #btnCompleteProductConfig {
  margin-top: 16px;
  width: 100%;
}

/* C2 diff3: sticky right-side order summary (aligned with w8 sidebar-sticky/sidebar-sticky-summary).
   On desktop, sticky plus align-self:flex-start avoids flex stretching that breaks sticky; top clears the fixed header. */
@media (min-width: 992px) {
  #order-standard_cart.ncck-conf .secondary-cart-sidebar {
    position: sticky;
    top: 90px;
    align-self: flex-start;
  }
}

/* Breakpoints. */
@media (max-width: 991.98px) {
  .ncck-conf .secondary-cart-body,
  .ncck-conf .secondary-cart-sidebar {
    width: 100%;
    float: none;
  }
  .ncck-conf .secondary-cart-sidebar {
    margin-top: 20px;
  }
}
@media (max-width: 767.98px) {
  .ncck-conf .header-lined h1 {
    font-size: 28px;
  }
  .ncck-conf-prodname {
    font-size: 28px;
  }
  .ncck-conf-desc h4,
  #order-standard_cart.ncck-confprod .sub-heading .primary-bg-color {
    font-size: 22px;
  }
  .ncck-conf-card {
    padding: 20px 18px;
  }
}

/* Cloud-group NCCK card (ncckCloudRows, products.tpl): the nsrv-rbuy white-text
   rule was scoped to the servers page, leaving blue text on blue background in cart.
   Add it to this scope. */
.ncck-cloud-list .nsrv-rbuy {
  color: #fff;
}
.ncck-cloud-list .nsrv-rbuy:hover {
  color: #fff;
}

/* ============================== Pre-Install System OS selector (reference image 1:1, CEO 2026-07-23) ...git */
.ncck-osblock { margin: 8px 0 4px; }

/* Section heading with a left blue vertical accent. */
.ncck-os-title {
  position: relative;
  margin: 0 0 20px;
  padding-left: 16px;
  color: var(--ncck-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.ncck-os-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 18px;
  border-radius: 2px;
  background: var(--ncck-primary);
}

/* Three-column grid (eight cards = 3+3+2). */
.ncck-osgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Each card is a label wrapping a radio control. */
.ncck-oscard {
  position: relative;
  display: block;
  border: 1px solid var(--ncck-border);
  border-radius: var(--ncck-radius-lg);
  background: var(--ncck-surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ncck-oscard:hover {
  border-color: rgba(15, 92, 255, 0.35);   /* same blue as --ncck-ring and the nsrv filter-chip hover */
}

/* Hide the native radio while preserving accessibility and keyboard support. */
.ncck-os-radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Upper section: colored logo and name. */
.ncck-os-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
}
.ncck-os-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 40px; height: 40px;
}
.ncck-os-ico .ncck-oslogo { width: 40px; height: 40px; display: block; }
.ncck-os-name {
  color: var(--ncck-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* Lower section: styled version <select> (appearance:none plus custom chevron, specific to this reference component). */
.ncck-os-ver {
  position: relative;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--ncck-border);
  background: var(--ncck-bg);
}
.ncck-os-select {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 15px 44px 15px 28px;
  border: 0;
  background: transparent;
  color: var(--ncck-text-muted);
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ncck-os-select:focus-visible { outline: 2px solid var(--ncck-primary); outline-offset: -2px; }
.ncck-os-chev {
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  color: var(--ncck-text-muted);
  pointer-events: none;
}

/* Selected state: 2px blue border, blue divider, and visible ribbon (:has current state plus .is-selected SSR fallback). */
.ncck-oscard.is-selected,
.ncck-oscard:has(.ncck-os-radio:checked) {
  border-color: var(--ncck-primary);
  box-shadow: inset 0 0 0 1px var(--ncck-primary);
}
.ncck-oscard.is-selected .ncck-os-ver,
.ncck-oscard:has(.ncck-os-radio:checked) .ncck-os-ver {
  border-top-color: var(--ncck-primary);
}

/* Top-right triangular ribbon with white check (hidden by default). */
.ncck-os-ribbon {
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  overflow: hidden;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
  z-index: 2;
}
.ncck-oscard.is-selected .ncck-os-ribbon,
.ncck-oscard:has(.ncck-os-radio:checked) .ncck-os-ribbon {
  opacity: 1;
}
.ncck-os-ribbon::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 46px 46px 0;              /* right triangle filling the top-right corner */
  border-color: transparent var(--ncck-primary) transparent transparent;
}
.ncck-os-ribbon svg {
  position: absolute;
  top: 6px; right: 5px;
}

/* Responsive: two columns on tablet, one on phone. */
@media (max-width: 991.98px) {
  .ncck-osgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .ncck-osgrid { grid-template-columns: 1fr; }
  .ncck-os-head { padding: 18px 20px; }
  .ncck-os-select { padding: 13px 40px 13px 20px; }
}

/* ============================================================================ ...git */
#order-standard_cart.ncck-conf .ncck-cfg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  margin: 8px 0 4px;
}
#order-standard_cart.ncck-conf .ncck-cfg-section { min-width: 0; }
#order-standard_cart.ncck-conf .ncck-cfg-section--full { grid-column: 1 / -1; }
#order-standard_cart.ncck-conf .ncck-cfg-sechead { margin: 0 0 10px; }
#order-standard_cart.ncck-conf .ncck-cfg-sectitle {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid var(--ncck-primary);
  color: var(--ncck-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  background: transparent;
}
#order-standard_cart.ncck-conf .ncck-cfg-secbody .form-group { margin-bottom: 0; }
/* Hide the native select container after the OS grid takes over (JS adds the class;
   failed/unloaded JS leaves the native select available without functional degradation). */
#order-standard_cart.ncck-conf .ncck-os-native-hidden { display: none !important; }
/* OS card-grid spacing aligned with w8 (14px gap). */
#order-standard_cart.ncck-conf .ncck-os-section .ncck-osgrid { gap: 14px; margin-top: 4px; }

/* Full-width section headings (billing cycle / configure server and similar sub-headings)
   use a left blue vertical bar and 15px/600 left-aligned type, matching configuration
   titles rather than the previously mistaken 26px/300 oversized light type. The ID
   prefix overrides the old value around line 1186. */
#order-standard_cart.ncck-confprod .sub-heading {
  border-left: 3px solid var(--ncck-primary);
  padding-left: 12px;
  text-align: left;   /* override standard_cart base text-align:center; align the blue bar with the text */
}
#order-standard_cart.ncck-confprod .sub-heading .primary-bg-color {
  padding: 0;          /* remove the base's 17px horizontal padding for centered separators */
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  #order-standard_cart.ncck-conf .ncck-cfg-grid { grid-template-columns: 1fr; }
}

/* ============================================================================ ...git */
#order-standard_cart.ncck-conf .ncck-sum-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ncck-text);
}
#order-standard_cart.ncck-conf .ncck-sum-price { white-space: nowrap; }
#order-standard_cart.ncck-conf .ncck-sum-list {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  background: var(--ncck-bg);      /* gray box */
  border-radius: 8px;
}
#order-standard_cart.ncck-conf .ncck-sum-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--ncck-text-muted);   /* faded */
  line-height: 1.5;
}
#order-standard_cart.ncck-conf .ncck-sum-item .ncck-sum-ival { white-space: nowrap; }
#order-standard_cart.ncck-conf .ncck-sum-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ncck-border);
}
#order-standard_cart.ncck-conf .ncck-sum-total-label { font-size: 13px; color: var(--ncck-text-muted); }
#order-standard_cart.ncck-conf .ncck-sum-total-amt {
  font-size: 30px;
  font-weight: 700;
  color: var(--ncck-text);
  line-height: 1.1;
}
#order-standard_cart.ncck-conf .ncck-sum-actions { margin-top: 18px; }

/* ============================================================================ ...git */
/* 1. Align the content container with NCCK navigation — fix the cart's Bootstrap
   .container (max 1140) making content narrower than w8. ...git */
.container:has(#order-standard_cart) {
  max-width: 1360px;
  padding-left: 40px;
  padding-right: 40px;
}
/* 2. "Configure" H1 = w8 40px/900 (WHMCS 10 default was 36px/700). */
#order-standard_cart.ncck-conf .header-lined h1 {
  font-size: 40px;
  font-weight: 900;
  line-height: 52px;
}
/* 3. H1 → title-card spacing (CEO red box): align with w8 (H1→H2 about 73px = ~49 gap + 24 card padding). */
#order-standard_cart.ncck-conf .header-lined {
  margin-bottom: 49px;   /* plus 24px card padding-top = H1→H2 about 73px (w8) */
}
/* 4. Title card: 14px radius (w8 --radius-lg) plus 24px padding (w8 panel-body). */
#order-standard_cart.ncck-conf .ncck-conf-card {
  border-radius: 14px;
  padding: 24px;
}
/* 5. Align group-product H2 line height with w8 (52px) to preserve title-area vertical rhythm. */
#order-standard_cart.ncck-conf .ncck-conf-grpprod {
  line-height: 52px;
}
/* 6. Right-side Configuration Summary card radius: 14px (w8). */
#order-standard_cart.ncck-conf .order-summary {
  border-radius: 14px;
}

/* ============================== Detail polish (confproduct nk-polish moved into the cart layer; cart does not receive the public-site overlay, so scope it locally) ============================== */
/* 1. Soft shadow for the left white card. */
#order-standard_cart.ncck-conf .ncck-conf-card {
  box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04), 0 12px 30px -18px rgba(14, 24, 48, 0.14);
}
/* 2. Blue-tinted shadow for the right summary card. */
#order-standard_cart.ncck-conf .order-summary {
  box-shadow: 0 1px 2px rgba(14, 24, 48, 0.05), 0 18px 42px -20px rgba(15, 92, 255, 0.18);
}
/* 3. Hover feedback for configuration sections (add transparent base border and border-box to prevent layout shift). */
#order-standard_cart.ncck-conf .ncck-cfg-section {
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--ncck-radius, 8px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#order-standard_cart.ncck-conf .ncck-cfg-section:hover {
  border-color: rgba(15, 92, 255, 0.28);
}
/* 4. OS-card hover lift and selected shadow. */
#order-standard_cart.ncck-conf .ncck-oscard {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
#order-standard_cart.ncck-conf .ncck-oscard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(15, 92, 255, 0.3);
}
#order-standard_cart.ncck-conf .ncck-oscard.is-selected {
  box-shadow: 0 8px 20px -12px rgba(15, 92, 255, 0.45);
}
/* 5. Continue primary-button finish (skin only; do not change markup/id/submit). */
#order-standard_cart .btn-primary.btn-lg {
  background: linear-gradient(180deg, var(--ncck-primary), var(--ncck-primary-hover));
  border-color: var(--ncck-primary-hover);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 10px 22px -8px rgba(15, 92, 255, 0.6);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
#order-standard_cart .btn-primary.btn-lg:hover {
  transform: translateY(-1px);
}

/* ---- Root-password utility bar (CEO directive 2026-07-25: auto-generate password,
   while allowing user edits). The password field remains the native input with name/id/type
   unchanged; these small buttons only expose the generated value, let the user replace it,
   and make copying convenient. */
.ncck-cfg-pwbar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.ncck-cfg-pwbtn {
    padding: 4px 10px;
    border: 1px solid var(--ncck-border, #e2e8f0);
    border-radius: var(--ncck-radius-sm, 6px);
    background: var(--ncck-surface, #fff);
    color: var(--ncck-text-muted, #64748b);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ncck-cfg-pwbtn:hover,
.ncck-cfg-pwbtn:focus-visible {
    border-color: var(--ncck-primary, #0f5cff);
    color: var(--ncck-primary, #0f5cff);
    background: rgba(15, 92, 255, 0.06);
}

/* ---- Configure-page product description: remove the native WHMCS gray background
   (CEO report 2026-07-25: "it is still gray"). Core WHMCS CSS gives .product-info a
   #f8f8f8 gray block, while cards, summary rail, and OS selector all use white backgrounds,
   subtle borders, and radius. Cloud servers and dedicated servers (HKDS01) were verified to
   use the same styling, so this rule safely gives both the site's unified card treatment. */
#order-standard_cart .product-info.ncck-conf-info {
    padding: 20px 24px;
    border: 1px solid var(--ncck-border, #e2e8f0);
    border-radius: var(--ncck-radius, 12px);
    background: var(--ncck-surface, #fff);
}

/* ══════════════════════════════════════════════════════════════════════════
   Checkout refinement (2026-07-26, based on output/design/checkout-refined-v1.png).
   Previously: single full-width column, no order summary or step indicator, a centered
   submit button, and a yellow security warning at the page bottom (including visitor IP).
   Now: two columns, a right-side order summary containing the submit button, three-step
   progress, and a secure-checkout card.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- Page header: title on the left, three-step progress on the right. ---- */
.ncck-co-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ncck-co-headtext h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.4px; }
.ncck-co-headtext p { margin: 0; color: var(--ncck-text-muted); font-size: 14px; }

.ncck-co-steps { display: flex; align-items: center; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.ncck-co-step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; padding: 0 26px; }
.ncck-co-step + .ncck-co-step::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -18px;
    width: 36px;
    border-top: 1px dashed var(--ncck-border);
}
.ncck-co-stepno {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ncck-border);
    background: #fff;
    color: var(--ncck-text-muted);
    font-size: 13px;
    font-weight: 600;
}
.ncck-co-steplbl { color: var(--ncck-text-muted); font-size: 12.5px; }
.ncck-co-step.is-current .ncck-co-stepno { border-color: var(--ncck-primary); background: var(--ncck-primary); color: #fff; }
.ncck-co-step.is-current .ncck-co-steplbl { color: var(--ncck-primary); font-weight: 600; }
.ncck-co-step.is-done .ncck-co-stepno { border-color: var(--ncck-border); color: var(--ncck-text); }

/* ---- Two columns. ---- */
.ncck-co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.ncck-co-main { display: grid; min-width: 0; gap: 16px; }
.ncck-co-side { min-width: 0; position: sticky; top: 88px; display: grid; gap: 16px; }

/* ---- Sign-in notice and left-column section cards. ---- */
.ncck-cart .ncck-co-account-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 50px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: #fff;
}
.ncck-co-account-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 13.5px;
}
.ncck-co-account-copy i { color: var(--ncck-primary); font-size: 16px; }
.ncck-co-account-actions { flex: none; float: none !important; }
.ncck-cart .ncck-co-account-actions .btn {
    min-height: 34px;
    padding: 6px 12px;
    border-color: transparent;
    background: transparent;
    color: var(--ncck-primary);
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 600;
}
.ncck-cart .ncck-co-account-actions .btn:hover,
.ncck-cart .ncck-co-account-actions .btn:focus {
    border-color: rgba(15, 92, 255, .22);
    background: rgba(15, 92, 255, .06);
    color: var(--ncck-primary-hover);
}

.ncck-co-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: #fff;
}
.ncck-co-cardtitle {
    margin: 0 0 16px;
    color: var(--ncck-text);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
}
.ncck-co-card .sub-heading {
    margin: 18px 0 14px;
}
.ncck-co-card .sub-heading:first-child { margin-top: 0; }
.ncck-co-card .form-group { margin-bottom: 14px; }
.ncck-co-card .row:last-child .form-group { margin-bottom: 0; }
.ncck-co-login .text-center { text-align: right !important; }
.ncck-co-login #btnExistingLogin { min-width: 132px; }
.ncck-co-captcha .margin-bottom { margin-bottom: 0 !important; }
.ncck-co-payment #applyCreditContainer.ncck-co-credit {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--ncck-border);
    border-left: 3px solid var(--ncck-primary);
    border-radius: var(--ncck-radius-sm);
    background: var(--ncck-surface);
}
#order-standard_cart .ncck-co-credit-head {
    display: grid;
    gap: 3px;
    margin-bottom: 12px;
}
#order-standard_cart .ncck-co-credit-head strong {
    color: var(--ncck-text);
    font-size: 14px;
    font-weight: 650;
}
#order-standard_cart .ncck-co-credit-head p {
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    line-height: 1.45;
}
#order-standard_cart .ncck-co-credit-options {
    display: grid;
    gap: 8px;
}
#order-standard_cart .ncck-co-credit-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: var(--ncck-text);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}
#order-standard_cart .ncck-co-credit-option input[type="radio"] {
    flex: none;
    margin: 3px 0 0;
    accent-color: var(--ncck-primary);
}
#order-standard_cart .ncck-co-credit-option .iradio_square-blue {
    flex: none;
    margin-top: 1px;
}
#order-standard_cart .ncck-co-credit-option > span {
    min-width: 0;
}
.ncck-co-payment #paymentGatewaysContainer { margin-bottom: 0; }
.ncck-co-payment #paymentGatewaysContainer > p { margin-bottom: 14px; }

.ncck-co-marketing {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 0;
    color: var(--ncck-text);
    cursor: pointer;
}
.ncck-co-marketing input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--ncck-primary);
}
.ncck-co-marketing span { display: grid; gap: 2px; }
.ncck-co-marketing strong { font-size: 13.5px; font-weight: 500; }
.ncck-co-marketing small { color: var(--ncck-text-muted); font-size: 12.5px; }

/* ---- Order summary. ---- */
.ncck-co-summary {
    padding: 24px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: #fff;
}
.ncck-co-sumtitle { margin: 0 0 18px; font-size: 16px; font-weight: 600; }
.ncck-co-item { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--ncck-border); }
.ncck-co-itemtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ncck-co-itemcopy { min-width: 0; }
.ncck-co-itemname { color: var(--ncck-text); font-size: 15px; font-weight: 600; }
.ncck-co-itemsub { margin-top: 4px; color: var(--ncck-text-muted); font-size: 13px; }
.ncck-co-itemprice { display: grid; flex: none; justify-items: end; gap: 2px; text-align: right; }
.ncck-co-itemprice strong { color: var(--ncck-text); font-size: 14px; font-weight: 650; }
.ncck-co-itemprice span,
.ncck-co-itemprice small { color: var(--ncck-text-muted); font-size: 12px; font-weight: 400; }
.ncck-co-itemmeta {
    display: grid;
    gap: 3px;
    margin: 10px 0 0;
    padding: 0;
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    list-style: none;
}
.ncck-co-addonrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--ncck-border);
}
.ncck-co-addonrow > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ncck-co-addonrow > div:first-child strong { color: var(--ncck-text); font-size: 13px; font-weight: 550; }
.ncck-co-addonrow > div:first-child small { color: var(--ncck-text-muted); font-size: 12px; }
.ncck-co-itemacts { display: flex; gap: 16px; margin-top: 10px; }
.ncck-co-edit, .ncck-co-remove {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    cursor: pointer;
}
.ncck-co-edit { color: var(--ncck-primary); text-decoration: none; }
.ncck-co-remove { color: var(--ncck-danger); }
.ncck-co-edit:hover, .ncck-co-remove:hover { text-decoration: underline; }
.ncck-co-edit:focus-visible,
.ncck-co-remove:focus-visible,
.ncck-co-submit:focus-visible,
.ncck-co-account-actions .btn:focus-visible {
    outline: 3px solid rgba(15, 92, 255, .24);
    outline-offset: 3px;
}

.ncck-co-lines { display: grid; gap: 10px; margin: 0 0 16px; }
.ncck-co-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ncck-co-lines dt { margin: 0; color: var(--ncck-text-muted); font-size: 13.5px; font-weight: 400; }
.ncck-co-lines dd { margin: 0; color: var(--ncck-text); font-size: 13.5px; }

.ncck-co-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ncck-border);
}
.ncck-co-totallbl { color: var(--ncck-text); font-size: 15px; font-weight: 600; }
.ncck-co-totalamt { color: var(--ncck-primary); font-size: 20px; font-weight: 700; }

.ncck-co-tos { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-size: 13px; cursor: pointer; }
.ncck-co-tos input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--ncck-primary); }

.ncck-co-submit {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 18px;
    border: 0;
    border-radius: var(--ncck-radius-sm);
    background: var(--ncck-primary);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.ncck-co-submit:hover:not(:disabled) { background: var(--ncck-primary-hover); }
.ncck-co-submit:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Secure checkout card. ---- */
.ncck-co-secure {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: #fff;
}
.ncck-co-secureico {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--ncck-radius-sm);
    background: rgba(15, 92, 255, .08);
    color: var(--ncck-primary);
}
.ncck-co-secure strong { display: block; font-size: 14px; }
.ncck-co-secure p { margin: 4px 0 0; color: var(--ncck-text-muted); font-size: 13px; }

@media (max-width: 991.98px) {
    .ncck-co-grid { grid-template-columns: minmax(0, 1fr); }
    .ncck-co-side { position: static; }
    .ncck-co-head { flex-direction: column; }
    .ncck-co-steps { align-self: flex-start; }
}
@media (max-width: 575.98px) {
    .ncck-cart .ncck-co-account-switch {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .ncck-co-account-copy { align-items: flex-start; }
    .ncck-co-account-actions { align-self: flex-start; }
    .ncck-co-card,
    .ncck-co-summary { padding: 18px 16px; }
    .ncck-co-step { padding: 0 14px; }
    .ncck-co-step + .ncck-co-step::before { left: -10px; width: 20px; }
    .ncck-co-itemtop { flex-direction: column; gap: 8px; }
    .ncck-co-addonrow { flex-direction: column; gap: 8px; }
    .ncck-co-itemprice { justify-items: start; text-align: left; }
}