/* =====================================================================
   Hostragons Order Form — Brand Restyle (custom.css)
   Auto-loaded via common.tpl {assetExists file="custom.css"}.
   Only visual layer; no Smarty/JS/markup logic touched.
   Brand: #761098 (mor) / #bf0b90 (magenta)
   ===================================================================== */

:root {
    --hg-primary: #761098;
    --hg-primary-d: #5d0c79;
    --hg-accent: #bf0b90;
    --hg-grad: linear-gradient(135deg, #761098 0%, #bf0b90 100%);
    --hg-grad-soft: linear-gradient(135deg, #8a1bb0 0%, #c41a9c 100%);
    --hg-ink: #2b2240;
    --hg-muted: #6b6580;
    --hg-line: #ece8f2;
    --hg-bg: #f6f4fa;
    --hg-radius: 14px;
    --hg-shadow: 0 6px 24px rgba(118, 16, 152, .10);
    --hg-shadow-sm: 0 2px 10px rgba(118, 16, 152, .07);
}

/* ----------------------------------------------------------------- */
/*  1. Step wizard (common.tpl: .hg-steps)                           */
/* ----------------------------------------------------------------- */
.hg-steps {
    max-width: 1060px;
    margin: 6px auto 0;
    padding: 0 16px;
    width: 100%;
}
.hg-steps__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}
/* connector line behind the dots */
.hg-steps__inner::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: var(--hg-line);
    border-radius: 3px;
    z-index: 0;
}
.hg-step {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    text-align: center;
    min-width: 0;
}
.hg-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--hg-line);
    color: var(--hg-muted);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    transition: all .25s ease;
    box-shadow: var(--hg-shadow-sm);
}
.hg-step__t {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hg-muted);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hg-step.is-active .hg-step__n {
    background: var(--hg-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(118, 16, 152, .35);
    transform: scale(1.06);
}
.hg-step.is-active .hg-step__t {
    color: var(--hg-primary);
}
.hg-step.is-done .hg-step__n {
    background: var(--hg-primary);
    border-color: transparent;
    color: #fff;
}
.hg-step.is-done .hg-step__t {
    color: var(--hg-ink);
}

/* ----------------------------------------------------------------- */
/*  2. Trust / secure row (common.tpl: .hg-secure-row)               */
/* ----------------------------------------------------------------- */
.hg-secure-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    max-width: 1060px;
    margin: 20px auto 8px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--hg-line);
    border-radius: 999px;
    box-shadow: var(--hg-shadow-sm);
}
.hg-secure-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hg-ink);
}
.hg-secure-row span i {
    color: var(--hg-accent);
    font-size: 14px;
}

/* ----------------------------------------------------------------- */
/*  3. Page shell + headings                                          */
/* ----------------------------------------------------------------- */
#order-standard_cart {
    color: var(--hg-ink);
}
#order-standard_cart .header-lined {
    border: 0;
    margin-bottom: 22px;
}
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined .font-size-36 {
    color: var(--hg-ink);
    font-weight: 800;
    letter-spacing: -.4px;
    position: relative;
    padding-bottom: 12px;
}
#order-standard_cart .header-lined h1::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 12px;
    border-radius: 4px;
    background: var(--hg-grad);
}

/* sub-heading section separators -> brand */
#order-standard_cart .sub-heading {
    border-top: 1px solid var(--hg-line);
    margin-top: 28px;
    margin-bottom: 32px;
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    color: var(--hg-primary);
    font-weight: 700;
    background: #fff;
}
.primary-bg-color,
#order-standard_cart .primary-bg-color {
    color: var(--hg-primary) !important;
}

/* ----------------------------------------------------------------- */
/*  4. Product listing cards (products.tpl)                           */
/* ----------------------------------------------------------------- */
#order-standard_cart .products .product {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    overflow: hidden;
}
#order-standard_cart .products .product:hover {
    transform: translateY(-4px);
    box-shadow: var(--hg-shadow);
    border-color: rgba(118, 16, 152, .35);
}
#order-standard_cart .products .product header {
    background: var(--hg-bg);
    border-bottom: 1px solid var(--hg-line);
    padding: 14px 20px;
}
#order-standard_cart .products .product header span {
    color: var(--hg-ink);
    font-weight: 700;
}
#order-standard_cart .products .product div.product-pricing span.price {
    color: var(--hg-primary);
    font-weight: 800;
}
#order-standard_cart .products .product span.feature-value {
    color: var(--hg-accent);
}

