/* Native WHMCS order flow. Two ID selectors intentionally outrank the legacy theme. */ body.hg-cart-page { --of-bg: #f6f7fb; --of-card: #fff; --of-ink: #1b2338; --of-muted: #647088; --of-border: #e2e6ef; --of-soft: #f3eff9; --of-accent: #761098; --of-hover: #5e0d7a; --of-total: #20253e; --of-shadow: 0 8px 28px rgb(24 32 60 / 5%); } html[data-bs-theme="dark"] body.hg-cart-page { --of-bg: #121620; --of-card: #1a2030; --of-ink: #edf0f8; --of-muted: #adb7cc; --of-border: #323a50; --of-soft: #2b2440; --of-accent: #c287ef; --of-hover: #d3a3f5; --of-total: #111726; --of-shadow: 0 8px 28px rgb(0 0 0 / 12%); } body.hg-cart-page:has(.hg-order-flow) #main-body { background: var(--of-bg) !important; padding-top: 28px !important; padding-bottom: 64px !important; } body.hg-cart-page:has(.hg-order-flow) { overflow-x: clip !important; } #main-body #order-standard_cart.hg-order-flow { width: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; color: var(--of-ink); font-size: 14px; line-height: 1.6; overflow: visible; } #main-body #order-standard_cart.hg-order-flow * { box-sizing: border-box; } #main-body #order-standard_cart.hg-order-flow > .row { margin: 0; } #main-body #order-standard_cart.hg-order-flow .cart-body { float: none; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } #main-body #order-standard_cart.hg-order-flow:not(.hg-order-flow--products) .cart-sidebar, #main-body #order-standard_cart.hg-order-flow:not(.hg-order-flow--products) .sidebar-collapsed { display: none !important; } #main-body #order-standard_cart.hg-order-flow .header-lined { margin: 0 0 24px; padding: 0; border: 0; } #main-body #order-standard_cart.hg-order-flow .header-lined h1 { color: var(--of-ink) !important; font-size: clamp(24px, 2.3vw, 32px) !important; line-height: 1.25; font-weight: 750; letter-spacing: -.7px; margin: 0 0 10px; padding: 0; border: 0; } #main-body #order-standard_cart.hg-order-flow .header-lined p, #main-body #order-standard_cart.hg-order-flow .secondary-cart-body > p { color: var(--of-muted); font-size: 14px; } #main-body #order-standard_cart.hg-order-flow .sub-heading { display: block !important; height: auto !important; text-align: start !important; background: none !important; border: 0 !important; margin: 26px 0 16px !important; padding: 0 !important; line-height: 1.4 !important; } #main-body #order-standard_cart.hg-order-flow .sub-heading::before, #main-body #order-standard_cart.hg-order-flow .sub-heading::after { display: none !important; } #main-body #order-standard_cart.hg-order-flow .sub-heading > span { position: static !important; padding: 0 !important; background: transparent !important; color: var(--of-ink) !important; border: 0 !important; box-shadow: none !important; font-size: 17px !important; font-weight: 700 !important; } /* A compact, server-rendered progress bar; no late DOM replacement. */ #main-body #order-standard_cart.hg-order-flow .hg-order-steps { margin: 0 0 30px !important; padding: 0 !important; } #main-body #order-standard_cart.hg-order-flow .hg-order-steps-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; border: 1px solid var(--of-border); border-radius: 14px; background: var(--of-card); margin: 0; padding: 0; overflow: hidden; } #main-body #order-standard_cart.hg-order-flow .hg-order-steps-list::before, #main-body #order-standard_cart.hg-order-flow .hg-order-steps-list::after { display: none; } #main-body #order-standard_cart.hg-order-flow .hg-step { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 12px; min-width: 0; padding: 16px 24px; margin: 0; text-align: start; border: 0; border-inline-end: 1px solid var(--of-border); background: transparent; border-radius: 0; } #main-body #order-standard_cart.hg-order-flow .hg-step:last-child { border-inline-end: 0; } #main-body #order-standard_cart.hg-order-flow .hg-step.is-active { background: var(--of-soft); } #main-body #order-standard_cart.hg-order-flow .hg-step::before, #main-body #order-standard_cart.hg-order-flow .hg-step::after { display: none !important; } #main-body #order-standard_cart.hg-order-flow .hg-step-chip { position: static; flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid var(--of-border); border-radius: 50%; background: var(--of-bg); color: var(--of-muted); box-shadow: none !important; font-size: 13px; font-weight: 700; transform: none; } #main-body #order-standard_cart.hg-order-flow .is-active .hg-step-chip { background: #761098; color: #fff; border-color: #761098; } #main-body #order-standard_cart.hg-order-flow .is-done .hg-step-chip { color: #168263; border-color: #a1d7c5; background: #edf9f3; } #main-body #order-standard_cart.hg-order-flow .hg-step-text { display: flex; min-width: 0; flex-direction: column; gap: 1px; } #main-body #order-standard_cart.hg-order-flow .hg-step-num { color: var(--of-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; } #main-body #order-standard_cart.hg-order-flow .hg-step-label { color: var(--of-ink); font-size: 14px; font-weight: 650; line-height: 1.35; } #main-body #order-standard_cart.hg-order-flow .is-active .hg-step-label { color: var(--of-accent); } /* Shared controls retain native form names, events, and payment handlers. */ #main-body #order-standard_cart.hg-order-flow .form-control, #main-body #order-standard_cart.hg-order-flow .field { color: var(--of-ink); background-color: var(--of-card); border: 1px solid var(--of-border); border-radius: 9px; min-height: 46px; font-size: 14px; box-shadow: none; } #main-body #order-standard_cart.hg-order-flow .form-control::placeholder { color: var(--of-muted); opacity: .8; } #main-body #order-standard_cart.hg-order-flow .form-control:focus { border-color: var(--of-accent); box-shadow: 0 0 0 3px var(--of-soft); } #main-body #order-standard_cart.hg-order-flow select { max-width: 100%; } #main-body #order-standard_cart.hg-order-flow textarea.form-control { min-height: 110px; resize: vertical; } #main-body #order-standard_cart.hg-order-flow .form-group { margin-bottom: 18px; } #main-body #order-standard_cart.hg-order-flow label { color: var(--of-ink); } #main-body #order-standard_cart.hg-order-flow .btn { min-height: 44px; border-radius: 9px !important; font-size: 14px; font-weight: 650; white-space: normal; line-height: 1.4; padding: 11px 18px; box-shadow: none !important; transition: background-color .15s, border-color .15s; } #main-body #order-standard_cart.hg-order-flow .btn-primary, #main-body #order-standard_cart.hg-order-flow .btn-success, #main-body #order-standard_cart.hg-order-flow #checkout { background: #761098 !important; border: 1px solid #761098 !important; color: #fff !important; } #main-body #order-standard_cart.hg-order-flow .btn-primary:hover, #main-body #order-standard_cart.hg-order-flow .btn-success:hover, #main-body #order-standard_cart.hg-order-flow #checkout:hover { background: #5e0d7a !important; border-color: #5e0d7a !important; } #main-body #order-standard_cart.hg-order-flow .btn-default, #main-body #order-standard_cart.hg-order-flow .btn-info, #main-body #order-standard_cart.hg-order-flow .btn-warning { background: var(--of-card); border: 1px solid var(--of-border); color: var(--of-ink); } #main-body #order-standard_cart.hg-order-flow :is(button, a, summary, [role="button"]):focus-visible { outline: 3px solid var(--of-accent); outline-offset: 3px; } #main-body #order-standard_cart.hg-order-flow [disabled] { cursor: not-allowed; opacity: .55; } #main-body #order-standard_cart.hg-order-flow .text-muted { color: var(--of-muted) !important; } #main-body #order-standard_cart.hg-order-flow .alert { border-radius: 10px; font-size: 14px; } #main-body #order-standard_cart.hg-order-flow .secondary-cart-body, #main-body #order-standard_cart.hg-order-flow .secondary-cart-sidebar { min-width: 0; float: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; } #main-body #order-standard_cart.hg-order-flow #frmConfigureProduct > .row, #main-body #order-standard_cart.hg-order-flow--view .cart-body > .row { display: grid !important; grid-template-columns: minmax(0, 1fr) 344px; gap: 28px; align-items: start; margin: 0; } /* Configuration: meaningful selections first, large catalogs on demand. */ #main-body #order-standard_cart.hg-order-flow .product-info { position: relative; background: var(--of-card) !important; border: 1px solid var(--of-border) !important; border-inline-start: 4px solid var(--of-accent) !important; border-radius: 14px; padding: 24px; margin-bottom: 24px; box-shadow: var(--of-shadow); text-align: start; } #main-body #order-standard_cart.hg-order-flow .product-title { font-size: 23px !important; color: var(--of-ink); font-weight: 750; margin: 0 0 10px; } #main-body #order-standard_cart.hg-order-flow .product-info p:last-child { margin-bottom: 0; color: var(--of-muted); } #main-body #order-standard_cart.hg-order-flow .field-container { background: transparent; margin: 0; padding: 0; border: 0; } #main-body #order-standard_cart.hg-order-flow .hg-bcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px; margin-top: 10px; } #main-body #order-standard_cart.hg-order-flow .hg-bcard { border: 1px solid var(--of-border) !important; background: var(--of-card) !important; border-radius: 11px !important; padding: 15px !important; box-shadow: none !important; min-width: 0; } #main-body #order-standard_cart.hg-order-flow .hg-bcard.sel { border-color: var(--of-accent) !important; background: var(--of-soft) !important; box-shadow: inset 0 0 0 1px var(--of-accent) !important; } #main-body #order-standard_cart.hg-order-flow .hg-bcard .hg-bc-price { color: var(--of-ink) !important; font-size: 22px; } #main-body #order-standard_cart.hg-order-flow #productConfigurableOptions > .row { display: block; margin: 0 !important; } #main-body #order-standard_cart.hg-order-flow #productConfigurableOptions > .row > [class*="col-"] { width: 100% !important; max-width: none !important; padding: 0; } #main-body #order-standard_cart.hg-order-flow .hg-option-disclosure { border: 1px solid var(--of-border); border-radius: 13px; background: var(--of-card); overflow: hidden; } #main-body #order-standard_cart.hg-order-flow .hg-option-disclosure > summary { position: relative; display: grid; gap: 3px; padding: 19px 24px; padding-inline-end: 52px; list-style: none; cursor: pointer; text-align: start; } #main-body #order-standard_cart.hg-order-flow .hg-option-disclosure > summary::-webkit-details-marker { display: none; } #main-body #order-standard_cart.hg-order-flow .hg-option-heading { font-size: 13px; font-weight: 600; color: var(--of-muted); } #main-body #order-standard_cart.hg-order-flow .hg-option-value { font-weight: 700; font-size: 16px; color: var(--of-ink); overflow-wrap: anywhere; } #main-body #order-standard_cart.hg-order-flow summary > i { position: absolute; inset-inline-end: 23px; top: 30px; color: var(--of-muted); font-size: 11px; } #main-body #order-standard_cart.hg-order-flow details[open] > summary > i { transform: rotate(180deg); } #main-body #order-standard_cart.hg-order-flow details[open] > summary { border-bottom: 1px solid var(--of-border); background: var(--of-bg); } #main-body #order-standard_cart.hg-order-flow .hg-option-choices { padding: 16px; } #main-body #order-standard_cart.hg-order-flow .hgcfg { margin: 0; } #main-body #order-standard_cart.hg-order-flow .hgcfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px; } #main-body #order-standard_cart.hg-order-flow .hgcfg-opt { border: 1px solid var(--of-border) !important; background: var(--of-card) !important; border-radius: 9px !important; box-shadow: none !important; min-height: 56px; padding: 12px !important; color: var(--of-ink); } #main-body #order-standard_cart.hg-order-flow .hgcfg-opt.sel { border-color: var(--of-accent) !important; background: var(--of-soft) !important; } #main-body #order-standard_cart.hg-order-flow .hgcfg-opt .hgtx { color: var(--of-ink) !important; overflow-wrap: anywhere; font-size: 13px; } #main-body #order-standard_cart.hg-order-flow .hgcfg-opt.hgcfg-na, #main-body #order-standard_cart.hg-order-flow .hgcfg-opt.hglock { opacity: .55; } #main-body #order-standard_cart.hg-order-flow .hg-os-tabs { gap: 5px; flex-wrap: wrap; margin-bottom: 14px; } #main-body #order-standard_cart.hg-order-flow .hg-os-tab { min-height: 40px; border-radius: 7px; color: var(--of-muted); } #main-body #order-standard_cart.hg-order-flow .hg-os-tab.act { background: var(--of-soft); color: var(--of-accent); } #main-body #order-standard_cart.hg-order-flow .hg-spec-badge .hg-chip { background: var(--of-soft); color: var(--of-accent); border: 0; } /* One calm summary, including all native discounts, taxes and recurring amounts. */ #main-body #order-standard_cart.hg-order-flow #scrollingPanelContainer { float: none !important; position: sticky !important; top: calc(var(--hg-hdr-h, 138px) + 20px) !important; left: auto !important; margin-top: 0 !important; align-self: start; z-index: 2 !important; } #main-body #order-standard_cart.hg-order-flow .order-summary { border: 1px solid var(--of-border) !important; border-radius: 16px !important; background: var(--of-card) !important; color: var(--of-ink) !important; padding: 24px !important; box-shadow: var(--of-shadow) !important; max-height: none !important; margin: 0 !important; overflow: visible !important; } #main-body #order-standard_cart.hg-order-flow .order-summary h2 { font-size: 19px !important; font-weight: 750 !important; color: var(--of-ink) !important; text-align: start !important; background: none !important; padding: 0 0 18px !important; margin: 0 0 16px !important; border: 0 !important; border-bottom: 1px solid var(--of-border) !important; box-shadow: none; } #main-body #order-standard_cart.hg-order-flow .summary-container { padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0; } #main-body #order-standard_cart.hg-order-flow .order-summary .product-name { color: var(--of-ink) !important; font-size: 17px !important; font-weight: 700; } #main-body #order-standard_cart.hg-order-flow .order-summary .product-group { color: var(--of-muted); font-size: 12px; } #main-body #order-standard_cart.hg-order-flow .order-summary .clearfix { color: var(--of-muted); font-size: 13px; padding: 5px 0; line-height: 1.6; } #main-body #order-standard_cart.hg-order-flow .order-summary .summary-totals { border-color: var(--of-border); padding-top: 12px; margin-top: 12px; } #main-body #order-standard_cart.hg-order-flow .order-summary .total-due-today, #main-body #order-standard_cart.hg-order-flow--checkout #totalDueToday { display: flex; flex-direction: column; background: var(--of-total) !important; color: #d5dcec !important; border: 0 !important; border-radius: 11px !important; padding: 20px 14px !important; margin: 20px 0 16px !important; text-align: start !important; gap: 5px; box-shadow: none !important; font-size: 12px; } #main-body #order-standard_cart.hg-order-flow .total-due-today .amt, #main-body #order-standard_cart.hg-order-flow #totalCartPrice { color: #fff !important; font-size: 29px !important; font-weight: 750 !important; line-height: 1.25; letter-spacing: -.5px; } #main-body #order-standard_cart.hg-order-flow .total-due-today span:not(.amt) { color: #d5dcec !important; font-size: 12px !important; } #main-body #order-standard_cart.hg-order-flow #btnCompleteProductConfig, #main-body #order-standard_cart.hg-order-flow #checkout, #main-body #order-standard_cart.hg-order-flow #btnCompleteOrder { width: 100%; min-height: 49px; padding: 13px 18px !important; font-size: 15px !important; } #main-body #order-standard_cart.hg-order-flow .hg-trust { margin: 18px 0 0; padding: 0 8px; border: 0; } #main-body #order-standard_cart.hg-order-flow .hg-trust li { font-size: 12px; color: var(--of-muted); } /* Review: separated item cards with readable options and native edit/remove actions. */ #main-body #order-standard_cart.hg-order-flow .view-cart-items-header { background: transparent !important; color: var(--of-muted) !important; border: 0; padding: 0 20px 12px; font-size: 12px; } #main-body #order-standard_cart.hg-order-flow .view-cart-items { display: grid; gap: 14px; background: transparent !important; border: 0 !important; box-shadow: none; overflow: visible; } #main-body #order-standard_cart.hg-order-flow .view-cart-items .item { padding: 24px; border: 1px solid var(--of-border) !important; border-radius: 14px; margin: 0; background: var(--of-card) !important; box-shadow: var(--of-shadow); color: var(--of-ink); } #main-body #order-standard_cart.hg-order-flow .item-title { display: block; color: var(--of-ink) !important; font-size: 20px !important; font-weight: 750; margin-bottom: 5px; } #main-body #order-standard_cart.hg-order-flow .item-group { display: block; font-size: 12px; color: var(--of-muted); } #main-body #order-standard_cart.hg-order-flow .item-domain { display: block; font-size: 13px; color: var(--of-ink); margin-top: 5px; overflow-wrap: anywhere; } #main-body #order-standard_cart.hg-order-flow .item small { display: block; padding: 12px 0 0; margin: 12px 0 0; border: 0; border-top: 1px solid var(--of-border); color: var(--of-muted); background: transparent; font-size: 13px; line-height: 1.9; } #main-body #order-standard_cart.hg-order-flow .item-price { text-align: end; } #main-body #order-standard_cart.hg-order-flow .item-price > span:first-child { color: var(--of-ink); font-size: 20px; font-weight: 750; } #main-body #order-standard_cart.hg-order-flow .item-price .cycle { display: block; font-size: 12px; color: var(--of-muted); } #main-body #order-standard_cart.hg-order-flow .item-title .btn, #main-body #order-standard_cart.hg-order-flow .btn-remove-from-cart { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 10px !important; font-size: 12px !important; border-radius: 7px !important; margin-inline-start: 5px; color: var(--of-accent) !important; background: var(--of-soft) !important; } #main-body #order-standard_cart.hg-order-flow .btn-remove-from-cart { color: #ae3646 !important; background: #fff0f1 !important; } #main-body #order-standard_cart.hg-order-flow .view-cart-tabs { margin-top: 26px; } #main-body #order-standard_cart.hg-order-flow .view-cart-tabs .nav-tabs { border: 0; gap: 8px; } #main-body #order-standard_cart.hg-order-flow .view-cart-tabs .nav-link { border: 0 !important; border-radius: 8px !important; color: var(--of-muted) !important; background: transparent !important; padding: 10px 0; font-size: 13px; } #main-body #order-standard_cart.hg-order-flow .view-cart-tabs .tab-content { border: 1px solid var(--of-border); background: var(--of-card); border-radius: 12px; padding: 18px; } #main-body #order-standard_cart.hg-order-flow #applyPromo > form { display: flex; align-items: start; gap: 10px; } #main-body #order-standard_cart.hg-order-flow #applyPromo > form > .form-group { flex: 1; margin: 0; min-width: 0; } #main-body #order-standard_cart.hg-order-flow #applyPromo > form > button { width: auto; min-height: 46px; margin: 0; } #main-body #order-standard_cart.hg-order-flow .view-cart-empty { background: var(--of-card); color: var(--of-muted); padding: 50px 24px; text-align: center; border: 1px solid var(--of-border); border-radius: 14px; } #main-body #order-standard_cart.hg-order-flow .view-cart-empty::before { content: '\f07a'; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: block; font-size: 34px; margin-bottom: 16px; color: var(--of-accent); } /* Checkout: account details and payment remain one native form. */ #main-body #order-standard_cart.hg-order-flow .already-registered { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 16px; align-items: center; margin: -8px 0 24px; } #main-body #order-standard_cart.hg-order-flow .already-registered::before, #main-body #order-standard_cart.hg-order-flow .already-registered::after { display: none; } #main-body #order-standard_cart.hg-order-flow .already-registered p { margin: 0; color: var(--of-muted); text-align: start !important; } #main-body #order-standard_cart.hg-order-flow .already-registered button { background: var(--of-card) !important; border: 1px solid var(--of-border) !important; color: var(--of-ink) !important; box-shadow: none !important; } #main-body #order-standard_cart.hg-order-flow .hg-cart-steps-wrap { padding: 0 !important; margin: 0 !important; } #main-body #order-standard_cart.hg-order-flow #orderSummary > .text-center { margin-top: 12px; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-main, #main-body #order-standard_cart.hg-order-flow .hg-checkout-aside { min-width: 0; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-aside { position: sticky; top: calc(var(--hg-hdr-h, 138px) + 20px); } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section { background: var(--of-card); border: 1px solid var(--of-border); border-radius: 15px; padding: 26px; margin: 0 0 20px; box-shadow: var(--of-shadow); } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section .sub-heading:first-child { margin-top: 0 !important; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section--identity .sub-heading { padding-bottom: 14px !important; border-bottom: 1px solid var(--of-border) !important; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section .row { margin-inline: -8px; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section .row > [class*="col-"] { padding-inline: 8px; } #main-body #order-standard_cart.hg-order-flow--checkout .hg-field-label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 650; color: var(--of-muted); } #main-body #order-standard_cart.hg-order-flow--checkout .prepend-icon:has(.hg-field-label) { padding-top: 0; } #main-body #order-standard_cart.hg-order-flow--checkout .prepend-icon:has(.hg-field-label) .field-icon { top: 26px; } #main-body #order-standard_cart.hg-order-flow .hg-payment-options { display: grid; gap: 10px; } #main-body #order-standard_cart.hg-order-flow label.payment-method { display: flex !important; align-items: center; gap: 10px; cursor: pointer; border: 1px solid var(--of-border); border-radius: 10px; padding: 16px 12px !important; margin: 0 !important; background: var(--of-card); color: var(--of-ink); text-align: start; font-size: 13px; } #main-body #order-standard_cart.hg-order-flow label.payment-method:has(input:checked) { background: var(--of-soft); border-color: var(--of-accent); box-shadow: inset 0 0 0 1px var(--of-accent); } #main-body #order-standard_cart.hg-order-flow .hg-payment-icon { color: var(--of-accent); width: 22px; flex: 0 0 22px; text-align: center; font-size: 18px; } #main-body #order-standard_cart.hg-order-flow .payment-method input { position: static; margin: 0; accent-color: var(--of-accent); } #main-body #order-standard_cart.hg-order-flow .hg-checkout-confirm { background: var(--of-card); } #main-body #order-standard_cart.hg-order-flow .hg-checkout-confirm .text-center { text-align: start !important; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-confirm label { font-size: 12px; line-height: 1.7; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-confirm .text-center > p { margin-bottom: 0; } #main-body #order-standard_cart.hg-order-flow .apply-credit-container { margin: 16px 0; padding: 14px; border-radius: 9px; background: var(--of-bg); font-size: 13px; } #main-body #order-standard_cart.hg-order-flow .account { border: 1px solid var(--of-border); border-radius: 10px; background: var(--of-card); margin-bottom: 12px; } #main-body #order-standard_cart.hg-order-flow .account.active { border-color: var(--of-accent); background: var(--of-soft); } #main-body #order-standard_cart.hg-order-flow .marketing-email-optin { background: transparent; border: 0; padding: 0; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section--notes > summary { cursor: pointer; font-size: 15px; font-weight: 650; color: var(--of-ink); } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section--notes > summary span { color: var(--of-muted); font-size: 12px; font-weight: 400; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section--notes[open] > summary { margin-bottom: 18px; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section--notes .form-group { margin-bottom: 0; } #main-body #order-standard_cart.hg-order-flow .checkout-security-msg { display: flex; align-items: center; gap: 16px; background: var(--of-card) !important; border: 1px solid var(--of-border) !important; color: var(--of-muted) !important; border-radius: 12px; font-size: 12px; line-height: 1.8; padding: 18px 22px; text-align: start; } #main-body #order-standard_cart.hg-order-flow .checkout-security-msg > i { float: none; margin: 0; flex: 0 0 23px; font-size: 23px; color: var(--of-accent); } #main-body #order-standard_cart.hg-order-flow .hg-checkout-security-text { min-width: 0; flex: 1; } /* Product/category entry points share the same surface language. */ #main-body #order-standard_cart.hg-order-flow--products > .row { display: block; } #main-body #order-standard_cart.hg-order-flow--products .cart-sidebar { display: none; } #main-body #order-standard_cart.hg-order-flow--products .sidebar-collapsed { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 24px; padding: 0; } #main-body #order-standard_cart.hg-order-flow--products .sidebar-collapsed::after { display: none; } #main-body #order-standard_cart.hg-order-flow--products .sidebar-collapsed .panel { margin: 0; padding: 16px 20px; background: var(--of-card); border: 1px solid var(--of-border); border-radius: 12px; box-shadow: none; } #main-body #order-standard_cart.hg-order-flow--products .sidebar-collapsed .panel-heading { padding: 0 0 10px; background: none; border: 0; } #main-body #order-standard_cart.hg-order-flow--products .sidebar-collapsed .panel-body { padding: 0; } #main-body #order-standard_cart.hg-order-flow--products .sidebar-collapsed select { width: 100%; } #main-body #order-standard_cart.hg-order-flow--products .products > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; } #main-body #order-standard_cart.hg-order-flow--products .products > .row > .col-md-6 { width: 100%; max-width: none; padding: 0; } #main-body #order-standard_cart.hg-order-flow .product { display: flex; flex-direction: column; height: 100%; padding: 24px; background: var(--of-card); border: 1px solid var(--of-border); border-radius: 15px; box-shadow: var(--of-shadow); } #main-body #order-standard_cart.hg-order-flow .product header { padding: 0 0 16px; margin: 0; background: none; border-bottom: 1px solid var(--of-border); color: var(--of-ink); font-size: 20px; } #main-body #order-standard_cart.hg-order-flow .product header span { color: var(--of-ink); font-size: 20px; font-weight: 700; } #main-body #order-standard_cart.hg-order-flow .product header .qty { color: var(--of-muted); font-size: 12px; font-weight: 500; } #main-body #order-standard_cart.hg-order-flow .product header::after { display: none; } #main-body #order-standard_cart.hg-order-flow .product-desc { padding: 18px 0; color: var(--of-muted); float: none; width: 100%; } #main-body #order-standard_cart.hg-order-flow .product footer { padding: 0; margin-top: auto; background: none; float: none; width: 100%; } #main-body #order-standard_cart.hg-order-flow .product-pricing { color: var(--of-muted); margin: 0 0 18px; } #main-body #order-standard_cart.hg-order-flow .product-pricing .price { color: var(--of-ink); font-weight: 750; font-size: 28px; } #main-body #order-standard_cart.hg-order-flow .btn-order-now { width: 100%; } #main-body #order-standard_cart.hg-order-flow .domain-selection-options .option, #main-body #order-standard_cart.hg-order-flow .domain-result, #main-body #order-standard_cart.hg-order-flow .panel-addon { border-radius: 12px; border-color: var(--of-border); background: var(--of-card); } /* Domain search stays the primary action; the complete price catalogue is one disclosure away. */ #main-body #order-standard_cart.hg-order-flow--domainregister .domain-checker-container { margin: 24px 0; padding: 30px; background: var(--of-card); border: 1px solid var(--of-border); border-radius: 15px; box-shadow: var(--of-shadow); } #main-body #order-standard_cart.hg-order-flow--domainregister .domain-checker-bg { padding: 0; background: none; } #main-body #order-standard_cart.hg-order-flow--domainregister #frmDomainChecker > .row { margin: 0; } #main-body #order-standard_cart.hg-order-flow--domainregister #frmDomainChecker > .row > [class*="col-"] { width: 100%; max-width: 100%; margin: 0; padding: 0; } #main-body #order-standard_cart.hg-order-flow--domainregister .domain-checker-container:not(.domain-checker-advanced) .input-group-box { display: flex; align-items: stretch; gap: 12px; width: 100%; padding: 0; background: none; border: 0; } #main-body #order-standard_cart.hg-order-flow--domainregister .input-group-box > .form-control { flex: 1; width: 0; min-width: 0; height: 52px; border-radius: 9px; } #main-body #order-standard_cart.hg-order-flow--domainregister .input-group-btn { position: static; flex: 0 0 132px; width: auto; } #main-body #order-standard_cart.hg-order-flow--domainregister #btnCheckAvailability { width: 100%; height: 52px; margin: 0; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tlds-container { margin: 24px 0; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tlds-container > .row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px; margin: 0; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tlds-container > .row > :not(:has(.featured-tld)) { display: none; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tlds-container > .row > :has(.featured-tld) { flex: 1 1 240px; max-width: 360px; padding: 0; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tld { display: flex; align-items: center; gap: 20px; height: 100%; margin: 0; padding: 20px; background: var(--of-card); border: 1px solid var(--of-border); border-radius: 12px; box-shadow: none; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tld .img-container { flex: 0 0 100px; width: 100px; height: 64px; padding: 10px; background: #fff; border-radius: 8px; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tld img { max-width: 100%; max-height: 100%; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tld .price { margin: 0; padding: 0; background: none; color: var(--of-ink); font-size: 17px; font-weight: 700; } #main-body #order-standard_cart.hg-order-flow .hg-domain-price-disclosure { margin: 0 0 24px; padding: 0 24px; border: 1px solid var(--of-border); border-radius: 12px; background: var(--of-card); } #main-body #order-standard_cart.hg-order-flow .hg-domain-price-disclosure > summary { padding: 20px 0; color: var(--of-ink); font-size: 15px; font-weight: 700; cursor: pointer; } #main-body #order-standard_cart.hg-order-flow .hg-domain-price-disclosure[open] { padding-bottom: 16px; } #main-body #order-standard_cart.hg-order-flow .tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } #main-body #order-standard_cart.hg-order-flow .tld-filters a { padding: 9px 12px; margin: 0; background: var(--of-bg); border: 1px solid var(--of-border); border-radius: 8px; color: var(--of-muted); font-size: 12px; line-height: 1.3; } #main-body #order-standard_cart.hg-order-flow .tld-filters a.active, #main-body #order-standard_cart.hg-order-flow .tld-filters a.badge-success { background: var(--of-soft); border-color: var(--of-accent); color: var(--of-accent); } #main-body #order-standard_cart.hg-order-flow .domain-pricing .bg-white { background: transparent !important; } #main-body #order-standard_cart.hg-order-flow .tld-pricing-header { margin: 0; padding: 14px 0; border-radius: 8px; background: var(--of-bg); color: var(--of-muted); font-size: 12px; font-weight: 650; } #main-body #order-standard_cart.hg-order-flow .tld-pricing-header div { padding-top: 0; padding-bottom: 0; background: none; color: inherit; border: 0; } #main-body #order-standard_cart.hg-order-flow .tld-row { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--of-border); background: transparent; color: var(--of-ink); } #main-body #order-standard_cart.hg-order-flow .tld-row.highlighted { background: transparent; } #main-body #order-standard_cart.hg-order-flow .tld-row .two-row-center { border: 0; font-size: 15px; } #main-body #order-standard_cart.hg-order-flow .tld-row small { color: var(--of-muted); font-size: 11px; } #main-body #order-standard_cart.hg-order-flow .domain-promo-box { height: calc(100% - 20px); margin: 0 0 20px; padding: 24px; background: var(--of-card); border: 1px solid var(--of-border); border-radius: 12px; color: var(--of-muted); } #main-body #order-standard_cart.hg-order-flow .domain-promo-box h3 { margin: 0 0 8px; white-space: normal; color: var(--of-ink); font-size: 17px; } #main-body #order-standard_cart.hg-order-flow .domain-promo-box .text-warning { color: var(--of-muted) !important; } #main-body #order-standard_cart.hg-order-flow .domain-promo-box i { color: var(--of-accent); font-size: 28px; margin-inline-start: 16px; } #main-body #order-standard_cart.hg-order-flow .domain-promo-box .btn-warning { background: var(--of-soft); border: 1px solid var(--of-border); color: var(--of-accent); } #main-body #order-standard_cart.hg-order-flow--domaintransfer .cart-body > .text-center { text-align: start !important; } #main-body #order-standard_cart.hg-order-flow--domaintransfer .cart-body > .text-center h2 { font-size: 20px; color: var(--of-ink); } #main-body #order-standard_cart.hg-order-flow--domaintransfer #frmDomainTransfer > .row { margin: 0; } #main-body #order-standard_cart.hg-order-flow--domaintransfer #frmDomainTransfer > .row > div { width: 100%; max-width: 740px; margin: 0; padding: 0; } #main-body #order-standard_cart.hg-order-flow--domaintransfer #frmDomainTransfer .panel { border: 1px solid var(--of-border); border-radius: 15px; background: var(--of-card); box-shadow: var(--of-shadow); } #main-body #order-standard_cart.hg-order-flow--domaintransfer #frmDomainTransfer .card-header { padding: 24px; background: none; border-bottom: 1px solid var(--of-border); } #main-body #order-standard_cart.hg-order-flow--domaintransfer #frmDomainTransfer .panel-title { margin: 0; color: var(--of-ink); font-size: 18px; } #main-body #order-standard_cart.hg-order-flow--domaintransfer #frmDomainTransfer .card-body { padding: 24px; } #main-body #order-standard_cart.hg-order-flow--domaintransfer #frmDomainTransfer .card-footer { padding: 18px 24px; background: var(--of-bg); border-top: 1px solid var(--of-border); } /* Respect native hidden/error states and a short viewport. */ /* Native jQuery show/slideDown overrides this initial hidden state inline. */ #main-body #order-standard_cart.hg-order-flow .w-hidden { display: none; } @media (max-height: 800px) { #main-body #order-standard_cart.hg-order-flow .hg-checkout-aside, #main-body #order-standard_cart.hg-order-flow #scrollingPanelContainer { position: static !important; } } @media (max-width: 1100px) { #main-body #order-standard_cart.hg-order-flow #frmConfigureProduct > .row, #main-body #order-standard_cart.hg-order-flow--view .cart-body > .row { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; } #main-body #order-standard_cart.hg-order-flow .hg-checkout-section { padding: 20px; } #main-body #order-standard_cart.hg-order-flow .hg-bcards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 991px) { #main-body #order-standard_cart.hg-order-flow #frmConfigureProduct > .row, #main-body #order-standard_cart.hg-order-flow--view .cart-body > .row, #main-body #order-standard_cart.hg-order-flow .hg-checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } #main-body #order-standard_cart.hg-order-flow #scrollingPanelContainer, #main-body #order-standard_cart.hg-order-flow .hg-checkout-aside { width: 100% !important; position: static !important; } #main-body #order-standard_cart.hg-order-flow--products > .row { grid-template-columns: minmax(0, 1fr); } #main-body #order-standard_cart.hg-order-flow--products .cart-sidebar { display: none; } #main-body #order-standard_cart.hg-order-flow .hg-step { padding: 14px; gap: 8px; } body.hg-cart-page #hgMobileCta { background: var(--of-card); border-top: 1px solid var(--of-border); box-shadow: 0 -4px 24px rgb(20 25 50 / 8%); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); color: var(--of-ink); } body.hg-cart-page #hgMobileCtaBtn { background: #761098; border: 0; border-radius: 9px; color: #fff; min-height: 44px; } body.hg-cart-page #hgMobileCtaAmt { color: var(--of-ink); } } @media (max-width: 575px) { body.hg-cart-page:has(.hg-order-flow) #main-body { padding-top: 18px !important; padding-bottom: 36px !important; } #main-body #order-standard_cart.hg-order-flow .hg-order-steps { margin-bottom: 24px !important; } #main-body #order-standard_cart.hg-order-flow .hg-step { flex-direction: column !important; padding: 12px 5px; gap: 6px; text-align: center; } #main-body #order-standard_cart.hg-order-flow .hg-step-chip { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; } #main-body #order-standard_cart.hg-order-flow .hg-step-num { display: none; } #main-body #order-standard_cart.hg-order-flow .hg-step-label { font-size: 11px; overflow-wrap: anywhere; } #main-body #order-standard_cart.hg-order-flow .header-lined h1 { font-size: 25px !important; letter-spacing: -.5px; } #main-body #order-standard_cart.hg-order-flow .product-info, #main-body #order-standard_cart.hg-order-flow .order-summary, #main-body #order-standard_cart.hg-order-flow .view-cart-items .item, #main-body #order-standard_cart.hg-order-flow .hg-checkout-section { padding: 20px !important; } #main-body #order-standard_cart.hg-order-flow .hgcfg-grid, #main-body #order-standard_cart.hg-order-flow--products .sidebar-collapsed, #main-body #order-standard_cart.hg-order-flow--products .products > .row { grid-template-columns: minmax(0, 1fr) !important; } #main-body #order-standard_cart.hg-order-flow--domainregister .domain-checker-container { padding: 18px; } #main-body #order-standard_cart.hg-order-flow--domainregister .input-group-btn { flex-basis: 76px; } #main-body #order-standard_cart.hg-order-flow--domainregister #btnCheckAvailability { padding: 10px; } #main-body #order-standard_cart.hg-order-flow--domainregister .featured-tlds-container > .row > :has(.featured-tld) { max-width: none; } #main-body #order-standard_cart.hg-order-flow .hg-domain-price-disclosure { padding: 0 16px; } #main-body #order-standard_cart.hg-order-flow .tld-pricing-header .tld-column { display: none; } #main-body #order-standard_cart.hg-order-flow .tld-row .two-row-center { margin-bottom: 10px; padding: 0 12px; } #main-body #order-standard_cart.hg-order-flow--domaintransfer #btnTransferDomain { width: 100%; } #main-body #order-standard_cart.hg-order-flow .hg-option-disclosure > summary { padding: 16px 18px; padding-inline-end: 42px; } #main-body #order-standard_cart.hg-order-flow .hg-option-value { font-size: 14px; } #main-body #order-standard_cart.hg-order-flow .hg-option-choices { padding: 12px; } #main-body #order-standard_cart.hg-order-flow .hg-bcard { padding: 12px !important; } #main-body #order-standard_cart.hg-order-flow .already-registered { flex-direction: column-reverse; align-items: stretch; margin-top: 0; } #main-body #order-standard_cart.hg-order-flow .already-registered button { width: 100%; } #main-body #order-standard_cart.hg-order-flow .view-cart-items-header { display: none; } #main-body #order-standard_cart.hg-order-flow .item > .row { display: block; } #main-body #order-standard_cart.hg-order-flow .item > .row > [class*="col-"] { width: 100%; max-width: none; } #main-body #order-standard_cart.hg-order-flow .item-price { text-align: start; margin-top: 18px; } #main-body #order-standard_cart.hg-order-flow .item-title { font-size: 18px !important; } #main-body #order-standard_cart.hg-order-flow .item-title .btn { margin-top: 6px; } #main-body #order-standard_cart.hg-order-flow--checkout .form-control { font-size: 16px; } #main-body #order-standard_cart.hg-order-flow #applyPromo > form { flex-direction: column; } #main-body #order-standard_cart.hg-order-flow #applyPromo > form > * { width: 100%; } } @media (prefers-reduced-motion: reduce) { #main-body #order-standard_cart.hg-order-flow * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }