/* =========================================================================
   PIVIHOST Cart — Order Experience Release Candidate (V1.1)
   Child of standard_cart. Presentation only — no cart/checkout/payment
   logic touched (docs/reports/2026-09-19/05_whmcs-pivihost-theme-v1-1-rc.md).
   Same token values as templates/pivihost/css/custom.css, kept in sync
   by hand (two separate WHMCS "theme" packages — system theme and
   order-form theme — don't share a CSS include path).

   Sections:
   00 tokens              06 order summary
   01 base                07 checkout / account / terms
   02 domain search hero  08 promo code
   03 TLD result cards    09 responsive / focus
   04 buttons + forms     10 layout width (V1.2)
   05 product selection
   ========================================================================= */

/* ---- 00 tokens ----------------------------------------------------------- */
:root {
  --pivi-bg: #FAF8F4;
  --pivi-surface: #F1ECE3;
  --pivi-surface-raised: #FFFFFF;
  --pivi-border: #E4DFD5;
  --pivi-border-strong: #8A8272;
  --pivi-text: #181614;
  --pivi-muted: #5B564F;
  --pivi-blue: #2461D9;
  --pivi-blue-hover: #1A4BAA;
  --pivi-blue-surface: #E8F0FB;
  --pivi-navy: #0B1F3A;
  --pivi-success: #2F6B3A;
  --pivi-success-surface: #E7F1E8;
  --pivi-radius-sm: 3px;
  --pivi-radius-md: 5px;
  --pivi-radius-lg: 8px;
  --pivi-shadow-sm: 0 1px 2px rgba(24, 22, 20, 0.06);
  --pivi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --pivi-space-sm: 1rem;
  --pivi-space-md: 1.5rem;
  /* Same clamp() shape as templates/pivihost/css/custom.css's
     --pivi-shell-commerce, duplicated here (not shared — two separate
     WHMCS "theme" packages, no common include point) because this file
     must widen the cart correctly even when the ACTIVE system theme is
     `hostgate`, not `pivihost` — confirmed live 2026-09-19 (V1.2) that
     PIVIHOST Cart already serves real production traffic for the
     Hosting/VPS group *listing* pages today (see docs/ops/
     WHMCS_THEME_ARCHITECTURE.md "Cart activation status — corrected"),
     so this is not preview-only CSS and was written with that in mind. */
  --pivi-shell-commerce: clamp(320px, 94vw, 2160px);
}

/* ---- 01 base --------------------------------------------------------------- */
#order-standard_cart {
  color: var(--pivi-text);
  background: var(--pivi-bg);
}
#order-standard_cart .header-lined h1 {
  font-weight: 700;
  border-bottom-color: var(--pivi-border);
}
#order-standard_cart :focus-visible {
  outline: 3px solid var(--pivi-text);
  outline-offset: 2px;
}

/* ---- 02 domain search hero --------------------------------------------------
   Replaces the stock yellow globe.png gradient banner with the same
   pale-blue dot-grid surface language as the public site's own
   /domains/ search panel (src/assets/css/components.css
   .domain-search-panel) — real visual continuity, not just a colour
   swap. The public site's own domain-search form
   (scripts/lib/pages.py::_domain_search_form) already lands here via a
   plain GET ?query=<term> — untouched, presentation only. */
#order-standard_cart .domain-checker-bg {
  background-image: none !important;
  background:
    radial-gradient(rgba(36, 97, 217, 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--pivi-blue-surface);
  border-radius: var(--pivi-radius-lg);
  padding: 2.5rem 0 !important;
}
#order-standard_cart .domain-checker-container .input-group-box {
  background: var(--pivi-surface-raised);
  border-radius: var(--pivi-radius-md);
  box-shadow: var(--pivi-shadow-sm);
}
#order-standard_cart .domain-checker-container .form-control {
  border-radius: var(--pivi-radius-sm);
  border-color: var(--pivi-border-strong);
  min-height: 44px;
}
#order-standard_cart .domain-check-availability {
  background: var(--pivi-blue);
  border-color: var(--pivi-blue);
  border-radius: var(--pivi-radius-sm);
}
#order-standard_cart .domain-check-availability:hover {
  background: var(--pivi-blue-hover);
  border-color: var(--pivi-blue-hover);
}

