/*
 * Grabby DigitalOcean Wizard -- redesign stylesheet (Wizard Redesign round).
 *
 * Replaces the earlier accordion-only companion stylesheet -- the DO branch
 * of configureproduct.tpl no longer uses .gh-accordion* at all (that's the
 * VPS wizard's own markup, still real and untouched above this branch).
 * Everything here is scoped under .gdo-w-* / #gdoStepNav / #gdoWizard-owned
 * ids so nothing here can ever affect the VPS wizard's own #gvwAccordion or
 * any non-wizard configure page -- same collision-avoidance convention this
 * file already used before this round.
 *
 * Reuses this theme's own --gh-* tokens (surface/border/text/radius/shadow)
 * and the same #ff741f/#ff9b55/#e9650d orange accent already hardcoded
 * throughout configureproduct.css, rather than inventing a new palette --
 * see the grabby-modern-design-system skill's own guidance on this.
 */

/* ---------------------------------------------------------------
   Main grid: content + Order Summary (2 columns). The step nav
   previously rendered as this grid's own third column -- Wizard
   Redesign round fix-up: it now lives inside header.tpl's own shared
   collapsible sidebar (#gmKbSidebar) instead, replacing that
   sidebar's default content, so it no longer needs a grid column or
   its own sticky/width rules here (the sidebar shell already handles
   its own scroll/collapse behaviour) -- see header.tpl's own doc
   comment at that injection point.
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gh-configure-product-grid.gh-do-wizard-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
}

body.gm-cart-checkout-page .gdo-w-nav-list {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

body.gm-cart-checkout-page .gdo-w-nav-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 8px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease;
}

body.gm-cart-checkout-page .gdo-w-nav-list li:hover {
    background: var(--gh-surface-soft);
}

body.gm-cart-checkout-page .gdo-w-nav-num {
    display: grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--gh-text-muted);
    background: var(--gh-surface-soft);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
}

body.gm-cart-checkout-page .gdo-w-nav-label {
    color: var(--gh-text-muted);
    font-size: 12.5px;
    font-weight: 700;
}

body.gm-cart-checkout-page .gdo-w-nav-list li.is-active .gdo-w-nav-num {
    color: #fff;
    background: #ff741f;
}

body.gm-cart-checkout-page .gdo-w-nav-list li.is-active .gdo-w-nav-label {
    color: #ff741f;
    font-weight: 900;
}

body.gm-cart-checkout-page .gdo-w-nav-list li.is-complete .gdo-w-nav-num {
    color: #059669;
    background: #ecfdf3;
}

body.gm-cart-checkout-page .gdo-w-nav-help {
    padding: 16px;
    background: var(--gh-surface);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-xs);
    text-align: center;
}

body.gm-cart-checkout-page .gdo-w-nav-help-icon {
    display: grid;
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    place-items: center;
    color: #ff741f;
    background: #fff1e7;
    border-radius: 50%;
    font-size: 14px;
}

body.gm-cart-checkout-page .gdo-w-nav-help p {
    margin: 0 0 12px;
    color: var(--gh-text-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

body.gm-cart-checkout-page .gdo-w-nav-help-btn {
    display: inline-block;
    width: 100%;
    padding: 9px 10px;
    color: #fff;
    background: #17263b;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

body.gm-cart-checkout-page .gdo-w-nav-help-btn:hover {
    background: #0f1a2b;
    color: #fff;
}

@media (max-width: 1199.98px) {
    body.gm-cart-checkout-page .gh-configure-product-grid.gh-do-wizard-grid {
        grid-template-columns: 190px minmax(0, 1fr) 320px;
    }
}

@media (max-width: 991.98px) {
    body.gm-cart-checkout-page .gh-configure-product-grid.gh-do-wizard-grid {
        grid-template-columns: 1fr;
    }

    body.gm-cart-checkout-page .gdo-w-nav {
        position: static;
        order: -1;
    }

    body.gm-cart-checkout-page .gdo-w-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 14px;
    }

    body.gm-cart-checkout-page .gdo-w-nav-list li {
        flex: 1 1 auto;
        margin-bottom: 0;
    }

    body.gm-cart-checkout-page .gdo-w-nav-label {
        display: none;
    }

    body.gm-cart-checkout-page .gdo-w-nav-help {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Header block + white section cards
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-head {
    margin-bottom: 20px;
}

body.gm-cart-checkout-page .gdo-w-head-title {
    margin: 0 0 6px;
    color: var(--gh-text);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.02em;
}

body.gm-cart-checkout-page .gdo-w-head-subtitle {
    margin: 0 0 14px;
    color: var(--gh-text-muted);
    font-size: 13.5px;
}

body.gm-cart-checkout-page .gdo-w-head-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

body.gm-cart-checkout-page .gdo-w-head-badges span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gh-text-muted);
    font-size: 12px;
    font-weight: 800;
}

body.gm-cart-checkout-page .gdo-w-head-badges i {
    color: #ff741f;
}

body.gm-cart-checkout-page .gdo-w-card {
    margin-bottom: 22px;
    padding: 24px;
    background: var(--gh-surface);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-lg);
    box-shadow: var(--gh-shadow-sm);
    scroll-margin-top: 24px;
}

body.gm-cart-checkout-page .gdo-w-card-head {
    margin-bottom: 16px;
}

/* Only the Server Size card's head has a "Change" link -- scoped with
   :has() rather than making every card's head a flex row, since most
   cards stack an <h3> + subtitle <p> (block layout) instead. */
body.gm-cart-checkout-page .gdo-w-card-head:has(.gdo-w-card-change) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.gm-cart-checkout-page .gdo-w-card-change {
    flex: 0 0 auto;
    color: #ff741f;
    font-size: 12.5px;
    font-weight: 800;
    text-decoration: none;
}

body.gm-cart-checkout-page .gdo-w-card-change:hover {
    text-decoration: underline;
}

body.gm-cart-checkout-page .gdo-w-card-head h3 {
    margin: 0 0 4px;
    color: var(--gh-text);
    font-size: 17px;
    font-weight: 900;
}

body.gm-cart-checkout-page .gdo-w-card-head p {
    margin: 0;
    color: var(--gh-text-muted);
    font-size: 12.5px;
}

body.gm-cart-checkout-page .gdo-w-optional-tag {
    margin-left: 6px;
    padding: 2px 8px;
    color: var(--gh-text-muted);
    background: var(--gh-surface-soft);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

/* ---------------------------------------------------------------
   Step 1 -- Server Size (compact selectable rows)
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-size-list {
    display: grid;
    gap: 10px;
}

body.gm-cart-checkout-page .gdo-w-size-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 16px;
    background: var(--gh-surface-soft);
    border: 2px solid var(--gh-border);
    border-radius: 14px;
    cursor: pointer;
    transition: .15s ease;
}

body.gm-cart-checkout-page .gdo-w-size-row:hover {
    border-color: #ffc79f;
}

body.gm-cart-checkout-page .gdo-w-size-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.gm-cart-checkout-page .gdo-w-size-row.is-selected {
    background: #fff8f2;
    border-color: #ff741f;
    box-shadow: 0 0 0 3px rgba(255,116,31,.1);
}

body.gm-cart-checkout-page .gdo-w-size-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #ff741f;
    background: #fff1e7;
    border-radius: 12px;
    font-size: 16px;
}

body.gm-cart-checkout-page .gdo-w-size-info {
    flex: 1 1 auto;
    min-width: 0;
}

body.gm-cart-checkout-page .gdo-w-size-info strong {
    display: block;
    color: var(--gh-text);
    font-size: 13.5px;
    font-weight: 800;
}

body.gm-cart-checkout-page .gdo-w-size-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin-top: 4px;
    color: var(--gh-text-muted);
    font-size: 12px;
}

body.gm-cart-checkout-page .gdo-w-size-specs span:not(:last-child)::after {
    content: "\00b7";
    margin-left: 8px;
    color: var(--gh-border);
}

body.gm-cart-checkout-page .gdo-w-size-price {
    flex: 0 0 auto;
    text-align: right;
}

body.gm-cart-checkout-page .gdo-w-size-price strong {
    color: var(--gh-text);
    font-size: 15px;
    font-weight: 900;
}

body.gm-cart-checkout-page .gdo-w-size-price small {
    color: var(--gh-text-muted);
    font-size: 11px;
    font-weight: 700;
}

body.gm-cart-checkout-page .gdo-w-size-price em {
    display: block;
    margin-top: 2px;
    color: var(--gh-text-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

/* Fixed-size summary row (Catalogue-Size-selling/Templates/Presets --
   nothing to choose, so no radio, no hover/selected affordances). */
body.gm-cart-checkout-page .gdo-w-size-row--fixed {
    cursor: default;
}

body.gm-cart-checkout-page .gdo-w-size-row--fixed:hover {
    border-color: var(--gh-border);
}

body.gm-cart-checkout-page .gdo-w-size-specs .fa-microchip {
    color: var(--gh-text-muted);
    font-size: 11px;
    margin-right: 1px;
}

body.gm-cart-checkout-page .gdo-w-size-check {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    place-items: center;
    color: transparent;
    background: var(--gh-surface);
    border: 2px solid var(--gh-border-strong);
    border-radius: 50%;
    font-size: 10px;
    transition: .15s ease;
}

body.gm-cart-checkout-page .gdo-w-size-row.is-selected .gdo-w-size-check {
    color: #fff;
    background: #ff741f;
    border-color: #ff741f;
}

/* ---------------------------------------------------------------
   Step 2 -- Data Center Region (card grid)
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-region-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.gm-cart-checkout-page .gdo-w-region-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 14px;
    background: var(--gh-surface-soft);
    border: 2px solid var(--gh-border);
    border-radius: 14px;
    cursor: pointer;
    transition: .15s ease;
}

body.gm-cart-checkout-page .gdo-w-region-card:hover {
    border-color: #ffc79f;
}

body.gm-cart-checkout-page .gdo-w-region-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.gm-cart-checkout-page .gdo-w-region-card.is-selected {
    background: #eff7ff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

body.gm-cart-checkout-page .gdo-w-region-flag {
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 1;
}

body.gm-cart-checkout-page .gdo-w-region-flag svg {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
    display: block;
}

body.gm-cart-checkout-page .gdo-w-region-flag .fa-globe {
    font-size: 18px;
    color: var(--gh-text-muted);
}

body.gm-cart-checkout-page .gdo-w-region-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.gm-cart-checkout-page .gdo-w-region-info strong {
    color: var(--gh-text);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.gm-cart-checkout-page .gdo-w-region-info small {
    color: var(--gh-text-muted);
    font-size: 11px;
    font-weight: 600;
}

body.gm-cart-checkout-page .gdo-w-region-check {
    position: absolute;
    top: -7px;
    right: -7px;
    display: none;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #fff;
    background: #2563eb;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 9px;
    box-shadow: 0 2px 6px rgba(37,99,235,.4);
}

body.gm-cart-checkout-page .gdo-w-region-card.is-selected .gdo-w-region-check {
    display: grid;
}

@media (max-width: 767.98px) {
    body.gm-cart-checkout-page .gdo-w-region-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    body.gm-cart-checkout-page .gdo-w-region-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   Step 3 -- Operating System (logo card grid, reuses the OS/App
   card visual language already proven for the VPS wizard above)
   --------------------------------------------------------------- */

/* Marketplace Applications round -- Distributions/Marketplace
   Applications tabs, purely presentational filtering over the SAME
   .gdo-w-os-card radios below (grabby-do-wizard.js's own wireOsTabs()
   toggles [hidden] per data-gdo-os-category, never a second grid).
   Only rendered by the template when at least one approved app exists. */
body.gm-cart-checkout-page .gdo-w-os-tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    background: var(--gh-surface-soft);
    border-radius: 12px;
}

body.gm-cart-checkout-page .gdo-w-os-tab {
    padding: 8px 16px;
    color: var(--gh-text-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

body.gm-cart-checkout-page .gdo-w-os-tab:hover {
    color: var(--gh-text);
}

body.gm-cart-checkout-page .gdo-w-os-tab.is-active {
    color: #fff;
    background: #ff741f;
}

body.gm-cart-checkout-page .gdo-w-os-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 991.98px) {
    body.gm-cart-checkout-page .gdo-w-os-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.gm-cart-checkout-page .gdo-w-os-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    body.gm-cart-checkout-page .gdo-w-os-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.gm-cart-checkout-page .gdo-w-os-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 18px 12px;
    background: var(--gh-surface-soft);
    border: 2px solid var(--gh-border);
    border-radius: 14px;
    cursor: pointer;
    text-align: center;
    transition: .15s ease;
}

body.gm-cart-checkout-page .gdo-w-os-card:hover {
    border-color: #ffc79f;
    transform: translateY(-1px);
}

body.gm-cart-checkout-page .gdo-w-os-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.gm-cart-checkout-page .gdo-w-os-card.is-selected {
    background: #fff5ec;
    border-color: #ff741f;
    box-shadow: 0 0 0 3px rgba(255,116,31,.12);
}

/* Card polish round: a soft rounded-square "chip" behind every OS/App
   logo (previously a bare icon floating with no container) -- purely
   additive, no markup change needed since the icon was already wrapped
   in its own <span class="gdo-w-os-logo"> both for flat Distribution
   cards and the app family cards (both share this one class). Reuses
   the same --gh-surface/--gh-border tokens the card itself sits on,
   one step lighter/darker so the chip still reads in dark mode without
   a separate override block. */
body.gm-cart-checkout-page .gdo-w-os-logo {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--gh-text-soft);
    font-size: 20px;
    background: var(--gh-surface);
    border: 1px solid var(--gh-border);
    border-radius: 12px;
}

