/*
 * Custom CSS for Nexus Cart Orderform — Hostragons brand.
 *
 * Two scopes live in this file:
 *   1. :host / :root  -> the Nexus cart Shadow DOM (cart view, step 4).
 *   2. #order-standard_cart / .hg-*  -> the legacy Smarty flow pages
 *      (products, configureproductdomain, configureproduct, checkout) and the
 *      light-DOM step bar rendered above the Nexus cart.
 *
 * Brand: primary #761098, deep #5a0c78, accent/magenta #bf0b90,
 *        gradient linear-gradient(135deg,#761098,#bf0b90), Inter, radius .85rem.
 */

/* ===================================================================== *
 * SHADOW-DOM TOKENS (Nexus cart)                                        *
 * ===================================================================== */
:host, :root {
    /* Primary colors — Hostragons brand purple (light touch).
     * Set explicitly (not var(--primary)) so the cart stays on-brand even
     * while the active client-area theme still resolves --primary to neutral. */
    --vl-primary: #761098;          /* brand primary */
    --vl-primary-lifted: #5a0c78;   /* hover */
    --vl-primary-accented: #4e0a66; /* active / deepest */

    /* Brand accent reused below */
    --hg-accent: #bf0b90;

    /* Secondary colors */
    --vl-secondary: var(--secondary);
    --vl-secondary-lifted: var(--secondary-lifted);
    --vl-secondary-accented: var(--secondary-accented);

    /* Success colors */
    --vl-success: var(--success);
    --vl-success-lifted: var(--success-lifted);
    --vl-success-accented: var(--success-accented);

    /* Info colors */
    --vl-info: var(--info);
    --vl-info-lifted: var(--info-lifted);
    --vl-info-accented: var(--info-accented);

    /* Notice colors */
    --vl-notice: var(--notice);
    --vl-notice-lifted: var(--notice-lifted);
    --vl-notice-accented: var(--notice-accented);

    /* Warning colors */
    --vl-warning: var(--warning);
    --vl-warning-lifted: var(--warning-lifted);
    --vl-warning-accented: var(--warning-accented);

    /* Error colors */
    --vl-error: var(--error);
    --vl-error-lifted: var(--error-lifted);
    --vl-error-accented: var(--error-accented);

    /* Grayscale colors */
    --vl-grayscale: var(--grayscale);
    --vl-grayscale-lifted: var(--grayscale-lifted);
    --vl-grayscale-accented: var(--grayscale-accented);

    /* Neutral colors */
    --vl-neutral: var(--neutral);
    --vl-neutral-lifted: var(--neutral-lifted);
    --vl-neutral-accented: var(--neutral-accented);

    /* Text neutral colors */
    --vl-text-inverted: var(--text-inverted);
    --vl-text-muted: var(--text-muted);
    --vl-text-lifted: var(--text-lifted);
    --vl-text-accented: var(--text-accented);
    --vl-text: var(--text);

    /* Border neutral colors */
    --vl-border-muted: var(--border-muted);
    --vl-border: var(--border);
    --vl-border-lifted: var(--border-lifted);
    --vl-border-accented: var(--border-accented);

    /* Background neutral colors */
    --vl-bg: var(--bg);
    --vl-bg-muted: var(--bg-muted);
    --vl-bg-lifted: var(--bg-lifted);
    --vl-bg-accented: var(--bg-accented);
    --vl-bg-inverted: var(--bg-inverted);

    /* Font Sizes */
    --vl-text-xs: var(--text-xs);
    --vl-text-sm: var(--text-sm);
    --vl-text-md: var(--text-md);
    --vl-text-lg: var(--text-lg);

    /* Spacing */
    --vl-outline-sm: var(--outline-sm);
    --vl-outline-md: var(--outline-md);
    --vl-outline-lg: var(--outline-lg);

    /* Rounding */
    --vl-rounding-sm: var(--rounding-sm);
    --vl-rounding-md: var(--rounding-md);
    --vl-rounding-lg: var(--rounding-lg);

    /* Other */
    --vl-letter-spacing: var(--letter-spacing);
    --vl-disabled-opacity: var(--disabled-opacity);
}

