/* =============================================================================
   x99 Order — Novo Servidor
   --------------------------------------------------------------------------
   Scoped to body.page-x99-order. Extends tokens from x99-login.css,
   x99-register.css, x99-invoices.css, x99-viewinvoice.css. Keep class prefix
   `x99-order-*` across every partial so styles never collide with other x99
   surfaces.
   ============================================================================= */

/* ─── Page chrome ───────────────────────────────────────────────────────
   Hide the stock "Page Title" breadcrumb and anchor the footer to the
   viewport bottom (same trick used on /support.php). Sidebar stays visible. */
body.page-x99-order .main-header,
body.page-x99-order .page-title {
    display: none !important;
}
body.page-x99-order .main-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
body.page-x99-order .app-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.page-x99-order .app-main > .main-body {
    flex: 1 0 auto;
}

/* ─── Root page container ─────────────────────────────────────────────── */
.x99-order-page {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
}

/* ─── Progress bar ────────────────────────────────────────────────────────
   Mirrors the register wizard's `.x99-reg-progress`: thin 3px red-filled
   segments on a faint background, same easing, same fill color. Differs
   only in segment count (4 vs 5) and outer sizing — sits inside the
   1100px page container rather than a 460px card. */
.x99-order-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 24px;
    padding: 0 16px;
    box-sizing: border-box;
}
.x99-order-progress span {
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    transition: background 0.25s ease;
}

/* Fill N leading segments when data-step = N (1..4). Color matches the
   register bar exactly: rgba(239, 68, 68, 0.45). */
.x99-order-progress[data-step="1"] span[data-seg="1"],
.x99-order-progress[data-step="2"] span[data-seg="1"],
.x99-order-progress[data-step="2"] span[data-seg="2"],
.x99-order-progress[data-step="3"] span[data-seg="1"],
.x99-order-progress[data-step="3"] span[data-seg="2"],
.x99-order-progress[data-step="3"] span[data-seg="3"],
.x99-order-progress[data-step="4"] span {
    background: rgba(239, 68, 68, 0.45);
}

/* On mobile drop the outer padding so the bar lines up with the rest of
   the page content (which uses the same 16px inset). */
@media (max-width: 640px) {
    .x99-order-progress {
        padding: 0 8px;
        margin-bottom: 18px;
    }
}

/* ─── Visibility driven by data-type on the wrapper ──────────────────── */
/* Splash hero: only visible on the empty-type state. */
.x99-order-page[data-type="bare-metal"] .x99-order-splash,
.x99-order-page[data-type="vps"]        .x99-order-splash {
    display: none;
}
/* Toggle bar: only visible once a type is selected. */
.x99-order-page[data-type=""] .x99-order-toggle-wrap,
.x99-order-page:not([data-type]) .x99-order-toggle-wrap {
    display: none;
}
/* List wrapper is always in the DOM, sections use the [hidden] attribute. */

/* ─── Splash: hero + two big option cards ─────────────────────────────── */
.x99-order-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 16px;
    box-sizing: border-box;
    animation: x99OrderFadeIn 0.22s ease;
}

.x99-order-splash-head {
    text-align: center;
    max-width: 640px;
}
.x99-order-splash-title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
    text-wrap: balance;
}
.x99-order-splash-hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
}

.x99-order-splash-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.x99-order-splash-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 28px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    cursor: pointer;
    box-sizing: border-box;
}
.x99-order-splash-card:hover,
.x99-order-splash-card:focus {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    outline: none;
    text-decoration: none;
}
.x99-order-splash-card--bm:hover  { border-color: rgba(239, 68, 68, 0.3); }
.x99-order-splash-card--vps:hover { border-color: rgba(59, 130, 246, 0.28); }