body.gm-cart-checkout-page .gdo-w-os-logo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

body.gm-cart-checkout-page .gdo-w-os-card.is-selected .gdo-w-os-logo {
    color: #ff741f;
    background: #fff0e2;
    border-color: #ffcda3;
}

body.gm-cart-checkout-page .gdo-w-os-name {
    color: var(--gh-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

body.gm-cart-checkout-page .gdo-w-os-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    width: 18px;
    height: 18px;
    place-items: center;
    color: #fff;
    background: #ff741f;
    border-radius: 50%;
    font-size: 9px;
}

body.gm-cart-checkout-page .gdo-w-os-card.is-selected .gdo-w-os-check {
    display: grid;
}

/* Family-grouped cards round -- both Distributions and Marketplace
   Applications sides of the same .gdo-w-os-card grid (Distribution family
   cards round extended this from apps-only to both), one card per
   distro/app family with a version <select> instead of a raw
   <input type=radio> (the real per-suboption radios move to a
   permanently-hidden block further down; see configureproduct.tpl's own
   doc comment). Class name kept as "app-family-card" for both since this
   predates the Distributions reuse and a rename wasn't worth the risk on
   an already-proven path. Base card look (border/padding/hover/is-selected/
   cursor:pointer) is inherited from .gdo-w-os-card above -- clicking
   anywhere on the card selects its currently-shown version
   (wireAppFamilyDropdowns()'s own card click listener), matching every
   other selectable card in this wizard; only the <select> itself is
   excluded from that listener so its native open/choose behavior isn't
   intercepted. */

body.gm-cart-checkout-page .gdo-w-app-version-select {
    width: 100%;
    margin-top: 2px;
    padding: 6px 8px;
    color: var(--gh-text);
    font-size: 11px;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--gh-border);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    text-align-last: center;
}

body.gm-cart-checkout-page .gdo-w-app-version-select option {
    text-align: center;
}

body.gm-cart-checkout-page .gdo-w-app-family-card.is-selected .gdo-w-app-version-select {
    border-color: #ff741f;
}

/* "View all" round -- trailing trigger card, one per tab, sits at the
   end of the first ~5 real cards in .gdo-w-os-grid (grabby-do-wizard.js's
   own wireViewAllModals() moves everything past the 5th real card out
   into the matching modal, leaving this trigger as the visual last
   item). Built on top of .gdo-w-os-card's own box/grid sizing so it
   lines up exactly like a real card -- only the fill/border/cursor
   language changes to read as "more options", not a selectable choice.
   A real <button>, not a <label>/<input>, so font-family is set
   explicitly rather than assumed inherited (this theme's own custom
   form control convention). */
body.gm-cart-checkout-page .gdo-w-os-viewall {
    font-family: inherit;
    background: transparent;
    border: 2px dashed var(--gh-border);
    color: var(--gh-text-muted);
}