/* Light brand touch for the Nexus cart Shadow DOM. */
:host h1, :host h2, :host h3 {
    color: var(--vl-text);
}
:host a { color: var(--vl-primary); }
:host a:hover { color: var(--vl-primary-lifted); }
:host .btn-primary,
:host button.primary,
:host .vl-btn-primary {
    background-image: linear-gradient(135deg, var(--vl-primary) 0%, var(--hg-accent) 100%);
    border-color: var(--vl-primary);
    color: #fff;
}
:host .btn-primary:hover,
:host button.primary:hover,
:host .vl-btn-primary:hover {
    background-image: none;
    background-color: var(--vl-primary-lifted);
    border-color: var(--vl-primary-lifted);
}

/* ===================================================================== *
 * PAGE-LEVEL ORDER FLOW (light-DOM Smarty pages)                        *
 *                                                                       *
 * Scoped under #order-standard_cart / .hg-* so nothing leaks into the   *
 * Nexus Shadow DOM. Brand tokens kept local so they resolve outside the *
 * Shadow DOM too.                                                       *
 * ===================================================================== */
:root {
    --hg-primary: #761098;
    --hg-primary-deep: #5a0c78;
    --hg-accent: #bf0b90;
    --hg-grad: linear-gradient(135deg, #761098 0%, #bf0b90 100%);
    --hg-grad-soft: linear-gradient(135deg, rgba(118,16,152,.06), rgba(191,11,144,.06));
    --hg-radius: .85rem;
    --hg-radius-sm: .55rem;
    --hg-ink: #2c2036;          /* headings */
    --hg-ink-soft: #6c6177;     /* body / muted */
    --hg-line: #ece6f1;         /* hairline border */
    --hg-line-2: #e0d3ea;       /* dashed / accent line */
    --hg-tint: #faf7fc;         /* faint purple wash */
    --hg-ring: 0 14px 34px rgba(118, 16, 152, .14);
    --hg-ring-sm: 0 6px 16px rgba(118, 16, 152, .10);
    --hg-focus: 0 0 0 .2rem rgba(118, 16, 152, .18);
    --hg-ok: #1f9d57;
    --hg-ok-bg: #e9f9f0;
    --hg-err: #c0392b;
}

/* ---- Inter typography for the flow ---- */
#order-standard_cart,
.hg-order-steps,
.hg-cart-steps-wrap {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
#order-standard_cart .header-lined { border-bottom: none; }
#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h1.font-size-36 {
    color: var(--hg-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ===================================================================== *
 * 1. STEP INDICATOR — connected progress rail                           *
 * ===================================================================== */
.hg-order-steps { margin: 4px 0 30px; padding: 0; }
.hg-cart-steps-wrap { padding: 24px 18px 0; }

.hg-order-steps-list {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The horizontal track behind the chips + its gradient fill.
 * Spans the chip-row centreline (chips are 48px tall -> centre ~24px). */
/* The old single absolute track overshot past the first/last chips and read
 * as a stray "cheap line". Replaced by per-step connector segments below
 * (each step draws the line BACK to the previous chip's centre), so the rail
 * is always perfectly contained between chip 1 and chip 5. */
.hg-steps-track { display: none; }
.hg-steps-fill { display: none; }

/* Connector segment: sits behind each step, spanning from the previous chip
 * centre to this chip's centre. Steps are equal-width flex items, chips are
 * centred, so one segment = one full step width (left:-50%, width:100%). */
.hg-step::before {
    content: "";
    position: absolute;
    top: 23px;
    left: -50%;
    width: 100%;
    height: 4px;
    background: var(--hg-line);
    z-index: 0;
}
/* First step has no incoming segment. Use :first-of-type, not :first-child:
 * the <ol>'s first child is the (now hidden) track <span>, so :first-child
 * would never match the first <li> and the left stub would remain. */
.hg-step:first-of-type::before { display: none; }
/* Filled (purple) when we've already reached this step. */
.hg-step.is-done::before,
.hg-step.is-active::before { background: var(--hg-grad); }

.hg-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 0 4px;
}
.hg-step-chip {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 700;
    color: var(--hg-ink-soft);
    background: #fff;
    border: 2px solid var(--hg-line);
    box-shadow: 0 2px 6px rgba(44, 32, 54, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.hg-step-chip .hg-step-icon { font-size: 16px; }
.hg-step-chip .hg-step-digit {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 19px;
    height: 19px;
    font-size: 11px;
    line-height: 17px;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    color: var(--hg-ink-soft);
    border: 1.5px solid var(--hg-line);
}
.hg-step-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    max-width: 100%;
}
.hg-step-num {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #a99bb6;
}
.hg-step-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--hg-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s ease;
}

/* done */
.hg-step.is-done .hg-step-chip {
    background: rgba(118, 16, 152, .08);
    border-color: rgba(118, 16, 152, .35);
    color: var(--hg-primary);
}
.hg-step.is-done .hg-step-label { color: var(--hg-primary-deep); }

/* active */
.hg-step.is-active .hg-step-chip {
    background: var(--hg-grad);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08);
    box-shadow: var(--hg-ring-sm), 0 0 0 6px rgba(118, 16, 152, .10);
}
.hg-step.is-active .hg-step-chip .hg-step-digit {
    color: var(--hg-primary);
    border-color: transparent;
}
.hg-step.is-active .hg-step-num { color: var(--hg-accent); }
.hg-step.is-active .hg-step-label {
    color: var(--hg-primary);
    font-weight: 700;
}

@media (max-width: 767px) {
    .hg-step-num { display: none; }
    .hg-step-label { font-size: 12px; }
    .hg-step::before { top: 21px; }
    .hg-step-chip { width: 44px; height: 44px; font-size: 15px; }
}
@media (max-width: 480px) {
    .hg-order-steps-list { gap: 2px; }
    .hg-step-chip { width: 38px; height: 38px; font-size: 13px; }
    .hg-step-label { font-size: 11px; }
    .hg-steps-track { top: 18px; }
}

/* ===================================================================== *
 * 2. BRAND BUTTONS — purple gradient (overrides bootstrap blue/green)   *
 * ===================================================================== */
#order-standard_cart .btn-primary,
#order-standard_cart .hg-btn-brand,
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-success,
#order-standard_cart .btn-add-to-cart {
    position: relative;
    background: var(--hg-grad);
    background-size: 140% 140%;
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: var(--hg-radius-sm);
    box-shadow: 0 6px 16px rgba(118, 16, 152, .22);
    transition: filter .2s ease, transform .12s ease, box-shadow .2s ease, background-position .4s ease;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .hg-btn-brand:hover,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-add-to-cart:hover,
#order-standard_cart .btn-primary:focus,
#order-standard_cart .hg-btn-brand:focus {
    color: #fff;
    background-position: 100% 0;
    filter: brightness(1.05);
    box-shadow: 0 10px 24px rgba(118, 16, 152, .32);
    transform: translateY(-1px);
}
#order-standard_cart .btn-primary:active,
#order-standard_cart .hg-btn-brand:active,
#order-standard_cart .btn-order-now:active,
#order-standard_cart .btn-success:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(118, 16, 152, .25);
}
#order-standard_cart .btn-primary[disabled],
#order-standard_cart .hg-btn-brand[disabled],
#order-standard_cart .btn-primary.disabled,
#order-standard_cart .btn-primary[disabled]:hover,
#order-standard_cart .hg-btn-brand[disabled]:hover {
    background: #d7ccdf;
    color: #fff;
    box-shadow: none;
    transform: none;
    filter: none;
    cursor: not-allowed;
}
/* Continue button on the domain step — a touch larger / centred */
#order-standard_cart #btnDomainContinue.btn-lg,
#order-standard_cart #btnCompleteProductConfig.btn-lg {
    padding: 12px 30px;
    font-size: 16px;
    min-width: 220px;
}

