/* HOSTOWEB OrderFlow v1.6 - native WHMCS cart styling and alignment fixes. */ #order-standard_cart { --of-blue: #1765e9; --of-blue-dark: #104ebc; --of-ink: #14213c; --of-muted: #69788f; --of-border: #e3eaf3; --of-surface: #f7f9fd; --of-radius: 17px; color: var(--of-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; line-height: 1.55; max-width: 1420px; margin: 0 auto 48px; } #order-standard_cart *, #order-standard_cart *::before, #order-standard_cart *::after { box-sizing: border-box; } #order-standard_cart .cart-body { min-width: 0; } #order-standard_cart .header-lined { margin: 0 0 22px; padding: 0; border: 0; } #order-standard_cart .header-lined h1 { color: var(--of-ink); font-size: clamp(25px, 3vw, 34px); font-weight: 750; letter-spacing: -.035em; } #order-standard_cart .header-lined p { color: var(--of-muted); } #order-standard_cart a { text-decoration: none; } #order-standard_cart .btn { border-radius: 10px; font-weight: 650; transition: background-color .16s, border-color .16s, box-shadow .16s, transform .16s; } #order-standard_cart .btn-primary, #order-standard_cart .btn-success.btn-order-now { background: var(--of-blue); border-color: var(--of-blue); color: #fff; } #order-standard_cart .btn-primary:hover, #order-standard_cart .btn-success.btn-order-now:hover { background: var(--of-blue-dark); border-color: var(--of-blue-dark); } #order-standard_cart :is(.btn, .form-control, select, input, button, a):focus-visible { outline: 3px solid rgba(23,101,233,.28); outline-offset: 2px; } #order-standard_cart .form-control, #order-standard_cart select.form-control { border: 1px solid #d8e2ed; box-shadow: none; border-radius: 10px; background-color: #fff; color: var(--of-ink); min-height: 43px; } #order-standard_cart .form-control:focus { border-color: var(--of-blue); box-shadow: 0 0 0 3px rgba(23,101,233,.12); } #order-standard_cart .form-group > label:first-child { color: #34445d; font-size: 13px; font-weight: 650; margin-bottom: 7px; } #order-standard_cart .alert { border-radius: 12px; } /* Catalog landing */ #order-standard_cart .of-stepbar { display: flex; gap: 28px; align-items: center; margin: 0 0 26px; padding: 15px 20px; background: var(--of-surface); border: 1px solid var(--of-border); border-radius: 14px; } #order-standard_cart .of-step { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: #7b899e; white-space: nowrap; } #order-standard_cart .of-step-number { width: 27px; height: 27px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid #d4deec; background: #fff; font-size: 11px; } #order-standard_cart .of-step.is-current { color: var(--of-blue); } #order-standard_cart .of-step.is-current .of-step-number { color: white; background: var(--of-blue); border-color: var(--of-blue); } #order-standard_cart .of-hero { padding: 3px 0 24px; } #order-standard_cart .of-eyebrow { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--of-blue); font-weight: 750; } #order-standard_cart .of-hero h1 { font-weight: 750; font-size: clamp(26px,3.1vw,38px); letter-spacing: -.045em; line-height: 1.2; margin: 7px 0 10px; } #order-standard_cart .of-hero p { color: var(--of-muted); margin: 0; font-size: 15px; } #order-standard_cart .of-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } #order-standard_cart .of-product-card { display: flex; flex-direction: column; min-width: 0; padding: 25px; background: #fff; border: 1px solid var(--of-border); border-radius: var(--of-radius); box-shadow: 0 6px 24px rgba(23,46,87,.045); transition: border-color .2s, box-shadow .2s, transform .2s; } #order-standard_cart .of-product-card:hover { border-color: #9dbdf7; box-shadow: 0 14px 32px rgba(23,55,98,.10); transform: translateY(-2px); } #order-standard_cart .of-product-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; } #order-standard_cart .of-card-symbol { display: grid; place-items: center; height: 43px; width: 43px; border-radius: 12px; color: var(--of-blue); background: #eaf2ff; font-size: 17px; } #order-standard_cart .of-stock { color: #357f55; background: #edf9f1; padding: 4px 9px; border-radius: 40px; font-size: 11px; font-weight: 650; } #order-standard_cart .of-product-card h2 { color: var(--of-ink); font-size: 21px; font-weight: 750; letter-spacing: -.03em; margin: 0 0 9px; } #order-standard_cart .of-product-description { color: var(--of-muted); font-size: 13px; min-height: 0; } #order-standard_cart .of-product-description p { margin: 0 0 13px; } #order-standard_cart .of-features { list-style: none; margin: 13px 0 22px; padding: 0; display: grid; gap: 10px; } #order-standard_cart .of-features li { display: flex; gap: 10px; color: #52647a; font-size: 13px; align-items: baseline; } #order-standard_cart .of-features .fa-check { color: #198e70; font-size: 11px; flex: none; } #order-standard_cart .of-features strong { color: var(--of-ink); } #order-standard_cart .of-product-footer { border-top: 1px solid var(--of-border); margin-top: auto; padding-top: 20px; } #order-standard_cart .of-price { min-height: 70px; margin-bottom: 16px; } #order-standard_cart .of-price-label { font-size: 11px; color: var(--of-muted); } #order-standard_cart .of-amount { color: var(--of-ink); font-weight: 780; letter-spacing: -.045em; font-size: 27px; line-height: 1.35; } #order-standard_cart .of-price-cycle { color: var(--of-muted); font-size: 12px; } #order-standard_cart .of-setup-fee { color: var(--of-muted); font-size: 11px; margin-top: 5px; } #order-standard_cart .of-select-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; font-size: 13px; } #order-standard_cart .of-select-button .fa-arrow-right { font-size: 11px; } /* Product and category navigation */ #order-standard_cart .cart-sidebar .list-group, #order-standard_cart .cart-sidebar .panel { border: 1px solid var(--of-border); border-radius: 13px; overflow: hidden; box-shadow: none; background: #fff; } #order-standard_cart .cart-sidebar .list-group-item { border-color: #edf1f7; color: #52647b; font-size: 13px; padding: 12px 14px; } #order-standard_cart .cart-sidebar .list-group-item.active { color: var(--of-blue); background: #eaf2ff; border-color: #e3eaf3; font-weight: 700; } /* Configuration / checkout - WHMCS original markup, re-skinned without losing fields */ /* Keep card radii scoped. Avoid :is() mixing ID selectors with .view-cart-items: its raised specificity incorrectly rounds the cart's upper inner corners. */ #order-standard_cart .product-info, #order-standard_cart .field-container, #order-standard_cart .product-configurable-options, #order-standard_cart #productAddonsContainer, #order-standard_cart .already-registered, #order-standard_cart #containerExistingUserSignin, #order-standard_cart #containerNewUserSignup { border-radius: 14px; } #order-standard_cart .product-info { padding: 19px 21px; background: #f3f7ff; border: 1px solid #deebff; margin-bottom: 22px; } #order-standard_cart .product-info .product-title { font-size: 21px; font-weight: 750; color: var(--of-ink); } #order-standard_cart .sub-heading { margin-top: 24px; margin-bottom: 14px; border-bottom-color: var(--of-border); } #order-standard_cart .sub-heading span.primary-bg-color { color: var(--of-ink); background: transparent; border: 0; padding: 0; font-size: 17px; font-weight: 750; top:0;} #order-standard_cart .secondary-cart-body { min-width: 0; } #order-standard_cart #productConfigurableOptions { padding: 19px 20px 3px; border: 1px solid var(--of-border); background: #fff; } #order-standard_cart .field-container { padding: 18px 20px 2px; background: #fff; border: 1px solid var(--of-border); } #order-standard_cart #productAddonsContainer { padding: 18px 20px; border: 1px solid var(--of-border); } #order-standard_cart .panel-addon { border-radius: 12px; overflow: hidden; border-color: var(--of-border); } #order-standard_cart .panel-addon-selected { border-color: var(--of-blue); box-shadow: 0 0 0 2px rgba(23,101,233,.10); } #order-standard_cart .secondary-cart-sidebar { min-width: 0; } #order-standard_cart #orderSummary { position: sticky; top: 88px; } #order-standard_cart #orderSummary .order-summary { background: #fff; border: 1px solid var(--of-border); border-radius: 15px; overflow: hidden; box-shadow: 0 12px 32px rgba(21,45,82,.06); } #order-standard_cart #orderSummary .order-summary h2 { background: var(--of-ink); border: 0; color: white; padding: 17px 18px; margin: 0; font-size: 16px; font-weight: 700; } #order-standard_cart #orderSummary .summary-container { border: 0; } #order-standard_cart #btnCompleteProductConfig { display: block; width: 100%; margin-top: 12px; min-height: 48px; } #order-standard_cart .of-visually-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; border: 0 !important; padding: 0 !important; } #order-standard_cart .of-choice-picker { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 16px; } #order-standard_cart .of-choice { background: white; border: 1px solid #dbe4f1; border-radius: 10px; color: #415672; padding: 11px 15px; min-height: 42px; font-size: 12px; font-weight: 650; cursor: pointer; flex-grow: 1; } #order-standard_cart .of-choice.is-selected { background: #eaf2ff; color: #1056ce; border-color: var(--of-blue); box-shadow: 0 0 0 1px rgba(23,101,233,.10); } #order-standard_cart .of-choice:hover { border-color: #89abe6; } #order-standard_cart #productConfigurableOptions label:has(> input[type="radio"]) { padding: 9px 13px; margin: 4px 7px 4px 0; border: 1px solid var(--of-border); border-radius: 10px; cursor: pointer; background: white; } #order-standard_cart #productConfigurableOptions label:has(> input[type="radio"]:checked) { border-color: var(--of-blue); background: #edf4ff; } #order-standard_cart #productConfigurableOptions input[type="checkbox"] { accent-color: var(--of-blue); } #order-standard_cart .view-cart-items-header { background: var(--of-surface); border-radius: 12px 12px 0 0; } #order-standard_cart .view-cart-items { border: 1px solid var(--of-border); background: white; } #order-standard_cart .view-cart-items .item { border-color: var(--of-border); padding: 15px 14px; } #order-standard_cart .view-cart-items .item-title { font-weight: 700; color: var(--of-ink); } #order-standard_cart .checkout-security-msg, #order-standard_cart .already-registered { background: var(--of-surface); border: 1px solid var(--of-border); padding: 15px; } #order-standard_cart #frmCheckout .sub-heading { margin-top: 30px; } #order-standard_cart #frmCheckout .prepend-icon .field-icon { color: var(--of-muted); } #order-standard_cart #frmCheckout .form-control { font-size: 14px; } #order-standard_cart .payment-methods .payment-method { border-radius: 12px; border-color: var(--of-border); } #order-standard_cart .payment-methods .payment-method.active { border-color: var(--of-blue); } @media (max-width: 991px) { #order-standard_cart .of-product-grid { grid-template-columns: 1fr; } #order-standard_cart .of-stepbar { gap: 12px; } #order-standard_cart #orderSummary { position: static; } } @media (max-width: 767px) { #order-standard_cart { margin-bottom: 25px; } #order-standard_cart .of-stepbar { padding: 10px; justify-content: space-between; } #order-standard_cart .of-step { gap: 5px; font-size: 10px; } #order-standard_cart .of-step-number { width: 23px; height: 23px; } #order-standard_cart .of-product-card { padding: 19px; } #order-standard_cart .of-product-grid { gap: 12px; } #order-standard_cart .field-container, #order-standard_cart #productConfigurableOptions { padding: 14px 14px 0; } #order-standard_cart #productAddonsContainer { padding: 14px; } #order-standard_cart .of-choice { width: 100%; } } @media (prefers-reduced-motion: reduce) { #order-standard_cart .of-product-card, #order-standard_cart .btn { transition: none; } } /* =============================================================== v1.1 — screenshot-informed UI update (domain / addons / cart / checkout) All changes are presentational. WHMCS owns business state. =============================================================== */ #order-standard_cart { --of-blue: #1768eb; --of-blue-dark: #1054c3; --of-ink: #15243f; --of-muted: #62748b; --of-border: #dde7f3; --of-surface: #f6f9fd; --of-green: #0b876c; font-size: 14px; } #order-standard_cart .header-lined h1, #order-standard_cart .header-lined h1.font-size-36 { font-size: clamp(27px, 3.4vw, 38px) !important; line-height: 1.18; letter-spacing: -.04em; font-weight: 760; margin: 4px 0 23px; } #order-standard_cart .sub-heading { border: 0 !important; height: auto; display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; } #order-standard_cart .sub-heading::before { display: none; } #order-standard_cart .sub-heading span.primary-bg-color { background: transparent !important; color: var(--of-ink) !important; padding: 0 !important; font-size: 17px !important; line-height: 1.35; font-weight: 750 !important; } #order-standard_cart .alert { border: 1px solid var(--of-border); padding: 16px 18px; } #order-standard_cart .btn { border-radius: 10px; padding: 10px 17px; } #order-standard_cart .btn.btn-primary, #order-standard_cart .btn.btn-success.btn-checkout, #order-standard_cart #btnCompleteOrder { background-color: var(--of-blue); border-color: var(--of-blue); color: #fff; } #order-standard_cart .btn.btn-primary:hover, #order-standard_cart .btn.btn-success.btn-checkout:hover, #order-standard_cart #btnCompleteOrder:hover { background-color: var(--of-blue-dark); border-color: var(--of-blue-dark); } #order-standard_cart input[type='radio'], #order-standard_cart input[type='checkbox'] { accent-color: var(--of-blue); } #order-standard_cart input.field:not([type='radio']):not([type='checkbox']), #order-standard_cart textarea.field { border: 1px solid #d8e2ed; border-radius: 10px; box-shadow: none; min-height: 44px; } #order-standard_cart select, #order-standard_cart input.form-control { min-height: 44px; } /* Hide the long categories menu after product selection. The normal cart Add More Products links remain visible. */ #order-standard_cart.of-full-width { max-width: 1240px; width: 100%; padding: 0 12px; } #order-standard_cart.of-full-width > .row { display: block; margin-left: 0; margin-right: 0; } #order-standard_cart.of-full-width > .row > .cart-sidebar { display: none !important; } #order-standard_cart.of-full-width > .row > .cart-body { float: none !important; width: 100% !important; max-width: 100%; padding: 0 !important; margin: 0 !important; } #order-standard_cart.of-full-width .sidebar-categories-collapsed { display: none !important; } #order-standard_cart.of-full-width > .row > .cart-body > .header-lined { margin: 12px 0 22px; } /* Compact native progress bar, inserted only on core order steps */ #order-standard_cart .of-progress { list-style: none; display: flex; align-items: center; gap: 8px; margin: 6px 0 30px; padding: 11px 14px; border-radius: 13px; background: #f7f9fd; border: 1px solid var(--of-border); } #order-standard_cart .of-progress-step { display: flex; align-items: center; gap: 9px; flex: 1; color: #7a879a; font-size: 12px; font-weight: 600; } #order-standard_cart .of-progress-step:after { content: ''; height: 1px; background: #dce5f0; flex: 1; margin-left: 9px; } #order-standard_cart .of-progress-step:last-child:after { display: none; } #order-standard_cart .of-progress-number { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #d5dfeb; background: #fff; border-radius: 50%; flex: none; font-size: 11px; } #order-standard_cart .of-progress-step.is-complete .of-progress-number { border-color: #bde8d9; background: #e8f7f1; color: #0c8364; } #order-standard_cart .of-progress-step.is-current { color: var(--of-blue); } #order-standard_cart .of-progress-step.is-current .of-progress-number { background: var(--of-blue); color: white; border-color: var(--of-blue); } /* Domain chooser — clear 3-option cards, no giant grey strips */ #order-standard_cart.of-domain-select-page .domain-selection-options { display: grid; gap: 13px; } #order-standard_cart.of-domain-select-page .domain-selection-options > .option { margin: 0; padding: 0; border: 1px solid var(--of-border); background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 18px rgba(25,58,98,.025); transition: border-color .18s, box-shadow .18s; } #order-standard_cart.of-domain-select-page .domain-selection-options > .option:hover { border-color: #a2bceb; } #order-standard_cart.of-domain-select-page .domain-selection-options > .option.of-selected { border-color: var(--of-blue); box-shadow: 0 0 0 2px rgba(23,104,235,.09); } #order-standard_cart.of-domain-select-page .domain-selection-options > .option > label { width: 100%; min-height: 68px; display: flex; align-items: center; gap: 13px; padding: 16px 20px; margin: 0; background: transparent; color: var(--of-ink); font-size: 16px; line-height: 1.4; font-weight: 700; cursor: pointer; } #order-standard_cart.of-domain-select-page .domain-selection-options > .option > label input[type='radio'] { margin: 0; width: 19px; height: 19px; flex: none; } #order-standard_cart.of-domain-select-page .domain-selection-options > .option.of-selected > label { color: var(--of-blue); background: #f5f9ff; } #order-standard_cart.of-domain-select-page .domain-input-group { margin: 0 20px 19px; padding: 18px 0 0; border-top: 1px solid #ebf0f6; } #order-standard_cart.of-domain-select-page .domain-input-group > .row { display: flex; align-items: stretch; gap: 10px; margin: 0; } #order-standard_cart.of-domain-select-page .domain-input-group > .row > [class*='col-sm-8'], #order-standard_cart.of-domain-select-page .domain-input-group > .row > [class*='col-sm-9'] { margin: 0; max-width: none; width: auto; flex: 1 1 auto; padding: 0; min-width: 0; } #order-standard_cart.of-domain-select-page .domain-input-group > .row > .col-sm-2 { margin: 0; padding: 0; width: 150px; flex: 0 0 150px; } #order-standard_cart.of-domain-select-page .domain-input-group .domains-row { margin: 0; } #order-standard_cart.of-domain-select-page .domain-input-group .domains-row > [class*='col-'] { padding-left: 4px; padding-right: 4px; } #order-standard_cart.of-domain-select-page .domain-input-group .domains-row > [class*='col-']:first-child { padding-left: 0; } #order-standard_cart.of-domain-select-page .domain-input-group .domains-row > [class*='col-']:last-child { padding-right: 0; } #order-standard_cart.of-domain-select-page .domain-input-group .input-group-text, #order-standard_cart.of-domain-select-page .domain-input-group .input-group-addon { border: 1px solid #d8e2ed; color: #73839b; background: #f7f9fd; min-height: 44px; } #order-standard_cart.of-domain-select-page .domain-input-group .btn { min-height: 44px; } #order-standard_cart.of-domain-select-page #DomainSearchResults, #order-standard_cart.of-domain-select-page .domain-lookup-result, #order-standard_cart.of-domain-select-page .suggested-domains { border-radius: 12px; } /* Domain add-ons — native checkboxes drive selection. No contradictory green add buttons. */ #order-standard_cart.of-domain-addons-page #frmConfigureDomains > p:first-of-type { color: var(--of-muted); font-size: 15px; margin: 0 0 22px; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading { margin-top: 24px; margin-bottom: 13px; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading span { font-size: 19px !important; overflow-wrap: anywhere; } #order-standard_cart.of-domain-addons-page .addon-products { margin-top: 5px; margin-bottom: 27px; } #order-standard_cart.of-domain-addons-page .addon-products > [class*='col-'] { display: flex; } #order-standard_cart.of-domain-addons-page .panel-addon { width: 100%; display: flex; flex-direction: column; text-align: left; margin: 0; border: 1px solid var(--of-border) !important; border-radius: 15px !important; background: white; overflow: hidden; box-shadow: 0 6px 20px rgba(25,58,98,.03); } #order-standard_cart.of-domain-addons-page .panel-addon.of-selected, #order-standard_cart.of-domain-addons-page .panel-addon.panel-addon-selected { border-color: var(--of-blue) !important; box-shadow: 0 0 0 2px rgba(23,104,235,.07); } #order-standard_cart.of-domain-addons-page .panel-addon .panel-body { padding: 20px 20px 14px; color: var(--of-muted); font-size: 13px; line-height: 1.6; flex: 1 1 auto; } #order-standard_cart.of-domain-addons-page .panel-addon .panel-body > label { display: flex; align-items: center; gap: 9px; width: 100%; font-size: 15px; font-weight: 750; color: var(--of-ink); cursor: pointer; margin-bottom: 8px; } #order-standard_cart.of-domain-addons-page .panel-addon .panel-body input[type='checkbox'] { margin: 0; flex: none; width: 18px; height: 18px; } #order-standard_cart.of-domain-addons-page .panel-addon .panel-price { margin: 0 20px 17px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--of-border); background: transparent; color: var(--of-ink); font-size: 14px; font-weight: 700; text-align: left; } #order-standard_cart.of-domain-addons-page .panel-addon .panel-add { display: none !important; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .text-center .btn, #order-standard_cart.of-domain-addons-page #frmConfigureDomains button[type='submit'].btn { min-width: 175px; min-height: 48px; } /* Cart — native item rows kept intact for cycles, domains, removal and JS pricing */ #order-standard_cart.of-cart-page .secondary-cart-body { min-width: 0; } #order-standard_cart.of-cart-page .view-cart-items-header { padding: 12px 16px; background: #f2f6fd; color: #53647d; font-size: 12px; font-weight: 700; border: 1px solid var(--of-border); border-bottom: 0; border-radius: 14px 14px 0 0; } #order-standard_cart.of-cart-page .view-cart-items { border: 1px solid var(--of-border); border-radius: 0 0 14px 14px; overflow: hidden; background: white; } #order-standard_cart.of-cart-page .view-cart-items .item { padding: 21px 18px; border-bottom: 1px solid #e8edf4; background: #fff; } #order-standard_cart.of-cart-page .view-cart-items .item:nth-child(even) { background: #fbfcff; } #order-standard_cart.of-cart-page .view-cart-items .item:last-child { border-bottom: 0; } #order-standard_cart.of-cart-page .view-cart-items .item-title { font-size: 16px; line-height: 1.55; font-weight: 750; } #order-standard_cart.of-cart-page .view-cart-items .item .btn-link { color: var(--of-blue); text-decoration: none; font-size: 12px; font-weight: 650; } #order-standard_cart.of-cart-page .view-cart-items .item small, #order-standard_cart.of-cart-page .view-cart-items .item .item-domain, #order-standard_cart.of-cart-page .view-cart-items .item .item-options { color: var(--of-muted); } #order-standard_cart.of-cart-page #scrollingPanelContainer { min-width: 0; } #order-standard_cart.of-cart-page #orderSummary.order-summary, #order-standard_cart.of-cart-page #orderSummary { border: 1px solid var(--of-border); background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(14,44,87,.07); overflow: hidden; } #order-standard_cart.of-cart-page #orderSummary > h2 { font-size: 18px !important; font-weight: 750; background: #183a5a; padding: 18px 20px; color: white; margin: 0; } #order-standard_cart.of-cart-page #orderSummary .summary-container { padding: 19px; background: #fff; } #order-standard_cart.of-cart-page #orderSummary .subtotal, #order-standard_cart.of-cart-page #orderSummary .bordered-totals > div { font-size: 13px; line-height: 1.7; color: #52637a; margin-bottom: 9px; } #order-standard_cart.of-cart-page #orderSummary .recurring-totals { border-top: none; margin-top: 14px; padding-top: 14px; color: var(--of-muted); font-size: 12px; } #order-standard_cart.of-cart-page #orderSummary .total-due-today { margin: 20px 0 14px; background: #f4f8ff; border: 1px solid #e4edfc; border-radius: 12px; padding: 16px 14px; text-align: center; } #order-standard_cart.of-cart-page #orderSummary .total-due-today .amt { display: block; font-size: 30px; line-height: 1.15; font-weight: 800; color: var(--of-ink); letter-spacing: -.03em; margin-bottom: 5px; } #order-standard_cart.of-cart-page #orderSummary .btn-checkout { width: 100%; min-height: 49px; text-align: center; font-size: 15px; font-weight: 750; } #order-standard_cart.of-cart-page #orderSummary .text-right { text-align: center !important; } #order-standard_cart.of-cart-page #orderSummary { position: sticky; top: 24px; } /* Checkout — keep native account selection, gateway input, validation and ToS */ #order-standard_cart.of-checkout-page .already-registered { background: #f6f9fe; border: 1px solid var(--of-border); border-radius: 14px; padding: 18px 20px; margin-bottom: 28px; color: #4d5e77; } #order-standard_cart.of-checkout-page .already-registered p { margin: 3px 0; } #order-standard_cart.of-checkout-page #frmCheckout .account-select-container { margin-bottom: 20px; } #order-standard_cart.of-checkout-page #frmCheckout .account { border: 1px solid var(--of-border); background: white; border-radius: 13px; margin: 0 0 12px; padding: 15px 17px; box-shadow: none; } #order-standard_cart.of-checkout-page #frmCheckout .account.active, #order-standard_cart.of-checkout-page #frmCheckout .account.of-selected { border-color: var(--of-blue); background: #f5f9ff; box-shadow: 0 0 0 2px rgba(23,104,235,.05); } #order-standard_cart.of-checkout-page #frmCheckout .account label { cursor: pointer; width: 100%; } #order-standard_cart.of-checkout-page #frmCheckout .sub-heading { margin-top: 31px; } #order-standard_cart.of-checkout-page #frmCheckout .field, #order-standard_cart.of-checkout-page #frmCheckout .form-control { border-radius: 10px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer > .text-center { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; text-align: left !important; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline { margin: 0; min-height: 63px; padding: 14px 16px; border: 1px solid var(--of-border); border-radius: 12px; display: flex; align-items: center; gap: 12px; background: white; text-align: left; color: var(--of-ink); font-size: 13px; line-height: 1.5; font-weight: 650; cursor: pointer; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline:hover { border-color: #acc4ed; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-selected { background: #f5f9ff; border-color: var(--of-blue); box-shadow: 0 0 0 2px rgba(23,104,235,.05); } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline input { margin: 0; flex: none; width: 17px; height: 17px; position: static; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline img { max-height: 28px; max-width: 95px; object-fit: contain; } #order-standard_cart.of-checkout-page #frmCheckout #btnCompleteOrder { min-width: min(100%, 280px); min-height: 52px; font-weight: 750; font-size: 15px; border-radius: 11px; } #order-standard_cart.of-checkout-page #frmCheckout .marketing-email-optin { margin-top: 28px; padding: 17px; background: var(--of-surface); border-radius: 12px; } #order-standard_cart.of-checkout-page .checkout-security-msg { margin-top: 23px; font-size: 12px; } @media (min-width: 992px) { #order-standard_cart.of-cart-page > .row > .cart-body > .row { display: flex; gap: 25px; align-items: flex-start; margin: 0; } #order-standard_cart.of-cart-page > .row > .cart-body > .row > .secondary-cart-body { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; float: none; } #order-standard_cart.of-cart-page > .row > .cart-body > .row > .secondary-cart-sidebar { flex: 0 0 330px; width: 330px; max-width: 330px; float: none; padding: 0; } } @media (max-width: 991px) { #order-standard_cart.of-cart-page #orderSummary { position: static; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer > .text-center { grid-template-columns: 1fr; } } @media (max-width: 767px) { #order-standard_cart.of-full-width { padding: 0 5px; } #order-standard_cart .of-progress { gap: 3px; padding: 10px 8px; margin-bottom: 20px; } #order-standard_cart .of-progress-step { gap: 5px; font-size: 10px; } #order-standard_cart .of-progress-step:after { margin-left: 1px; } #order-standard_cart .of-progress-number { width: 22px; height: 22px; font-size: 10px; } #order-standard_cart.of-domain-select-page .domain-selection-options > .option > label { min-height: 59px; padding: 13px 14px; font-size: 14px; } #order-standard_cart.of-domain-select-page .domain-input-group { margin: 0 14px 15px; } #order-standard_cart.of-domain-select-page .domain-input-group > .row { display: block; } #order-standard_cart.of-domain-select-page .domain-input-group > .row > .col-sm-2 { width: 100%; margin-top: 11px; } #order-standard_cart.of-domain-addons-page .addon-products > [class*='col-'] { width: 100%; } #order-standard_cart.of-cart-page .view-cart-items .item { padding: 17px 13px; } #order-standard_cart.of-cart-page #orderSummary .summary-container { padding: 15px; } #order-standard_cart.of-checkout-page .already-registered { padding: 15px; } } /* v1.2: Category navigation must never reserve a column during cart/checkout. WHMCS 8.1 installations sometimes wrap .cart-sidebar in extra Bootstrap columns. The previous direct-child selector was too narrow on those sites. */ #order-standard_cart.of-full-width .cart-sidebar, #order-standard_cart.of-full-width .sidebar-categories-collapsed, #order-standard_cart.of-full-width .of-sidebar-slot, #order-standard_cart.of-full-width .of-hidden-categories, #order-standard_cart.of-full-width [data-of-category-nav="true"] { display: none !important; } #order-standard_cart.of-full-width .cart-body { display: block; width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; min-width: 0; } #order-standard_cart.of-full-width .of-main-row { display: block !important; width: 100%; margin-left: 0; margin-right: 0; } #order-standard_cart.of-full-width .of-main-row > .cart-body, #order-standard_cart.of-full-width .of-main-row > .of-cart-body-slot { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; float: none !important; } /* Cart contents get two well-proportioned columns once categories are gone. */ @media (min-width: 1100px) { #order-standard_cart.of-cart-page .secondary-cart-sidebar { flex: 0 0 340px !important; width: 340px !important; max-width: 340px !important; } } @media (max-width: 991px) { #order-standard_cart.of-cart-page .secondary-cart-body, #order-standard_cart.of-cart-page .secondary-cart-sidebar { width: 100% !important; max-width: 100% !important; float: none !important; } #order-standard_cart.of-cart-page .secondary-cart-sidebar { margin-top: 25px; } } /* =============================================================== v1.3 — Cart panel edge alignment and native "Empty cart" footer Preserve native button IDs, confirmation modal and AJAX actions. =============================================================== */ #order-standard_cart.of-cart-page .view-cart-items-header { margin: 0; padding: 14px 20px; border: 1px solid var(--of-border); border-bottom: 0; border-radius: 16px 16px 0 0; background: #f2f6fd; overflow: hidden; } #order-standard_cart.of-cart-page .view-cart-items { margin: 0 !important; border: 1px solid var(--of-border); border-top: 0; border-bottom: 0; border-radius: 0 !important; background: #fff; overflow: hidden; } /* The first item must not inherit the 14px rounded top from the old rule. */ #order-standard_cart.of-cart-page .view-cart-items > .item { margin: 0; border-radius: 0 !important; box-shadow: none; } #order-standard_cart.of-cart-page .view-cart-items > .item:first-child { border-top: 0; } /* .empty-cart is a sibling of .view-cart-items in the native WHMCS viewcart.tpl. Turn it into an integrated footer, not a floating badge. */ #order-standard_cart.of-cart-page .empty-cart { display: flex; justify-content: flex-end; align-items: center; clear: both; position: static; float: none; width: 100%; min-height: 58px; margin: 0 0 22px !important; /* overrides WHMCS's margin: -20px 20px 0 0 */ padding: 9px 15px; line-height: normal; text-align: right; background: #fff; border: 1px solid var(--of-border); border-top: 1px solid #edf1f7; border-radius: 0 0 16px 16px; } #order-standard_cart.of-cart-page .empty-cart #btnEmptyCart { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-height: 36px; margin: 0 !important; padding: 7px 12px; border: 1px solid #e4eaf2; border-radius: 9px; background: #fff; box-shadow: none; color: #67778e; font-size: 12px; font-weight: 650; line-height: 1.2; text-decoration: none; } #order-standard_cart.of-cart-page .empty-cart #btnEmptyCart:hover, #order-standard_cart.of-cart-page .empty-cart #btnEmptyCart:focus-visible { background: #fff6f7; border-color: #f2c8ce; color: #b83a4a; } /* A zero-item cart renders no .empty-cart footer. Close the card itself. */ #order-standard_cart.of-cart-page .view-cart-items:not(:has(+ .empty-cart)) { border-bottom: 1px solid var(--of-border); border-radius: 0 0 16px 16px !important; margin-bottom: 20px !important; } @media (max-width: 767px) { #order-standard_cart.of-cart-page .view-cart-items-header { padding: 11px 13px; } #order-standard_cart.of-cart-page .empty-cart { min-height: 52px; padding: 7px 12px; } } /* v1.4 — payment gateways and checkout security alert */ #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer > .text-center { gap: 14px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method { min-height: 86px; padding: 16px 18px; gap: 14px; align-items: center; border-radius: 14px; transition: border-color .18s, box-shadow .18s, background-color .18s, transform .18s; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method:hover { border-color: #95b5ef; background: #fbfdff; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method.of-selected { background: #f5f9ff; border-color: var(--of-blue); box-shadow: 0 0 0 2px rgba(23,104,235,.08), 0 10px 24px rgba(23,101,233,.07); } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method input { width: 19px; height: 19px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer .of-payment-icon { width: 46px; height: 46px; flex: 0 0 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid #dbe6f5; background: #f6f9fe; color: #1e5fda; overflow: hidden; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer .of-payment-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer .of-payment-icon img { max-width: 30px; max-height: 30px; object-fit: contain; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer .of-payment-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer .of-payment-title { display: block; color: var(--of-ink); font-size: 14px; line-height: 1.35; font-weight: 760; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer .of-payment-desc { display: block; color: var(--of-muted); font-size: 12px; line-height: 1.4; font-weight: 500; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method.of-selected .of-payment-icon { border-color: #bfd4fb; background: #ffffff; color: var(--of-blue); } #order-standard_cart.of-checkout-page .checkout-security-msg, #order-standard_cart.of-checkout-page .alert.alert-warning.checkout-security-msg { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 18px 20px; border: 1px solid #e7edf7; border-radius: 14px; background: #f8fbff; color: #7d5b1d; font-size: 13px; line-height: 1.6; box-shadow: none; } #order-standard_cart.of-checkout-page .checkout-security-msg::before { content: '\1F512'; width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff6dd; color: #a36b11; font-size: 22px; line-height: 1; } #order-standard_cart.of-checkout-page .checkout-security-msg i, #order-standard_cart.of-checkout-page .checkout-security-msg .fa, #order-standard_cart.of-checkout-page .checkout-security-msg .fas, #order-standard_cart.of-checkout-page .checkout-security-msg .far, #order-standard_cart.of-checkout-page .checkout-security-msg .glyphicon { display: none !important; } #order-standard_cart.of-checkout-page .checkout-security-msg strong { color: #8c5f12; } @media (max-width: 991px) { #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method { min-height: 78px; } } @media (max-width: 575px) { #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method { padding: 14px; gap: 12px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer .of-payment-icon { width: 42px; height: 42px; flex-basis: 42px; } #order-standard_cart.of-checkout-page .checkout-security-msg, #order-standard_cart.of-checkout-page .alert.alert-warning.checkout-security-msg { padding: 16px; gap: 12px; } } /* ==================================================================== HOSTOWEB OrderFlow v1.7 — Checkout sections, complete replacement of the v1.6 checkout experiments. Only the checkout page is affected. ==================================================================== */ /* Cards are actual DOM groups: heading and fields share ONE border. */ #order-standard_cart.of-checkout-page #frmCheckout .of-section-card { background: #fff; border: 1px solid #dde6f2; border-radius: 16px; padding: 22px 24px 18px; margin: 0 0 22px; box-shadow: 0 5px 18px rgba(20, 38, 70, .035); overflow: visible; min-width: 0; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .sub-heading, #order-standard_cart.of-checkout-page #frmCheckout .of-registration-card .sub-heading, #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSecurity > .sub-heading { margin: 0 0 20px !important; padding: 0 0 15px !important; border-bottom: 1px solid #e9eef6 !important; background: transparent !important; text-align: left; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .sub-heading .primary-bg-color, #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSecurity > .sub-heading .primary-bg-color { font-size: 17px; line-height: 1.35; font-weight: 750; color: #172946; background: transparent; padding: 0; border: 0; top:0; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .row, #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .field-container > .row { margin-left: -10px !important; margin-right: -10px !important; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .row > [class*='col-'], #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .field-container > .row > [class*='col-'] { padding-left: 10px; padding-right: 10px; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card .field-container { border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none; padding: 0 !important; margin: 0 !important; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card .form-group { margin-bottom: 15px; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card .form-group:last-child { margin-bottom: 10px; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card .of-section-help { display: block; color: #73829a; font-size: 13px; line-height: 1.5; margin: -5px 0 18px !important; } /* Registration/sign-in introduction, unchanged native linked accounts. */ #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSignup > .of-registration-card { background: #f7faff; border: 1px solid #e0e9f6; border-radius: 16px; margin: 0 0 22px; padding: 19px 23px; } #order-standard_cart.of-checkout-page #frmCheckout .of-registration-card > .sub-heading { margin-bottom: 13px !important; } #order-standard_cart.of-checkout-page #frmCheckout .of-registration-card > .text-center { padding: 4px 0 1px; } /* Native security block is already one element: style, never reparent it. */ #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSecurity.of-security-card { background: #fff; border: 1px solid #dde6f2; border-radius: 16px; padding: 22px 24px 18px; margin: 0 0 22px; box-shadow: 0 5px 18px rgba(20,38,70,.035); } #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSecurity > .row { margin-left: -10px; margin-right: -10px; } #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSecurity > .row > [class*='col-'] { padding-left: 10px; padding-right: 10px; } /* Consistent input spacing and typography. */ #order-standard_cart.of-checkout-page #frmCheckout .form-control { min-height: 45px; border-radius: 10px; border-color: #d9e3f0; background-color: #fff; } #order-standard_cart.of-checkout-page #frmCheckout textarea.form-control { min-height: 110px; padding: 13px 14px; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card label:not(.field-icon):not(.radio-inline):not(.checkbox-inline) { font-size: 13px; font-weight: 650; color: #344861; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card .field-help-text { color: #8491a4; font-size: 12px; } /* Payment is a separate, clearly defined step. No payment input is moved. */ #order-standard_cart.of-checkout-page #frmCheckout .of-payment-heading { margin: 28px 0 14px !important; padding: 0; border: 0; } #order-standard_cart.of-checkout-page #frmCheckout .of-payment-heading .primary-bg-color { font-weight: 750; font-size: 19px; color: #172946; } #order-standard_cart.of-checkout-page #frmCheckout #totalDueToday { border-radius: 13px; background: #ecf8f1; border: 1px solid #d6eddf; color: #126847; padding: 18px 16px; margin: 0 0 14px; font-size: 14px; } #order-standard_cart.of-checkout-page #frmCheckout #totalDueToday strong { font-size: 22px; font-weight: 800; color: #116746; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer { background: #fff; border: 1px solid #dde6f2; border-radius: 16px; padding: 20px; margin-bottom: 22px; box-shadow: 0 5px 18px rgba(20,38,70,.035); } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer > p { margin: 0 0 17px; color: #6c7b91; font-size: 13px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer > .text-center { gap: 12px; } /* IMPORTANT: previous v1.4 selected classes are intentionally ignored. Only the browser's actual checked radio can activate a card. */ #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method, #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method.of-selected, #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method.active, #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method.of-payment-active { border: 1px solid #dce5f1 !important; background: #fff !important; box-shadow: none !important; color: #172946; min-height: 82px; padding: 14px 15px; border-radius: 13px; font-size: 0; gap: 12px; transition: border-color .16s, background .16s, box-shadow .16s; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method:hover { border-color: #adc6ee !important; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method:has(input[type='radio']:checked) { border-color: var(--of-blue) !important; background: #f3f8ff !important; box-shadow: 0 0 0 2px rgba(23,101,233,.08) !important; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method > img { display: none; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method .of-payment-icon { width: 42px; height: 42px; flex: 0 0 42px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method .of-payment-copy { flex: 1; min-width: 0; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method .of-payment-title { font-size: 13px; font-weight: 750; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method .of-payment-desc { font-size: 11px; font-weight: 450; } /* Legal consents: structured, readable, aligned to a single left edge. */ #order-standard_cart.of-checkout-page #frmCheckout .of-finalize-section { border: 1px solid #dde6f2; background: #f7faff; border-radius: 16px; padding: 24px 25px; margin: 8px 0 24px; box-shadow: 0 5px 18px rgba(20,38,70,.03); text-align: left !important; } #order-standard_cart.of-checkout-page #frmCheckout .of-finalize-section > p { margin: 0 0 15px; } #order-standard_cart.of-checkout-page #frmCheckout .of-finalize-section label.checkbox-inline { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 0; margin: 0; color: #41536f; font-size: 13px; line-height: 1.55; } #order-standard_cart.of-checkout-page #frmCheckout .of-finalize-section label.checkbox-inline input[type=checkbox] { position: static; width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 18px; } #order-standard_cart.of-checkout-page #frmCheckout .of-finalize-section #btnCompleteOrder { display: block; margin: 20px auto 0; min-height: 52px; min-width: min(100%, 290px); border-radius: 11px; box-shadow: 0 9px 20px rgba(23,101,233,.15); } @media (max-width: 767px) { #order-standard_cart.of-checkout-page #frmCheckout .of-section-card, #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSecurity.of-security-card, #order-standard_cart.of-checkout-page #frmCheckout #containerNewUserSignup > .of-registration-card, #order-standard_cart.of-checkout-page #frmCheckout .of-finalize-section { padding: 18px 16px; margin-bottom: 17px; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer { padding: 16px; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .row, #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .field-container > .row { margin-left: -8px !important; margin-right: -8px !important; } #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .row > [class*='col-'], #order-standard_cart.of-checkout-page #frmCheckout .of-section-card > .field-container > .row > [class*='col-'] { padding-left: 8px; padding-right: 8px; } #order-standard_cart.of-checkout-page #frmCheckout .of-finalize-section { padding: 20px 17px; } #order-standard_cart.of-checkout-page #frmCheckout .of-payment-heading { margin-top: 20px !important; } } /* v1.7.1 — single source of truth for gateway selection. iCheck may retain its old .checked icon even after WHMCS switches radio. Hide those graphics, keep the input, and draw one indicator from :checked. */ #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method { position: relative; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method::before { content: "✓"; width: 19px; height: 19px; border-radius: 100%; flex: 0 0 19px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #cbd7e5; background: #fff; color: transparent; font-size: 12px; font-weight: 750; line-height: 1; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method:has(input[name='paymentmethod']:checked)::before { background: #1765e9; border-color: #1765e9; color: #fff; } /* Mask visible native/iCheck controls but do not remove their inputs/events. */ #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method input[type='radio'][name='paymentmethod'], #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method [class^='iradio_'], #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method [class*=' iradio_'] { position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; border: 0 !important; box-shadow: none !important; background-image: none !important; } /* Never confuse hover/focus or stale .active classes with a selection. */ #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method:not(:has(input[name='paymentmethod']:checked)), #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method.active:not(:has(input[name='paymentmethod']:checked)), #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method.of-selected:not(:has(input[name='paymentmethod']:checked)) { border-color: #dce5f1 !important; background: #fff !important; box-shadow: none !important; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method:has(input[name='paymentmethod']:checked) { border-color: #1765e9 !important; background: #f3f8ff !important; box-shadow: 0 0 0 2px rgba(23,101,233,.08) !important; } #order-standard_cart.of-checkout-page #frmCheckout #paymentGatewaysContainer label.radio-inline.of-payment-method:has(input[name='paymentmethod']:focus-visible) { outline: 2px solid #376ee5; outline-offset: 2px; } /* ============================================================ v1.7.2 — Cart domain registration period dropdown WHMCS renders the year choices as a Bootstrap dropdown inside .view-cart-items .item-price. The cart's old overflow:hidden clipped the floating menu and the default left alignment pushed it into the separate summary column. Keep native selectDomainPeriodInCart() anchors intact. ============================================================ */ #order-standard_cart.of-cart-page .view-cart-items { overflow: visible !important; } #order-standard_cart.of-cart-page .view-cart-items > .item { position: relative; overflow: visible !important; } /* Raise only the item whose menu is open, above the following cart rows. */ #order-standard_cart.of-cart-page .view-cart-items > .item:has(.item-price .dropdown.open), #order-standard_cart.of-cart-page .view-cart-items > .item:has(.item-price .dropdown.show), #order-standard_cart.of-cart-page .view-cart-items > .item:has(.item-price .dropdown-menu.show) { z-index: 20; } #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown { display: inline-block; position: relative; max-width: 100%; vertical-align: middle; } #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 7px 13px; border: 1px solid #dce6f2; border-radius: 10px; background: #fff; color: #3b506d; font-size: 13px; font-weight: 650; line-height: 1.25; white-space: nowrap; box-shadow: none; } #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-toggle:hover, #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-toggle[aria-expanded="true"] { border-color: #92b3f0; background: #f6f9ff; color: var(--of-blue); } #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-menu { /* Align the menu's right edge with the year button's right edge. */ left: auto !important; right: 0 !important; /* Ignore Bootstrap/Popper inline offsets; the trigger is the anchor. */ top: calc(100% + 6px) !important; bottom: auto !important; transform: none !important; min-width: 205px; width: max-content; max-width: min(290px, calc(100vw - 32px)); max-height: min(300px, 52vh); overflow-x: hidden; overflow-y: auto; margin: 0; padding: 6px; border: 1px solid #dce6f2; border-radius: 12px; background: #fff; box-shadow: 0 15px 35px rgba(20, 42, 80, .17); text-align: left; z-index: 1050; -webkit-overflow-scrolling: touch; } #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-menu > li.dropdown-item { display: block; float: none; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; font-size: inherit; font-weight: normal; } #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-menu > li > a { display: block; width: 100%; margin: 0; padding: 9px 11px; border-radius: 7px; background: transparent; color: #344a68; font-size: 13px; font-weight: 550; line-height: 1.35; text-decoration: none; white-space: nowrap; } #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-menu > li > a:hover, #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-menu > li > a:focus { color: var(--of-blue); background: #eef5ff; } @media (max-width: 575px) { #order-standard_cart.of-cart-page .view-cart-items .item-price .dropdown > .dropdown-menu { max-width: min(245px, calc(100vw - 24px)); max-height: min(250px, 45vh); } } /* ================================================================ v1.7.3 — WHMCS mobile navigation and domain configuration polish. The native template uses `.sidebar-collapsed`, NOT `.sidebar-categories-collapsed`. Suppress it throughout ordering while preserving the category selector on the product catalogue. ================================================================ */ #order-standard_cart.of-full-width .sidebar-collapsed, #order-standard_cart:not(.of-products-page) .sidebar-collapsed { display: none !important; } /* Domain configuration is still rendered by WHMCS standard_cart. Only the visual presentation of the existing elements changes. */ #order-standard_cart.of-domain-addons-page #frmConfigureDomains { --of-dns-soft: #f4f8ff; --of-dns-line: #dce7f5; min-width: 0; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > p:first-of-type { margin: 2px 0 26px; padding: 16px 19px; border: 1px solid var(--of-dns-line); border-left: 3px solid var(--of-blue); border-radius: 12px; background: #f7faff; color: #50637e; font-size: 14px; line-height: 1.65; } /* One domain heading + the following registration/hosting details form a continuous two-piece panel, without wrapping or moving any DOM. */ #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading { margin: 28px 0 0 !important; padding-top: 10px; padding-bottom: 10px; padding-left: 15px; border: 1px solid var(--of-dns-line) !important; border-radius: 16px 16px 0 0; background: var(--of-dns-soft); line-height: 1.4; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading > span, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading > span.primary-bg-color { display: inline-block; margin: 0; padding: 0; border: 0; background: transparent !important; color: var(--of-ink); font-size: clamp(16px, 2vw, 19px) !important; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 14px; margin: 0 0 18px; padding: 20px 21px; border: 1px solid var(--of-dns-line); border-top: 0; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 8px 20px rgba(20, 52, 88, .025); } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row > [class*='col-'], #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row > [class*='col-'] { float: none; width: auto; min-width: 0; max-width: none; padding: 0; margin: 0; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row > .col-sm-12, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row > .col-sm-12 { grid-column: 1 / -1; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row .form-group, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row .form-group { margin: 0; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row label, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row label { display: inline-block; margin: 0 0 7px; font-size: 12px; font-weight: 700; color: #667991; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row .form-group > br { display: block; content: ''; margin: 2px 0; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row .form-group > a, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row .form-group > span { font-size: 13px; font-weight: 650; line-height: 1.5; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .row.addon-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 15px; margin: 18px 0 30px; padding: 0; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .row.addon-products > [class*='col-'] { display: flex; width: auto; max-width: none; float: none; padding: 0; margin: 0; } #order-standard_cart.of-domain-addons-page .panel-addon { min-height: 165px; border-radius: 15px !important; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } #order-standard_cart.of-domain-addons-page .panel-addon:has(input[type='checkbox']:checked) { border-color: var(--of-blue) !important; background: #fafdff; box-shadow: 0 0 0 2px rgba(23,101,233,.07); } #order-standard_cart.of-domain-addons-page .panel-addon.panel-addon-selected:not(:has(input[type='checkbox']:checked)) { border-color: var(--of-border) !important; background: #fff; box-shadow: 0 6px 20px rgba(25,58,98,.03); } #order-standard_cart.of-domain-addons-page .panel-addon .panel-body { padding: 19px 20px 12px; line-height: 1.55; } #order-standard_cart.of-domain-addons-page .panel-addon .panel-body > label { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; color: var(--of-ink); font-size: 14px; line-height: 1.4; } #order-standard_cart.of-domain-addons-page .panel-addon .panel-body > br { display: none; } #order-standard_cart.of-domain-addons-page .panel-addon .panel-price { margin: auto 20px 18px; padding: 13px 0 0; color: #28518a; font-size: 13px; } /* When WHMCS needs custom registrant fields, leave them fully accessible. */ #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .form-group.row { margin: 16px 0; padding: 13px 16px; border: 1px solid var(--of-border); border-radius: 12px; background: #fff; } /* The nameserver group has a paragraph between its heading and inputs. Keep the borders visually continuous through all three siblings. */ #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p { margin: 0; padding: 16px 21px 5px; border-left: 1px solid var(--of-dns-line); border-right: 1px solid var(--of-dns-line); background: #fff; color: var(--of-muted); font-size: 13px; line-height: 1.6; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row { padding-top: 17px; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row input.form-control { width: 100%; min-height: 45px; font-size: 13px; border-radius: 10px; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .text-center.pt-4, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .text-center:last-child { display: flex; justify-content: flex-end; margin: 7px 0 13px; padding-top: 7px !important; text-align: right !important; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains button[type='submit'].btn { min-width: 205px; min-height: 47px; border-radius: 11px; font-weight: 750; box-shadow: 0 8px 18px rgba(23,101,233,.12); } @media (max-width: 640px) { #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading { padding: 15px 16px; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + .row, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p + .row { grid-template-columns: minmax(0, 1fr); padding: 17px 16px; gap: 17px; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .sub-heading + p { padding: 14px 16px 5px; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .row.addon-products { grid-template-columns: minmax(0, 1fr); margin: 15px 0 24px; } #order-standard_cart.of-domain-addons-page .panel-addon { min-height: 0; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .text-center.pt-4, #order-standard_cart.of-domain-addons-page #frmConfigureDomains > .text-center:last-child { display: block; } #order-standard_cart.of-domain-addons-page #frmConfigureDomains button[type='submit'].btn { width: 100%; } }