body.gm-cart-checkout-page .gdo-w-os-viewall:hover {
    border-color: #ff741f;
    color: #ff741f;
    transform: none;
}

body.gm-cart-checkout-page .gdo-w-os-viewall-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    font-size: 12px;
}

/* "View all" round -- #gdoOsAllModal/#gdoAppsAllModal picker modals.
   Standard Bootstrap modal shell (.modal/.modal-dialog/.modal-content/
   .modal-header/.modal-body), same real markup already proven working
   elsewhere on this order form (viewcart.tpl's #modalEmptyCart/
   #modalRemoveItem, this file's own #modalMetricPricing-* trigger) --
   only the inner search input + card grid are custom-styled here. The
   grid is a dedicated .gdo-w-picker-grid, deliberately NOT also tagged
   .gdo-w-os-grid, so wireOsTabs()'s own step.querySelector('.gdo-w-os-grid')
   (a single-match lookup) can never accidentally resolve to a modal's
   grid instead of the real compact-row grid -- card sizing is
   duplicated here (not shared) for that reason. */
body.gm-cart-checkout-page .gdo-w-picker-modal .modal-dialog {
    max-width: 720px;
}

body.gm-cart-checkout-page .gdo-w-picker-search {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 14px;
    padding: 10px 14px;
    color: var(--gh-text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: var(--gh-surface-soft);
    border: 1px solid var(--gh-border);
    border-radius: 10px;
}

body.gm-cart-checkout-page .gdo-w-picker-search:focus {
    outline: none;
    border-color: #ff741f;
}

body.gm-cart-checkout-page .gdo-w-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 2px 2px 4px;
}

body.gm-cart-checkout-page .gdo-w-picker-empty {
    margin: 18px 0 4px;
    color: var(--gh-text-muted);
    font-size: 13px;
    text-align: center;
}

/* ---------------------------------------------------------------
   Toggle switches -- Backups/Monitoring/Firewall/IPv6 (real
   Off/Enabled radios, see includes/grabby-do-toggle-field.tpl)
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.gm-cart-checkout-page .gdo-w-net-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

body.gm-cart-checkout-page .gdo-w-toggle-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--gh-surface-soft);
    border: 1px solid var(--gh-border);
    border-radius: 14px;
}

body.gm-cart-checkout-page .gdo-w-toggle-card-pill {
    padding: 14px;
}

body.gm-cart-checkout-page .gdo-w-toggle-card-icon {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #ff741f;
    background: #fff1e7;
    border-radius: 11px;
    font-size: 15px;
}

body.gm-cart-checkout-page .gdo-w-toggle-card-copy {
    flex: 1 1 auto;
    min-width: 0;
}

body.gm-cart-checkout-page .gdo-w-toggle-card-copy strong {
    display: block;
    color: var(--gh-text);
    font-size: 13px;
    font-weight: 800;
}

body.gm-cart-checkout-page .gdo-w-toggle-card-copy small {
    display: block;
    margin-top: 3px;
    color: var(--gh-text-muted);
    font-size: 11px;
    line-height: 1.4;
}

body.gm-cart-checkout-page .gdo-w-toggle {
    position: relative;
    flex: 0 0 auto;
    display: inline-block;
    width: 44px;
    height: 25px;
    cursor: pointer;
}

body.gm-cart-checkout-page .gdo-w-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.gm-cart-checkout-page .gdo-w-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--gh-border-strong);
    border-radius: 999px;
    transition: background-color .15s ease;
}

body.gm-cart-checkout-page .gdo-w-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .15s ease;
}

body.gm-cart-checkout-page .gdo-w-toggle.is-on .gdo-w-toggle-track {
    background: #ff741f;
}

body.gm-cart-checkout-page .gdo-w-toggle.is-on .gdo-w-toggle-thumb {
    transform: translateX(19px);
}

/* ---------------------------------------------------------------
   Step 5 -- Authentication (informational two-card display)
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-auth-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.gm-cart-checkout-page .gdo-w-auth-card {
    position: relative;
    padding: 18px;
    background: var(--gh-surface-soft);
    border: 2px solid var(--gh-border);
    border-radius: 14px;
}

body.gm-cart-checkout-page .gdo-w-auth-card.is-selected {
    background: #eff7ff;
    border-color: #2563eb;
}

/* Authentication three-way round: only rendered (configureproduct.tpl's
   [data-gvw-auth-choice-row]) for products with no fixed admin
   authentication policy -- fixed-policy products keep the original
   static, non-interactive .gdo-w-auth-card pair above untouched. Mirrors
   this wizard's existing OS Distributions/Marketplace tabs
   (.gdo-w-os-tabs/.gdo-w-os-tab) segmented-pill visual pattern for
   consistency, generalized from two options to three. */