/* ----------------------------------------------------------------- */
/*  5. Addon panels (configureproduct.tpl)                            */
/* ----------------------------------------------------------------- */
#order-standard_cart .panel-addon {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}
#order-standard_cart .panel-addon:hover {
    border-color: rgba(118, 16, 152, .4);
    box-shadow: var(--hg-shadow);
    transform: translateY(-2px);
}
#order-standard_cart .panel-addon .panel-price {
    background: var(--hg-bg);
    color: var(--hg-ink);
    font-weight: 600;
}
#order-standard_cart .panel-addon .panel-add {
    background: var(--hg-grad);
    color: #fff;
    font-weight: 600;
}
#order-standard_cart .panel-addon-selected {
    border-color: var(--hg-primary);
    box-shadow: 0 0 0 2px rgba(118, 16, 152, .18), var(--hg-shadow-sm);
}
#order-standard_cart .panel-addon-selected .panel-add {
    background: var(--hg-primary-d);
}

/* ----------------------------------------------------------------- */
/*  6. Order summary sidebar (configureproduct / viewcart)           */
/* ----------------------------------------------------------------- */
#order-standard_cart .order-summary {
    background: var(--hg-grad);
    border: 0;
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-shadow);
    overflow: hidden;
}
#order-standard_cart .order-summary h2 {
    padding: 16px 14px;
    font-weight: 700;
    letter-spacing: .3px;
}
#order-standard_cart .summary-container {
    background: #fff;
    margin: 0;
    padding: 16px;
    border-radius: 0;
}
#order-standard_cart .order-summary .product-name {
    color: var(--hg-ink);
}
#order-standard_cart .order-summary .total-due-today {
    margin-top: 8px;
    padding: 14px;
    background: var(--hg-bg);
    border-radius: 12px;
    border: 1px dashed rgba(118, 16, 152, .35);
}
#order-standard_cart .order-summary .total-due-today .amt {
    color: var(--hg-primary);
    font-weight: 800;
}
#order-standard_cart .order-summary .total-due-today-padded {
    margin-top: 12px;
}
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .recurring-totals,
#order-standard_cart .order-summary .bordered-totals {
    border-color: var(--hg-line) !important;
}
#order-standard_cart .order-summary .recurring-charges .cost {
    color: var(--hg-accent);
    font-weight: 700;
}
#order-standard_cart .order-summary .loader {
    color: rgba(255, 255, 255, .85);
}

/* ----------------------------------------------------------------- */
/*  7. View cart line items (viewcart.tpl)                            */
/* ----------------------------------------------------------------- */
#order-standard_cart .view-cart-items-header {
    background: var(--hg-bg);
    border-radius: 10px 10px 0 0;
    color: var(--hg-primary);
    font-weight: 700;
    padding: 12px 14px;
    border: 1px solid var(--hg-line);
    border-bottom: 0;
}
#order-standard_cart .view-cart-items {
    border: 1px solid var(--hg-line);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
#order-standard_cart .view-cart-items .item {
    border-bottom: 1px solid var(--hg-line);
    padding: 14px;
    transition: background .15s ease;
}
#order-standard_cart .view-cart-items .item:last-child {
    border-bottom: 0;
}
#order-standard_cart .view-cart-items .item:hover {
    background: var(--hg-bg);
}
#order-standard_cart .view-cart-items .item-title {
    font-weight: 700;
    color: var(--hg-ink);
}
#order-standard_cart .view-cart-items .item-domain {
    color: var(--hg-accent);
    font-weight: 600;
}
#order-standard_cart .view-cart-items .item-price span:first-child {
    font-weight: 700;
    color: var(--hg-primary);
}
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active,
#order-standard_cart .view-cart-tabs .nav-tabs li.active > a {
    color: var(--hg-primary);
    border-bottom-color: var(--hg-primary);
    font-weight: 700;
}

