/*
 * The plan configurator of /order/radio and /order/video (both brands): the web hosting order page's
 * design (order/hosting, its inline .ho-* rules) for a product that is a plan and a billing cycle.
 * Plan, then cycle, on the left; the order and its total on a sticky card on the right.
 *
 * Each page sets its brand accent on .oc-scope (--oc-brand, --oc-brand-rgb, --oc-brand-600); the
 * rest follows the theme toggle (data-theme on <html>) and the system colour scheme. Drawn by
 * shared/order/js/configurator/picker.js.
 */
.oc-scope {
    --oc-brand: #40a2f9;
    --oc-brand-rgb: 64, 162, 249;
    --oc-brand-600: #2b86d8;
    --oc-card: #ffffff; --oc-card-2: #f7f9fd;
    --oc-text: #0f1729; --oc-muted: #5b6b8c; --oc-ring: #e4e9f2; --oc-on-brand: #ffffff;
    --oc-ok: #0b7a43; --oc-bad: #c62828;
    color: var(--oc-text);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .oc-scope {
        --oc-card: #1a1f2e; --oc-card-2: #151a25;
        --oc-text: #eef2fb; --oc-muted: #94a3bd; --oc-ring: rgba(255,255,255,.10);
        --oc-ok: #4ade80; --oc-bad: #f87171;
    }
}
:root[data-theme="dark"] .oc-scope {
    --oc-card: #1a1f2e; --oc-card-2: #151a25;
    --oc-text: #eef2fb; --oc-muted: #94a3bd; --oc-ring: rgba(255,255,255,.10);
    --oc-ok: #4ade80; --oc-bad: #f87171;
}
.oc-scope { display: block; max-width: 1120px; margin: 0 auto; padding: 2.25rem 1rem 3.5rem; box-sizing: border-box;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.oc-scope *, .oc-scope *::before, .oc-scope *::after { box-sizing: border-box; }
.oc-hero { text-align: center; margin-bottom: 1.75rem; }
.oc-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 999px;
    background: rgba(var(--oc-brand-rgb), .12); color: var(--oc-brand); font-size: .8125rem; font-weight: 600; }
.oc-hero h1 { margin: .9rem 0 .5rem; font-size: 2.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--oc-text); }
.oc-hero p { max-width: 42rem; margin: 0 auto; font-size: 1rem; line-height: 1.6; color: var(--oc-muted); }

.oc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.oc-steps { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.oc-card { background: var(--oc-card); border: 1px solid var(--oc-ring); border-radius: 1rem; padding: 1.25rem 1.25rem 1.35rem;
    box-shadow: 0 1px 2px rgba(15,23,41,.04); }
.oc-card h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; color: var(--oc-text); }
.oc-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; flex: none;
    border-radius: 50%; background: rgba(var(--oc-brand-rgb), .12); color: var(--oc-brand); font-size: .8rem; font-weight: 800; }

.oc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.oc-cycles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.oc-option { position: relative; display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: .95rem 1rem;
    border: 1px solid var(--oc-ring); border-radius: .85rem; background: var(--oc-card-2); cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s; }
.oc-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.oc-option:hover { border-color: rgba(var(--oc-brand-rgb), .55); }
.oc-option.on { border-color: var(--oc-brand); box-shadow: 0 0 0 1px var(--oc-brand); background: var(--oc-card); }
.oc-option:has(input:focus-visible) { outline: 2px solid var(--oc-brand); outline-offset: 2px; }
.oc-option-name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-weight: 700; font-size: .95rem; color: var(--oc-text); }
.oc-option-price { color: var(--oc-muted); font-size: .85rem; }
.oc-option-price b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--oc-text); }
.oc-option-keys { font-size: .8rem; line-height: 1.45; color: var(--oc-muted); }
.oc-save, .oc-badge { padding: .1rem .45rem; border-radius: 999px; background: rgba(var(--oc-brand-rgb), .12);
    color: var(--oc-brand); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.oc-badge-solid { background: var(--oc-brand); color: var(--oc-on-brand); }
.oc-only { margin: .75rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--oc-muted); }

.oc-summary { position: sticky; top: 1rem; }
.oc-summary h2 { margin-bottom: .35rem; }
.oc-summary-plan { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--oc-text); min-height: 1.5rem; }
.oc-summary-blurb { margin: .2rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--oc-muted); }
.oc-feats { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.oc-feats li { position: relative; padding-left: 1.55rem; font-size: .86rem; line-height: 1.4; color: var(--oc-text); }
.oc-feats li svg { position: absolute; left: 0; top: .08rem; width: 1rem; height: 1rem; color: var(--oc-brand); }
.oc-feats li.oc-strong { font-weight: 700; }
.oc-total { margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--oc-ring); }
.oc-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; }
.oc-total-row + .oc-total-row { margin-top: .35rem; }
.oc-total-row.oc-line { font-weight: 500; font-size: .875rem; color: var(--oc-muted); }
.oc-amt { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; color: var(--oc-text); }
.oc-renew { margin: .3rem 0 0; font-size: .8rem; line-height: 1.45; color: var(--oc-muted); }
.oc-renew-save { color: var(--oc-brand); font-weight: 600; }
.oc-trial { margin: .8rem 0 0; padding: .7rem .85rem; border-radius: .7rem; background: rgba(var(--oc-brand-rgb), .10);
    font-size: .82rem; line-height: 1.5; color: var(--oc-text); }