body.gm-cart-checkout-page .gdo-w-auth-toggle {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--gh-surface-soft);
    border-radius: 12px;
}

body.gm-cart-checkout-page .gdo-w-auth-toggle-btn {
    padding: 9px 18px;
    color: var(--gh-text-muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: .15s ease;
}

body.gm-cart-checkout-page .gdo-w-auth-toggle-btn:hover {
    color: var(--gh-text);
}

body.gm-cart-checkout-page .gdo-w-auth-toggle-btn.is-active {
    color: #fff;
    background: #ff741f;
}

body.gm-cart-checkout-page .gdo-w-auth-panel .gdo-w-auth-field {
    margin-top: 0;
}

body.gm-cart-checkout-page .gdo-w-auth-generate-btn {
    margin-top: 8px;
}

body.gm-cart-checkout-page .gdo-w-pw-input-row {
    position: relative;
    display: flex;
    align-items: center;
}

body.gm-cart-checkout-page .gdo-w-pw-input-row input {
    padding-right: 64px;
}

body.gm-cart-checkout-page .gdo-w-pw-icon-btn {
    position: absolute;
    top: 50%;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: var(--gh-text-muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s ease, background .15s ease;
}

body.gm-cart-checkout-page .gdo-w-pw-icon-btn:hover {
    color: var(--gh-text);
    background: var(--gh-surface-soft);
}

body.gm-cart-checkout-page [data-gvw-auth-reveal] {
    right: 34px;
}

body.gm-cart-checkout-page [data-gvw-auth-copy] {
    right: 4px;
}

body.gm-cart-checkout-page .gdo-w-pw-checklist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

body.gm-cart-checkout-page .gdo-w-pw-checklist li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--gh-text-muted);
    font-size: 12px;
    transition: color .15s ease;
}

body.gm-cart-checkout-page .gdo-w-pw-checklist li i {
    font-size: 8px;
    color: var(--gh-border);
}

body.gm-cart-checkout-page .gdo-w-pw-checklist li.is-met {
    color: var(--gh-text);
}

body.gm-cart-checkout-page .gdo-w-pw-checklist li.is-met i {
    font-size: 12px;
    color: #16a34a;
}

body.gm-cart-checkout-page .gdo-w-auth-check {
    position: absolute;
    top: -7px;
    right: -7px;
    display: none;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #fff;
    background: #2563eb;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 9px;
}

body.gm-cart-checkout-page .gdo-w-auth-card.is-selected .gdo-w-auth-check {
    display: grid;
}

body.gm-cart-checkout-page .gdo-w-auth-icon {
    display: grid;
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    place-items: center;
    color: #ff741f;
    background: #fff1e7;
    border-radius: 11px;
    font-size: 15px;
}

body.gm-cart-checkout-page .gdo-w-auth-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--gh-text);
    font-size: 13.5px;
    font-weight: 800;
}