/* ----------------------------------------------------------------- */
/*  8. Checkout — accounts, payment methods, TOS                     */
/* ----------------------------------------------------------------- */
#order-standard_cart .account {
    border: 1px solid var(--hg-line);
    border-radius: 12px;
    padding: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#order-standard_cart .account.active {
    border-color: var(--hg-primary);
    box-shadow: 0 0 0 2px rgba(118, 16, 152, .15);
}
#order-standard_cart #paymentGatewaysContainer .radio-inline,
#order-standard_cart .payment-methods + * {
    font-weight: 600;
}
#order-standard_cart #paymentGatewaysContainer label.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 8px;
    padding: 10px 18px;
    border: 1px solid var(--hg-line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: all .2s ease;
}
#order-standard_cart #paymentGatewaysContainer label.radio-inline:hover {
    border-color: rgba(118, 16, 152, .45);
    box-shadow: var(--hg-shadow-sm);
}
#order-standard_cart .payment-methods:checked + * {
    color: var(--hg-primary);
}
/* total due today banner on checkout */
#order-standard_cart .alert-success#totalDueToday,
#order-standard_cart #totalDueToday.alert-success {
    background: var(--hg-bg);
    border: 1px solid rgba(118, 16, 152, .25);
    color: var(--hg-ink);
}
#order-standard_cart #totalDueToday #totalCartPrice {
    color: var(--hg-primary);
    font-weight: 800;
}
#order-standard_cart .marketing-email-optin {
    background: var(--hg-bg);
    border: 1px solid var(--hg-line);
    border-radius: 12px;
    padding: 16px 18px;
}

/* ----------------------------------------------------------------- */
/*  9. Form controls — focus & inputs                                */
/* ----------------------------------------------------------------- */
#order-standard_cart .form-control:focus,
#order-standard_cart .field.form-control:focus,
#order-standard_cart select.form-control:focus {
    border-color: var(--hg-primary);
    box-shadow: 0 0 0 .2rem rgba(118, 16, 152, .18);
    outline: 0;
}
#order-standard_cart .prepend-icon .field-icon {
    color: var(--hg-primary);
}

/* ----------------------------------------------------------------- */
/*  10. Buttons — brand gradient                                     */
/* ----------------------------------------------------------------- */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart .btn-checkout,
#order-standard_cart #btnCompleteOrder,
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart .btn-order-now {
    background: var(--hg-grad);
    border: 0;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(118, 16, 152, .28);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart #btnCompleteOrder:hover,
#order-standard_cart #btnCompleteProductConfig:hover,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-primary:focus,
#order-standard_cart .btn-success:focus {
    background: var(--hg-grad-soft);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(118, 16, 152, .36);
    filter: none;
}
#order-standard_cart .btn-primary:active,
#order-standard_cart .btn-success:active,
#order-standard_cart .btn-checkout:active {
    transform: translateY(0);
}
#order-standard_cart .btn-lg {
    padding: 12px 30px;
    font-size: 17px;
}
#order-standard_cart .btn-link {
    color: var(--hg-primary);
}
#order-standard_cart .btn-link:hover {
    color: var(--hg-accent);
}
#order-standard_cart .btn-continue-shopping {
    color: var(--hg-muted);
    font-weight: 600;
    margin-top: 10px;
}
/* keep destructive / remove buttons neutral */
#order-standard_cart .btn-remove-from-cart,
#order-standard_cart #btnEmptyCart {
    background: transparent !important;
    box-shadow: none !important;
    color: #c0392b;
}
#order-standard_cart .btn-remove-from-cart:hover,
#order-standard_cart #btnEmptyCart:hover {
    color: #e74c3c;
    transform: none;
}
/* TOS acceptance row */
#order-standard_cart .checkbox-inline a {
    color: var(--hg-primary);
    font-weight: 700;
    text-decoration: underline;
}

/* ----------------------------------------------------------------- */
/*  11. Alerts & order confirmation (complete.tpl)                   */
/* ----------------------------------------------------------------- */
#order-standard_cart .alert {
    border-radius: 12px;
    border-width: 1px;
}
#order-standard_cart .order-confirmation {
    background: var(--hg-bg);
    border: 1px solid rgba(118, 16, 152, .25);
    color: var(--hg-ink);
    text-align: center;
    font-size: 1.05em;
    border-radius: 12px;
}
#order-standard_cart .order-confirmation span {
    color: var(--hg-primary);
    font-weight: 800;
}
#order-standard_cart .alert-link {
    color: var(--hg-primary);
    font-weight: 700;
}

/* ----------------------------------------------------------------- */
/*  12. Sidebar categories                                            */
/* ----------------------------------------------------------------- */
#order-standard_cart .cart-sidebar .list-group-item.active,
#order-standard_cart .sidebar .list-group-item.active,
#order-standard_cart .sidebar-categories .list-group-item.active {
    background: var(--hg-grad);
    border-color: transparent;
    color: #fff;
}
#order-standard_cart .cart-sidebar .list-group-item:hover {
    border-left: 3px solid var(--hg-accent);
}