/* ===================================================================== *
 * 3. PRODUCT CARDS (step 1)                                             *
 * ===================================================================== */
#order-standard_cart .products .product {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(44, 32, 54, .04);
    transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
#order-standard_cart .products .product:hover {
    box-shadow: var(--hg-ring);
    transform: translateY(-4px);
    border-color: rgba(118, 16, 152, .3);
}
#order-standard_cart .products .product header {
    position: relative;
    padding: 16px 22px;
    margin: 0;
    background: var(--hg-grad);
    border-radius: 0;
    overflow: hidden;
}
#order-standard_cart .products .product header::after {
    /* subtle sheen */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), transparent 60%);
    pointer-events: none;
}
#order-standard_cart .products .product header span,
#order-standard_cart .products .product header .qty {
    position: relative;
    color: #fff;
    font-weight: 700;
}
#order-standard_cart .products .product header .qty { font-weight: 500; opacity: .9; }
#order-standard_cart .products .product .product-desc { padding: 14px 20px; }
#order-standard_cart .products .product .product-desc ul { padding-left: 0; list-style: none; }
#order-standard_cart .products .product .product-desc ul li {
    position: relative;
    padding: 3px 0 3px 22px;
    line-height: 1.5;
}
#order-standard_cart .products .product .product-desc ul li::before {
    content: "\f00c";  /* fa-check */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 4px;
    font-size: 11px;
    color: var(--hg-accent);
}
#order-standard_cart .products .product span.feature-value {
    color: var(--hg-primary);
    font-weight: 700;
}
#order-standard_cart .products .product footer { margin: 16px 0; }
#order-standard_cart .products .product div.product-pricing span.price {
    color: var(--hg-primary);
    font-weight: 800;
    font-size: 1.55em;
    letter-spacing: -.02em;
}

