/* =============================================================================
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: 0 !important; /* o .x99-order-page já reserva 45px para a progress bar fixa */
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;
/* Reserva o espaço que a progress-bar fixa ocupa ao topo, pra que
o conteúdo comece logo abaixo dela (já consagrado no primeiro paint
e após o scroll). Valor = padding-top(14) + bar(3) + padding-bottom(12) = 29px,
+ 16px de respiro. */
padding-top: 45px;
}
/* ─── 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. */
/* Fixed frame — a bar fica SEMPRE flutuando colada ao topo do viewport,
desde o primeiro paint (sem "descer" na primeira rolagem). Um fundo
glass tint + blur faz o papel de "limitador": o conteúdo rolado atrás
dela some gradualmente em vez de transpassar. Edgar 2026-04-29. */
.x99-order-progress-wrap {
position: fixed;
top: 0;
/* Alinha com o .app-main (que é deslocado pela sidebar). Lagom expõe
--app-nav-left-wide-width = 280px no layout esquerdo-largo; em
outros layouts o fallback é 0 (sidebar desligada). Edgar 2026-04-29. */
left: var(--app-nav-left-wide-width, 0);
right: 0;
z-index: 50;
margin: 0;
/* Total height ~45px (igual ao reserve do .x99-order-page) pra cobrir
toda a faixa entre o topo do viewport e onde o toggle começa,
evitando o "vazamento" de conteúdo rolando atrás. */
padding: 14px 16px 28px;
background: var(--glass-tint);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
pointer-events: none; /* nada clicável na faixa */
}
.x99-order-progress-wrap .x99-order-progress {
pointer-events: auto;
}
.x99-order-progress {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
.x99-order-progress span {
height: 3px;
border-radius: 3px;
background: rgba(var(--text-rgb), 0.06);
transition: background 0.25s ease;
}
/* Fill N leading segments when data-step = N (1..4). Color matches the
register bar exactly: rgba(var(--danger-rgb), 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(var(--danger-rgb), 0.45);
}
/* On mobile tighten the wrapper inset so the bar lines up with the
rest of the page content (which uses an 8px inset on small
viewports). */
@media (max-width: 640px) {
.x99-order-progress-wrap {
padding: 10px 12px;
}
}
/* Mobile: o topbar (.x99-mobile-topbar fixed 56px) ja reserva espaço
no topo via `.app-main { padding-top: 56px }` em theme-custom.css.
A progress bar fixa fica oculta atrás do topbar e por isso é melhor
escondê-la de fato e zerar o reserve de 45px que ela exigia.
Edgar 2026-04-29. */
@media (max-width: 991px) {
.x99-order-progress-wrap {
display: none;
}
.x99-order-page {
padding-top: 0;
}
.x99-order-toggle-wrap {
top: 0; /* fica colado ao topo do conteúdo */
}
.x99-order-bm-greeting {
top: 44px; /* abaixo do toggle, sem progress bar */
padding: 6px 16px 14px; /* respiro extra antes do botão de filtros */
}
.x99-order-bm-greeting-text {
font-size: 16px;
}
.x99-order-bm-greeting-sub {
font-size: 12.5px;
margin-top: 4px; /* respiro entre título e subtítulo */
}
/* Controls bar (que carrega o botão Filtros) precisa ficar visível
SEM ser coberto pelo overlay do greeting. Tornamos sticky logo
abaixo do greeting, com z-index acima dele pra sempre ser
clicável durante o scroll da lista. Edgar 2026-04-29. */
.x99-order-bm-controls {
position: sticky;
top: 100px; /* abaixo de toggle (44) + greeting (~56) */
z-index: 37; /* acima do greeting (35) */
margin: 0 -16px 8px;
padding: 8px 16px 12px;
background: var(--c-bg-base);
border-bottom: none; /* sem divider abaixo do controls */
}
.x99-order-bm-filters-btn {
width: 100%;
justify-content: center;
}
.x99-order-bm-filters {
top: 44px;
max-height: calc(100vh - 64px);
}
.x99-order-splash {
margin: 16px auto;
}
}
/* ─── 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(var(--text-rgb), 0.95);
line-height: 1.2;
text-wrap: balance;
}
.x99-order-splash-hint {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 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(var(--text-rgb), 0.035);
border-color: rgba(var(--text-rgb), 0.14);
transform: translateY(-2px);
outline: none;
text-decoration: none;
}
.x99-order-splash-card--bm:hover { border-color: rgba(var(--danger-rgb), 0.3); }
.x99-order-splash-card--vps:hover { border-color: rgba(var(--info-rgb), 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(var(--text-rgb), 0.04);
color: rgba(var(--text-rgb), 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(var(--danger-rgb), 0.08); color: var(--c-accent-warm); }
.x99-order-splash-card--vps .x99-order-splash-card-icon { background: rgba(var(--info-rgb), 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(var(--text-rgb), 0.95);
letter-spacing: -0.01em;
line-height: 1.15;
}
.x99-order-splash-card-sub {
font-size: 12px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 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(var(--text-rgb), 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(var(--text-rgb), 0.25);
}
.x99-order-splash-card--bm .x99-order-splash-card-specs li::before { background: rgba(var(--danger-rgb), 0.55); }
.x99-order-splash-card--vps .x99-order-splash-card-specs li::before { background: rgba(var(--info-rgb), 0.5); }
.x99-order-splash-card-foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid rgba(var(--text-rgb), 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(var(--text-rgb), 0.9);
}
.x99-order-splash-card-cta {
font-size: 12px;
font-weight: 500;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.95); }
.x99-order-splash-card--bm:hover .x99-order-splash-card-cta { color: var(--c-accent-warm); }
.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). O
wrapper fica sticky logo abaixo do progress bar fixo, mantendo a ação
sempre acessível enquanto o usuário rola a lista de produtos. */
.x99-order-toggle-wrap {
position: sticky;
top: 45px; /* abaixo da progress bar fixa */
z-index: 40;
margin: 0 -16px 8px; /* bleed por cima do padding lateral */
padding: 8px 16px;
background: var(--c-bg-base);
display: flex;
align-items: center;
justify-content: center;
animation: x99OrderFadeIn 0.22s ease;
}
.x99-order-toggle-wrap > * {
max-width: 1100px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
}
.x99-order-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 0;
background: transparent;
border: 0;
color: rgba(var(--text-rgb), 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: var(--c-accent-warm);
outline: none;
}
.x99-order-back-link-icon {
color: rgba(var(--text-rgb), 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: var(--c-accent-warm); }
/* ─── 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(var(--text-rgb), 0.95);
letter-spacing: -0.01em;
}
.x99-order-list-count {
font-size: 12px;
color: rgba(var(--text-rgb), 0.45);
}
.x99-order-list-count [data-reg-count-n] {
font-weight: 600;
color: rgba(var(--text-rgb), 0.8);
}
.x99-order-list-empty {
padding: 36px 24px;
text-align: center;
background: rgba(var(--text-rgb), 0.02);
border: 1px dashed rgba(var(--text-rgb), 0.08);
border-radius: 14px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 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(var(--text-rgb), 0.035);
border-color: rgba(var(--text-rgb), 0.14);
transform: translateY(-1px);
outline: none;
text-decoration: none;
}
/* ─── Greeting-style heading for the BM list ─────────────────────────── */
.x99-order-bm-greeting {
position: sticky;
top: 90px; /* abaixo de progress (45) + toggle (~45) */
z-index: 35;
align-items: flex-start;
flex-direction: column;
margin: 0 -16px 0;
/* padding-bottom mais generoso pra que o background do greeting cubra
toda a faixa de transição até o próximo card e não vaze conteúdo
atrás. Edgar 2026-04-29. */
padding: 6px 16px 20px;
background: var(--c-bg-base);
}
.x99-order-bm-layout {
margin-top: 4px;
}
.x99-order-bm-greeting-sub {
margin: 6px 0 0;
font-size: 13.5px;
font-weight: 400;
color: rgba(var(--text-rgb), 0.55);
letter-spacing: 0.005em;
line-height: 1.5;
}
@media (max-width: 600px) {
.x99-order-bm-greeting-sub { font-size: 12.5px; }
}
.x99-order-bm-greeting-text {
margin: 0;
font-size: 22px;
font-weight: 300;
color: rgba(var(--text-rgb), 0.72);
letter-spacing: 0.01em;
line-height: 1.4;
text-wrap: balance;
}
.x99-order-bm-greeting-text strong {
font-weight: 700;
color: rgba(var(--text-rgb), 0.98);
}
@media (max-width: 600px) {
.x99-order-bm-greeting-text { font-size: 17px; }
}
/* Slot-machine rotation inside the greeting.
`overflow: hidden` is needed to clip the sliding words, but it also
mutates the inline-block's baseline to its box-bottom — which pushes
the inner text up visually. `vertical-align: bottom` + inheriting the
parent's `line-height` brings the slot's inner glyph baseline back
onto the surrounding text's baseline. */
.x99-order-bm-greeting-slot {
position: relative;
display: inline-block;
overflow: hidden;
vertical-align: bottom;
line-height: inherit;
min-width: 1ch;
}
.x99-order-bm-greeting-slot-word {
display: inline-block;
color: var(--c-accent-warm);
font-weight: 500;
white-space: nowrap;
line-height: inherit;
animation: x99OrderSlotIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.x99-order-bm-greeting-slot-word.is-leaving {
position: absolute;
top: 0;
left: 0;
animation: x99OrderSlotOut 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes x99OrderSlotIn {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes x99OrderSlotOut {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.x99-order-bm-greeting-slot-word,
.x99-order-bm-greeting-slot-word.is-leaving {
animation: none;
}
}
/* ─── Bare Metal card (redesigned) ────────────────────────────────────── */
.x99-order-bmcard {
display: grid;
/* Identity | Specs | Price+Availability+CTA side — both flanking
columns are 1fr so they grow equally, which naturally centers the
middle specs column between the CPU identity and the pricing. */
grid-template-columns: minmax(240px, 1fr) minmax(260px, auto) minmax(160px, 1fr);
align-items: center;
gap: 22px;
padding: 18px 22px;
background: rgba(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 14px;
box-shadow: var(--sh-card);
color: inherit;
text-decoration: none;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.x99-order-bmcard:hover,
.x99-order-bmcard:focus {
background: rgba(var(--text-rgb), 0.04);
border-color: rgba(var(--accent-rgb), 0.25);
box-shadow: var(--sh-card-hover), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
transform: translateY(-2px) scale(var(--scale-hover));
outline: none;
text-decoration: none;
}
/* Grouped variant — div instead of so we can host nested anchors
inside the city picker panel. Cursor + hover mirror the single-city
anchor card; the only behavioural difference is the click handler. */
.x99-order-bmcard--grouped {
cursor: pointer;
}
.x99-order-bmcard--grouped:focus-visible {
outline: 2px solid rgba(var(--danger-rgb), 0.45);
outline-offset: 2px;
}
.x99-order-bmcard--grouped.x99-order-bmcard--expanded {
transform: none;
background: rgba(var(--text-rgb), 0.04);
border-color: rgba(var(--danger-rgb), 0.22);
}
/* When the card is expanded keep the bottom corners flush with the picker
panel so the whole thing reads as one continuous block. */
/* ─── Inline city picker (grouped cards) ──────────────────────────────────
Spans the full grid width below the identity / specs / side row. Each
option is an anchor pointing at the city's specific pid configure. */
.x99-order-bmcard-cities {
grid-column: 1 / -1;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(var(--text-rgb), 0.06);
animation: x99OrderBmCitiesIn 0.18s ease;
}
.x99-order-bmcard-cities[hidden] { display: none !important; }
@keyframes x99OrderBmCitiesIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
.x99-order-bmcard-cities-label {
display: block;
margin-bottom: 8px;
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(var(--text-rgb), 0.5);
}
.x99-order-bmcard-cities-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 6px;
}
.x99-order-bmcard-city-opt {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: rgba(var(--text-rgb), 0.025);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 9px;
color: rgba(var(--text-rgb), 0.88);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.x99-order-bmcard-city-opt:hover,
.x99-order-bmcard-city-opt:focus {
background: rgba(var(--danger-rgb), 0.08);
border-color: rgba(var(--danger-rgb), 0.32);
outline: none;
text-decoration: none;
}
.x99-order-bmcard-city-opt-flag {
font-size: 14px;
flex-shrink: 0;
}
.x99-order-bmcard-city-opt-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgba(var(--text-rgb), 0.92);
}
.x99-order-bmcard-city-opt-stock {
font-size: 11px;
font-weight: 600;
color: var(--c-success);
white-space: nowrap;
}
.x99-order-bmcard-city-opt:hover .x99-order-bmcard-city-opt-stock,
.x99-order-bmcard-city-opt:focus .x99-order-bmcard-city-opt-stock {
color: var(--c-success);
}
/* Keep the city name in neutral white even when the parent row picks up
the red accent on hover — only the arrow signals the interaction. */
.x99-order-bmcard-city-opt:hover .x99-order-bmcard-city-opt-name,
.x99-order-bmcard-city-opt:focus .x99-order-bmcard-city-opt-name {
color: #ffffff;
}
.x99-order-bmcard-city-opt-arrow {
color: rgba(var(--text-rgb), 0.35);
transition: transform 0.15s ease, color 0.15s ease;
}
.x99-order-bmcard-city-opt:hover .x99-order-bmcard-city-opt-arrow,
.x99-order-bmcard-city-opt:focus .x99-order-bmcard-city-opt-arrow {
color: var(--c-accent-warm);
transform: translateX(2px);
}
/* Identity column. Stacked layout (no side badge): city kicker → brand
logo line → CPU model → cpumeta with cores/threads/clock spans. */
.x99-order-bmcard-identity {
display: flex;
align-items: flex-start;
min-width: 0;
}
.x99-order-bmcard-brandline {
display: inline-flex;
align-items: center;
margin: 2px 0 4px;
line-height: 1;
}
.x99-order-bmcard-brandlogo {
height: 12px;
width: auto;
object-fit: contain;
display: block;
}
.x99-order-bmcard-brandline--text {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(var(--text-rgb), 0.7);
}
.x99-order-bmcard {
position: relative;
}
.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,
.x99-order-bmcard-brand--intel {
/* Brand wrapper hosts the official logo PNG so we drop the colored
gradient — the logo carries the brand color on its own. */
background: rgba(var(--text-rgb), 0.04);
border: 1px solid rgba(var(--text-rgb), 0.08);
padding: 4px 10px;
color: rgba(var(--text-rgb), 0.85);
}
.x99-brand-logo {
display: block;
height: 16px;
width: auto;
object-fit: contain;
}
/* Country flag — used in BM list cards, region chips and the VPS
configure location pills. PNG icons live under /x99/img/icons/. */
.x99-flag {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
object-fit: cover;
border-radius: 2px;
margin-right: 1px;
}
/* Distro / OS icon used in the checkout summary's "Sistema operacional"
row. Same sizing as the section's leading SVG so the layout doesn't
shift when the icon is missing and we fall back to the generic glyph. */
.x99-os-icon {
width: 16px;
height: 16px;
object-fit: contain;
flex-shrink: 0;
}
.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(var(--text-rgb), 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(var(--text-rgb), 0.4);
font-weight: 500;
}
.x99-order-bmcard-cpu {
font-size: 14px;
font-weight: 600;
/* Slightly muted compared to the cores/threads number, so the brand
logo on the line above keeps a touch more visual weight. */
color: rgba(var(--text-rgb), 0.82);
line-height: 1.25;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x99-order-bmcard-cpumeta {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: 5px;
margin-top: 6px;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.78);
background: rgba(var(--text-rgb), 0.035);
border: 1px solid rgba(var(--text-rgb), 0.07);
white-space: nowrap;
border-radius: 10px;
width: fit-content;
max-width: 100%;
letter-spacing: 0;
}
.x99-order-bmcard-cpumeta-cores {
/* Same muted-by-a-notch tone as the CPU model name, so the brand
logo on the line above keeps the visual weight. */
color: rgba(var(--text-rgb), 0.82);
}
.x99-order-bmcard-cpumeta-ghz {
color: rgba(var(--text-rgb), 0.78);
display: inline-flex;
align-items: baseline;
gap: 4px;
}
/* Clock chip uses the same muted-by-a-notch tone as the cores / threads
numbers so the whole pill reads as a single unit (performance
semantics now live on the PassMark badge next to the brand logo). */
.x99-order-bmcard-cpumeta-ghz {
color: rgba(var(--text-rgb), 0.82);
font-weight: 700;
}
.x99-order-bmcard-cpumeta-sep {
color: rgba(var(--text-rgb), 0.3);
font-weight: 400;
}
/* Availability line: sits inside the right-hand side column between the
price and the Configure CTA, matching the side's flex-end alignment. */
.x99-order-bmcard-stockline {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 4px;
width: 100%;
}
/* Specs column: 3×1 data-sheet grid — each row is a full-width bar with
icon · TITLE (left) · VALUE (right-aligned) · optional kicker. Stock
lives in the side column now (between price and CTA). The middle grid
column uses `auto` sizing with the flanking 1fr columns, which keeps
the specs block visually centered between the CPU identity and the
pricing regardless of how long the CPU model name runs. */
.x99-order-bmcard-specs {
display: grid;
grid-auto-rows: auto;
gap: 4px;
align-self: center;
width: 100%;
min-width: 260px;
max-width: 300px;
}
.x99-order-bmcard-spec-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
font-size: 12.5px;
line-height: 1.2;
background: rgba(var(--text-rgb), 0.035);
border: 1px solid rgba(var(--text-rgb), 0.07);
border-radius: 10px;
min-width: 0;
}
/* Value slides to the right edge of the row via auto-margin so TITLE
stays anchored on the left next to the icon. */
.x99-order-bmcard-spec-row > .x99-order-bmcard-spec-v {
margin-left: auto;
text-align: right;
}
/* Tighten the icon colour inside full-width bars so the accent comes
from the value itself, not the decoration. */
.x99-order-bmcard-spec-row > .x99-order-bmcard-spec-ico {
color: rgba(var(--text-rgb), 0.35);
flex-shrink: 0;
}
/* Trailing kicker (e.g. DDR5) sits immediately right of the value with
a small gap — no auto-margin so it stays anchored to the value. */
.x99-order-bmcard-spec-row > .x99-order-bmcard-spec-k {
margin-left: 6px;
}
.x99-order-bmcard-spec-ico {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(var(--text-rgb), 0.4);
flex-shrink: 0;
}
.x99-order-bmcard-spec-v {
font-weight: 600;
color: rgba(var(--text-rgb), 0.82);
}
/* Uppercase micro-label rendered directly after the icon. Gives the pill
an explicit category name (RAM / STORAGE / NETWORK / STOCK) so users
can scan rows without decoding icons on their own. */
.x99-order-bmcard-spec-title {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(var(--text-rgb), 0.5);
}
.x99-order-bmcard-spec-k {
font-size: 10.5px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(var(--text-rgb), 0.4);
}
/* DDR generation kickers — white bold in dark, accent colors in light. */
.x99-order-bmcard-spec-k--ddr4,
.x99-order-bmcard-spec-k--ddr5,
.x99-order-bmcard-spec-k--ddr3,
.x99-order-bmcard-spec-k--ddr6 {
color: var(--c-text-primary);
font-weight: 700;
letter-spacing: 0.04em;
}
:root[data-theme="light"] .x99-order-bmcard-spec-k--ddr4 { color: var(--c-info); }
:root[data-theme="light"] .x99-order-bmcard-spec-k--ddr5 { color: var(--c-accent); }
/* Brand + CPU Mark badge — the brand logo and the cpubenchmark.net
score sit on the same horizontal axis. Both are content-sized
(no auto-push) so the badge sits right next to the bullet
separator, matching the natural rhythm of the card. The
brandline's standalone margin is zeroed here so `align-items:
center` lines the logo's optical centre with the bench pill's
centre. */
.x99-order-bmcard-brandbench {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
line-height: 1;
margin: 2px 0 4px;
}
.x99-order-bmcard-brandbench .x99-order-bmcard-brandline {
margin: 0;
}
.x99-order-bmcard-brandsep {
color: rgba(var(--text-rgb), 0.25);
font-weight: 600;
line-height: 1;
}
.x99-order-bmcard-bench {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
background: rgba(var(--text-rgb), 0.035);
border: 1px solid rgba(var(--text-rgb), 0.07);
border-radius: 6px;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.x99-order-bmcard-bench-ico {
flex-shrink: 0;
color: var(--c-text-primary); /* preto em light, branco em dark */
}
.x99-order-bmcard-bench-v {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
color: rgba(var(--text-rgb), 0.85);
}
/* "CPU Mark" attribution — rendered as a span (so it can safely
nest inside the single-card wrapper). The `--link` modifier
adds a click affordance + hover underline; the JS handler opens
the cpubenchmark.net page for the exact model in a new tab. */
.x99-order-bmcard-bench-k {
font-size: 9.5px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.42);
letter-spacing: 0.04em;
text-transform: none;
text-decoration: none;
}
.x99-order-bmcard-bench-k--link {
cursor: pointer;
}
.x99-order-bmcard-bench-k--link:hover,
.x99-order-bmcard-bench-k--link:focus {
color: rgba(var(--text-rgb), 0.78);
text-decoration: underline;
text-decoration-color: rgba(var(--text-rgb), 0.35);
text-underline-offset: 2px;
outline: none;
}
/* Tabular numerals on the rolling digits keep the slot-machine width
stable so the layout doesn't jitter while digits roll. */
.x99-order-bmcard-bench-v {
font-variant-numeric: tabular-nums;
transition: text-shadow 0.2s ease, transform 0.2s ease;
}
/* While the reels are spinning we add a soft motion glow + a tiny
scale bump so the eye is drawn to the dancing numbers. The class
is toggled by `animateBenchNumbers()` for the duration of the run. */
.x99-order-bmcard-bench-v.is-rolling {
text-shadow: 0 0 8px currentColor;
transform: scale(1.06);
}
/* Per-tier tint — paints both the gauge icon and the number. The ramp
reads weakest → strongest as blue → green → yellow → red, matching
how speedometers / heat maps / "RGB" speed charts traditionally
communicate intensity. Calibrated against the catalogue's actual
CPU Mark distribution (see thresholds in `animateBenchNumbers`). */
/* Tier color no value (número) — dark mode usa branco puro (limpo),
light mode mantém cores por tier pra contraste sobre cream. */
.x99-order-bmcard-bench--eco .x99-order-bmcard-bench-v { color: var(--c-text-primary); }
.x99-order-bmcard-bench--mid .x99-order-bmcard-bench-v { color: var(--c-text-primary); }
.x99-order-bmcard-bench--high .x99-order-bmcard-bench-v { color: var(--c-text-primary); }
.x99-order-bmcard-bench--top .x99-order-bmcard-bench-v { color: var(--c-text-primary); }
/* Light mode: restore tier colors (visually richer over cream background) */
:root[data-theme="light"] .x99-order-bmcard-bench--eco .x99-order-bmcard-bench-v { color: var(--c-info); }
:root[data-theme="light"] .x99-order-bmcard-bench--mid .x99-order-bmcard-bench-v { color: var(--c-success); }
:root[data-theme="light"] .x99-order-bmcard-bench--high .x99-order-bmcard-bench-v { color: var(--c-warning); }
:root[data-theme="light"] .x99-order-bmcard-bench--top .x99-order-bmcard-bench-v { color: var(--c-accent); }
/* Storage type kickers — same colour grammar as DDR pills:
NVMe (fastest) → mid blue, SSD (mid) → muted, HDD (slowest) → muted. */
.x99-order-bmcard-spec-k--nvme {
color: var(--c-accent-warm);
font-weight: 700;
letter-spacing: 0.04em;
}
.x99-order-bmcard-spec-k--ssd {
color: #93c5fd;
font-weight: 700;
letter-spacing: 0.04em;
}
.x99-order-bmcard-spec-k--hdd {
color: rgba(var(--text-rgb), 0.6);
font-weight: 700;
letter-spacing: 0.04em;
}
/* 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.
Rendered in the right-hand side column (between price and CTA), so the
sizing is dialled down to match the surrounding secondary text. */
.x99-order-bmcard-spec--stock {
font-size: 11px;
line-height: 1.2;
gap: 4px;
}
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-v,
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-k,
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-title {
color: var(--c-success) !important;
font-weight: 700;
}
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-title {
font-size: 10px;
letter-spacing: 0.06em;
}
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-ico {
color: var(--c-success) !important;
}
.x99-order-bmcard-spec--stock .x99-order-bmcard-spec-ico svg {
width: 12px;
height: 12px;
}
/* Scarcity flag: last unit left — uses semantic danger color token
so it works correctly in both dark and light modes. */
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock.x99-order-bmcard-spec--stock-last .x99-order-bmcard-spec-v,
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock.x99-order-bmcard-spec--stock-last .x99-order-bmcard-spec-k {
color: var(--c-danger) !important;
}
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock.x99-order-bmcard-spec--stock-last .x99-order-bmcard-spec-title {
color: var(--c-danger) !important;
font-weight: 700;
}
.x99-order-bmcard-spec.x99-order-bmcard-spec--stock.x99-order-bmcard-spec--stock-last .x99-order-bmcard-spec-ico {
color: var(--c-danger) !important;
opacity: 0.85;
}
/* "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(var(--text-rgb), 0.5);
letter-spacing: 0.04em;
margin-left: 4px;
}
.x99-order-bmcard-spec-cities::before {
content: "·";
margin-right: 4px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.4);
font-weight: 600;
}
.x99-order-bmcard-price {
font-size: 18px;
font-weight: 700;
color: rgba(var(--text-rgb), 0.98);
letter-spacing: -0.01em;
}
.x99-order-bmcard-price-suf {
font-size: 11px;
font-weight: 400;
color: rgba(var(--text-rgb), 0.45);
margin-left: 2px;
}
.x99-order-bmcard-cta {
margin-top: 6px;
font-size: 11px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.55);
transition: color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-back), font-size var(--dur-base) var(--ease-back);
}
/* Magnifier effect: CTA grows + shifts on card hover (dock-like) */
.x99-order-bmcard:hover .x99-order-bmcard-cta,
.x99-order-bmcard:focus .x99-order-bmcard-cta {
color: var(--c-accent);
font-size: 12.5px;
transform: translateX(3px);
}
/* Light mode: accent color at rest too (more visible on cream) */
:root[data-theme="light"] .x99-order-bmcard-cta {
color: var(--c-accent);
opacity: 0.75;
}
:root[data-theme="light"] .x99-order-bmcard:hover .x99-order-bmcard-cta {
opacity: 1;
}
/* 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(var(--text-rgb), 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(4, minmax(0, 1fr));
gap: 16px;
}
/* Responsive collapse: 4 → 3 → 2 → 1 cards per row. */
@media (max-width: 1100px) {
.x99-order-vps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
.x99-order-vps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
.x99-order-vps-grid { grid-template-columns: 1fr; }
}
.x99-order-vps-card {
display: flex;
flex-direction: column;
padding: 22px 22px 20px;
background: rgba(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 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(var(--text-rgb), 0.035);
border-color: rgba(var(--info-rgb), 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(var(--text-rgb), 0.98);
letter-spacing: -0.03em;
}
.x99-order-vps-tier-u {
font-size: 18px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.55);
letter-spacing: -0.01em;
}
.x99-order-vps-tier-lbl {
margin-left: auto;
font-size: 11px;
font-weight: 600;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.7);
}
.x99-order-vps-spec-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
color: rgba(var(--info-rgb), 0.7);
flex-shrink: 0;
}
/* Region pills */
.x99-order-vps-regions {
padding: 10px 0 0;
border-top: 1px solid rgba(var(--text-rgb), 0.05);
display: flex;
flex-direction: column;
gap: 6px;
}
.x99-order-vps-regions-label {
font-size: 10px;
font-weight: 600;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.03);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 9px; /* squircle */
font-size: 10.5px;
font-weight: 500;
color: rgba(var(--text-rgb), 0.6);
}
.x99-order-vps-region-flag { font-size: 11px; line-height: 1; }
.x99-order-vps-region--more {
background: transparent;
border-color: rgba(var(--text-rgb), 0.04);
color: rgba(var(--text-rgb), 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(var(--text-rgb), 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(var(--text-rgb), 0.4);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.x99-order-vps-price {
font-size: 18px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.95);
letter-spacing: -0.01em;
}
.x99-order-vps-price-suf {
font-size: 11px;
font-weight: 400;
color: rgba(var(--text-rgb), 0.45);
margin-left: 2px;
}
.x99-order-vps-cta {
font-size: 12px;
font-weight: 500;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 10px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.04);
border-color: rgba(var(--text-rgb), 0.14);
color: rgba(var(--text-rgb), 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(var(--danger-rgb), 0.25);
color: #fecaca;
border-radius: 9px; /* squircle */
}
@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 — compact layout. Tightened spacing top-to-bottom so
every filter group fits on a smaller vertical footprint while still
keeping clear visual separation between groups (border-top divider). */
.x99-order-bm-filters {
position: sticky;
/* Sticky logo abaixo do toggle. z-index acima do greeting (35) pra
sobrepô-lo: assim em viewports curtas o filtro segue visível
passando POR CIMA do header em vez de ficar atrás. Edgar 2026-04-29. */
top: 90px;
z-index: 38;
max-height: calc(100vh - 110px);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0;
padding: 14px 14px 18px;
background: var(--c-bg-elevated);
border: 1px solid var(--c-border);
border-radius: 14px;
box-sizing: border-box;
}
.x99-order-bm-filters::-webkit-scrollbar { width: 4px; }
.x99-order-bm-filters::-webkit-scrollbar-thumb { background: rgba(var(--text-rgb), 0.1); border-radius: 2px; }
.x99-order-bm-filters-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding-bottom: 8px;
margin-bottom: 0;
border-bottom: 1px solid rgba(var(--text-rgb), 0.05);
}
.x99-order-bm-filters-title {
margin: 0;
font-size: 12px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.95);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.x99-order-bm-filters-clear {
background: transparent;
border: none;
color: rgba(var(--text-rgb), 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: var(--c-accent-warm);
background: rgba(var(--danger-rgb), 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(var(--text-rgb), 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(var(--text-rgb), 0.95);
background: rgba(var(--text-rgb), 0.04);
outline: none;
}
/* Filter group */
.x99-order-bm-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 0;
border-top: 1px solid rgba(var(--text-rgb), 0.04);
}
.x99-order-bm-filter-group:first-of-type {
border-top: 0;
padding-top: 8px;
}
.x99-order-bm-filter-group:last-of-type {
padding-bottom: 0;
}
.x99-order-bm-filter-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: 10.5px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.7);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.x99-order-bm-filter-value {
font-size: 11px;
font-weight: 500;
color: rgba(var(--text-rgb), 0.4);
text-transform: none;
letter-spacing: 0;
}
.x99-order-bm-filter-value.is-active {
color: var(--c-accent-warm);
}
/* Chips (used for CPU brand, storage type, region, interface min) */
.x99-order-bm-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.x99-order-bm-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: var(--c-surface);
border: 1px solid var(--c-border-strong);
border-radius: 9px; /* squircle-like: Apple-style continuous curve */
color: var(--c-text-secondary);
font-size: 11.5px;
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: var(--c-surface-hover);
border-color: var(--c-text-muted);
color: var(--c-text-primary);
outline: none;
}
.x99-order-bm-chip.active {
background: var(--c-accent-soft);
border-color: var(--c-accent);
color: var(--c-accent);
}
.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(var(--text-rgb), 0.06);
color: rgba(var(--text-rgb), 0.6);
border-radius: 9px; /* squircle */
}
.x99-order-bm-chip.active .x99-order-bm-chip-count {
background: rgba(var(--accent-rgb), 0.2);
color: var(--c-accent);
}
.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(var(--text-rgb), 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: var(--c-accent-warm);
cursor: pointer;
box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.12);
transition: box-shadow 0.15s ease;
}
.x99-order-bm-range::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.2);
}
.x99-order-bm-range::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--c-accent-warm);
cursor: pointer;
border: none;
box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 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(var(--danger-rgb), 0.12);
border: 1px solid rgba(var(--danger-rgb), 0.28);
border-radius: 8px;
color: var(--c-accent-warm);
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(var(--danger-rgb), 0.18);
border-color: rgba(var(--danger-rgb), 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(var(--text-rgb), 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;
flex-direction: column;
align-items: stretch;
gap: 14px;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(var(--text-rgb), 0.05);
}
/* The back link sits inside the column-flex top bar, which by default
stretches its children to fill the row width. Anchor it to flex-start
so the link only takes the size of its content (matches the inline
"← Voltar" affordance the rest of the order flow uses). */
.x99-order-configure-top > .x99-order-configure-back {
align-self: flex-start;
}
/* Identity card row (CPU on the left, hardware cards on the right).
Mirrors the checkout's `.x99-order-checkout-idrow` token vocabulary so
the configure header reads as the same component the user sees on the
final review screen. */
.x99-order-configure-idrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.x99-order-configure-idrow .x99-order-checkout-identity {
flex: 1 1 auto;
min-width: 0;
}
.x99-order-configure-idrow .x99-order-checkout-hwgrid {
/* Four cards on wide screens (RAM · Storage · Network · Location).
`auto` lets each card breathe to fit its content (location card
has wider text than "128 GB"). */
grid-template-columns: repeat(4, minmax(96px, auto));
flex: 0 0 auto;
}
@media (max-width: 768px) {
.x99-order-configure-idrow { flex-direction: column; align-items: stretch; }
.x99-order-configure-idrow .x99-order-checkout-hwgrid {
grid-template-columns: repeat(2, 1fr);
width: 100%;
}
}
.x99-order-configure-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: transparent;
border: none;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.95);
background: rgba(var(--text-rgb), 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(var(--text-rgb), 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(var(--text-rgb), 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: 14px;
min-width: 0;
}
.x99-order-configure-form {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Configure section (each section is one config option group) */
/* Card surface — shared shape used by every right-column box (form
sections, summary, share). Compact 18px padding and 10px internal
gap keep the layout dense without feeling cramped. */
.x99-order-configure-section {
padding: 18px;
background: rgba(var(--text-rgb), 0.025);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.x99-order-configure-section-head {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(var(--text-rgb), 0.05);
}
.x99-order-configure-section-title {
margin: 0;
font-size: 11px;
font-weight: 600;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.35);
text-transform: none;
letter-spacing: 0;
}
.x99-order-configure-section-hint {
margin: 0;
font-size: 11.5px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 0.08);
border-radius: 9px; /* squircle */
color: rgba(var(--text-rgb), 0.7);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.x99-order-configure-pill:hover {
background: rgba(var(--text-rgb), 0.04);
border-color: rgba(var(--text-rgb), 0.18);
color: rgba(var(--text-rgb), 0.95);
}
.x99-order-configure-pill.active {
background: rgba(var(--danger-rgb), 0.12);
border-color: rgba(var(--danger-rgb), 0.4);
color: var(--c-accent-warm);
}
.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;
}
/* OS family cards — larger squared blocks with icon stacked above the
name, so each distro reads as a recognisable tile instead of a chip.
Responsive grid: 5 columns desktop → 4 → 3 → 2 on mobile. */
.x99-order-configure-os-families {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 10px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(var(--text-rgb), 0.05);
}
.x99-order-configure-os-family {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
aspect-ratio: 1 / 1;
padding: 14px 10px;
background: rgba(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 0.08);
border-radius: 12px;
color: rgba(var(--text-rgb), 0.75);
font-size: 13px;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.x99-order-configure-os-family:hover {
background: rgba(var(--text-rgb), 0.05);
color: rgba(var(--text-rgb), 0.95);
transform: translateY(-1px);
}
.x99-order-configure-os-family.active {
background: rgba(var(--danger-rgb), 0.12);
border-color: rgba(var(--danger-rgb), 0.4);
color: var(--c-accent-warm);
transform: translateY(0);
}
.x99-order-configure-os-family-ico {
width: 44px;
height: 44px;
object-fit: contain;
flex-shrink: 0;
}
.x99-order-configure-os-family-name {
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Count badge moves to the top-right corner so the tile face stays
clean (icon + name centred). */
.x99-order-configure-os-family-count {
position: absolute;
top: 7px;
right: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
font-size: 10px;
font-weight: 600;
background: rgba(var(--text-rgb), 0.08);
color: rgba(var(--text-rgb), 0.6);
border-radius: 8px; /* squircle */
}
.x99-order-configure-os-family.active .x99-order-configure-os-family-count {
background: rgba(var(--danger-rgb), 0.22);
color: #fecaca;
}
@media (max-width: 520px) {
.x99-order-configure-os-families {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.x99-order-configure-os-family-ico { width: 36px; height: 36px; }
}
.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(var(--text-rgb), 0.08);
border-radius: 9px; /* squircle */
color: rgba(var(--text-rgb), 0.6);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.x99-order-configure-os-version:hover {
background: rgba(var(--text-rgb), 0.04);
color: rgba(var(--text-rgb), 0.9);
}
.x99-order-configure-os-version.active {
/* Mirror the family-active red accent so the two selection states
read as belonging to the same picker. */
background: rgba(var(--danger-rgb), 0.12);
border-color: rgba(var(--danger-rgb), 0.4);
color: var(--c-accent-warm);
}
/* Bandwidth slider + speedometer gauge */
.x99-order-configure-bw {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.x99-order-configure-bw-gauge {
position: relative;
width: 220px;
max-width: 100%;
margin: 4px auto 2px;
}
.x99-order-configure-bw-gauge-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* Clock-style tick marks radiating outward from the arc. Three
weights:
• `--major` (default for tier ticks) — tall, bright, thick. One
per real Gbps tier, calls attention to the values the user
can pick.
• `--filler` — short and dim. Sits midway between each adjacent
pair of tier ticks to fill the empty arc, so the gauge reads
like a real instrument cluster instead of a sparse semicircle.
Active state pulls a tier tick into the red accent — fillers stay
neutral so the eye keeps tracking the chosen tier. */
.x99-order-configure-bw-gauge-tick {
stroke: rgba(var(--text-rgb), 0.35);
stroke-width: 1.5;
stroke-linecap: round;
transition: stroke 0.2s ease;
}
.x99-order-configure-bw-gauge-tick--major {
stroke: rgba(var(--text-rgb), 0.7);
stroke-width: 2.25;
cursor: pointer;
}
.x99-order-configure-bw-gauge-tick--major:hover {
stroke: var(--c-accent);
}
.x99-order-configure-bw-gauge-tick--filler {
stroke: rgba(var(--text-rgb), 0.18);
stroke-width: 1;
}
/* Active state — the swept range glows in the same true-red used by
the needle (Tailwind red-600). No coloured halo; the slight darken
shadow matches the sober pointer treatment. */
.x99-order-configure-bw-gauge-tick[data-active="true"] {
stroke: var(--c-accent);
}
.x99-order-configure-bw-gauge-tick--major[data-active="true"] {
stroke: var(--c-accent);
}
/* Numeric labels under each tick — small uppercase digits. Active
state pulls them out of the muted neutral and into the red accent
so the swept range stays visually grouped with the arc. */
.x99-order-configure-bw-gauge-label {
font-family: "Share Tech Mono", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 9.5px;
font-weight: 400;
fill: rgba(var(--text-rgb), 0.4);
font-variant-numeric: tabular-nums;
transition: fill 0.2s ease;
cursor: pointer;
/* Tighten the click target a touch beyond the visual glyphs so
the mini digits aren't impossible to land on. */
paint-order: stroke;
}
.x99-order-configure-bw-gauge-label:hover {
fill: var(--c-accent);
}
.x99-order-configure-bw-gauge-label[data-active="true"] {
fill: var(--c-accent);
}
/* Invisible click target — sits behind the visible tick + label so
clicks anywhere in the tier's neighbourhood resolve to the right
bandwidth tier. Explicit `stroke: none`, no outline (focus or
otherwise) and `fill-opacity: 0` keep it fully invisible — even
browsers that render a default focus ring on SVG elements. */
.x99-order-configure-bw-gauge-hit {
fill: rgba(0, 0, 0, 0);
fill-opacity: 0;
stroke: none;
pointer-events: all;
cursor: pointer;
outline: none;
}
.x99-order-configure-bw-gauge-hit:hover,
.x99-order-configure-bw-gauge-hit:focus,
.x99-order-configure-bw-gauge-hit:focus-visible,
.x99-order-configure-bw-gauge-hit:active {
fill: rgba(0, 0, 0, 0);
stroke: none;
outline: none;
box-shadow: none;
}
/* Smooth animation on both the progress arc and the needle rotation
so the gauge tracks the slider with a tactile feel. The needle
group pivots around the gauge centre (100, 100) in SVG user
coordinates — `transform-box: view-box` makes that pivot stick,
otherwise browsers that default to `fill-box` end up rotating
around the (degenerate) bounding box of the child. */
.x99-order-configure-bw-gauge-arc {
transition: stroke-dashoffset 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.x99-order-configure-bw-gauge-needle-group {
transform-box: view-box;
transform-origin: 100px 100px;
transform: rotate(-90deg);
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
/* Subtle 1.5px shadow instead of the previous 5px glow — the
needle reads as an industrial pointer rather than a neon stripe. */
filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}
.x99-order-configure-bw-gauge-needle {
/* True red (Tailwind red-600) instead of the salmon `var(--c-accent-warm)`
used elsewhere — the pointer wants more weight than the
accent text it lives next to. */
fill: var(--c-accent);
}
.x99-order-configure-bw-gauge-hub {
fill: var(--c-accent);
/* No coloured glow — same drop-shadow as the needle keeps the
hub looking like a riveted pivot. */
filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}
/* Unit labels sit between the arc and the hub, MPH/KM-H style. The
primary line uses the same digital-clock face as the greeting
counters; the secondary line spells the unit out in tiny grotesk. */
.x99-order-configure-bw-gauge-unit {
font-family: "Share Tech Mono", "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.18em;
fill: rgba(var(--text-rgb), 0.7);
text-transform: uppercase;
pointer-events: none;
user-select: none;
}
.x99-order-configure-bw-gauge-unit-sub {
font-size: 5.5px;
font-weight: 600;
letter-spacing: 0.1em;
fill: rgba(var(--text-rgb), 0.32);
text-transform: uppercase;
pointer-events: none;
user-select: none;
}
/* Scale labels under the gauge — small, tabular-nums so the digits
don't jitter when the product's port speed changes. */
/* (Legacy 0/Max scale wrapper removed — labels now live inside the
SVG via the `.x99-order-configure-bw-gauge-label` elements,
one per tier, anchored to the corresponding tick's angle.) */
.x99-order-configure-bw-hint {
margin: 2px 0 0;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(var(--text-rgb), 0.4);
text-align: center;
}
.x99-order-configure-bw .x99-order-configure-bw-slider {
width: 100%;
max-width: 420px;
}
.x99-order-configure-bw-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: rgba(var(--text-rgb), 0.14); /* track empty mais visível em light cream */
border-radius: 4px;
outline: none;
cursor: pointer;
/* Inline gradient is painted by JS as the slider moves, so the track
fills with red up to the active thumb position. */
}
.x99-order-configure-bw-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--c-accent-warm);
cursor: pointer;
box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.22);
transition: box-shadow 0.15s ease;
}
.x99-order-configure-bw-slider::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.32);
}
.x99-order-configure-bw-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--c-accent-warm);
cursor: pointer;
border: none;
box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.22);
}
.x99-order-configure-bw-slider::-moz-range-thumb:hover {
box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.32);
}
.x99-order-configure-bw-display {
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
text-align: center;
}
.x99-order-configure-bw-current {
font-size: 15px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.95);
letter-spacing: -0.01em;
}
.x99-order-configure-bw-price {
font-size: 12.5px;
font-weight: 600;
color: var(--c-accent-warm);
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.x99-order-configure-bw-price.is-free {
color: rgba(134, 239, 172, 0.9);
font-weight: 500;
}
/* ─── Additional IPs counter ──────────────────────────────────────────── */
.x99-order-configure-ips {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 14px 16px 18px;
}
.x99-order-configure-ips-counter {
display: inline-flex;
align-items: center;
gap: 18px;
}
.x99-order-configure-ips-btn {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: rgba(var(--text-rgb), 0.04);
border: 1px solid rgba(var(--text-rgb), 0.1);
border-radius: 50%;
color: rgba(var(--text-rgb), 0.85);
font-size: 20px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.x99-order-configure-ips-btn:hover:not(:disabled) {
background: rgba(var(--danger-rgb), 0.1);
border-color: rgba(var(--danger-rgb), 0.35);
color: var(--c-accent-warm);
}
.x99-order-configure-ips-btn:active:not(:disabled) {
transform: scale(0.96);
}
.x99-order-configure-ips-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
/* Large upright bold counter — no badge / italic; reads as a clean
numeric centerpiece with the –/+ controls framing it. */
.x99-order-configure-ips-value {
min-width: 72px;
padding: 0 8px;
background: transparent;
color: rgba(var(--text-rgb), 0.98);
font-weight: 800;
font-size: 44px;
line-height: 1;
letter-spacing: -0.02em;
text-align: center;
font-variant-numeric: tabular-nums;
}
.x99-order-configure-ips-subtitle {
font-size: 12.5px;
font-weight: 500;
color: rgba(var(--text-rgb), 0.65);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.x99-order-configure-ips-price {
margin-top: 2px;
font-size: 12.5px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.7);
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
/* 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(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 0.08);
border-radius: 10px;
color: rgba(var(--text-rgb), 0.75);
cursor: pointer;
text-align: center;
transition: all 0.15s ease;
}
.x99-order-configure-cycle:hover {
background: rgba(var(--text-rgb), 0.04);
border-color: rgba(var(--text-rgb), 0.18);
color: rgba(var(--text-rgb), 0.95);
}
.x99-order-configure-cycle.active {
background: rgba(var(--danger-rgb), 0.1);
border-color: rgba(var(--danger-rgb), 0.35);
color: var(--c-accent-warm);
}
.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);
/* The aside hosts two stacked cards (summary + share) — same gap
as the form sections on the left so the visual rhythm is
consistent across columns. */
display: flex;
flex-direction: column;
gap: 12px;
}
.x99-order-configure-summary-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px;
background: rgba(var(--text-rgb), 0.025);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 14px;
}
/* Share configuration card — mirrors the summary + form-section
surface tokens (18px padding, 10px gap, 11px uppercase title with
dashed divider). All three boxes line up vertically with the same
rhythm so the right column reads as a coherent stack. */
.x99-order-configure-share-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px;
background: rgba(var(--text-rgb), 0.025);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 14px;
}
.x99-order-configure-share-head {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(var(--text-rgb), 0.05);
}
.x99-order-configure-share-title {
margin: 0;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(var(--text-rgb), 0.95);
}
.x99-order-configure-share-hint {
margin: 0;
font-size: 11.5px;
color: rgba(var(--text-rgb), 0.5);
line-height: 1.5;
}
.x99-order-configure-share-row {
display: flex;
align-items: stretch;
gap: 6px;
margin-top: 2px;
}
.x99-order-configure-share-input {
flex: 1 1 auto;
min-width: 0;
padding: 8px 10px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(var(--text-rgb), 0.08);
border-radius: 8px;
color: rgba(var(--text-rgb), 0.85);
font-size: 11.5px;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
letter-spacing: -0.01em;
text-overflow: ellipsis;
}
.x99-order-configure-share-input:focus {
outline: none;
border-color: rgba(var(--danger-rgb), 0.4);
background: rgba(0, 0, 0, 0.4);
}
.x99-order-configure-share-copy {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
background: rgba(var(--text-rgb), 0.06);
border: 1px solid rgba(var(--text-rgb), 0.1);
border-radius: 8px;
color: rgba(var(--text-rgb), 0.85);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.x99-order-configure-share-copy:hover {
background: rgba(var(--danger-rgb), 0.12);
border-color: rgba(var(--danger-rgb), 0.35);
color: var(--c-accent-warm);
}
.x99-order-configure-share-copy.is-copied {
background: rgba(134, 239, 172, 0.12);
border-color: rgba(134, 239, 172, 0.35);
color: #86efac;
}
/* Out-of-stock banner shown when the share link points at a product
that's no longer available. Uses the red/orange accent so it lands
as a warning, not as an error. */
.x99-order-configure-share-warning {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 12px 16px;
background: rgba(var(--danger-rgb), 0.08);
border: 1px solid rgba(var(--danger-rgb), 0.32);
border-radius: 10px;
color: #fecaca;
font-size: 13px;
line-height: 1.4;
}
.x99-order-configure-share-warning svg {
flex-shrink: 0;
color: var(--c-accent-warm);
}
.x99-order-configure-share-warning-cta {
margin-left: auto;
font-size: 12px;
font-weight: 600;
color: var(--c-accent-warm);
text-decoration: none;
white-space: nowrap;
}
.x99-order-configure-share-warning-cta:hover {
text-decoration: underline;
}
.x99-order-configure-summary-head {
padding-bottom: 8px;
border-bottom: 1px dashed rgba(var(--text-rgb), 0.05);
}
.x99-order-configure-summary-title {
font-size: 11px;
font-weight: 600;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.92);
line-height: 1.35;
}
/* Hardware quick-info list (CPU / RAM / Storage / Network) shown above
the live selections in the configure summary card. Sober dark-glass:
small icon + value, sits flush with the rest of the card content. */
.x99-order-configure-summary-hw {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
/* Per-row dashed divider — same token used across the right column
(summary rows + section heads) so the rhythm is consistent. The
last row drops its own border so the list doesn't double-up with
the next sibling block (`.summary-rows`) below. */
.x99-order-configure-summary-hw-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: 12.5px;
font-weight: 500;
color: rgba(var(--text-rgb), 0.88);
line-height: 1.3;
border-bottom: 1px dashed rgba(var(--text-rgb), 0.05);
}
.x99-order-configure-summary-hw-row:last-child {
border-bottom: none;
}
.x99-order-configure-summary-hw-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(var(--text-rgb), 0.45);
flex-shrink: 0;
width: 16px;
}
.x99-order-configure-summary-hw-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x99-order-configure-summary-hw-meta {
margin-left: 6px;
font-size: 11px;
font-weight: 500;
color: rgba(var(--text-rgb), 0.45);
letter-spacing: 0.02em;
}
.x99-order-configure-summary-tag {
font-size: 11px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 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(var(--text-rgb), 0.5);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.x99-order-configure-summary-row-val {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 12px;
color: rgba(var(--text-rgb), 0.9);
font-weight: 500;
text-align: right;
}
/* Secondary price hint rendered after the row value (e.g. "+ R$ 999,00"
next to the bandwidth tier). Tabular-nums so the digits don't jitter
when tiers change. */
.x99-order-configure-summary-row-hint {
font-size: 11px;
font-weight: 600;
color: var(--c-accent-warm);
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
}
.x99-order-configure-summary-row-hint.is-free {
color: rgba(134, 239, 172, 0.85);
font-weight: 500;
}
.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(var(--text-rgb), 0.1);
}
.x99-order-configure-summary-total-lbl {
font-size: 13px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.85);
}
.x99-order-configure-summary-total-val {
font-size: 18px;
font-weight: 700;
color: rgba(var(--text-rgb), 0.98);
letter-spacing: -0.01em;
}
.x99-order-configure-summary-total-per {
font-size: 11px;
font-weight: 400;
color: rgba(var(--text-rgb), 0.45);
margin-left: 2px;
}
.x99-order-configure-submit {
width: 100%;
margin-top: 4px;
}
.x99-order-configure-summary-error {
padding: 10px 12px;
background: rgba(var(--danger-rgb), 0.08);
border: 1px solid rgba(var(--danger-rgb), 0.2);
border-radius: 10px;
color: var(--c-accent-warm);
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(var(--text-rgb), 0.05);
}
.x99-order-checkout-title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.95);
letter-spacing: -0.02em;
}
.x99-order-checkout-sub {
margin: 0;
font-size: 13px;
color: rgba(var(--text-rgb), 0.5);
}
/* Empty cart */
.x99-order-checkout-empty {
padding: 48px 32px;
text-align: center;
background: rgba(var(--text-rgb), 0.02);
border: 1px dashed rgba(var(--text-rgb), 0.08);
border-radius: 14px;
color: rgba(var(--text-rgb), 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;
}
/* "Your server" card — adopts the configure step's surface tokens
(18px padding, 10px gap, 0.025 background, dashed divider under
the title) so the user moves between steps without a visual jolt. */
.x99-order-checkout-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px;
background: rgba(var(--text-rgb), 0.025);
border: 1px solid rgba(var(--text-rgb), 0.06);
border-radius: 14px;
}
.x99-order-checkout-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px dashed rgba(var(--text-rgb), 0.05);
}
/* Header kicker — sentence-case "servidor em ". The
accent span picks up the step-1 slot-machine tint (`var(--c-accent-warm)`) so the
wizard reads as a single visual thread. The city is mildly bolded to
emphasise the "where" without competing with the type accent. */
.x99-order-checkout-card-kicker {
font-size: 14px;
font-weight: 500;
color: rgba(var(--text-rgb), 0.78);
letter-spacing: 0.01em;
text-transform: none;
}
.x99-order-checkout-kicker-accent {
color: var(--c-accent); /* main accent saturado (rose/red) */
font-weight: 600;
}
.x99-order-checkout-kicker-city {
color: rgba(var(--text-rgb), 0.96);
font-weight: 600;
}
.x99-order-checkout-edit {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: transparent;
border: 1px solid rgba(var(--text-rgb), 0.08);
border-radius: 7px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.92);
border-color: rgba(var(--text-rgb), 0.18);
background: rgba(var(--text-rgb), 0.04);
text-decoration: none;
outline: none;
}
/* Identity text — brand logo above (small) + CPU name below. Lives in
the top-left cell of the 4×2 `.idrow` grid and spans 2 columns, so
the CPU name has room to breathe while the hwcards keep a uniform
narrow width. The cell is `display: flex` vertical so the brandline
floats above the CPU name as a tiny header mark. */
.x99-order-checkout-identity-text {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
min-width: 0;
padding: 4px 2px;
}
.x99-order-checkout-cpu {
font-size: 16px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.95);
line-height: 1.2;
letter-spacing: -0.01em;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Configure-header variant of the BM card's cpumeta pill — slightly
larger to match the bigger surface area of the header, and the
.x99-order-bmcard-cpumeta-word / -n pair lays out the kicker / value
so the word wraps gracefully on narrow viewports. */
.x99-order-configure-cpumeta {
font-size: 13px;
padding: 7px 12px;
}
.x99-order-bmcard-cpumeta-n {
font-weight: 700;
color: inherit;
}
.x99-order-bmcard-cpumeta-word {
margin-left: 5px;
font-size: 0.78em;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(var(--text-rgb), 0.45);
}
/* High / eco / mid tiers — their colour lives on the whole .ghz chip,
but the uppercase word label keeps its muted grey so the number
leads visually. */
.x99-order-bmcard-cpumeta-ghz .x99-order-bmcard-cpumeta-word {
color: rgba(var(--text-rgb), 0.45);
}
/* 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;
}
/* ─── 4×2 compact grid — every fact lives in an identical hwcard ──────
Grid areas:
row 1: [identity identity] [os] [data]
row 2: [cpu] [ram] [storage] [network]
The identity cell spans 2 cols on row 1 so the full CPU name fits
without truncation; row 2 lays down the CPU meta card + RAM +
Storage + Network in the 4 slots. All 6 spec cards share the same
width (1fr) and stretch to the same height (grid `align-items:
stretch`), matching the user's "same shape" requirement. */
.x99-order-checkout-idrow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-areas:
"identity identity os data"
"cpu ram storage network";
gap: 6px;
align-items: stretch;
min-width: 0;
}
.x99-order-checkout-identity-text { grid-area: identity; }
.x99-order-checkout-hwcard--cpu { grid-area: cpu; }
.x99-order-checkout-hwcard--ram { grid-area: ram; }
.x99-order-checkout-hwcard--storage { grid-area: storage; }
.x99-order-checkout-hwcard--network { grid-area: network; }
.x99-order-checkout-hwcard--os { grid-area: os; }
.x99-order-checkout-hwcard--data { grid-area: data; }
/* Card shell — title-less variant. Icon + value inline, single line,
ellipsises overflow so every card holds the exact same footprint
regardless of content length. The `min-height` is calibrated so
the CPU-meta card (with its `cores / threads / clock` word labels
inside) matches the height of the simpler RAM / Storage / Network
cards on the same row. */
.x99-order-checkout-hwcard {
display: flex;
align-items: center;
padding: 6px 10px;
background: rgba(var(--text-rgb), 0.025);
border: 1px solid rgba(var(--text-rgb), 0.08);
border-radius: 10px;
min-width: 0;
min-height: 36px;
}
.x99-order-checkout-hwcard-v {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.95);
line-height: 1.2;
min-width: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.x99-order-checkout-hwcard-v > svg {
color: rgba(var(--text-rgb), 0.55);
flex-shrink: 0;
}
.x99-order-checkout-hwcard-v > span:not([class]),
.x99-order-checkout-hwcard-v > .x99-order-checkout-cpumeta-inline {
overflow: hidden;
text-overflow: ellipsis;
}
/* OS icon inside the hwcard value — smaller than the section icon
variant since the whole card is compact. */
.x99-order-checkout-hwcard-v-osicon {
width: 14px;
height: 14px;
object-fit: contain;
flex-shrink: 0;
}
/* Country flag inside the Location hwcard (used by the configure step
header — the checkout no longer has a Location card, but the
class is shared so the flag image stays sized to a 16×16 mark and
doesn't render at its native 512×512 PNG resolution).
The flag PNG has no text baseline so the parent's default
`align-items: baseline` would float the image above the city name's
x-height. We center-align the bundle vertically AND nudge the flag
down with `vertical-align: middle` so the icon and the glyphs share
a true visual midline. */
.x99-order-checkout-hwcard-v-flag {
width: 16px;
height: 16px;
object-fit: contain;
border-radius: 2px;
flex-shrink: 0;
vertical-align: middle;
}
.x99-order-checkout-hwcard-v:has(.x99-order-checkout-hwcard-v-flag),
.x99-order-checkout-hwgrid .x99-order-checkout-hwcard-v:has(.x99-order-checkout-hwcard-v-flag) {
align-items: center;
}
/* ─── Configure page hwgrid ────────────────────────────────────────────
The checkout step lays cards out via `.x99-order-checkout-idrow`'s
grid, but the configure step still uses an explicit `.hwgrid`
container alongside its identity column. We restore the grid
tokens here so the four cards on the configure header
(RAM / Storage / Network / Location) sit on a single row instead of
stacking. The override at `.x99-order-configure-idrow .hwgrid`
already widens the columns; this rule supplies the base. */
.x99-order-checkout-hwgrid {
display: grid;
grid-template-columns: repeat(4, minmax(96px, auto));
gap: 8px;
flex: 0 0 auto;
min-width: 0;
}
.x99-order-checkout-hwgrid .x99-order-checkout-hwcard {
/* Configure-step cards keep the original two-row anatomy
(icon + label header on top, value below) — they don't share
the checkout's compact title-less variant. */
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px 12px;
min-height: 0;
}
.x99-order-checkout-hwgrid .x99-order-checkout-hwcard-v {
width: auto;
white-space: normal;
overflow: visible;
align-items: baseline;
}
.x99-order-checkout-hwgrid .x99-order-checkout-hwcard-head {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 600;
color: rgba(var(--text-rgb), 0.55);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.x99-order-checkout-hwgrid .x99-order-checkout-hwcard-head svg {
color: rgba(var(--text-rgb), 0.55);
flex-shrink: 0;
}
/* DDR kicker pill inside the RAM card stays compact. */
.x99-order-checkout-hwcard--ram .x99-order-bmcard-spec-k {
flex-shrink: 0;
}
/* CPU meta inline (checkout) — abbreviated form. Numbers + units
only, no kicker words; the BM list card uses the longer variant
because it's a discovery surface, the checkout card needs the
tightest footprint to share the row with RAM / Storage / Network. */
.x99-order-checkout-cpumeta-inline {
display: inline-flex;
align-items: baseline;
gap: 3px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.x99-order-checkout-cpumeta-inline .sep {
color: rgba(var(--text-rgb), 0.35);
margin: 0 1px;
}
/* Brandline inside the identity cell — small mark above the CPU name. */
.x99-order-checkout-identity-text .x99-order-bmcard-brandline {
display: inline-flex;
align-items: center;
line-height: 1;
}
.x99-order-checkout-identity-text .x99-order-bmcard-brandlogo {
height: 13px;
width: auto;
}
@media (max-width: 900px) {
.x99-order-checkout-idrow {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"identity identity"
"cpu ram"
"storage network"
"os data";
}
}
.x99-order-bmcard-spec--cycle .x99-order-bmcard-spec-v {
padding: 3px 9px;
background: rgba(var(--danger-rgb), 0.12);
border: 1px solid rgba(var(--danger-rgb), 0.28);
border-radius: 9px; /* squircle */
color: var(--c-accent-warm);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
/* Hostname pill — inline monospace value under the specs */
/* ─── Hostname inline editor (checkout step) ─────────────────────────────
View mode: kicker label + monospace value + small "Editar" trigger.
Edit mode: input + save/cancel buttons inline. Validation hint sits
below the row; appears in red when the user submits an invalid value. */
.x99-order-checkout-hostname {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px;
background: rgba(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 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(var(--text-rgb), 0.45);
flex-shrink: 0;
}
.x99-order-checkout-hostname-view,
.x99-order-checkout-hostname-edit-mode {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.x99-order-checkout-hostname-view.hidden,
.x99-order-checkout-hostname-edit-mode.hidden,
.x99-order-checkout-hostname-err.hidden { display: none !important; }
.x99-order-checkout-hostname-v {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
color: rgba(var(--text-rgb), 0.92);
background: transparent;
padding: 0;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.x99-order-checkout-hostname-edit {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: transparent;
border: 1px solid rgba(var(--text-rgb), 0.1);
border-radius: 6px;
color: rgba(var(--text-rgb), 0.65);
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.x99-order-checkout-hostname-edit:hover,
.x99-order-checkout-hostname-edit:focus {
color: var(--c-accent-warm);
border-color: rgba(var(--danger-rgb), 0.32);
background: rgba(var(--danger-rgb), 0.05);
outline: none;
}
.x99-order-checkout-hostname-input {
flex: 1;
min-width: 0;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(var(--text-rgb), 0.12);
border-radius: 6px;
color: rgba(var(--text-rgb), 0.95);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
outline: none;
transition: border-color 0.15s ease;
}
.x99-order-checkout-hostname-input:focus {
border-color: rgba(var(--danger-rgb), 0.4);
}
.x99-order-checkout-hostname-save,
.x99-order-checkout-hostname-cancel {
padding: 6px 10px;
border: 1px solid rgba(var(--text-rgb), 0.1);
border-radius: 6px;
font-size: 11px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.x99-order-checkout-hostname-save {
background: rgba(var(--danger-rgb), 0.12);
border-color: rgba(var(--danger-rgb), 0.4);
color: var(--c-accent-warm);
}
.x99-order-checkout-hostname-save:hover { background: rgba(var(--danger-rgb), 0.2); }
.x99-order-checkout-hostname-save:disabled,
.x99-order-checkout-hostname-cancel:disabled { opacity: 0.5; cursor: wait; }
.x99-order-checkout-hostname-cancel {
background: transparent;
color: rgba(var(--text-rgb), 0.6);
}
.x99-order-checkout-hostname-cancel:hover {
color: rgba(var(--text-rgb), 0.92);
border-color: rgba(var(--text-rgb), 0.2);
}
.x99-order-checkout-hostname-err {
flex-basis: 100%;
margin: 4px 0 0;
font-size: 11px;
color: var(--c-accent-warm);
line-height: 1.4;
}
/* 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(var(--text-rgb), 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(var(--text-rgb), 0.02);
border: 1px solid rgba(var(--text-rgb), 0.08);
border-radius: 10px;
color: rgba(var(--text-rgb), 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(var(--text-rgb), 0.04);
border-color: rgba(var(--text-rgb), 0.18);
color: rgba(var(--text-rgb), 0.98);
outline: none;
}
.x99-order-checkout-gw.active {
background: rgba(var(--danger-rgb), 0.12);
border-color: rgba(var(--danger-rgb), 0.42);
color: var(--c-accent-warm);
}
.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(var(--text-rgb), 0.65);
transition: color 0.15s ease;
}
.x99-order-checkout-gw.active .x99-order-checkout-gw-icon {
color: var(--c-accent-warm);
}
.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