/* ----------------------------------------------------------------- */
/*  13. Domain hero + steps (domainregister / domaintransfer)        */
/* ----------------------------------------------------------------- */
.hg-dhero {
    background: var(--hg-grad);
    border-radius: 18px;
    padding: 30px 28px;
    margin: 4px 0 26px;
    color: #fff;
    box-shadow: var(--hg-shadow);
    overflow: hidden;
    position: relative;
}
.hg-dhero::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.hg-dhero__body {
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    z-index: 1;
}
.hg-dhero__icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .18);
    font-size: 28px;
    color: #fff;
}
.hg-dhero__title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.3px;
}
.hg-dhero__sub {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .92);
    line-height: 1.5;
}
.hg-domsteps {
    margin: 30px 0 8px;
}
.hg-domsteps__title {
    text-align: center;
    font-weight: 800;
    color: var(--hg-ink);
    margin-bottom: 22px;
}
.hg-domsteps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.hg-domstep {
    background: #fff;
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    padding: 22px 20px;
    text-align: center;
    box-shadow: var(--hg-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.hg-domstep:hover {
    transform: translateY(-4px);
    box-shadow: var(--hg-shadow);
}
.hg-domstep__n {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hg-grad);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}
.hg-domstep__t {
    font-weight: 700;
    color: var(--hg-ink);
    margin: 0 0 6px;
}
.hg-domstep__s {
    color: var(--hg-muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

/* ----------------------------------------------------------------- */
/*  15. Product-domain selection (configureproductdomain.tpl)         */
/*      Modern selectable cards. Preserves WHMCS JS hooks:            */
/*      .domain-selection-options input / .option / .option-selected */
/*      / .domain-input-group / #domain{option}                      */
/* ----------------------------------------------------------------- */

/* compact hero variant reused from .hg-dhero */
.hg-dhero--compact {
    padding: 22px 26px;
    margin: 4px 0 22px;
}
.hg-dhero--compact .hg-dhero__title {
    font-size: 22px;
    margin: 0 0 4px;
}
.hg-dhero--compact .hg-dhero__icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
}

/* option list -> spaced card stack */
#order-standard_cart .domain-selection-options.hg-domopts {
    margin: 8px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* each .option becomes a brand card. !important overrides all.css base */
#order-standard_cart .domain-selection-options .option.hg-domopt {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-shadow-sm);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
#order-standard_cart .domain-selection-options .option.hg-domopt:hover {
    border-color: rgba(118, 16, 152, .4);
    box-shadow: var(--hg-shadow);
    transform: translateY(-2px);
}
/* selected state (JS adds .option-selected) */
#order-standard_cart .domain-selection-options .option.hg-domopt.option-selected {
    background: #fff !important;
    border-color: var(--hg-primary);
    box-shadow: 0 0 0 3px rgba(118, 16, 152, .14), var(--hg-shadow-sm);
}

/* clickable header row holding the iCheck radio + icon + label text */
#order-standard_cart .hg-domopt__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--hg-ink);
    line-height: 1.3;
    width: 100%;
}
#order-standard_cart .option.hg-domopt.option-selected .hg-domopt__head {
    background: var(--hg-bg);
}
/* iCheck wrapper sits as first child of the label */
#order-standard_cart .domain-selection-options .option.hg-domopt .iradio_square-blue {
    margin-right: 0 !important;
    flex: 0 0 auto;
}