/* ===================================================================== *
 * 4. DOMAIN STEP (step 2) — option cards + result panel                 *
 * ===================================================================== */
.hg-domain-header { border: none; margin-bottom: 4px; }
.hg-domain-subtitle {
    margin-top: 8px;
    margin-bottom: 0;
    color: var(--hg-ink-soft);
    font-size: 15px;
    max-width: 640px;
}

#order-standard_cart .domain-selection-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 24px 0;
}
/* Each domain option = a card */
#order-standard_cart .domain-selection-options .option {
    position: relative;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(44, 32, 54, .035);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* left accent rail revealed on hover / selection */
#order-standard_cart .domain-selection-options .option::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--hg-grad);
    opacity: 0;
    transition: opacity .2s ease;
}
#order-standard_cart .domain-selection-options .option:hover {
    border-color: rgba(118, 16, 152, .35);
    box-shadow: var(--hg-ring-sm);
    transform: translateY(-2px);
}
#order-standard_cart .domain-selection-options .option:hover::before { opacity: .5; }
#order-standard_cart .domain-selection-options .option-selected {
    background: #fff;
    border-color: var(--hg-primary);
    box-shadow: var(--hg-ring);
}
#order-standard_cart .domain-selection-options .option-selected::before { opacity: 1; }

/* Clickable label header of each option card */
.hg-domain-option-label {
    display: flex !important;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 18px 20px;
    cursor: pointer;
    font-weight: 500 !important;
}
.hg-domain-option-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 19px;
    color: var(--hg-primary);
    background: rgba(118, 16, 152, .09);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.option:hover .hg-domain-option-icon { transform: scale(1.05); }
.option-selected .hg-domain-option-icon {
    background: var(--hg-grad);
    color: #fff;
    box-shadow: 0 6px 14px rgba(118, 16, 152, .28);
}
.hg-domain-option-text { display: flex; flex-direction: column; line-height: 1.4; }
.hg-domain-option-title { font-size: 16px; font-weight: 700; color: var(--hg-ink); }
.hg-domain-option-desc { font-size: 13px; color: var(--hg-ink-soft); font-weight: 400; }
#order-standard_cart .domain-selection-options .option .iradio_square-blue { margin-right: 0; }