.x99-order-splash-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.x99-order-splash-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}
.x99-order-splash-card--bm  .x99-order-splash-card-icon { background: rgba(239, 68, 68, 0.08); color: #fca5a5; }
.x99-order-splash-card--vps .x99-order-splash-card-icon { background: rgba(59, 130, 246, 0.08); color: #93c5fd; }

.x99-order-splash-card-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 6px;
}
.x99-order-splash-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.x99-order-splash-card-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.x99-order-splash-card-for {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}
.x99-order-splash-card-specs {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: grid;
    gap: 6px;
}
.x99-order-splash-card-specs li {
    position: relative;
    padding-left: 20px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}
.x99-order-splash-card-specs li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}
.x99-order-splash-card--bm  .x99-order-splash-card-specs li::before { background: rgba(239, 68, 68, 0.55); }
.x99-order-splash-card--vps .x99-order-splash-card-specs li::before { background: rgba(59, 130, 246, 0.5); }

.x99-order-splash-card-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.x99-order-splash-card-price {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}
.x99-order-splash-card-cta {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
}
.x99-order-splash-card:hover .x99-order-splash-card-cta,
.x99-order-splash-card:focus .x99-order-splash-card-cta { color: rgba(255, 255, 255, 0.95); }
.x99-order-splash-card--bm:hover  .x99-order-splash-card-cta { color: #fca5a5; }
.x99-order-splash-card--vps:hover .x99-order-splash-card-cta { color: #93c5fd; }

/* ─── "Trocar tipo de servidor" back link ────────────────────────────────
   Visible only when a type is picked (data-type on the page wrapper). The
   wrapper sits between the progress bar and the list heading; the link
   itself reuses the muted-grey hover-red token vocabulary from the
   register wizard's "← Voltar" buttons. */
.x99-order-toggle-wrap {
    max-width: 1100px;
    margin: 8px auto 16px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    animation: x99OrderFadeIn 0.22s ease;
}
.x99-order-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}
.x99-order-back-link:hover,
.x99-order-back-link:focus {
    color: #fca5a5;
    outline: none;
}
.x99-order-back-link-icon {
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.15s ease;
}
.x99-order-back-link:hover .x99-order-back-link-icon,
.x99-order-back-link:focus .x99-order-back-link-icon { color: #fca5a5; }
/* ─── List container ──────────────────────────────────────────────────── */
.x99-order-lists {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.x99-order-list[hidden] { display: none !important; }
.x99-order-list {
    animation: x99OrderFadeIn 0.18s ease;
    margin-bottom: 48px;
}
.x99-order-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.x99-order-list-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
}
.x99-order-list-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}
.x99-order-list-count [data-reg-count-n] {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}
.x99-order-list-empty {
    padding: 36px 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}
.x99-order-list-body { display: flex; flex-direction: column; gap: 10px; }
.x99-order-list-body--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* ─── Shared product card ─────────────────────────────────────────────── */
.x99-order-card {
    display: flex;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}
.x99-order-card:hover,
.x99-order-card:focus {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
}

/* ─── Greeting-style heading for the BM list ─────────────────────────── */
.x99-order-bm-greeting {
    align-items: center;
    margin-bottom: 20px;
}
.x99-order-bm-greeting-text {
    margin: 0;
    font-size: 22px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-wrap: balance;
}
.x99-order-bm-greeting-text strong {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
}
@media (max-width: 600px) {
    .x99-order-bm-greeting-text { font-size: 17px; }
}

/* ─── Bare Metal card (redesigned) ────────────────────────────────────── */
.x99-order-bmcard {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(0, 1.4fr) minmax(130px, auto);
    align-items: center;
    gap: 22px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.x99-order-bmcard:hover,
.x99-order-bmcard:focus {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
    outline: none;
    text-decoration: none;
}

/* Identity column: brand badge + city/CPU stack */
.x99-order-bmcard-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.x99-order-bmcard-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.x99-order-bmcard-brand--amd {
    background: linear-gradient(135deg, rgba(0, 102, 51, 0.2), rgba(0, 153, 76, 0.12));
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.x99-order-bmcard-brand--intel {
    background: linear-gradient(135deg, rgba(0, 113, 197, 0.2), rgba(0, 151, 220, 0.12));
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.x99-order-bmcard-ident-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.x99-order-bmcard-city {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}
/* Grouped variant — same kicker tone, no flag, used when one BM card
   represents the same hardware spread across multiple cities. */
.x99-order-bmcard-city--multi {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}
.x99-order-bmcard-cpu {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x99-order-bmcard-cpumeta {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0;
}

/* Specs column: icon + value + label pins */
.x99-order-bmcard-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
}
.x99-order-bmcard-spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1;
}
.x99-order-bmcard-spec-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}
.x99-order-bmcard-spec-v {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}
.x99-order-bmcard-spec-k {
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
}
/* Two-line variant so "Pacote de Dados" stacks instead of eating card width. */
.x99-order-bmcard-spec-k--multiline {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
}
.x99-order-bmcard-spec-k--multiline > span { display: block; }
/* Stock pin stands out a touch so the availability number is legible. */
.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-v {
    color: #86efac;
}
.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-k {
    color: rgba(134, 239, 172, 0.75);
}
/* "in N cities" suffix on the stock pin for grouped BM cards. Sits inline
   right after the green "in stock" label in a muted neutral tone so the
   green count keeps the visual emphasis. */
.x99-order-bmcard-spec-cities {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.04em;
    margin-left: 4px;
}
.x99-order-bmcard-spec-cities::before {
    content: "·";
    margin-right: 4px;
    color: rgba(255, 255, 255, 0.3);
}

/* Price / CTA column */
.x99-order-bmcard-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    text-align: right;
}
.x99-order-bmcard-from {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}
.x99-order-bmcard-price {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    letter-spacing: -0.01em;
}
.x99-order-bmcard-price-suf {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}
.x99-order-bmcard-cta {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
}
.x99-order-bmcard:hover .x99-order-bmcard-cta,
.x99-order-bmcard:focus .x99-order-bmcard-cta {
    color: #fca5a5;
}

/* Mobile: stack columns. */
@media (max-width: 768px) {
    .x99-order-bmcard {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 18px;
    }
    .x99-order-bmcard-side {
        align-items: flex-start;
        text-align: left;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .x99-order-bmcard-cta { margin-top: 0; }
}

/* ─── VPS grid (Phase 4) ──────────────────────────────────────────────── */
.x99-order-vps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.x99-order-vps-card {
    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    gap: 16px;
}
.x99-order-vps-card:hover,
.x99-order-vps-card:focus {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(59, 130, 246, 0.28);
    transform: translateY(-2px);
    outline: none;
    text-decoration: none;
}

/* Hero RAM number: big, centered-ish, muted unit */
.x99-order-vps-tier {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}
.x99-order-vps-tier-n {
    font-size: 38px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    letter-spacing: -0.03em;
}
.x99-order-vps-tier-u {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: -0.01em;
}
.x99-order-vps-tier-lbl {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-self: center;
}

/* Spec list with small inline icons */
.x99-order-vps-specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.x99-order-vps-specs li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}
.x99-order-vps-spec-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: rgba(59, 130, 246, 0.7);
    flex-shrink: 0;
}