/* leading round icon badge */
#order-standard_cart .hg-domopt__ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--hg-bg);
    color: var(--hg-primary);
    font-size: 16px;
    transition: background .2s ease, color .2s ease;
}
#order-standard_cart .option.hg-domopt.option-selected .hg-domopt__ico {
    background: var(--hg-grad);
    color: #fff;
}
#order-standard_cart .hg-domopt__txt {
    flex: 1 1 auto;
    min-width: 0;
}
#order-standard_cart .domain-selection-options .option.hg-domopt.option-selected label {
    font-weight: 700;
}
/* "recommended" pill */
#order-standard_cart .hg-domopt__badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    background: var(--hg-grad);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* expanded input area (JS toggles display via #domain{option}) */
#order-standard_cart .option.hg-domopt .domain-input-group {
    margin: 0;
    padding: 4px 20px 20px;
    border-top: 1px dashed var(--hg-line);
}
#order-standard_cart .option.hg-domopt .domain-input-group .row {
    align-items: flex-end;
}
#order-standard_cart .option.hg-domopt .domain-input-group .input-group-text {
    background: var(--hg-bg);
    border-color: var(--hg-line);
    color: var(--hg-muted);
    font-weight: 600;
}
#order-standard_cart .option.hg-domopt .domain-input-group .form-control,
#order-standard_cart .option.hg-domopt .domain-input-group .input-group-text {
    height: 44px;
}
#order-standard_cart .option.hg-domopt .domain-input-group .btn {
    height: 44px;
}
#order-standard_cart .option.hg-domopt .form-control-static {
    line-height: 44px;
    margin: 0;
    color: var(--hg-muted);
    font-weight: 600;
}

/* free-domain note */
#order-standard_cart .hg-dom-freenote {
    margin: 14px 2px 0;
    padding: 10px 14px;
    background: var(--hg-bg);
    border: 1px dashed rgba(118, 16, 152, .3);
    border-radius: 10px;
    font-size: 13px;
    color: var(--hg-ink);
}
#order-standard_cart .hg-dom-freenote em { color: var(--hg-primary); font-style: normal; }

/* primary lookup result card */
#order-standard_cart #DomainSearchResults #primaryLookupResult {
    background: #fff;
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-shadow-sm);
    padding: 22px 18px;
}
#order-standard_cart #DomainSearchResults .domain-price {
    font-size: 1.05em;
    color: var(--hg-ink);
}
#order-standard_cart #DomainSearchResults .domain-price .price {
    color: var(--hg-primary);
    font-weight: 800;
}

/* continue button breathing room */
#order-standard_cart #btnDomainContinue { margin-top: 22px; }

/* ----------------------------------------------------------------- */
/*  16. Responsive                                                    */
/* ----------------------------------------------------------------- */
@media (max-width: 767px) {
    .hg-steps { padding: 0 4px; }
    .hg-step__t { font-size: 11px; }
    .hg-step__n { width: 34px; height: 34px; font-size: 14px; }
    .hg-steps__inner::before { top: 16px; }
    .hg-secure-row { border-radius: 16px; gap: 8px 18px; }
    .hg-dhero__body { flex-direction: column; text-align: center; gap: 14px; }
    .hg-dhero__title { font-size: 21px; }
    .hg-domsteps__grid { grid-template-columns: 1fr; }

    #order-standard_cart .hg-domopt__head { flex-wrap: wrap; padding: 14px 16px; }
    #order-standard_cart .hg-domopt__badge { margin-left: 50px; }
    #order-standard_cart .option.hg-domopt .domain-input-group { padding: 4px 16px 16px; }
    #order-standard_cart .option.hg-domopt .domain-input-group .col-sm-2 { margin-top: 10px; }
}

/* ===================================================================== */
/*  17. Cart-flow layout fixes (breadcrumb, config centering, checkout    */
/*      button, mobile overflow). Scoped to cart so other clientarea     */
/*      pages (support etc.) are untouched. Loaded only on order forms.  */
/* ===================================================================== */

/* --- 17.1  Hide the raw WHMCS "Sepet" master-breadcrumb in cart flow --- */
/*  The step wizard (.hg-steps) already shows position, so this bare      */
/*  breadcrumb under the logo is redundant. .hg-steps only exists on the  */
/*  order form, so :has() scopes the hide to cart pages only.             */
body:has(.hg-steps) .master-breadcrumb {
    display: none !important;
}
/* Fallback for browsers without :has(): the order form wrapper is a      */
/* sibling further down, so also hide when the cart wrapper is present.   */
body:has(#order-standard_cart) .master-breadcrumb {
    display: none !important;
}

