/* ===========================================================================
   The create page: one form, a choice of plan, and a summary that shows the
   price before anything is bought
   ---------------------------------------------------------------------------
   Loaded after main.css by vps-ordering.php, load-balancer-ordering.php,
   object-storage-ordering.php, reseller-ordering.php and reseller-manage.php.

   THE LAYOUT IS ms-configure.php's, LIFTED RATHER THAN REINVENTED. Managed
   services was the one shop on this site already laid out the way a cloud
   console lays out "create": the choices on the left in labelled panels, and
   a sticky "Your order" on the right carrying the total and the one button.
   The other shops put a whole form inside every plan card -- fourteen of them
   on the VPS page, each with its own SSH key box -- which is a price list with
   forms attached, not a place to configure something. The values below are
   ms.css's, so the two read as one design.

   WHY A SHARED FILE, WHEN ms.css's HEADER ARGUES FOR PREFIXED ONES. Its
   argument is that a class called `web-*` on a managed-services page lies
   about what it rides on. That holds for product styling. It does not hold for
   the create-page shell, which is the same on every product by intent; four
   copies of it would drift, and drift is the bug the customer sees. So the
   shell is here with a neutral prefix, and anything product-specific stays in
   the product's own file.

   THE PLAN PICKER IS A RADIO GROUP, NOT A ROW OF BUTTONS. One plan is chosen
   at a time, keyboard arrows move between them, and with JavaScript off the
   form still posts the plan the customer picked. main.css hides every radio
   and draws its own circle on `input + label:before`; the input here sits
   INSIDE its label, so that rule never matches and the card is the control.

   Nothing here is a new colour and nothing is a new breakpoint.
   =========================================================================== */

:root {
    --order-panel:       rgba(255, 255, 255, 0.045);
    --order-panel-hover: rgba(255, 255, 255, 0.075);
    --order-line:        rgba(255, 255, 255, 0.13);
    --order-line-strong: rgba(255, 255, 255, 0.3);
    --order-muted:       rgba(255, 255, 255, 0.62);
    --order-faint:       rgba(255, 255, 255, 0.42);
    --order-accent:      #9bf1ff;
    --order-accent-deep: #53e3fb;
    --order-good:        #87c5a4;
    --order-warn:        #e7b788;
    --order-bad:         #ec8d81;
    --order-radius:      10px;
    --order-radius-lg:   14px;
}

.order-page .inner { max-width: 1400px; }

.order-breadcrumb {
    margin-top: -1rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--order-muted);
}

.order-lede {
    max-width: 70ch;
    color: var(--order-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

/* --- notices ------------------------------------------------------------- */

.order-notice {
    border: 1px solid var(--order-line);
    border-left-width: 4px;
    border-radius: var(--order-radius);
    background: var(--order-panel);
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

.order-notice-good { border-left-color: var(--order-good); }
.order-notice-warn { border-left-color: var(--order-warn); }
.order-notice-bad  { border-left-color: var(--order-bad); }
.order-notice p:last-child { margin-bottom: 0; }

/* --- what you already have ---------------------------------------------- */

.order-existing {
    border: 1px solid var(--order-line);
    border-radius: var(--order-radius-lg);
    background: var(--order-panel);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0 0;
}

.order-existing h2 { font-size: 1rem; margin: 0 0 0.75rem; }
.order-existing ul { list-style: none; margin: 0; padding: 0; }

.order-existing li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--order-line);
}

.order-existing li:first-child { border-top: 0; }
.order-existing-name { font-weight: 600; }
.order-existing-meta { color: var(--order-muted); font-size: 0.86rem; }
.order-existing-action { margin-left: auto; }

/* --- "need something else?" ----------------------------------------------
   A second, plainer form under the catalogue: the enquiry that prices what no
   plan covers (reseller-ordering.php). No summary panel -- nothing is charged,
   so there is no total to show -- and the same panel treatment as the list
   above, so it reads as part of the page rather than a different site. */

.order-enquiry {
    border: 1px solid var(--order-line);
    border-radius: var(--order-radius-lg);
    background: var(--order-panel);
    padding: 1.25rem 1.5rem;
    margin: 2.5rem 0 0;
}

.order-enquiry h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.order-enquiry-form .order-fieldset { margin-top: 1rem; }

/* --- the configure grid -------------------------------------------------- */

.order-configure {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: 2.5rem;
}

@media screen and (max-width: 980px) {
    .order-configure { grid-template-columns: 1fr; }
}

/* LET THE COLUMNS SHRINK. A grid item's min-width defaults to auto -- its
   widest content -- so one wide child (the VPS plan TABLE, nowrap, seven
   columns) widened the whole left column past its panel instead of
   scrolling inside the .vps-table-wrap that exists to scroll it. Seen
   2026-10-16 on a tablet: 14-83px out of the panel at 1024-1138px, and the
   whole page 294px wider than a phone. min-width: 0 lets overflow-x: auto on
   the wrapper do its job. */
.order-configure > * { min-width: 0; }

.order-fieldset {
    border: 1px solid var(--order-line);
    border-radius: var(--order-radius-lg);
    background: var(--order-panel);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
    min-width: 0;
}

.order-fieldset legend {
    padding: 0 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--order-accent);
}

