/*
 * GrabbyHost VPS Wizard — shared shell: progress tracker + compact
 * package name/spec line. The wizard renders as a normal in-flow
 * GrabbyHost page (standard sidebar, standard hero, standard Order
 * Summary position) -- no modal/backdrop/floating card. Accordion-specific
 * styles for the Configure page live in configureproduct.css instead,
 * since only that page has the accordion markup.
 *
 * Deliberately its OWN dedicated stylesheet, direct-<link>'d with
 * filemtime()-based cache-busting from all 3 real pages the wizard spans
 * (configureproduct.tpl / configureproductdomain.tpl / viewcart.tpl --
 * see grabby-vps-wizard.php's grabbyVpsShellCssVersion), NOT delivered
 * through domain.css's sitewide custom.css @import chain. That chain
 * uses a manually-maintained cache-buster string that's already gone
 * stale once (the tracker rendered as an unstyled list in production
 * even after that string was bumped -- root cause never fully confirmed:
 * possibly a second layer of caching/asset-combining on the live server
 * unrelated to this file's own query string). configureproduct.css's own
 * direct <link>+filemtime pattern was independently confirmed working in
 * that same test, so this file copies that exact proven mechanism rather
 * than keep trusting the @import chain a second time.
 *
 * Selectors are plain #order-standard_cart (not body-class-scoped) since
 * the Configure/Domain/Review pages don't all share the same body class
 * (Domain gets gm-domain-config-page, not gm-cart-checkout-page) -- an
 * ID-scoped selector is the only thing guaranteed present on all 3. Only
 * rendered when $grabbyVpsWizardActive is true, so a non-VPS cart page
 * never even links this file.
 */
#order-standard_cart .gh-wizard-progress {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 4px;
    margin: 0 0 22px;
    padding: 4px 0;
    overflow-x: auto;
}

#order-standard_cart .gh-wizard-step {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 88px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
    text-align: center;
}

#order-standard_cart .gh-wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 58%;
    width: 84%;
    height: 2px;
    background: #e6eaf1;
    z-index: 1;
}

#order-standard_cart .gh-wizard-step-num {
    position: relative;
    z-index: 2;
    display: grid;
    flex: 0 0 32px;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #97a1b0;
    background: #fff;
    border: 2px solid #dde3ea;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

#order-standard_cart .gh-wizard-step-label {
    color: #97a1b0;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .01em;
}

#order-standard_cart .gh-wizard-step.is-active .gh-wizard-step-num {
    color: #fff;
    background: #ff741f;
    border-color: #ff741f;
    box-shadow: 0 4px 12px rgba(255,116,31,.32);
}

#order-standard_cart .gh-wizard-step.is-active .gh-wizard-step-label {
    color: #17263b;
}

#order-standard_cart .gh-wizard-step.is-complete .gh-wizard-step-num {
    color: #fff;
    background: #17263b;
    border-color: #17263b;
}

#order-standard_cart .gh-wizard-step.is-complete .gh-wizard-step-label {
    color: #475467;
}

#order-standard_cart .gh-wizard-step-upcoming .gh-wizard-step-label {
    color: #b4bcc8;
}

body.gh-dark-mode #order-standard_cart .gh-wizard-step:not(:last-child)::after {
    background: rgba(255,255,255,.12);
}

body.gh-dark-mode #order-standard_cart .gh-wizard-step-num {
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.16);
}

body.gh-dark-mode #order-standard_cart .gh-wizard-step-label {
    color: rgba(255,255,255,.4);
}

body.gh-dark-mode #order-standard_cart .gh-wizard-step.is-active .gh-wizard-step-label {
    color: #fff;
}

body.gh-dark-mode #order-standard_cart .gh-wizard-step.is-complete .gh-wizard-step-num {
    background: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.85);
    color: #17263b;
}

body.gh-dark-mode #order-standard_cart .gh-wizard-step.is-complete .gh-wizard-step-label {
    color: rgba(255,255,255,.68);
}

body.gh-dark-mode #order-standard_cart .gh-wizard-step-upcoming .gh-wizard-step-label {
    color: rgba(255,255,255,.25);
}

@media (max-width: 767.98px) {
    #order-standard_cart .gh-wizard-progress {
        justify-content: flex-start;
    }

    #order-standard_cart .gh-wizard-step {
        min-width: 76px;
    }

    #order-standard_cart .gh-wizard-step-label {
        font-size: 9.5px;
    }
}

/*
 * Compact package name + spec line, printed directly below the (restored,
 * unchanged) stock hero -- plain text, no card/icon. Lives inside
 * .gh-accordion-panel-head (configureproduct.css), which supplies its
 * own top padding, so no top margin here.
 */
#order-standard_cart .gh-wizard-package-name {
    margin: 0 0 4px;
    color: #17263b;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.02em;
    line-height: 1.2;
}

#order-standard_cart .gh-wizard-package-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 20px;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

#order-standard_cart .gh-wizard-package-specs span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#order-standard_cart .gh-wizard-package-specs span:not(:first-child)::before {
    content: "\2022";
    color: #c7cfda;
}

body.gh-dark-mode #order-standard_cart .gh-wizard-package-name {
    color: #fff;
}

body.gh-dark-mode #order-standard_cart .gh-wizard-package-specs,
body.gh-dark-mode #order-standard_cart .gh-wizard-package-specs span:not(:first-child)::before {
    color: rgba(255,255,255,.55);
}

/*
 * Domain page only -- brief cover for the automated "I don't need a
 * domain right now" sequence (select subdomain tab, fill an invisible
 * placeholder, submit) so the page doesn't look stuck for the few
 * hundred ms that takes. Not a modal -- purely a loading cover, removed
 * by the same script that adds it (configureproductdomain.tpl).
 */
.gh-wizard-domain-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 16, 31, .55);
}

.gh-wizard-domain-overlay-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    color: #17263b;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    font-size: 14px;
    font-weight: 800;
}

.gh-wizard-domain-overlay-box i {
    color: #ff741f;
    font-size: 16px;
}