/* --- 17.2  Configuration step: balance content / kill the right gap --- */
/*  Real markup: .cart-body > .row > .secondary-cart-body (main) +        */
/*  .secondary-cart-sidebar#scrollingPanelContainer (summary).            */
/*  configureproductdomain.tpl has NO summary sidebar -> single column    */
/*  that read as "left-aligned with a big empty right side". Center its   */
/*  content and cap the line length so it sits balanced in the container. */
/*  NOTE: cart pages load only all.min.css + custom.css; neither sets a   */
/*  border-box reset, so the base float columns keep box-sizing:content-  */
/*  box. With width:65/35% + 30px padding this pushed the page ~7px wider */
/*  than the viewport (masaustu yatay tasma). Reset the cart columns to   */
/*  border-box so width% already includes the 15px gutters.               */
#order-standard_cart .cart-body,
#order-standard_cart .cart-sidebar,
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar {
    box-sizing: border-box;
}
#order-standard_cart .secondary-cart-body {
    width: 100%;
}
/*  When there is no summary sidebar (domain step), center the main body  */
#order-standard_cart .row:not(:has(.secondary-cart-sidebar)) > .secondary-cart-body {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    float: none;
}
/*  Domain selection card stack: keep it centered & readable, not edge    */
#order-standard_cart .domain-selection-options.hg-domopts,
#order-standard_cart #DomainSearchResults {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 992px) {
    /* let the order summary track the page on long config forms */
    #order-standard_cart .secondary-cart-sidebar #orderSummary {
        position: sticky;
        top: 20px;
    }
}

/* --- 17.3  Checkout / "Ödeme Yap" button: full width + prominent ------ */
/*  viewcart.tpl: #checkout.btn-checkout inside .order-summary .text-right */
/*  checkout.tpl: #btnCompleteOrder inside #btnCompleteOrderContainer      */
#order-standard_cart .order-summary .text-right,
#order-standard_cart #btnCompleteOrderContainer {
    text-align: center;
}
#order-standard_cart #checkout.btn-checkout,
#order-standard_cart #btnCompleteOrder {
    display: block;
    width: 100%;
    padding: 15px 24px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .3px;
    border-radius: 12px;
    margin-top: 4px;
    box-shadow: 0 8px 20px rgba(118, 16, 152, .32);
}
#order-standard_cart #checkout.btn-checkout i {
    margin-left: 8px;
}
/* disabled (empty cart / TOS not accepted) — clearly inert */
#order-standard_cart #checkout.btn-checkout.disabled,
#order-standard_cart #checkout.btn-checkout[disabled],
#order-standard_cart #btnCompleteOrder:disabled,
#order-standard_cart #btnCompleteOrder.disabled {
    background: #cfc7d8 !important;
    color: #fff !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1;
    transform: none !important;
    filter: none !important;
}
/* the "continue shopping" / secondary links stay subtle below the CTA */
#order-standard_cart .view-cart-gateway-checkout .btn-link,
#order-standard_cart #btnCompleteOrderContainer + * .btn-link {
    display: inline-block;
    margin-top: 10px;
}

