/* * Custom CSS for Vercaa 2026 Cart Orderform (forked from WHMCS's stock Nexus Cart orderform, * left untouched at orderforms/nexus_cart as the reference to diff against) * * This file allows you to customize the theme colors and styles for the Vercaa 2026 cart orderform. * * To customize colors: * - Replace the var() references with your own hex colors or other CSS values. * - For example, instead of --vl-primary: var(--zinc-900); use --vl-primary: #your-color; * - You can also override any CSS properties here. * * Note: Changes here will apply to the orderform's Shadow DOM. */ /* Add you custom styles here */ :host, :root { /* Primary colors */ --vl-primary: var(--primary); --vl-primary-lifted: var(--primary-lifted); --vl-primary-accented: var(--primary-accented); /* Secondary colors */ --vl-secondary: var(--secondary); --vl-secondary-lifted: var(--secondary-lifted); --vl-secondary-accented: var(--secondary-accented); /* Success colors */ --vl-success: var(--success); --vl-success-lifted: var(--success-lifted); --vl-success-accented: var(--success-accented); /* Info colors */ --vl-info: var(--info); --vl-info-lifted: var(--info-lifted); --vl-info-accented: var(--info-accented); /* Notice colors */ --vl-notice: var(--notice); --vl-notice-lifted: var(--notice-lifted); --vl-notice-accented: var(--notice-accented); /* Warning colors */ --vl-warning: var(--warning); --vl-warning-lifted: var(--warning-lifted); --vl-warning-accented: var(--warning-accented); /* Error colors */ --vl-error: var(--error); --vl-error-lifted: var(--error-lifted); --vl-error-accented: var(--error-accented); /* Grayscale colors */ --vl-grayscale: var(--grayscale); --vl-grayscale-lifted: var(--grayscale-lifted); --vl-grayscale-accented: var(--grayscale-accented); /* Neutral colors */ --vl-neutral: var(--neutral); --vl-neutral-lifted: var(--neutral-lifted); --vl-neutral-accented: var(--neutral-accented); /* Text neutral colors */ --vl-text-inverted: var(--text-inverted); --vl-text-muted: var(--text-muted); --vl-text-lifted: var(--text-lifted); --vl-text-accented: var(--text-accented); --vl-text: var(--text); /* Border neutral colors */ --vl-border-muted: var(--border-muted); --vl-border: var(--border); --vl-border-lifted: var(--border-lifted); --vl-border-accented: var(--border-accented); /* Background neutral colors */ --vl-bg: var(--bg); --vl-bg-muted: var(--bg-muted); --vl-bg-lifted: var(--bg-lifted); --vl-bg-accented: var(--bg-accented); --vl-bg-inverted: var(--bg-inverted); /* Additional custom properties */ /* Font Sizes */ --vl-text-xs: var(--text-xs); --vl-text-sm: var(--text-sm); --vl-text-md: var(--text-md); --vl-text-lg: var(--text-lg); /* Spacing */ --vl-outline-sm: var(--outline-sm); --vl-outline-md: var(--outline-md); --vl-outline-lg: var(--outline-lg); /* Rounding */ --vl-rounding-sm: var(--rounding-sm); --vl-rounding-md: var(--rounding-md); --vl-rounding-lg: var(--rounding-lg); /* Other */ --vl-letter-spacing: var(--letter-spacing); --vl-disabled-opacity: var(--disabled-opacity); } /* Vercaa QA fix (2026-08-12): #products wraps a stock Bootstrap ".row.row-eq-height" (from orderforms/standard_cart/products.tpl) whose -15px negative margins have no matching container padding to offset them here, causing a constant 15px horizontal page overflow (confirmed via document.documentElement.scrollWidth vs window.innerWidth at every viewport width tested, 375px-1280px, not just mobile). Contained locally rather than hiding overflow at body-level to avoid masking other potential overflow bugs. */ #products.products { overflow-x: hidden; } /* ============================================================================= VERCAA CART/CHECKOUT CREATIVE ELEVATION PASS (2026-08-13) --------------------------------------------------------------------------- Context: templates/vercaa-2026/css/custom.css already ran a full dark-mode TOKENIZATION pass over #order-standard_cart (see that file's own "Page structure" section) — colors are correct-by-construction there. This block is the separate CREATIVE layer the user explicitly asked for on top of that ("not only retheme... make it super amazing... innovative"), matching the visual energy of the standalone Market Connect pages (market/*.php — radial-bloom hero washes, grid texture, floating elevated cards, scroll- weight typography, tasteful entrance motion). Everything here is written in THIS file (the order-form theme's own custom.css, loaded dead last in the cascade — general theme's all.min.css/theme.min.css/custom.css in , then this order-form theme's own stock all.min.css, then this file, all via common.tpl / header.tpl) rather than the shared, heavily concurrently-edited templates/vercaa-2026/css/custom.css, specifically so this pass can't collide with other agents' work there this run. Every color trace to an existing var(--token) — nothing new invented, no new hex. Loading last also means plain matching-specificity selectors here reliably win ties against both the shared file's rules AND the order-form theme's own stock all.css (templates/orderforms/standard_cart/css/all.css) without needing !important — used a couple of `body #order-standard_cart` prefixes below specifically to match-or-beat a stock selector's own specificity where relevant (called out inline). REAL BUG FIXED IN THIS PASS: DEFERRED.md documented "checkout.tpl's 'Choose Account' address-selection card renders white/near-invisible-text in dark mode" as not-yet-fixed. Root cause, confirmed by reading the actual stock CSS (not assumed): the order-form theme's OWN stock stylesheet (templates/orderforms/standard_cart/css/all.css) has `#order-standard_cart .account-select-container div.account { background: #f6f6f6 }` / `.active { background: #fff }` with NO text-color declared — specificity (1 id, 2 classes, 1 element). The shared custom.css's existing `body #order-standard_cart .account { ... }` token rule is only (1 id, 1 class, 1 element) — LOWER specificity, so it silently loses to the stock rule regardless of load order. A prior session's own "specificity fix" pass (shared custom.css, search "Specificity fix: WHMCS's OWN compiled theme.min.css") only re-fought the GENERAL theme's compiled theme.min.css, a completely different stylesheet — it never touched this ORDER-FORM theme's own separate stock all.css, which is why this specific bug survived that pass. Fixed for real below with a selector that matches the stock rule's exact specificity, in a file that loads after it. */ /* ----------------------------------------------------------------------- 1) Hero banner — layered radial bloom + faint grid texture over the existing var(--gradient-brand) fill (background itself untouched, set by the shared .app-gradient-banner rule), plus a tasteful rise-and-fade entrance. Scoped to #order-standard_cart only — .app-gradient-banner is also used on non-cart pages (home dashboard, ticket banners) that must stay exactly as-is. */ body #order-standard_cart .app-gradient-banner { position: relative; overflow: hidden; animation: app-cart-hero-in 550ms var(--ease-out) both; } body #order-standard_cart .app-gradient-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 90% at 88% -10%, color-mix(in srgb, #fff 30%, transparent), transparent 60%), radial-gradient(45% 70% at 4% 118%, color-mix(in srgb, #fff 16%, transparent), transparent 65%); pointer-events: none; } body #order-standard_cart .app-gradient-banner::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(75% 90% at 75% 10%, #000, transparent 72%); mask-image: radial-gradient(75% 90% at 75% 10%, #000, transparent 72%); opacity: .5; pointer-events: none; } body #order-standard_cart .app-gradient-banner-inner { position: relative; z-index: 1; } @keyframes app-cart-hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------------- 2) Funnel step indicator (includes/funnel-steps.tpl) — new component, no stock selector to collide with. Shop -> Configure -> Checkout -> Confirmed, connecting line fills in behind completed/current steps. */ .app-cart-steps { margin: 0 0 1.75rem; padding: 1.15rem 1.5rem 1rem; background: var(--bg); border: 1px solid var(--border-muted); border-radius: var(--rounding-lg); box-shadow: var(--elevation-1); animation: app-cart-hero-in 550ms var(--ease-out) 80ms both; } .app-cart-steps ol { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; } .app-cart-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; } .app-cart-step:not(:first-child)::before { content: ""; position: absolute; top: 19px; right: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; transition: background-color var(--duration-slow) var(--ease-standard); } .app-cart-step.is-done::before, .app-cart-step.is-current::before { background: var(--primary); } .app-cart-step-dot { position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 2px solid var(--border); color: var(--text-muted); transition: background-color var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard), color var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow) var(--ease-standard); } .app-cart-step-icon, .app-cart-step-check { width: 17px; height: 17px; } .app-cart-step-check { display: none; } .app-cart-step.is-done .app-cart-step-dot { background: var(--success); border-color: var(--success); color: #fff; } .app-cart-step.is-done .app-cart-step-icon { display: none; } .app-cart-step.is-done .app-cart-step-check { display: block; } .app-cart-step.is-current .app-cart-step-dot { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); } .app-cart-step.is-current.is-final .app-cart-step-dot { background: var(--success); border-color: var(--success); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent); } .app-cart-step.is-current.is-final .app-cart-step-icon { display: none; } .app-cart-step.is-current.is-final .app-cart-step-check { display: block; } .app-cart-step-label { margin-top: 0.5rem; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); line-height: 1.3; } .app-cart-step.is-current .app-cart-step-label { color: var(--text); font-weight: 700; } .app-cart-step.is-done .app-cart-step-label { color: var(--text-lifted); } /* ----------------------------------------------------------------------- 3) Section dividers — small gradient-dot accent ahead of each label, layered on top of the shared file's existing token rule (background/ color already correct there; this only adds the dot). */ body #order-standard_cart .sub-heading span::before, body #order-standard_cart .sub-heading-borderless span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); margin-right: 0.55rem; vertical-align: middle; } /* ----------------------------------------------------------------------- 4) Product / addon cards (products.tpl, addons.tpl) — bento-style lift + colored top accent on hover, layered on the shared file's token base (background/border/text colors untouched, only shape/motion added). `body` prefix matches that base rule's own specificity so this file's later load order decides ties predictably. */ /* NOTE: templates/vercaa-2026/css/theme.min.css (this project's own compiled theme build, not hand-patched per its established convention — see the shared custom.css's own "do NOT hand-patch the compiled theme.min.css" comment) ships `body #order-standard_cart .cart-body .products .product { border-radius: 8px }` — one extra `.cart-body` class beats a plain `body #order-standard_cart .products .product` selector on specificity regardless of load order (found live via a getMatchedCSSRules-style audit, not assumed). The `.cart-body` prefix below is required, not decorative, to actually win. */ body #order-standard_cart .cart-body .products .product { border-radius: var(--rounding-xl); box-shadow: var(--elevation-1); overflow: hidden; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } body #order-standard_cart .cart-body .products .product header { border-radius: var(--rounding-xl) var(--rounding-xl) 0 0; } body #order-standard_cart .cart-body .products .product:hover { transform: translateY(-4px); box-shadow: var(--elevation-3); } :root[data-theme="dark"] body #order-standard_cart .cart-body .products .product:hover { box-shadow: var(--elevation-3); } body #order-standard_cart .cart-body .products .product .btn-order-now { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } body #order-standard_cart .cart-body .products .product .btn-order-now:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--success) 55%, transparent); } /* ----------------------------------------------------------------------- 5) Selectable addon panels (config-option add-ons, domain DNS/ID- protection/email-forwarding rows) — hover lift + clearer selected ring, custom-colored native checkbox instead of stock browser default. */ body #order-standard_cart .panel-addon { border-radius: var(--rounding-lg); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } body #order-standard_cart .panel-addon:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); } body #order-standard_cart .panel-addon.panel-addon-selected { box-shadow: 0 0 0 1px var(--primary), var(--elevation-1); } body #order-standard_cart .panel-addon .panel-body label { cursor: pointer; } body #order-standard_cart .panel-addon input[type="checkbox"] { accent-color: var(--primary); width: 15px; height: 15px; vertical-align: middle; margin-right: 0.35rem; } body #order-standard_cart .panel-addon .panel-add { transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } body #order-standard_cart .panel-addon:hover .panel-add { background: var(--success-lifted); } /* ----------------------------------------------------------------------- 6) Form fields — rounded corners + icon recolor to primary while its sibling input has focus (icon and input are siblings inside .prepend-icon, not nested, hence :has() rather than a plain descendant rule; :has() is already an established pattern in this project's shared custom.css, e.g. .app-radio-pill:has(input:checked)). */ body #order-standard_cart .field, body #order-standard_cart .form-control { border-radius: var(--rounding-md); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } body #order-standard_cart .prepend-icon:has(.field:focus) .field-icon i, body #order-standard_cart .prepend-icon:has(.form-control:focus) .field-icon i { color: var(--primary); } body #order-standard_cart .field-icon i { transition: color var(--duration-fast) var(--ease-out); } /* ----------------------------------------------------------------------- 7) "Choose Account" cards — the DEFERRED.md dark-mode bug fix (see the big comment at the top of this section for root cause) plus a genuine elevated-card redesign: full individual borders/radius/shadow per card instead of the stock connected-strip look (stock's border-right:0 / shared border etc. are superseded here on purpose). Selectors below deliberately match-or-exceed the stock rule's own specificity (#order-standard_cart .account-select-container div.account, 1 id/2 classes/1 element) so this — loading later in the cascade — wins for real rather than silently losing again. */ body #order-standard_cart .account-select-container div.account { background: var(--bg); border: 1px solid var(--border); border-radius: var(--rounding-lg); margin-bottom: 0.85rem; padding: 1rem 1.1rem; color: var(--text); box-shadow: var(--elevation-1); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } body #order-standard_cart .account-select-container div.account:hover { border-color: var(--primary); box-shadow: var(--elevation-2); transform: translateY(-2px); } body #order-standard_cart .account-select-container div.account.active { background: var(--primary-soft); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--elevation-2); } body #order-standard_cart .account-select-container div.account .address strong { color: var(--text); } body #order-standard_cart .account-select-container div.account .address .small, body #order-standard_cart .account-select-container div.account .small { color: var(--text-muted); } body #order-standard_cart .account-select-container div.account label.radio-inline { color: var(--text); width: 100%; margin: 0; cursor: pointer; } body #order-standard_cart .account-select-container input[type="radio"].account-select { accent-color: var(--primary); width: 16px; height: 16px; margin-right: 0.5rem; vertical-align: middle; } body #order-standard_cart .account-select-container div.account .label.label-default, body #order-standard_cart .account-select-container div.account .label.label-info { display: inline-block; padding: 0.15rem 0.5rem; border-radius: var(--rounding-sm); font-size: var(--text-xs); font-weight: 700; } body #order-standard_cart .account-select-container div.account .label.label-default { background: var(--bg-muted); color: var(--text-muted); } body #order-standard_cart .account-select-container div.account .label.label-info { background: var(--info-soft); color: var(--info-accented); } /* ----------------------------------------------------------------------- 8) Payment method selector — hover lift + brand-colored native radio, on top of the shared file's existing selected-state (:has(input:checked)) treatment. */ body #order-standard_cart #paymentGatewaysContainer .radio-inline { cursor: pointer; box-shadow: var(--elevation-1); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } body #order-standard_cart #paymentGatewaysContainer .radio-inline:hover { border-color: var(--primary); box-shadow: var(--elevation-2); } body #order-standard_cart #paymentGatewaysContainer input[type="radio"].payment-methods { accent-color: var(--primary); margin-right: 0.4rem; } /* ----------------------------------------------------------------------- 9) Order summary sidebar — colored top accent bar for a premium "receipt card" read (Stripe/Apple-checkout convention), plus a clearer total-due-today row. Colors stay the already-verified primary-soft/ primary-accented pairing from the shared file; only shape/emphasis changes here. */ body #order-standard_cart .order-summary { box-shadow: var(--elevation-2); border-top: 3px solid var(--primary); overflow: hidden; } body #order-standard_cart .total-due-today { border-left: 4px solid var(--primary); box-shadow: var(--elevation-1); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } body #order-standard_cart .total-due-today .amt { font-size: 1.6rem; } body #order-standard_cart .total-due-today span:not(.amt) { font-size: var(--text-sm); font-weight: 600; } /* ----------------------------------------------------------------------- 10) complete.tpl success moment (app-order-success-* markup, additive only — see that file's own comment). Checkmark draws in via stroke-dashoffset; badge pops in with a soft spring-like scale. Both are one-shot entrance animations (not decorative loops), narrowly disabled under reduced-motion below per this file's existing convention. */ .app-order-success { text-align: center; margin: 0.25rem 0 1.75rem; } .app-order-success-badge { width: 84px; height: 84px; margin: 0 auto 1.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--success-soft); box-shadow: 0 0 0 8px color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); animation: app-order-success-pop 550ms var(--ease-standard) both; } .app-order-success-badge svg { width: 38px; height: 38px; } .app-order-success-check { stroke-dasharray: 24; stroke-dashoffset: 24; animation: app-order-success-draw 450ms var(--ease-out) 300ms forwards; } .app-order-success-lede { font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 0; } body #order-standard_cart .app-order-final-instructions { color: var(--text-lifted); } @keyframes app-order-success-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes app-order-success-draw { to { stroke-dashoffset: 0; } } /* ----------------------------------------------------------------------- 11) Reduced motion — narrowly disables only this pass's auto-playing entrance animations (hero rise-in, stepper card entrance, success pop + checkmark draw); hover/focus transitions are left alone since they only ever run in direct response to user input, matching how the rest of this project's reduced-motion blocks are scoped (see shared custom.css's own multiple narrowly-scoped @media (prefers-reduced-motion) blocks). */ @media (prefers-reduced-motion: reduce) { body #order-standard_cart .app-gradient-banner, .app-cart-steps, .app-order-success-badge { animation: none !important; } .app-order-success-check { animation: none !important; stroke-dashoffset: 0 !important; } } /* ----------------------------------------------------------------------- 12) Mobile — keep the new stepper/hero comfortably inside the viewport at small widths (no horizontal overflow, per this project's standing hard rule; the existing #products.products overflow-x guard above stays untouched and still applies). */ @media (max-width: 575px) { body #order-standard_cart .app-gradient-banner { padding: 1.5rem; } body #order-standard_cart .app-gradient-banner-heading { font-size: 1.4rem; } .app-cart-steps { padding: 0.9rem 0.6rem 0.75rem; margin-bottom: 1.25rem; } .app-cart-step-dot { width: 30px; height: 30px; } .app-cart-step-icon, .app-cart-step-check { width: 14px; height: 14px; } .app-cart-step-label { font-size: 0.64rem; } .app-cart-step:not(:first-child)::before { top: 15px; } body #order-standard_cart .total-due-today { flex-wrap: wrap; } } /* ----------------------------------------------------------------------- 13) Cart review page (viewcart.tpl) — REBUILT 2026-08-14 on the classic, session-cart-backed markup after removing the mismatched Nexus Vue cart-module (see viewcart.tpl's own header comment for the full root cause: that module talked to the v2 REST Cart API, a different cart entity than the classic $_SESSION['cart'] this whole order flow actually uses, which is why the page showed "empty" with real items in cart and why the real Checkout button 500'd). This section themes the STOCK standard_cart classes those restored templates render (view-cart-items, item-title/-group/-domain/-price, view-cart-empty, the remove/empty-cart modals) which stock CSS hardcodes to a light-only blue palette (#058 headers, #fff rows, #f8f8f8 tabs) — replaced end to end with this theme's tokens so both themes read correctly, not just light. The "Apply Promo Code" / "Estimate Taxes" tabs that used to live here too (view-cart-tabs) moved into the Order Summary card — see section 18's own comment below for that CSS. */ body #order-standard_cart .view-cart-items-header { background: var(--bg-muted); color: var(--text-muted); font-weight: 700; border: 1px solid var(--border-muted); border-bottom: none; border-radius: var(--rounding-lg) var(--rounding-lg) 0 0; padding: 0.85rem 1.25rem; } body #order-standard_cart .view-cart-items { margin: 0 0 1.5rem; border: 1px solid var(--border-muted); border-top: none; border-radius: 0 0 var(--rounding-lg) var(--rounding-lg); overflow: hidden; box-shadow: var(--elevation-1); } body #order-standard_cart .view-cart-items:has(+ .empty-cart) { margin-bottom: 0.25rem; } body #order-standard_cart .view-cart-items .item { background: var(--bg); border: none; border-bottom: 1px solid var(--border-muted); padding: 1rem 1.25rem; font-size: var(--text-sm); transition: background-color var(--duration-fast) var(--ease-out); } body #order-standard_cart .view-cart-items .item:last-child { border-bottom: none; } body #order-standard_cart .view-cart-items .item:hover { background: var(--bg-muted); } /* Real bug fix (found live 2026-08-14): stock CSS also zebra-stripes rows via `#order-standard_cart .view-cart-items .item:nth-child(even){background-color:#eee}` — 3 selector classes (incl. the pseudo-class) beats the flat `.item` rule two lines up (only 2), so on any cart with 2+ lines (i.e. basically every real hosting order, since SiteLock/360 Monitoring bundle in as free addon lines) every even row still rendered stock light-gray #eee regardless of theme. Confirmed live: a washed-out light row sitting between two correctly-dark rows on the real Review & Checkout page. Same token, explicitly re-asserted against the pseudo-class selector so it wins on specificity too, not just source order. */ body #order-standard_cart .view-cart-items .item:nth-child(even) { background: var(--bg); } body #order-standard_cart .item-title { font-size: 1.05rem; font-weight: 700; color: var(--text); } body #order-standard_cart .item-title .btn-link { color: var(--primary); font-weight: 600; font-size: var(--text-sm); } body #order-standard_cart .item-group { display: block; font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; } body #order-standard_cart .item-domain { display: inline-block; color: var(--primary-accented); font-weight: 600; font-size: var(--text-sm); } body #order-standard_cart .item-price { text-align: right; color: var(--text); font-weight: 700; } body #order-standard_cart .item-price .cycle { display: block; color: var(--text-muted); font-weight: 500; font-size: var(--text-xs); } body #order-standard_cart .item-price .renewal.cycle { font-size: var(--text-xs); } body #order-standard_cart .item-qty { text-align: center; } body #order-standard_cart .btn-remove-from-cart { color: var(--text-muted); transition: color var(--duration-fast) var(--ease-out); } body #order-standard_cart .btn-remove-from-cart:hover { color: var(--error); } body #order-standard_cart .empty-cart { text-align: right; margin: 0 0 1.5rem; } body #order-standard_cart .empty-cart .btn-link { color: var(--text-muted); font-size: var(--text-sm); } body #order-standard_cart .empty-cart .btn-link:hover { color: var(--error); } body #order-standard_cart .view-cart-empty { padding: 3rem 1.5rem; text-align: center; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--rounding-lg); color: var(--text-muted); } body #order-standard_cart .view-cart-empty i { font-size: 2.25rem; color: var(--text-muted); opacity: 0.6; margin-bottom: 0.75rem; display: block; } body #order-standard_cart .view-cart-empty p { margin-bottom: 1rem; } body #order-standard_cart .view-cart-gateway-checkout { margin: 0 0 1.5rem; } /* Remove/empty-cart confirmation modals — dark-mode parity for icon/text colors specific to this page (the modal chrome itself, .modal-content etc., is already tokenized globally). */ body #order-standard_cart .modal-remove-item .fa-times.fa-3x, body #order-standard_cart .modal-remove-item .fa-trash-alt.fa-3x { color: var(--error); } @media (max-width: 575px) { body #order-standard_cart .item-price { text-align: left; margin-top: 0.5rem; } body #order-standard_cart .empty-cart { text-align: left; } } /* ----------------------------------------------------------------------- 14) Real bug fix (found live 2026-08-14, viewcart.tpl empty-cart state): the shared theme's own `body #order-standard_cart a { color: var(--primary); }` (templates/vercaa-2026/css/custom.css — a prior session's own fix for a DIFFERENT set of plain-text links on this page family, see that file's "confirmed live" comment near the same rule) has higher specificity than Bootstrap's stock `.btn-primary { color: #fff }` (1 id beats 2 classes regardless of element count), so any plain, non-btn-link primary button rendered as an inside #order-standard_cart — e.g. this page's restored "Continue Shopping" empty-cart CTA — got var(--primary) text on a var(--primary) background: functionally invisible. Confirmed via computed style (color and background-color were the literal same rgb() value). Scoped fix here (this file loads last for this order-form theme) rather than touching the shared rule, which real other pages still depend on. */ body #order-standard_cart .view-cart-empty .btn-primary { color: var(--white); } body #order-standard_cart .view-cart-empty .btn-primary:hover { color: var(--white); } /* ----------------------------------------------------------------------- 15) Real bug fix (found live 2026-08-14, "domain/product choice" step — cart.php?a=confproductdomain, rendered by the STOCK orderforms/standard_cart/configureproductdomain.tpl because this order form has no override of its own for that one template; every other template in the funnel — products/configureproduct/configuredomains/ checkout/complete — does have a vercaa-2026-cart override, so this is the one step that still falls through to stock markup). A previous session already partly tokenized this exact component in templates/vercaa-2026/css/theme.min.css (compiled, not hand-edited here): body #order-standard_cart .domain-selection-options { background:#fff; ... } body #order-standard_cart .domain-selection-options .option { background-color:var(--bg); margin:0 } body #order-standard_cart .domain-selection-options .option-selected { background:#f8f8f8 } `.option` (the collapsed/unselected radio rows) was correctly pointed at var(--bg). The outer wrapper and `.option-selected` — i.e. exactly the panel a user sees the moment they actually pick "Register a new domain" / "Transfer" / "I will use my existing domain" — were left as literal, unconditional #fff / #f8f8f8. Confirmed live in dark mode: a stock-white card floating inside the otherwise fully dark funnel page. Also confirmed via computed-style + contrast math that the stock label color (#666, #order-standard_cart label in standard_cart/css/all.min.css, never overridden) sits at ~3.4:1 against the dark var(--bg) row background — below the 4.5:1 AA minimum for this 13px text — and would drop to ~3:1 against the new var(--bg-lifted) selected-row background below if its color weren't corrected too. Overridden here (loads last for this order form, so it wins the cascade against theme.min.css's same-specificity selectors) using only existing tokens, dark mode only — light mode's original #fff/#f8f8f8 look is unchanged. */ :root[data-theme="dark"] body #order-standard_cart .domain-selection-options { background-color: var(--bg-muted); } :root[data-theme="dark"] body #order-standard_cart .domain-selection-options .option-selected { background: var(--bg-lifted); } :root[data-theme="dark"] body #order-standard_cart .domain-selection-options .option label { color: var(--text-lifted); } :root[data-theme="dark"] body #order-standard_cart .domain-selection-options .option-selected label { color: var(--text); } /* ============================================================================= VERCAA CHECKOUT-FUNNEL STRUCTURAL REBUILD (2026-08-14) --------------------------------------------------------------------------- Context: the previous pass (sections 1-15 above) restyled stock WHMCS Bootstrap markup with this project's color tokens — the user's own verdict: "it looks like the standard whmcs with styling applied on it". This pass replaces the underlying DOM/layout itself (see viewcart.tpl/checkout.tpl/ configureproduct.tpl/configuredomains.tpl's own comments for exactly what moved) to genuinely match hosting.com's real checkout (verified live 2026-08-14 at checkout.hosting.com: a two-column layout with a persistent "Basket summary" card, hairline-divided line-item groups, pill-shaped controls/badges, label-above form fields with no icon-prepend, single unified addon cards) using ONLY this project's own existing design tokens and its own already-established component conventions (the domain-search modal's flex "row" pattern, the :has(input:checked) selected-state convention, the funnel-step indicator's card language) — no new hex, no fourth visual language. New component classes below are additive; the original stock class names they sit alongside (.item, .item-price, .panel-addon, .panel-add, .field, .form-control, .addon-products, etc.) are kept verbatim wherever real WHMCS JS (templates/orderforms/ standard_cart/js/scripts.js / base.js, assets/js/CartTotalUpdater.js) reads or writes them by name — confirmed by reading that JS, not assumed. */ /* Real bug found live (2026-08-14, empty-cart state, dark mode): the compiled theme.min.css ships `body #order-standard_cart .cart-body .view-cart-empty { background: #fff }` — 1 id + 2 classes + 1 element — one class higher than the shared custom.css's own `body #order-standard_cart .view-cart-empty { background: var(--bg) }` (1 id + 1 class + 1 element), so the stock white card silently won in dark mode regardless of load order. Matched to the stock rule's exact specificity here so this file's later load order actually decides the tie. */ body #order-standard_cart .cart-body .view-cart-empty { background: var(--bg); } /* ----------------------------------------------------------------------- 16) Two-column cart/checkout layout — replaces the stock float-based ".row > .secondary-cart-body + #scrollingPanelContainer" (which stock base.js/scripts.js "stickies" by hand with a scroll listener that only activates `if (jQuery('#scrollingPanelContainer').css('float') !== 'none')`) with a real CSS Grid + `position: sticky`. The stock JS is left completely untouched: once this rule sets float:none, its own `if (float === 'none') { ...; return false; }` guard makes it a harmless, self-disabling no-op — confirmed by reading that function, not assumed — and real CSS sticky does the job better anyway. New `.app-cart-columns`/`.app-cart-main`/ `.app-cart-sidebar` classes sit ALONGSIDE the original `.row`/ `.secondary-cart-body`/`#scrollingPanelContainer` (never removed from the markup) specifically so this stays scoped to the two pages that opt into it and can never affect any other `.row` on this order-form (product cards, the promo/tax tabs, etc.). */ body #order-standard_cart .row.app-cart-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: start; gap: 1.75rem; float: none; margin: 0; } body #order-standard_cart .app-cart-main { float: none; width: auto; margin: 0; padding: 0; } body #order-standard_cart .app-cart-sidebar { float: none; width: auto; margin: 0; position: sticky; top: 1.5rem; } @media (max-width: 991px) { body #order-standard_cart .row.app-cart-columns { grid-template-columns: 1fr; } body #order-standard_cart .app-cart-sidebar { position: static; } /* Real bug found live (2026-08-14, pass 2, ~500px width): the shared theme's own `body #order-standard_cart #orderSummary { position: sticky; top: calc(var(--header- height) + 1rem) }` (templates/vercaa-2026/css/custom.css, id-selector, no responsive guard of its own) still applied at every width once the two-column grid collapsed to one column above — the now-full-width summary card stuck mid-viewport while the payment- method/form content below it kept scrolling underneath, visually overlapping real, still-interactive form fields (confirmed live on checkout.tpl: the "Payment Details" radio cards were partly hidden behind the stuck Order Summary card). Un-stuck at the same breakpoint `.app-cart-sidebar` itself already uses, on this id (present on viewcart.tpl/ checkout.tpl/configureproduct.tpl's identical summary-card root — id is otherwise inert here, only scripts.js's recalctotals()/selectDomainPeriodInCart() read it, neither cares about position). */ body #order-standard_cart #orderSummary { position: static; top: auto; } } /* ----------------------------------------------------------------------- 17) Cart line items (viewcart.tpl) — replaces the stock ".item > .row > .col-sm-{1,2,4,5,7}" Bootstrap grid with a real flex row. Every real id/name/onclick from the stock markup (removeItem(), qty inputs, selectDomainPeriodInCart(), the edit links) is unchanged — only the wrapping grid became flex. `.item`/`.item-title`/`.item-price`/ `.cycle`/`.item-domain`/`.item-group` keep every rule sections 13-14 above already gave them (background/border/color tokens); this only adds the flex shape on top. */ body #order-standard_cart .view-cart-items-header { display: flex; align-items: center; gap: 1rem; } body #order-standard_cart .app-cart-header-label { flex: 1 1 auto; } body #order-standard_cart .app-cart-header-qty { flex: 0 0 90px; text-align: center; } body #order-standard_cart .app-cart-header-price { flex: 0 0 150px; text-align: right; } body #order-standard_cart .cart-line { display: flex; align-items: flex-start; gap: 1rem; } body #order-standard_cart .cart-line-nested { padding-left: 2rem; background: var(--bg-muted); } body #order-standard_cart .cart-line-info { flex: 1 1 auto; min-width: 0; } body #order-standard_cart .cart-line-qty { flex: 0 0 90px; text-align: center; } body #order-standard_cart .cart-line-price { flex: 0 0 150px; } body #order-standard_cart .cart-line-remove { flex: 0 0 auto; } body #order-standard_cart .cart-line-edit { margin-left: 0.4rem; } /* Vercaa (2026-08-14): a single always-visible icon-only remove button per row at every width (aria-label/title carry the accessible name — see viewcart.tpl) — simpler and more robust than the earlier draft of this rebuild, which tried to pair it with a second, text-labelled "mobile-only" duplicate. That duplicate hit a REAL stock-specificity bug found live: the stock stylesheet's own `#order-standard_cart .view-cart-items .item span:not(.caret):not(.renewal-price) { display: block }` (templates/orderforms/standard_cart/css/all.min.css) carries 1 id + 4 class-equivalents (2 real classes + 2 :not() argument classes) + 1 element, which beats a plain single-class override regardless of load order, so the "mobile-only" duplicate silently rendered on every width, showing two remove controls per row on desktop. Removed the duplicate entirely rather than keep fighting that specificity fight for a control this simple. The SAME specificity trap still applies to `.cart-line-options`/`.cart-line-option` below (also bare ``s inside `.item`) since those genuinely do need flex/inline-flex instead of the stock rule's forced `display:block` — matched to the stock rule's own (1 id, 4 classes, 1 element) specificity there so this file's later load order wins that tie instead of an !important. */ body #order-standard_cart .view-cart-items .item .cart-line-info .cart-line-options { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } body #order-standard_cart .view-cart-items .item .cart-line-options .cart-line-option { display: inline-flex; align-items: center; background: var(--bg-muted); color: var(--text-muted); border-radius: var(--rounding-sm); padding: 0.15rem 0.5rem; font-size: var(--text-xs); font-weight: 600; } @media (max-width: 575px) { body #order-standard_cart .view-cart-items-header { display: none; } body #order-standard_cart .cart-line { flex-wrap: wrap; } body #order-standard_cart .cart-line-price { flex: 1 1 auto; text-align: left; } } /* ----------------------------------------------------------------------- 18) Shared order-summary "receipt card" (includes/order-summary-panel.tpl) — the genuinely custom sidebar the brief asked for: icon header, hairline dividers, a subtly tinted sub-row group (matching hosting.com's own "Billing cycle / Server Location" grouped sub-rows under each basket line, verified live 2026-08-14), a bold total, and — on the cart page only — a branded gradient CTA pill matching this project's own :has(input:checked)/token conventions (gradient built from the existing --success/--success-lifted pair already used elsewhere for positive/ "done" states, e.g. the funnel-step indicator's completed dot; no new color). Every id inside is a real functional binding — see that file's own top-of-file comment for the full list and why. */ body #order-standard_cart .app-order-summary { position: relative; background: var(--bg); border: 1px solid var(--border-muted); border-radius: var(--rounding-xl); box-shadow: var(--elevation-2); overflow: hidden; } body #order-standard_cart .app-order-summary::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--primary); } body #order-standard_cart .app-order-summary-loader { position: absolute; top: 1.1rem; right: 1.25rem; color: var(--primary); font-size: 1rem; z-index: 2; } body #order-standard_cart .app-order-summary-head { display: flex; align-items: center; gap: 0.7rem; padding: 1.25rem 1.4rem 1rem; border-bottom: 1px solid var(--border-muted); margin-bottom: 1rem; } body #order-standard_cart .app-order-summary-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body #order-standard_cart .app-order-summary-icon svg { width: 17px; height: 17px; } body #order-standard_cart .app-order-summary-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text); } body #order-standard_cart .app-order-summary-body { padding: 0 1.4rem 1.4rem; } body #order-standard_cart .app-order-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: var(--text-md); color: var(--text); } body #order-standard_cart .app-order-summary-subrows { background: var(--bg-muted); border-radius: var(--rounding-md); padding: 0.6rem 0.75rem; margin: 0.35rem 0; } body #order-standard_cart .app-order-summary-row-sub { font-size: var(--text-sm); color: var(--text-muted); padding: 0.15rem 0; } body #order-standard_cart .app-order-summary-divider { height: 1px; background: var(--border-muted); margin: 0.75rem 0; } body #order-standard_cart .app-order-summary-row-strong { font-weight: 700; align-items: flex-start; } body #order-standard_cart .app-order-summary-recurring { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; text-align: right; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); } body #order-standard_cart .app-order-summary-recurring .cost { font-weight: 700; color: var(--text); margin-right: 0.3rem; } body #order-standard_cart .app-order-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--border-muted); } body #order-standard_cart .app-order-summary-total > span:first-child { font-weight: 600; font-size: var(--text-md); color: var(--text-muted); } body #order-standard_cart .app-order-summary-total-amt { font-size: 1.5rem; font-weight: 800; color: var(--text); } body #order-standard_cart .app-order-summary-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 1.1rem; padding: 0.85rem 1.25rem; border-radius: 999px; font-weight: 700; font-size: var(--text-md); /* 2026-08-25: was linear-gradient(--success, --success-lifted) — a green CTA on an otherwise entirely purple-branded site (every other primary action sitewide, "Get Started", plan-selection, "Choose this plan", uses the primary purple gradient). Real user feedback: this checkout funnel "doesn't look premium" / doesn't follow the Vercaa design direction — a mismatched accent color on the single most important button in the whole purchase flow was a real, visible instance of that, not a minor nitpick. Switched to the same primary gradient the rest of the site's CTAs already use — success green is reserved for actual success/confirmation states (e.g. complete.tpl), not a purchase CTA. */ background: linear-gradient(135deg, var(--primary), var(--primary-lifted)); color: var(--white); box-shadow: var(--elevation-2); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } body #order-standard_cart .app-order-summary-cta:hover, body #order-standard_cart .app-order-summary-cta:focus-visible { transform: translateY(-2px); box-shadow: var(--elevation-3); color: var(--white); } body #order-standard_cart .app-order-summary-cta.is-disabled { opacity: var(--disabled-opacity); pointer-events: none; } body #order-standard_cart .app-order-summary-cta-icon { width: 16px; height: 16px; } body #order-standard_cart .app-order-summary-continue { display: block; text-align: center; margin-top: 0.65rem; font-size: var(--text-sm); color: var(--text-muted); } body #order-standard_cart .app-order-summary-continue:hover { color: var(--primary); } body #order-standard_cart .app-order-summary-trust { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.1rem; padding: 0.85rem 1rem; background: var(--success-soft); color: var(--success-accented); border-radius: var(--rounding-md); font-size: var(--text-sm); line-height: 1.5; } body #order-standard_cart .app-order-summary-trust i { margin-top: 0.15rem; } body #order-standard_cart .express-checkout-buttons { margin-top: 1rem; } /* ----------------------------------------------------------------------- 18b) "Apply Promo Code" / "Estimate Taxes", relocated INTO the Order Summary card per real user feedback (see includes/order-summary-panel.tpl's own top-of-file comment for the full writeup) — was a separate `.view-cart-tabs` card (section 13, now removed) sitting below the cart line items, disconnected from the totals it actually affects. Same real Bootstrap nav-tabs/tab-content/tab-pane + data-toggle="tab" markup as before (untouched — nothing here depends on the old wrapper class), but restyled to read as PART of this card — no separate bg-muted bar, no nested border/shadow-within-a-shadow — instead of nesting the old standalone card's look unchanged inside a new one. */ body #order-standard_cart .app-order-summary-promo { margin: 0.85rem 0; } body #order-standard_cart .app-order-summary-promo-tabs { display: flex; gap: 1.25rem; padding: 0; margin: 0 0 0.85rem; border-bottom: 1px solid var(--border-muted); } body #order-standard_cart .app-order-summary-promo-tabs .nav-item { margin: 0; } body #order-standard_cart .app-order-summary-promo-tabs .nav-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0 0.6rem; margin: 0; border: none; background: transparent; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); } body #order-standard_cart .app-order-summary-promo-tabs a[aria-expanded="true"] { color: var(--primary); border-bottom: 2px solid var(--primary); } body #order-standard_cart .app-order-summary-promo-row { display: flex; gap: 0.5rem; } body #order-standard_cart .app-order-summary-promo-row .field { flex: 1 1 auto; min-width: 0; } body #order-standard_cart .app-order-summary-promo-row .btn { flex: 0 0 auto; white-space: nowrap; } body #order-standard_cart .app-order-summary-promo-field { margin-bottom: 0.65rem; } body #order-standard_cart .app-order-summary-promo-field:last-of-type { margin-bottom: 0.85rem; } body #order-standard_cart .app-order-summary-promo-field label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); margin-bottom: 0.3rem; } body #order-standard_cart .app-order-summary-promo-applied { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--primary-soft); border: 1px dashed var(--primary); color: var(--primary-accented); border-radius: var(--rounding-md); font-weight: 600; font-size: var(--text-sm); padding: 0.65rem 0.85rem; } body #order-standard_cart .app-order-summary-promo-applied a { color: var(--text-muted); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; } body #order-standard_cart .app-order-summary-promo-applied a:hover { color: var(--error); } /* ----------------------------------------------------------------------- 19) Custom form fields (checkout.tpl personal/billing/domain-registrant/ password sections, configureproduct.tpl server + config-option fields, configuredomains.tpl NS fields) — label-above, no icon-prepend, a real CSS grid instead of a hand-computed Bootstrap column count. `.field`/ `.form-control` themselves keep every color/radius rule sections 6-15 above already gave them; this only changes what wraps them. */ body #order-standard_cart .app-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; margin-bottom: 1.1rem; } body #order-standard_cart .app-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; } body #order-standard_cart .app-field-full { grid-column: 1 / -1; } body #order-standard_cart .app-field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; } body #order-standard_cart .app-field > label { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); margin: 0; } body #order-standard_cart .app-field .field, body #order-standard_cart .app-field .form-control { width: 100%; } body #order-standard_cart .app-field-static { font-size: var(--text-md); color: var(--text); padding-top: 0.15rem; } body #order-standard_cart .app-field-inline { flex-direction: row; align-items: center; gap: 0.6rem; } body #order-standard_cart .app-field-inline > label { margin: 0; white-space: nowrap; } body #order-standard_cart .app-field-choices { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } body #order-standard_cart .app-field-choice { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-md); font-weight: 500; color: var(--text); margin: 0; } body #order-standard_cart .app-password-meter-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } body #order-standard_cart .app-password-meter-row .password-strength-meter { flex: 1 1 220px; } @media (max-width: 767px) { body #order-standard_cart .app-form-grid, body #order-standard_cart .app-form-grid-3 { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------- 20) Unified addon cards (configureproduct.tpl product add-ons, configuredomains.tpl DNS-management/ID-protection/email-forwarding) — real CSS grid wrapper (`.app-addon-grid`) plus a CSS-grid-area repositioning of the stock `.panel-price`/`.panel-add` elements so the whole thing reads as ONE card (price top-right beside the name, a slim status row under the description) instead of three stacked bars — see configureproduct.tpl/configuredomains.tpl's own comments for exactly why `.panel-addon`/`.panel-price`/`.panel-add`/`.panel-addon-selected` and the `.addon-products` container class stay untouched (real stock JS delegates click-to-toggle + an iCheck "Added to Cart" text-swap to those exact names — confirmed by reading templates/orderforms/standard_cart/ js/scripts.js, not assumed). */ body #order-standard_cart .app-addon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; } body #order-standard_cart .app-addon-grid-item { list-style: none; } body #order-standard_cart .app-addon-grid .panel-addon { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "body price" "add add"; align-items: start; column-gap: 1rem; height: 100%; padding: 1rem 1.1rem 0.85rem; } body #order-standard_cart .app-addon-grid .panel-addon .panel-body { grid-area: body; padding: 0; text-align: left; } body #order-standard_cart .app-addon-grid .panel-addon .panel-body label { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; margin-bottom: 0.3rem; } body #order-standard_cart .app-addon-grid .panel-addon .panel-price { grid-area: price; background: transparent; border-top: none; font-weight: 700; font-size: var(--text-md); white-space: nowrap; padding: 0.15rem 0 0; text-align: right; } body #order-standard_cart .app-addon-grid .panel-addon .panel-add { grid-area: add; margin-top: 0.75rem; border-radius: 999px; padding: 0.4rem 0.85rem; font-size: var(--text-sm); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: max-content; } /* ----------------------------------------------------------------------- 21) Payment method cards (checkout.tpl) — was a stock `.radio-inline` list; rebuilt using this project's own established `:has(input:checked)` selected-state convention (already used elsewhere in the shared theme, e.g. `.app-radio-pill:has(input:checked)`) rather than a new pattern. The real `` (name/value/data attributes/class) is untouched — see checkout.tpl's own comment. */ body #order-standard_cart .app-payment-methods { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } body #order-standard_cart .app-payment-method { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.15rem; border: 1px solid var(--border); border-radius: var(--rounding-lg); background: var(--bg); cursor: pointer; box-shadow: var(--elevation-1); transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } body #order-standard_cart .app-payment-method:hover { border-color: var(--primary); box-shadow: var(--elevation-2); } body #order-standard_cart .app-payment-method:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary), var(--elevation-1); } body #order-standard_cart .app-payment-method input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; flex-shrink: 0; } body #order-standard_cart .app-payment-method-name { font-weight: 600; font-size: var(--text-md); color: var(--text); } @media (max-width: 575px) { body #order-standard_cart .app-addon-grid { grid-template-columns: 1fr; } } /* ============================================================================= VERCAA CHECKOUT-FUNNEL STRUCTURAL REBUILD — PASS 2 (2026-08-14) --------------------------------------------------------------------------- Context: this is a REDO of the pass above. The user's verdict on that pass's live result was unchanged from before it ran: "it looks like the standard whmcs with styling applied on it". Reading every template again against that verdict (not just this file) found THREE real spots pass 1 missed or left half-done, all fixed below with matching template changes (see each template's own comment for specifics): 22) products.tpl "Choose your plan" grid — was still the literal stock `.row.row-eq-height`/`.col-md-6` grid with price+CTA buried under the full feature list; the ONE page most users see first. 23) configureproduct.tpl's order-summary sidebar — the single biggest miss: this page never got the app-cart-columns/app-order-summary treatment checkout.tpl/viewcart.tpl already have. It was still the literal stock `#orderSummary > .order-summary > h2 + .summary- container` shape, and its live AJAX content (ordersummary.tpl) was still stock `.clearfix`/`.pull-left.float-left` float-row pairs that an earlier pass had only ever recolored (dashed borders + text-color tokens), never restructured — the exact failure mode named in the brief, confirmed live. 24) checkout.tpl's credit-card fields — the one remaining icon-prepend/ Bootstrap-column block on an otherwise already-rebuilt page. Verified live 2026-08-14 against the real hosting.com checkout at every step (checkout.hosting.com/order/basket/ and /order/checkout/) referenced in each template's own comment. Same rule as every pass before this one: every color traces to an existing var(--token), nothing new invented. */ /* ----------------------------------------------------------------------- 22) Plan/pricing cards (products.tpl). `.product`/`.product-desc`/ `.feature-value`/`.btn-order-now` keep every rule sections 4 and 20 above (and the shared theme's own compiled theme.min.css) already gave them — this only adds the grid wrapper and the new inner blocks products.tpl now renders alongside those class names (see that file's own comment for why nothing was renamed away). */ body #order-standard_cart .app-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: 1.5rem; padding: 0; margin: 0; list-style: none; } body #order-standard_cart .cart-body .products.app-plans-grid .product { display: flex; flex-direction: column; } body #order-standard_cart .app-plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } body #order-standard_cart .app-plan-card-price-block { padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid var(--border-muted); } body #order-standard_cart .app-plan-card-price { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 1rem; } body #order-standard_cart .app-plan-card-price-label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; } body #order-standard_cart .app-plan-card-amount { font-size: 1.9rem; font-weight: 800; color: var(--text); line-height: 1.1; } body #order-standard_cart .app-plan-card-cycle { font-size: var(--text-md); color: var(--text-muted); font-weight: 500; } body #order-standard_cart .app-plan-card-setup { font-size: var(--text-sm); color: var(--text-muted); } body #order-standard_cart .cart-body .products .product .app-plan-card-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.7rem 1rem; } /* Real stock rule this re-declares (`body #order-standard_cart .products .product footer .btn-order-now` in the compiled templates/vercaa-2026/css/theme.min.css) since products.tpl no longer wraps this button in a `