body.gm-cart-checkout-page .gdo-w-auth-card p {
    margin: 0;
    color: var(--gh-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

body.gm-cart-checkout-page .gdo-w-auth-field {
    margin: 12px 0 0;
}

@media (max-width: 575.98px) {
    body.gm-cart-checkout-page .gdo-w-auth-row,
    body.gm-cart-checkout-page .gdo-w-toggle-row {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------
   Step 6 -- Networking pills (Public IPv4 / Private Networking,
   both real-but-included, non-toggleable -- see this addon's own
   plan doc: DigitalOcean has no opt-out for either)
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-net-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    background: var(--gh-surface-soft);
    border: 1px solid var(--gh-border);
    border-radius: 14px;
}

body.gm-cart-checkout-page .gdo-w-net-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #059669;
    background: #ecfdf3;
    border-radius: 10px;
    font-size: 14px;
}

body.gm-cart-checkout-page .gdo-w-net-pill strong {
    color: var(--gh-text);
    font-size: 12.5px;
    font-weight: 800;
}

body.gm-cart-checkout-page .gdo-w-net-status {
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.gm-cart-checkout-page .gdo-w-net-status.is-included {
    color: #059669;
    background: #ecfdf3;
}

/* ---------------------------------------------------------------
   Step 7 -- Volumes & Add-ons (Storage tier pills)
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-storage-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body.gm-cart-checkout-page .gdo-w-storage-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 12px 18px;
    background: var(--gh-surface-soft);
    border: 2px solid var(--gh-border);
    border-radius: 12px;
    cursor: pointer;
    transition: .15s ease;
}

body.gm-cart-checkout-page .gdo-w-storage-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

body.gm-cart-checkout-page .gdo-w-storage-pill:hover {
    border-color: #ffc79f;
}

body.gm-cart-checkout-page .gdo-w-storage-pill.is-selected {
    background: #fff8f2;
    border-color: #ff741f;
}

body.gm-cart-checkout-page .gdo-w-storage-pill span {
    color: var(--gh-text);
    font-size: 12.5px;
    font-weight: 800;
}

body.gm-cart-checkout-page .gdo-w-storage-pill small {
    color: var(--gh-text-muted);
    font-size: 10.5px;
    font-weight: 700;
}

/* ---------------------------------------------------------------
   Server Config / Review -- collapsible disclosure rows
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-details {
    border-top: 1px solid var(--gh-border);
    padding-top: 14px;
}

body.gm-cart-checkout-page .gdo-w-details summary {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gh-text);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

body.gm-cart-checkout-page .gdo-w-details summary::-webkit-details-marker {
    display: none;
}

body.gm-cart-checkout-page .gdo-w-details summary::before {
    content: "\f105";
    display: inline-block;
    color: var(--gh-text-muted);
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    transition: transform .15s ease;
}

body.gm-cart-checkout-page .gdo-w-details[open] summary::before {
    transform: rotate(90deg);
}

body.gm-cart-checkout-page .gdo-w-details-body {
    margin-top: 16px;
}

body.gm-cart-checkout-page .gdo-w-review-hint {
    margin: 12px 0 0;
    color: var(--gh-text-muted);
    font-size: 11.5px;
}

/* ---------------------------------------------------------------
   Order Summary -- itemized rows (display-only, built by
   grabby-do-wizard.js -- the real total stays WHMCS's own
   #producttotal block right below this, untouched)
   --------------------------------------------------------------- */
body.gm-cart-checkout-page .gdo-w-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 22px 12px;
    padding: 5px 11px;
    color: #059669;
    background: #ecfdf3;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
}

body.gm-cart-checkout-page .gdo-w-summary-dot {
    width: 6px;
    height: 6px;
    background: #059669;
    border-radius: 50%;
}

body.gm-cart-checkout-page .gdo-w-summary-items {
    display: grid;
    gap: 2px;
    margin: 0 22px 14px;
}

body.gm-cart-checkout-page .gdo-w-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--gh-border);
}

/* License transparency round -- Order Summary echo of the same real
   gdoOsSuboptionRequiresLicense flag the Operating System step's own
   notice reads (buildOrderSummary()'s own doc comment). Full-width so it
   wraps onto its own line under the row instead of squeezing the price. */
body.gm-cart-checkout-page .gdo-w-summary-row-note {
    flex: 1 0 100%;
    color: var(--gh-warning);
    font-size: 10.5px;
    font-weight: 700;
}

body.gm-cart-checkout-page .gdo-w-summary-row:last-child {
    border-bottom: 0;
}

body.gm-cart-checkout-page .gdo-w-summary-row-label {
    flex: 0 0 auto;
    color: var(--gh-text-muted);
    font-size: 11.5px;
    font-weight: 800;
}

body.gm-cart-checkout-page .gdo-w-summary-row-value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--gh-text);
    font-size: 11.5px;
    font-weight: 700;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.gm-cart-checkout-page .gdo-w-summary-row-price {
    flex: 0 0 auto;
    color: var(--gh-text);
    font-size: 11.5px;
    font-weight: 900;
}