/* Region pills */
.x99-order-vps-regions {
    padding: 10px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.x99-order-vps-regions-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.x99-order-vps-regions-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.x99-order-vps-region {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}
.x99-order-vps-region-flag { font-size: 11px; line-height: 1; }
.x99-order-vps-region--more {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
}

/* Footer: price + CTA */
.x99-order-vps-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-vps-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.x99-order-vps-from {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.x99-order-vps-price {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
}
.x99-order-vps-price-suf {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}
.x99-order-vps-cta {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.15s ease;
}
.x99-order-vps-card:hover .x99-order-vps-cta,
.x99-order-vps-card:focus .x99-order-vps-cta { color: #93c5fd; }

/* ─── BM: 2-column layout (list + filter sidebar) ───────────────────── */
.x99-order-bm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}
.x99-order-bm-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Controls row above the list: filters toggle + sort */
.x99-order-bm-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.x99-order-bm-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.x99-order-bm-filters-btn:hover,
.x99-order-bm-filters-btn:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
    outline: none;
}
.x99-order-bm-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(239, 68, 68, 0.25);
    color: #fecaca;
    border-radius: 99px;
}
@media (min-width: 992px) {
    /* Desktop: sidebar is always visible, the trigger button is redundant.
       And since the controls row has nothing else in it now (sort chips
       moved into the panel), hide the whole row so it doesn't leave a
       blank gap above the list. */
    .x99-order-bm-filters-btn { display: none; }
    .x99-order-bm-controls    { display: none; }
}