/* ---- 03 TLD result cards -----------------------------------------------------
   Real WHMCS pricing data only ($featuredTlds / $spotlightTlds /
   $pricing — every figure here is WHMCS's own live data, brief section
   125) — this section is presentation only, the underlying values are
   untouched. Replaces the stock coloured-bar-per-TLD treatment with
   one consistent PIVIHOST card: clear extension, clear price, no
   billboard. */
#order-standard_cart .featured-tld,
#order-standard_cart .spotlight-tld {
  background: var(--pivi-surface-raised);
  border: 1px solid var(--pivi-border);
  border-radius: var(--pivi-radius-lg);
  box-shadow: none;
  transition: border-color 150ms ease;
}
#order-standard_cart .featured-tld:hover,
#order-standard_cart .spotlight-tld:hover {
  border-color: var(--pivi-blue);
}
/* Kill the stock per-TLD background colour classes (.price.com,
   .price.net, etc. — WHMCS assigns one per extension) in favour of one
   consistent surface; the extension name and price text remain the
   only real signal, not the bar colour. */
#order-standard_cart .featured-tld .price,
#order-standard_cart .spotlight-tld .price {
  background: var(--pivi-blue-surface) !important;
  color: var(--pivi-blue-hover) !important;
  font-family: var(--pivi-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  border-radius: 0 0 var(--pivi-radius-lg) var(--pivi-radius-lg);
}
#order-standard_cart .spotlight-tld-new,
#order-standard_cart .spotlight-tld-sale {
  background-color: var(--pivi-blue) !important;
}
#order-standard_cart .tld-pricing-header {
  color: var(--pivi-muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--pivi-border);
}
#order-standard_cart .tld-row {
  border-bottom: 1px solid var(--pivi-border);
}
#order-standard_cart .tld-row:hover {
  background: var(--pivi-blue-surface);
}

/* ---- 04 buttons + forms ------------------------------------------------------ */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-transfer,
#order-standard_cart .btn-info {
  background: var(--pivi-blue);
  border-color: var(--pivi-blue);
  border-radius: var(--pivi-radius-sm);
  font-weight: 600;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-transfer:hover,
#order-standard_cart .btn-info:hover {
  background: var(--pivi-blue-hover);
  border-color: var(--pivi-blue-hover);
}
#order-standard_cart .btn-default {
  background: var(--pivi-surface-raised);
  border-color: var(--pivi-border-strong);
  color: var(--pivi-text);
}
#order-standard_cart .form-control {
  border-radius: var(--pivi-radius-sm);
  border-color: var(--pivi-border-strong);
}
/* Real figures only — every value here is WHMCS's own live pricing
   data, never hardcoded (brief section 125). Mono/tabular numerals
   match the public site's own price-display convention. */
#order-standard_cart .price,
#order-standard_cart .amt,
#order-standard_cart .h4 {
  font-family: var(--pivi-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- 05 product selection ----------------------------------------------------- */
#order-standard_cart .products .product {
  background: var(--pivi-surface-raised);
  border: 1px solid var(--pivi-border);
  border-radius: var(--pivi-radius-lg);
  box-shadow: var(--pivi-shadow-sm);
}
#order-standard_cart .products .product-pricing .price {
  font-size: 1.25rem;
  font-weight: 700;
}

/* ---- 06 order summary -----------------------------------------------------------
   One of the strongest elements per the brief — real WHMCS totals
   only, never recalculated independently (brief section 15). */
#order-standard_cart .cart-sidebar {
  background: var(--pivi-surface-raised);
  border: 1px solid var(--pivi-border);
  border-radius: var(--pivi-radius-lg);
  box-shadow: var(--pivi-shadow-sm);
  padding: 1.25rem;
}
#order-standard_cart .product-group { border-bottom: 1px solid var(--pivi-border); }
#order-standard_cart .product-name { font-weight: 600; }
#order-standard_cart .summary-totals { border-top: 2px solid var(--pivi-border); padding-top: 0.75rem; }
#order-standard_cart .total-due-today {
  font-family: var(--pivi-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--pivi-text);
}