.order-field-note {
    display: block;
    margin: -0.4rem 0 1.1rem;
    color: var(--order-faint);
    font-size: 0.82rem;
    line-height: 1.5;
}

.order-field-note:last-child { margin-bottom: 0; }

.order-fieldset > select,
.order-fieldset > input[type="text"],
.order-fieldset > textarea,
.order-fieldset .order-row > div > select,
.order-fieldset .order-row > div > input { margin-bottom: 1.1rem; }

.order-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0 1rem;
}

.order-mono {
    font-family: "Courier New", monospace;
    font-size: 0.9em;
}

.order-muted { color: var(--order-muted); }

/* --- the plan picker ----------------------------------------------------- */

.order-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.9rem;
    margin: 0 0 0.5rem;
}

/* The card IS the label. Reset everything main.css does to labels: they are
   field captions there, uppercase and spaced, which would shout a plan name. */
label.order-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--order-line);
    border-radius: var(--order-radius);
    background: transparent;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

label.order-choice:hover { background: var(--order-panel-hover); border-color: var(--order-line-strong); }

/* Visually hidden, still focusable and still announced. */
label.order-choice input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    float: none;
    z-index: 0;
    cursor: pointer;
}

label.order-choice:has(input:checked) {
    border-color: var(--order-accent);
    background: rgba(155, 241, 255, 0.07);
    box-shadow: inset 0 0 0 1px var(--order-accent);
}

label.order-choice:has(input:focus-visible) {
    outline: 2px solid var(--order-accent-deep);
    outline-offset: 2px;
}

/* A plan that cannot be bought is still shown -- with why -- but it is not a
   radio at all, so it can never be the one posted. */
.order-choice-unavailable {
    cursor: default;
    opacity: 0.6;
}

div.order-choice-unavailable {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px dashed var(--order-line);
    border-radius: var(--order-radius);
    font-size: 0.92rem;
}

.order-choice-name { font-weight: 600; font-size: 1rem; }

.order-choice-price { font-size: 1.15rem; font-weight: 600; color: #fff; }
.order-choice-price small { font-size: 0.78rem; font-weight: 400; color: var(--order-muted); }

.order-choice-spec {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    color: var(--order-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.order-choice-spec li { padding: 0; }
.order-choice-why { color: var(--order-faint); font-size: 0.8rem; line-height: 1.45; }

.order-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--order-line-strong);
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--order-muted);
}

.order-badge-accent { border-color: var(--order-accent); color: var(--order-accent); }
.order-badge-warn   { border-color: var(--order-warn);   color: var(--order-warn); }

/* --- the order summary --------------------------------------------------- */

.order-summary {
    background: var(--order-panel);
    border: 1px solid var(--order-line);
    border-radius: var(--order-radius-lg);
    padding: 1.6rem;
    position: sticky;
    top: 2rem;
}

@media screen and (max-width: 980px) {
    .order-summary { position: static; }
}

.order-summary h2 { margin: 0 0 1.1rem; font-size: 1rem; }

.order-summary dl { margin: 0 0 1.1rem; }

.order-summary dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--order-line);
    font-size: 0.9rem;
}

.order-summary dl > div:first-child { border-top: 0; }
.order-summary dt { color: var(--order-muted); margin: 0; }
.order-summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.order-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--order-line-strong);
    margin: 0 0 0.4rem;
}

.order-summary-total span { color: var(--order-muted); font-size: 0.9rem; }
.order-summary-total strong { font-size: 1.75rem; font-weight: 600; color: #fff; }

.order-summary-then {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.4rem;
    color: var(--order-muted);
    font-size: 0.9rem;
}

.order-summary-note {
    color: var(--order-faint);
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 0.9rem 0 0;
}

.order-summary .button { margin-top: 1rem; }

/* --- the optional extra, folded away ------------------------------------- */

.order-fieldset details > summary {
    cursor: pointer;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.order-fieldset details[open] > summary { margin-bottom: 1.1rem; }

.order-checks { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.order-checks li { margin: 0 0 0.4rem; }

/* A checkbox's label is an answer, not a field caption: main.css's uppercase,
   spaced label style is right above a field and shouts here. */
.order-checks label {
    font-size: 0.92rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0;
}

/* --- the small print ----------------------------------------------------- */

.order-smallprint {
    max-width: 70ch;
    margin-top: 1rem;
    color: var(--order-faint);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* --- controls inside the create form ------------------------------------
   Added 2026-10-16 for the load-balancer page, whose optional setup is the
   first create form to carry selects, number inputs and checkboxes. Shared
   because any product's form will meet the same three things:

   - main.css leaves select and input[type=number] content-box, so at
     width:100% their padding pushes them past the fieldset's edge. Text
     inputs are already border-box, which is why the name field never showed it.
   - main.css spaces controls only as `fieldset > select`; inside a <details>
     they are not direct children and sat flush against the next label.
   - main.css draws a checkbox's label as a field caption -- uppercase, wide
     letter-spacing -- which shouts a sentence like "Check the servers are
     alive". In a list of options it is the option's text, so it reads as text.
   ------------------------------------------------------------------------- */

.order-configure select,
.order-configure input[type="number"] { box-sizing: border-box; }

.order-fieldset details > select,
.order-fieldset details > input { margin-bottom: 1.1rem; }

/* .order-checks label: see the rule beside .order-checks above. */