/* Expandable search/input row inside a card */
#order-standard_cart .domain-input-group {
    margin: 0;
    padding: 6px 20px 20px;
    border-top: 1px dashed var(--hg-line-2);
    background: var(--hg-tint);
}
#order-standard_cart .domain-input-group .input-group-text {
    background: #fff;
    border-color: var(--hg-line-2);
    color: var(--hg-primary);
    font-weight: 600;
}
#order-standard_cart .domain-input-group .form-control {
    border-color: var(--hg-line-2);
    transition: border-color .15s ease, box-shadow .15s ease;
}
#order-standard_cart .domain-input-group .form-control:focus {
    border-color: var(--hg-primary);
    box-shadow: var(--hg-focus);
}

/* freedomain note */
#order-standard_cart .domain-selection-options + p em { color: var(--hg-ink-soft); }

/* ---- Search result panel ---- */
#order-standard_cart #DomainSearchResults { margin-top: 20px; }
#order-standard_cart #primaryLookupResult {
    background: #fff;
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
    padding: 30px 24px;
    text-align: center;
    box-shadow: var(--hg-ring-sm);
    animation: hgResultIn .4s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hgResultIn {
    from { opacity: 0; transform: translateY(12px) scale(.99); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Availability headline + a soft status pill backing */
#order-standard_cart .domain-checker-available.headline,
#order-standard_cart .domain-available {
    display: inline-block;
    color: var(--hg-ok);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.4;
}
#order-standard_cart .domain-available {
    background: var(--hg-ok-bg);
    border-radius: 999px;
    padding: 6px 16px;
}
#order-standard_cart .domain-checker-unavailable.headline,
#order-standard_cart .domain-unavailable {
    color: var(--hg-err);
    font-weight: 700;
    font-size: 19px;
}
/* domain name marker badge (rendered by JS inside headlines) */
#order-standard_cart #primaryLookupResult marker,
#order-standard_cart #primaryLookupResult .domain-name {
    color: var(--hg-primary);
    font-weight: 800;
}
#order-standard_cart .domain-price {
    margin-top: 16px;
    font-size: 15px;
    color: var(--hg-ink-soft);
}
#order-standard_cart .domain-price .price {
    display: block;
    margin-top: 2px;
    font-size: 26px;
    font-weight: 800;
    color: var(--hg-primary);
    letter-spacing: -.02em;
}
/* Loading state */
#order-standard_cart .domain-lookup-loader,
#order-standard_cart #primaryLookupSearching {
    color: var(--hg-primary);
    font-weight: 600;
    padding: 22px;
    text-align: center;
}
#order-standard_cart .domain-lookup-loader .fa-spinner,
#order-standard_cart #primaryLookupSearching .fa-spinner { color: var(--hg-primary); }
#order-standard_cart .primary-domain-header {
    color: var(--hg-primary);
    font-weight: 700;
    margin: 14px 0 8px;
}

/* Spotlight TLD tiles */
#order-standard_cart .spotlight-tld {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#order-standard_cart .spotlight-tld:hover {
    border-color: rgba(118, 16, 152, .35);
    box-shadow: var(--hg-ring-sm);
    transform: translateY(-2px);
}
#order-standard_cart .spotlight-tld .available.price,
#order-standard_cart .spotlight-tld .price { color: var(--hg-primary); font-weight: 700; }

/* Suggested-domains list */
#order-standard_cart .suggested-domains .panel-heading,
#order-standard_cart .suggested-domains .card-header {
    background: var(--hg-grad);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: var(--hg-radius) var(--hg-radius) 0 0;
    padding: 12px 18px;
}
#order-standard_cart .suggested-domains {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(44, 32, 54, .04);
}
#order-standard_cart .suggested-domains .domain-suggestion {
    border-color: var(--hg-line);
    transition: background .15s ease;
}
#order-standard_cart .suggested-domains .domain-suggestion:hover { background: var(--hg-tint); }
#order-standard_cart .suggested-domains .price { color: var(--hg-primary); font-weight: 700; }
#order-standard_cart .btn-add-to-cart { border-radius: var(--hg-radius-sm); }

.hg-domain-continue-wrap { margin: 28px 0 12px; }