/* --- 17.4  Mobile horizontal-overflow guard (viewcart / checkout) ----- */
@media (max-width: 767px) {
    /* never let any cart child push the page wider than the viewport */
    #order-standard_cart,
    #order-standard_cart .row,
    #order-standard_cart .order-summary,
    #order-standard_cart .summary-container,
    #order-standard_cart .view-cart-items,
    #order-standard_cart table {
        max-width: 100%;
    }
    #order-standard_cart .row {
        margin-left: 0;
        margin-right: 0;
    }
    #order-standard_cart [class*="col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* wide tables scroll inside their box instead of the whole page */
    #order-standard_cart .table-responsive,
    #order-standard_cart .view-cart-items {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* step wizard fits the viewport */
    .hg-steps {
        max-width: 100%;
        padding: 0 8px;
    }
    .hg-steps__inner {
        overflow: hidden;
    }
    /* config step: drop the artificial max-width on small screens */
    #order-standard_cart .hg-config-main {
        max-width: 100%;
    }
    /* CTA already full width; keep summary card edge-to-edge-ish */
    #order-standard_cart .order-summary {
        margin-left: 0;
        margin-right: 0;
    }

    /* --- 17.5  Mobile horizontal-overflow: decorative footer blobs ----- */
    /*  Cart pages only load THIS stylesheet (not the clientarea one), so  */
    /*  the overflow guard must live here. Playwright @390px proved the    */
    /*  real offenders are absolutely-positioned decorative images from    */
    /*  the shared site footer (img.position-absolute.z-n1.pointer-none,   */
    /*  ~1016px wide) — purely visual (z-index:-1, pointer-events:none).   */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    img.position-absolute.pointer-none,
    img.position-absolute.z-n1,
    .position-absolute.pointer-none {
        max-width: 100vw;
        height: auto;
    }
    /* footer language grid: fit the viewport instead of forcing 8 cols */
    .lang-switch.lang-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 480px) {
    .lang-switch.lang-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================================
   18. CART SIDEBAR PANELS — full restyle (custom.css v2)
   The WHMCS cart left column (.cart-sidebar: Kategoriler / İşlemler /
   Para Birimi) ships with Bootstrap-4 card classes, but cart pages only
   load all.min.css + this file, neither of which paints .panel/.card.
   Measured live: bg transparent, no border, no radius, no shadow,
   heading 14px/400, items default-link-blue. That is the "cramped /
   broken sidebar" the user sees on every cart page. Paint it as clean
   brand cards. Markup untouched (sidebar-categories.tpl).
   ===================================================================== */
#order-standard_cart .cart-sidebar {
    box-sizing: border-box;
}
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .card-sidebar,
#order-standard_cart .cart-sidebar .panel-sidebar {
    background: #fff;
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}
#order-standard_cart .cart-sidebar .panel-heading,
#order-standard_cart .cart-sidebar .card-header {
    background: var(--hg-bg);
    border-bottom: 1px solid var(--hg-line);
    padding: 13px 16px;
}
#order-standard_cart .cart-sidebar .panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--hg-primary);
    display: flex;
    align-items: center;
}
#order-standard_cart .cart-sidebar .panel-title > i:first-child {
    color: var(--hg-accent);
}
#order-standard_cart .cart-sidebar .panel-minimise {
    margin-left: auto;
    color: var(--hg-muted);
    font-size: 12px;
    cursor: pointer;
}
/* list items -> tidy rows, brand hover, no raw-blue links */
#order-standard_cart .cart-sidebar .list-group,
#order-standard_cart .cart-sidebar .collapsable-card-body,
#order-standard_cart .cart-sidebar .panel-body,
#order-standard_cart .cart-sidebar .card-body {
    padding: 6px;
    background: #fff;
}
#order-standard_cart .cart-sidebar .list-group-item {
    display: block;
    border: 0;
    border-radius: 9px;
    padding: 9px 12px;
    margin: 2px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hg-ink);
    background: transparent;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
#order-standard_cart .cart-sidebar a.list-group-item:hover {
    background: var(--hg-bg);
    color: var(--hg-primary);
    border: 0;
}
#order-standard_cart .cart-sidebar .list-group-item i {
    color: var(--hg-primary);
    width: 18px;
    text-align: center;
    margin-right: 4px;
}
#order-standard_cart .cart-sidebar .list-group-item.active {
    background: var(--hg-grad);
    color: #fff;
}
#order-standard_cart .cart-sidebar .list-group-item.active i {
    color: #fff;
}
/* currency selector inside the sidebar */
#order-standard_cart .cart-sidebar select.form-control,
#order-standard_cart .cart-sidebar .form-control {
    height: 42px;
    border-radius: 10px;
    border-color: var(--hg-line);
}
#order-standard_cart .cart-sidebar .panel-footer,
#order-standard_cart .cart-sidebar .card-footer {
    background: #fff;
    border-top: 1px solid var(--hg-line);
    padding: 10px 14px;
}

/* =====================================================================
   19. CART LAYOUT BALANCE — sidebar + body proportions
   Two-column float layout (cart-sidebar W316 + cart-body W948) read as
   "left-heavy / cramped" because the sidebar was unstyled AND the body
   content (esp. config/domain steps without a right summary) hugged the
   left. Tighten the sidebar, give the body breathing room, and keep
   single-column steps centered & capped for readability.
   ===================================================================== */
#order-standard_cart .cart-sidebar {
    width: 270px;
    padding-right: 24px;
    padding-left: 15px;
}
#order-standard_cart .cart-body {
    width: calc(100% - 270px);
    box-sizing: border-box;
}
/* the inner config/review area: center its content block, cap line len */
#order-standard_cart .cart-body > .header-lined,
#order-standard_cart .cart-body > form,
#order-standard_cart .cart-body > .hg-dhero,
#order-standard_cart .cart-body > .row {
    max-width: 100%;
}
/* product-config & domain steps have NO right summary sidebar inside the
   inner .row -> stop the single column from clinging to the left edge */
#order-standard_cart .cart-body > .row:not(:has(.secondary-cart-sidebar)) > .secondary-cart-body,
#order-standard_cart .cart-body > form .domain-selection-options.hg-domopts {
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================================
   20. CONFIG-PRODUCT step polish (configureproduct.tpl)
   Tone down the loud full-width purple sub-heading bars; make the addon
   header band lighter; give the order-summary card real presence so the
   right side is not an empty box.
   ===================================================================== */