/* Filter sidebar */
.x99-order-bm-filters {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 18px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    box-sizing: border-box;
}
.x99-order-bm-filters::-webkit-scrollbar { width: 4px; }
.x99-order-bm-filters::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

.x99-order-bm-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-bm-filters-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.x99-order-bm-filters-clear {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.x99-order-bm-filters-clear:hover,
.x99-order-bm-filters-clear:focus {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
    outline: none;
}
.x99-order-bm-filters-clear[data-reg-disabled="1"] {
    opacity: 0.35;
    pointer-events: none;
}
.x99-order-bm-filters-close {
    display: none;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.x99-order-bm-filters-close:hover,
.x99-order-bm-filters-close:focus {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.04);
    outline: none;
}

/* Filter group */
.x99-order-bm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.x99-order-bm-filter-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.x99-order-bm-filter-value {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: none;
    letter-spacing: 0;
}
.x99-order-bm-filter-value.is-active {
    color: #fca5a5;
}

/* Chips (used for CPU brand, storage type, region, interface min) */
.x99-order-bm-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.x99-order-bm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.x99-order-bm-chip:hover,
.x99-order-bm-chip:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
    outline: none;
}
.x99-order-bm-chip.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.x99-order-bm-chip.is-empty {
    opacity: 0.35;
}
.x99-order-bm-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 14px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 99px;
}
.x99-order-bm-chip.active .x99-order-bm-chip-count {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
}
.x99-order-bm-chip-flag { font-size: 13px; line-height: 1; }

/* Range inputs */
.x99-order-bm-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
.x99-order-bm-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fca5a5;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
    transition: box-shadow 0.15s ease;
}
.x99-order-bm-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.2);
}
.x99-order-bm-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fca5a5;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Inline "clear filters" under the empty-filtered state */
.x99-order-list-empty p { margin: 0 0 10px; }
.x99-order-bm-clear-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.x99-order-bm-clear-inline:hover,
.x99-order-bm-clear-inline:focus {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    outline: none;
}

/* Mobile drawer backdrop */
.x99-order-bm-filters-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    animation: x99OrderFadeIn 0.18s ease;
}

/* Mobile: collapse layout to single column; filters open as a right drawer */
@media (max-width: 991px) {
    .x99-order-bm-layout {
        grid-template-columns: 1fr;
    }
    .x99-order-bm-filters {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: 320px;
        max-width: 90vw;
        max-height: 100vh;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        z-index: 9999;
        border-radius: 0;
        background: rgba(16, 18, 24, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-left: 1px solid rgba(255, 255, 255, 0.06);
    }
    .x99-order-bm-filters.is-open {
        transform: translateX(0);
    }
    .x99-order-bm-filters-close {
        display: inline-flex;
    }
    .x99-order-bm-filters-backdrop {
        display: block;
    }
    .x99-order-bm-filters-backdrop[hidden] {
        display: none !important;
    }
}

/* ─── Configure step (Phase 5) ─────────────────────────────────────────
   2-column layout: config form on the left, sticky order summary on the
   right. Collapses to stacked layout on mobile, summary becomes a bottom
   sheet that flows with the rest of the form. */
.x99-order-configure {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    animation: x99OrderFadeIn 0.22s ease;
}
.x99-order-configure-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-configure-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.x99-order-configure-back:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
}
.x99-order-configure-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.x99-order-configure-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x99-order-configure-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.x99-order-configure-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}
.x99-order-configure-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
.x99-order-configure-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Configure section (each section is one config option group) */
.x99-order-configure-section {
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.x99-order-configure-section-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.x99-order-configure-section-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.x99-order-configure-section-opt {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-transform: none;
    letter-spacing: 0;
}
.x99-order-configure-section-hint {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

/* Location / single-select pills */
.x99-order-configure-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.x99-order-configure-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.x99-order-configure-pill:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}
.x99-order-configure-pill.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}
.x99-order-configure-pill-flag {
    font-size: 16px;
    line-height: 1;
}