.oc-trial b { color: var(--oc-brand); }
.oc-cta { display: block; width: 100%; margin-top: 1.1rem; padding: .85rem 1rem; border: 0; border-radius: .7rem; cursor: pointer;
    background: var(--oc-brand); color: var(--oc-on-brand); font: inherit; font-weight: 700; font-size: .98rem; transition: background .15s; }
.oc-cta:hover { background: var(--oc-brand-600); }
.oc-cta:disabled { opacity: .55; cursor: default; }
.oc-cta:focus-visible { outline: 2px solid var(--oc-text); outline-offset: 2px; }
.oc-cta-error { margin: .6rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--oc-bad); }
.oc-fine { margin: .75rem 0 0; font-size: .78rem; line-height: 1.45; text-align: center; color: var(--oc-muted); }
.oc-foot-note { margin: 1.6rem auto 0; max-width: 46rem; text-align: center; font-size: .82rem; line-height: 1.55; color: var(--oc-muted); }
.oc-foot-note a, .oc-only a { color: var(--oc-brand); font-weight: 600; }

.oc-error { padding: .9rem 1rem; border: 1px solid var(--oc-bad); border-radius: .85rem; color: var(--oc-text); grid-column: 1 / -1; }
.oc-error p { margin: 0 0 .6rem; font-size: .9rem; }
.oc-retry { padding: .5rem 1rem; border: 1px solid var(--oc-ring); border-radius: .6rem; background: var(--oc-card); color: var(--oc-text); font: inherit; font-weight: 600; cursor: pointer; }
.oc-skel { display: block; border-radius: .85rem; background: linear-gradient(90deg, var(--oc-ring), var(--oc-card-2), var(--oc-ring));
    background-size: 200% 100%; animation: oc-shimmer 1.3s ease-in-out infinite; }
.oc-plans .oc-skel { height: 6.6rem; }
.oc-cycles .oc-skel { height: 5.4rem; }
.oc-feats .oc-skel { height: .9rem; }
@keyframes oc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .oc-skel { animation: none; } }

/* The same summary card inside the checkout steps' panel (shared/order/js/configurator/summary.js): no page padding,
   not sticky, the panel decides the width. */
.oc-scope.oc-embed { width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; }
.oc-scope.oc-embed .oc-summary { position: static; }
.oc-host { background: transparent !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; min-width: 0 !important; }
/* The checkout panel sizes itself to its content (order/style index.css .panel), so the card's longer lines widened it
   and squeezed the billing form. Holding the card, it keeps the order page's summary width; the form takes the rest,
   in a box with the card's corners. */
.panel:has(.oc-embed) { flex: 0 0 440px; width: 440px; max-width: 440px; min-width: 0; }
/* The checkout caps the panel at the viewport's height and scrolls the preview inside it (order/style index.css
   #billing-information-container .panel): holding the card, the panel takes the card's own height instead, so the
   whole plan shows with no box to scroll. The card is set a little tighter there. */
#billing-information-container .panel:has(.oc-embed), .panel:has(.oc-embed) { max-height: none !important; }
.panel #preview-container.oc-host { overflow: visible !important; flex: 0 0 auto !important; min-height: 0 !important; max-height: none !important; }
.oc-scope.oc-embed .oc-card { padding: 1.1rem 1.15rem 1.15rem; }
.oc-scope.oc-embed .oc-feats { margin-top: .8rem; gap: .38rem; }
.oc-scope.oc-embed .oc-feats li { font-size: .84rem; line-height: 1.35; }
.oc-scope.oc-embed .oc-details { margin-top: .7rem; padding-top: .6rem; }
.oc-scope.oc-embed .oc-total-row.oc-line { font-size: .84rem; }
.oc-scope.oc-embed .oc-total-row + .oc-total-row { margin-top: .2rem; }
.oc-scope.oc-embed .oc-trial { font-size: .8rem; padding: .6rem .75rem; }
body:has(.oc-embed) .left-side-container .left-side-content { border-radius: 1rem; box-shadow: 0 1px 2px rgba(15,23,41,.04); }
@media (max-width: 1024px) {
    .panel:has(.oc-embed) { flex: 1 1 auto; width: 100%; max-width: 100%; }
}
.oc-details { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--oc-ring); }
.oc-total.oc-total-first { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 900px) {
    .oc-grid { grid-template-columns: minmax(0, 1fr); }
    .oc-summary { position: static; }
}
@media (max-width: 640px) {
    .oc-scope { padding-top: 1.5rem; }
    .oc-hero h1 { font-size: 1.65rem; }
    .oc-plans { grid-template-columns: minmax(0, 1fr); }
    .oc-plans .oc-skel { height: 4.6rem; }
    .oc-card { padding: 1.1rem 1rem 1.2rem; }
}
@media (max-width: 400px) {
    .oc-cycles { grid-template-columns: minmax(0, 1fr); }
}