/* ===================================================================== *
 * 5. CONFIGURE STEP (step 3) — sub-headings, addons, sticky summary     *
 * ===================================================================== */
/* Accent sub-section headings: a brand pill with a left tick of gradient */
#order-standard_cart .sub-heading { border-bottom: 1px solid var(--hg-line); }
#order-standard_cart .sub-heading .primary-bg-color {
    background: var(--hg-grad);
    color: #fff;
    border-radius: var(--hg-radius-sm) var(--hg-radius-sm) 0 0;
    padding: 9px 16px;
    display: inline-block;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(118, 16, 152, .18);
}
#order-standard_cart .product-info {
    background: var(--hg-tint);
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    padding: 16px 20px;
}
#order-standard_cart .product-info .product-title {
    color: var(--hg-ink);
    font-weight: 700;
    font-size: 18px;
}
/* form controls */
#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus {
    border-color: var(--hg-primary);
    box-shadow: var(--hg-focus);
}
#order-standard_cart label { color: var(--hg-ink); }

/* Addon cards */
#order-standard_cart .panel-addon {
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(44, 32, 54, .035);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#order-standard_cart .panel-addon:hover {
    border-color: rgba(118, 16, 152, .35);
    box-shadow: var(--hg-ring-sm);
    transform: translateY(-2px);
}
#order-standard_cart .panel-addon .panel-body label { color: var(--hg-ink); }
#order-standard_cart .panel-addon .panel-price {
    background: var(--hg-tint);
    color: var(--hg-primary);
    font-weight: 700;
}
#order-standard_cart .panel-addon-selected {
    border-color: var(--hg-primary);
    box-shadow: var(--hg-ring-sm);
}
#order-standard_cart .panel-addon .panel-add,
#order-standard_cart .panel-addon-selected .panel-add {
    background: var(--hg-grad);
    color: #fff;
    font-weight: 600;
}

/* Sticky order summary */
#order-standard_cart .secondary-cart-sidebar #orderSummary,
#order-standard_cart .secondary-cart-sidebar .order-summary {
    position: relative;
}
#order-standard_cart .order-summary {
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-ring);
    overflow: hidden;
    background: #fff;
}
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary h2.font-size-30 {
    color: #fff;
    background: var(--hg-grad);
    margin: 0;
    padding: 16px 20px;
    font-size: 20px;
    font-weight: 700;
}
#order-standard_cart .order-summary .summary-container { padding: 8px 18px 16px; }
#order-standard_cart .order-summary .total-due-today {
    background: var(--hg-tint);
    border-radius: var(--hg-radius-sm);
    padding: 12px 14px;
    margin-top: 8px;
}
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today span:last-child {
    color: var(--hg-primary);
    font-weight: 800;
}

/* contact help note */
#order-standard_cart .alert-warning.info-text-sm {
    background: var(--hg-tint);
    border: 1px solid var(--hg-line);
    color: var(--hg-ink-soft);
    border-radius: var(--hg-radius);
}
#order-standard_cart .alert-warning.info-text-sm .fa-question-circle { color: var(--hg-primary); }
#order-standard_cart .alert-link { color: var(--hg-primary); font-weight: 600; }

/* ===================================================================== *
 * 6. CHECKOUT (step 5)                                                  *
 * ===================================================================== */
#order-standard_cart .header-lined h1 { color: var(--hg-ink); }

/* ===================================================================== *
 * 7. RTL safety                                                         *
 * ===================================================================== */
[dir="rtl"] #order-standard_cart .domain-selection-options .option::before { left: auto; right: 0; }
[dir="rtl"] .hg-domain-option-text { text-align: right; }
[dir="rtl"] .hg-step-chip .hg-step-digit { right: auto; left: -3px; }
[dir="rtl"] #order-standard_cart .products .product .product-desc ul li { padding: 3px 22px 3px 0; }
[dir="rtl"] #order-standard_cart .products .product .product-desc ul li::before { left: auto; right: 0; }
[dir="rtl"] #order-standard_cart .products .product .product-desc { text-align: right; }
[dir="rtl"] .hg-steps-fill { margin-left: auto; }