/* OS picker: families as pills, versions as a sub-grid */
.x99-order-configure-os {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.x99-order-configure-os-families {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-configure-os-family {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.x99-order-configure-os-family:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.95);
}
.x99-order-configure-os-family.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}
.x99-order-configure-os-family-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 14px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 99px;
}
.x99-order-configure-os-family.active .x99-order-configure-os-family-count {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
}
.x99-order-configure-os-versions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.x99-order-configure-os-version {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.x99-order-configure-os-version:hover {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);
}
.x99-order-configure-os-version.active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.98);
}

/* Bandwidth slider */
.x99-order-configure-bw {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.x99-order-configure-bw-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
.x99-order-configure-bw-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #93c5fd;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
    transition: box-shadow 0.15s ease;
}
.x99-order-configure-bw-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.28);
}
.x99-order-configure-bw-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #93c5fd;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.x99-order-configure-bw-display {
    text-align: center;
}
.x99-order-configure-bw-current {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
}

/* Billing cycle pills */
.x99-order-configure-cycles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.x99-order-configure-cycle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.x99-order-configure-cycle:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.95);
}
.x99-order-configure-cycle.active {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}
.x99-order-configure-cycle-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.x99-order-configure-cycle-price {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.8;
}

/* Hostname input */
.x99-order-configure-hostname {
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
}