/* ---- 07 checkout / account / terms -----------------------------------------------
   Legal acceptance (#accepttos) is a KNOWN, separately-tracked issue
   (docs/questions/LEGAL_OPEN_QUESTIONS.md Q8) — not touched or "fixed"
   here. This rule only makes sure the existing checkbox + label read
   clearly whenever the real fix lands; nothing about its logic changes. */
#order-standard_cart .account,
#order-standard_cart .address {
  background: var(--pivi-surface-raised);
  border: 1px solid var(--pivi-border);
  border-radius: var(--pivi-radius-lg);
}
#order-standard_cart .account.active,
#order-standard_cart .account-select.active {
  border-color: var(--pivi-blue);
  background: var(--pivi-blue-surface);
}
#order-standard_cart .checkbox-inline { font-size: 0.9375rem; }
#order-standard_cart .alert-danger { background: #F8E6E4; border-color: #A3271E; color: #A3271E; }
#order-standard_cart .alert-success { background: var(--pivi-success-surface); border-color: var(--pivi-success); color: var(--pivi-success); }
#order-standard_cart .alert-warning { background: #FBF0DC; border-color: #8A5A00; color: #8A5A00; }
#order-standard_cart .alert-info { background: var(--pivi-blue-surface); border-color: var(--pivi-blue); color: var(--pivi-blue-hover); }

/* ---- 08 promo code --------------------------------------------------------------
   Visible but secondary — never the dominant element on the page
   (brief section 16). No promo code string is ever hardcoded here;
   WHMCS's own #applyPromo tab/field is only restyled, not populated. */
#order-standard_cart #applyPromo,
#order-standard_cart .view-cart-promotion-code {
  font-size: 0.875rem;
}
#order-standard_cart #inputPromotionCode {
  border-radius: var(--pivi-radius-sm);
  border-color: var(--pivi-border-strong);
  max-width: 16rem;
}

/* ---- 09 responsive / focus -------------------------------------------------------- */
@media (max-width: 767.98px) {
  #order-standard_cart .cart-sidebar { margin-top: 1.5rem; }
  #order-standard_cart .domain-checker-bg { padding: 1.5rem 0 !important; }
}

/* ---- 10 layout width (V1.2 — brief §28/29/30) ---------------------------------------
   Real markup + real CSS read directly from the server
   (templates/orderforms/standard_cart/products.tpl,
   templates/orderforms/standard_cart/css/style.css — not guessed):
   `.cart-sidebar` / `.cart-body` are plain floated divs at a fixed
   25%/75% split, and the product grid is hardcoded to `.col-md-6` (always
   exactly 2 columns from 768px up, never 3+, regardless of how wide the
   viewport actually is) — the literal root cause of the owner's "cart
   too narrow, always 2 cards" finding. Both widened responsibly: the
   sidebar becomes a genuinely fixed ~260px column (brief's own
   240–300px target) instead of a percentage that would otherwise grow
   to 500px+ once the surrounding container is widened below; the
   product grid becomes a real auto-fill CSS Grid so 3+ columns appear
   automatically once there is room, without a hand-picked breakpoint. */
#order-standard_cart {
  max-width: var(--pivi-shell-commerce);
  margin-left: auto;
  margin-right: auto;
}
#order-standard_cart > .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pivi-space-md);
}
#order-standard_cart .cart-sidebar.sidebar {
  float: none;
  width: auto;
  flex: 0 0 260px;
  max-width: 260px;
  padding-left: 0;
  padding-right: 0;
}
#order-standard_cart .cart-body {
  float: none;
  width: auto;
  flex: 1 1 0%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}
#order-standard_cart .products .row.row-eq-height {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--pivi-space-md);
}
#order-standard_cart .products .row.row-eq-height > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}
/* Below 1200px, the vendor stylesheet itself already hides the sidebar
   and sets .cart-body to 100% (style.css's own @media rule) — that
   existing, tested mobile behaviour is left alone, not fought. */
@media (max-width: 1199.98px) {
  #order-standard_cart > .row { gap: 0; }
}