/* ===================================================================== *
 * 8. SPECIFICITY GUARD                                                  *
 *                                                                       *
 * The active client-area theme (theme.min.css) scopes its order-flow    *
 * rules as `body #order-standard_cart .cart-body ...`, which outranks    *
 * the plain `#order-standard_cart ...` rules above and neutralises the  *
 * brand styling. We re-assert the brand-critical properties here at an  *
 * equal-or-higher specificity (prefixed with `body`, matching the       *
 * theme's class depth) so they win on both specificity AND load order.  *
 * Properties only — layout/animation already applied above.             *
 * ===================================================================== */

/* Product card header band -> brand gradient (beats `.cart-body .products .product header { background:white }`) */
body #order-standard_cart .cart-body .products .product header,
body #order-standard_cart .products .product header {
    background: var(--hg-grad);
    border-bottom: none;
    margin: 0;
    padding: 16px 22px;
}
body #order-standard_cart .cart-body .products .product header span,
body #order-standard_cart .products .product header span,
body #order-standard_cart .products .product header .qty { color: #fff; }
body #order-standard_cart .cart-body .products .product div.product-desc,
body #order-standard_cart .products .product div.product-desc {
    width: 100%;
    color: var(--hg-ink-soft);
}
body #order-standard_cart .products .product div.product-pricing span.price {
    color: var(--hg-primary);
    font-weight: 800;
}

/* Domain option cards (beats `.option { background-color:var(--bg); margin:0 }` + `.option-selected { background:#f8f8f8 }`) */
body #order-standard_cart .domain-selection-options .option {
    background: #fff;
    border: 1.5px solid var(--hg-line);
    border-radius: var(--hg-radius);
}
body #order-standard_cart .domain-selection-options .option-selected {
    background: #fff;
    border-color: var(--hg-primary);
    box-shadow: var(--hg-ring);
}

/* Sub-section heading pill (beats `.sub-heading span { background:#f8f9fa; color:var(--text) }`) */
body #order-standard_cart .sub-heading .primary-bg-color {
    background: var(--hg-grad);
    color: #fff;
}

/* Order summary card + header (beats theme bg/border/h2) */
body #order-standard_cart .order-summary {
    background: #fff;
    border: 1px solid var(--hg-line);
    border-radius: var(--hg-radius);
    box-shadow: var(--hg-ring);
    overflow: hidden;
}
body #order-standard_cart .order-summary h2 {
    color: #fff;
    background: var(--hg-grad);
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 16px 20px;
}

/* Order-now / continue / add buttons -> brand gradient regardless of theme btn rules */
body #order-standard_cart .btn-order-now,
body #order-standard_cart .products .product footer .btn-order-now,
body #order-standard_cart .btn-primary,
body #order-standard_cart .hg-btn-brand,
body #order-standard_cart .btn-add-to-cart {
    background: var(--hg-grad);
    border: none;
    color: #fff;
}
body #order-standard_cart .btn-primary[disabled],
body #order-standard_cart .hg-btn-brand[disabled],
body #order-standard_cart .btn-primary.disabled {
    background: #d7ccdf;
    color: #fff;
}

/* ===================================================================== *
 * HG-FIX-20260605c — (Fix 4) Cart centering / step2-kayma.
 * The panel full-width fix (whmcs-unify.css) widens #main-body's container so
 * the client area uses the viewport. The legacy cart root (#order-standard_cart)
 * is capped at max-width:1080px but left-aligned (margin-left:0), so inside the
 * now-wider content column it drifted LEFT — the step funnel looked centered
 * while the heading/option cards sat offset to the left. Center the cart root so
 * the steps and the content share the same axis. Cart-specific; does not touch
 * standard_cart base files (this is the nxragons override stylesheet).
 * ===================================================================== */
#order-standard_cart {
    margin-left: auto;
    margin-right: auto;
}

/* 2026-06-10: para birimi dropdown'ı WHMCS/sepet sayfalarında gizli (bkz. ana custom.css notu) */
.hg-topbar__cur{display:none!important}