/* Summary sidebar */
.x99-order-configure-summary {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
}
.x99-order-configure-summary-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.x99-order-configure-summary-head {
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-configure-summary-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.x99-order-configure-summary-product {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.x99-order-configure-summary-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}
.x99-order-configure-summary-tag {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}
.x99-order-configure-summary-rows {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.x99-order-configure-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.x99-order-configure-summary-row:last-child { border-bottom: none; }
.x99-order-configure-summary-row-lbl {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.x99-order-configure-summary-row-val {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-align: right;
}
.x99-order-configure-summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 0;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.x99-order-configure-summary-total-lbl {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.x99-order-configure-summary-total-val {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    letter-spacing: -0.01em;
}
.x99-order-configure-summary-total-per {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}
.x99-order-configure-submit {
    width: 100%;
    margin-top: 4px;
}
.x99-order-configure-summary-error {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 12px;
    line-height: 1.5;
}
.x99-order-configure-summary-error p { margin: 0; }

/* Mobile: stack, summary becomes a full-width bottom card */
@media (max-width: 991px) {
    .x99-order-configure-layout {
        grid-template-columns: 1fr;
    }
    .x99-order-configure-summary {
        position: static;
        max-height: none;
    }
}

/* ─── Checkout surface (Phase 6) ──────────────────────────────────────── */
.x99-order-checkout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    animation: x99OrderFadeIn 0.22s ease;
}
.x99-order-checkout-head {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-checkout-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.02em;
}
.x99-order-checkout-sub {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* Empty cart */
.x99-order-checkout-empty {
    padding: 48px 32px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.6);
}
.x99-order-checkout-empty p { margin: 0 0 18px; font-size: 14px; }

/* Layout */
.x99-order-checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
}
.x99-order-checkout-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* Sections */
.x99-order-checkout-section {
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.x99-order-checkout-section-head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-checkout-section-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── "Your server" card — register-inspired, BM-row specs ─────────────── */
.x99-order-checkout-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.x99-order-checkout-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-checkout-card-kicker {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.x99-order-checkout-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}
.x99-order-checkout-edit:hover,
.x99-order-checkout-edit:focus {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    outline: none;
}

/* Identity row (brand + city + cpu) — reuses `.x99-order-bmcard-brand` */
.x99-order-checkout-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.x99-order-checkout-identity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.x99-order-checkout-city {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}
.x99-order-checkout-cpu {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.25;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.x99-order-checkout-cpumeta {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

/* Specs row — reuses `.x99-order-bmcard-spec` token family */
.x99-order-checkout-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    padding-top: 4px;
}

/* ─── Identity row (CPU on the left, hardware cards on the right) ────────
   Two flexible columns: the CPU column keeps its identity stack (city +
   model + meta) and the hardware grid renders three small cards next to
   it. On narrow viewports the hardware grid wraps below. */
.x99-order-checkout-idrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.x99-order-checkout-idrow .x99-order-checkout-identity {
    flex: 1 1 auto;
    min-width: 0;
}

/* ─── Hardware cards (RAM / Storage / Interface) ───────────────────────── */
.x99-order-checkout-hwgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, auto));
    gap: 8px;
    flex: 0 0 auto;
}
.x99-order-checkout-hwcard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    min-width: 0;
}
.x99-order-checkout-hwcard-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.x99-order-checkout-hwcard-head svg {
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}
.x99-order-checkout-hwcard-v {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── OS + Data Package sections (side-by-side) ──────────────────────────
   Two equal columns rendered below the hardware row, each as a sober
   bordered block with kicker, value (icon + text) and a short contextual
   note (RAID for OS, Burst-only for data plan). Stacks to one column on
   narrow viewports so the notes never get squeezed. */
.x99-order-checkout-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.x99-order-checkout-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    min-width: 0;
}
.x99-order-checkout-section-k {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.x99-order-checkout-section-v {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
}
.x99-order-checkout-section-v svg {
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}
.x99-order-checkout-section-note {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .x99-order-checkout-idrow { flex-direction: column; align-items: stretch; }
    .x99-order-checkout-hwgrid { grid-template-columns: repeat(3, 1fr); width: 100%; }
    .x99-order-checkout-sections { grid-template-columns: 1fr; }
}

.x99-order-bmcard-spec--cycle .x99-order-bmcard-spec-v {
    padding: 3px 9px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 99px;
    color: #fca5a5;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* Hostname pill — inline monospace value under the specs */
.x99-order-checkout-hostname {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}
.x99-order-checkout-hostname-k {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}
.x99-order-checkout-hostname-v {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    background: transparent;
    padding: 0;
}

/* Payment sidebar — gateway tiles + coupon + TOS inline + submit */
.x99-order-checkout-gateway {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.x99-order-checkout-gateway-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Gateway tiles — radio-style single-select.
   Content is centered (icon + label) so the pills read symmetrical inside
   the payment card rather than hugging the left edge. */
.x99-order-checkout-gw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.x99-order-checkout-gw {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.x99-order-checkout-gw:hover,
.x99-order-checkout-gw:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.98);
    outline: none;
}
.x99-order-checkout-gw.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.42);
    color: #fca5a5;
}
.x99-order-checkout-gw[hidden] { display: none !important; }
.x99-order-checkout-gw-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.15s ease;
}
.x99-order-checkout-gw.active .x99-order-checkout-gw-icon {
    color: #fca5a5;
}
.x99-order-checkout-gw-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Coupon: quiet "I have a coupon" link right under the subtotal row.
   Rendered as a <button> but forced to look like a plain inline link so it
   overrides any global .btn / .btn-default Lagom styling. */