#order-standard_cart .sub-heading {
    position: relative;
    text-align: left;
    border-top: 1px solid var(--hg-line);
    margin: 26px 0 18px;
}
#order-standard_cart .sub-heading span {
    display: inline-block;
    padding: 0 14px 0 0;
    transform: translateY(-50%);
    font-size: 15px;
}
#order-standard_cart .panel-addon .panel-heading,
#order-standard_cart .panel-addon .card-header {
    background: var(--hg-bg);
    border-bottom: 1px solid var(--hg-line);
}
#order-standard_cart .panel-addon .panel-title,
#order-standard_cart .panel-addon .card-header h3 {
    color: var(--hg-ink);
    font-weight: 700;
    font-size: 15px;
}
/* config-step order summary: never collapse to an empty sliver */
#order-standard_cart .secondary-cart-sidebar,
#order-standard_cart #orderSummary {
    min-width: 240px;
}
#order-standard_cart .order-summary {
    min-height: 120px;
}

/* =====================================================================
   21. EMPTY-CART / checkout CTA — guarantee a prominent full-width button
   Even when the cart is empty the "Ödeme Yap" CTA must look intentional
   and span the summary card (was sitting at ~307px inside the sidebar).
   ===================================================================== */
#order-standard_cart .order-summary .text-right > #checkout,
#order-standard_cart .order-summary .text-right > .btn-checkout,
#order-standard_cart .order-summary #checkout,
#order-standard_cart .order-summary .btn-checkout {
    display: block;
    width: 100%;
    margin-top: 6px;
}
#order-standard_cart .order-summary .text-right {
    text-align: center;
}
/* empty-cart notice tidy */
#order-standard_cart .empty-cart,
#order-standard_cart .cart-empty,
#order-standard_cart .alert-info {
    border-radius: 12px;
}

/* =====================================================================
   22. RESPONSIVE — sidebar stacks above content on tablet/mobile
   ===================================================================== */
@media (max-width: 991px) {
    #order-standard_cart .cart-sidebar,
    #order-standard_cart .cart-body {
        width: 100%;
        float: none;
        padding-right: 15px;
    }
    #order-standard_cart .cart-sidebar {
        margin-bottom: 8px;
    }
    /* on mobile the categories sidebar is low-value above the cart; the
       collapsed selector handles nav. Keep currency reachable but compact */
    #order-standard_cart .cart-sidebar .panel {
        margin-bottom: 12px;
    }
}
@media (max-width: 767px) {
    /* kill the residual 8px overflow on domain option cards (hg-domopt
       labels measured at right:398 in a 390 viewport) */
    #order-standard_cart .domain-selection-options .option.hg-domopt,
    #order-standard_cart .hg-domopt__head {
        max-width: 100%;
        box-sizing: border-box;
    }
    #order-standard_cart .domain-input-group .row,
    #order-standard_cart .cart-body .row {
        margin-left: 0;
        margin-right: 0;
    }
    #order-standard_cart .cart-sidebar {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =====================================================================
   23. CART WRAPPER CENTERING — the real "kayma" (off-centre) fix
   ---------------------------------------------------------------------
   Root cause (verified live, Playwright + CDP getMatchedStyles @1366px):
   #order-standard_cart receives TWO rules:
     • WHMCS base order CSS:  max-width:1080px; margin:0 auto;  (centers it)
     • all.min.css (loads later): #order-standard_cart{ margin:0 }  ← WINS
   The later margin:0 cancels the auto-centering, so the 1080px wrapper
   pins to the LEFT of its 1140px Bootstrap column. Measured: left=125px,
   right-gap=161px on EVERY desktop step (store / config / viewcart /
   checkout) — the whole title + cart body + summary block sat ~36px left
   of centre with a large empty band on the right, while the centered
   .hg-steps wizard above it made the misalignment obvious.
   custom.css loads LAST, so simply restore the intended auto-centering.
   Same ID specificity as all.min.css but defined later -> this wins.
   Pure layout; no markup/Smarty/JS touched. Mobile (single column,
   max-width:100%) is unaffected: auto margins collapse to 0 there.
   ===================================================================== */
#order-standard_cart {
    margin-left: auto !important;
    margin-right: auto !important;
}