button.x99-order-checkout-coupon-link,
.x99-order-checkout-coupon-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 2px 0 0 !important;
    margin-top: -8px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: left !important;
    cursor: pointer;
    align-self: flex-start !important;
    transition: color 0.15s ease;
}
.x99-order-checkout-coupon-link:hover,
.x99-order-checkout-coupon-link:focus {
    color: #fca5a5 !important;
    outline: none !important;
    background: transparent !important;
}
.x99-order-checkout-coupon-link svg {
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.15s ease;
    flex-shrink: 0;
}
.x99-order-checkout-coupon-link:hover svg,
.x99-order-checkout-coupon-link:focus svg,
.x99-order-checkout-coupon-link[aria-expanded="true"] svg { color: #fca5a5; }
.x99-order-checkout-coupon-link[aria-expanded="true"] {
    color: rgba(255, 255, 255, 0.92) !important;
}
.x99-order-checkout-coupon-field {
    margin-top: 0;
}
.x99-order-checkout-coupon-input {
    width: 100%;
    height: 38px;
}

/* TOS line above the submit — reuses .x99-reg-tos, kept compact so the
   whole sentence fits on a single line above the submit button. Font is
   tuned so "Ao finalizar o pedido você concorda com os Termos de Serviço."
   clears the 296px content area of the 340px sidebar card. */
.x99-order-checkout-tos {
    margin: 4px 0 0 !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: -0.015em !important;
}

/* Generic hide utility scoped to this surface */
.x99-order-checkout .hidden,
.x99-order-checkout-sidebar .hidden { display: none !important; }

/* Error panel inline to the gateway form */
.x99-order-checkout-error {
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 12px;
    line-height: 1.5;
    margin-top: 4px;
}
.x99-order-checkout-error p { margin: 0; }

/* Sidebar */
.x99-order-checkout-sidebar {
    position: sticky;
    top: 16px;
}
.x99-order-checkout-sidebar-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.x99-order-checkout-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.x99-order-checkout-total-lbl {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.x99-order-checkout-total-val {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    letter-spacing: -0.01em;
}
.x99-order-checkout-total-per {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 2px;
}

/* Legacy TOS-checkbox rules kept so existing checkboxes elsewhere in the
   page still work; the NEW checkout treats TOS as inline .x99-reg-tos
   text above the submit, no checkbox. */
.x99-order-checkout-tos-input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #ef4444;
    cursor: pointer;
    flex-shrink: 0;
}
.x99-order-checkout-tos-text {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
}
.x99-order-checkout-tos-text a {
    color: #fca5a5;
    text-decoration: none;
    font-weight: 500;
}
.x99-order-checkout-tos-text a:hover { text-decoration: underline; }

/* Submit */
.x99-order-checkout-submit {
    width: 100%;
}

/* Auth bridge */
.x99-order-checkout-auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.x99-order-checkout-auth-hint {
    margin: 0 0 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}
.x99-order-checkout-auth .x99-login-submit {
    width: 100%;
}
.x99-order-checkout-auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
}
.x99-order-checkout-auth-divider::before,
.x99-order-checkout-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.x99-order-checkout-auth-divider span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
}
.x99-order-checkout-register-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}
.x99-order-checkout-register-link:hover,
.x99-order-checkout-register-link:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.98);
    text-decoration: none;
    outline: none;
}

.x99-order-checkout-empty-gateway {
    padding: 12px 14px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    color: #fcd34d;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

/* Mobile */
@media (max-width: 991px) {
    .x99-order-checkout-layout {
        grid-template-columns: 1fr;
    }
    .x99-order-checkout-sidebar {
        position: static;
    }
}

/* ─── Fade-in animation (used by splash + toggle + list transitions) ─── */
@keyframes x99OrderFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .x99-order-splash { margin: 24px auto; gap: 22px; }
    .x99-order-splash-title { font-size: 22px; }
    .x99-order-splash-hint  { font-size: 13px; }
    .x99-order-splash-grid  { grid-template-columns: 1fr; gap: 14px; }
    .x99-order-splash-card  { padding: 22px 22px 20px; }
    .x99-order-toggle-wrap  { flex-wrap: wrap; }

    .x99-order-card--bm {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .x99-order-card--bm .x99-order-card-side {
        align-items: flex-start;
        text-align: left;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 12px;
        flex-direction: row;
        justify-content: space-between;
    }
    .x99-order-card--bm .x99-order-card-cta { margin-top: 0; align-self: center; }
}