/* css/wizard-forms.css
 *
 * Replaces AdminLTE/Bootstrap for the guest order wizard (19/09/2026).
 *
 * The wizard's frame (topbar, stepper, panels, summary) has had its own look in
 * css/wizard-shell.css for a while, but the CONTENT of the panels still leaned on
 * adminlte.min.css + css/custom.css for about thirty class names: form-control, btn, the
 * col-md-* grid, a table and a handful of spacing utilities. That is the only reason those two
 * stylesheets are still served to a visitor.
 *
 * This file styles those same class names in the wizard's own visual language, so a page can
 * drop AdminLTE without a single change to its markup -- which matters because
 * includes/partials/wizard/account_step.php is shared by all four wizards. Rewriting its markup
 * would have forced all four to move at once; styling its existing classes lets them move one
 * at a time.
 *
 * Loaded after css/wizard-shell.css, so the --wz-* tokens (accent, ink, background, per brand)
 * are already defined.
 */

/* ---------- the one thing Bootstrap did for everything ----------
 *
 * Bootstrap sets box-sizing: border-box on every element, and the whole wizard was written
 * under that assumption. Dropping AdminLTE dropped that rule too, so an input with width:100%
 * plus 12px of padding and a 1px border came out 26px WIDER than its column: a full-width
 * field spilled slightly out of its card, and two fields side by side ran into each other.
 * That is what looked like "everything sticks together" (Tom, 20/09/2026) -- the gap between
 * the columns was there all along, the fields were simply too wide for it.
 */
body.wizard-body,
body.wizard-body *,
body.wizard-body *::before,
body.wizard-body *::after {
    box-sizing: border-box;
}

/* ---------- fields ---------- */

/* Sized to match the app shell's own fields (.field input in css/app-shell.css): 9px by 12px
   on a 14px face. The wizard ran a size larger, which on a form of ten fields reads as heavy
   rather than generous (Tom, 20/09/2026). */
.wizard-shell .form-control {
    display: block;
    width: 100%;
    /* Sized off the period select on the results row, which is the most compact control in this
       wizard and the one Tom measured the rest against (20/09/2026). That puts a field at ~35px
       instead of ~38px. Deliberately a shade tighter than app-shell.css's own fields: there they
       sit in dense cards, here they sit in a single column where the height adds up. */
    padding: 7px 11px;
    font: inherit;
    font-size: 13.4px;
    line-height: 1.4;
    color: var(--wz-ink);
    background: #fff;
    border: 1px solid #d9d5cd;
    border-radius: 9px;
    transition: border-color .14s ease, box-shadow .14s ease;
    -webkit-appearance: none;
    appearance: none;
}

.wizard-shell select.form-control {
    /* Room for the chevron drawn below, so a long option never runs under it. */
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237a7680' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.wizard-shell textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.wizard-shell .form-control::placeholder {
    color: #a39e97;
}

.wizard-shell .form-control:focus {
    outline: none;
    border-color: var(--wz-accent);
    box-shadow: 0 0 0 3px rgba(var(--wz-accent-rgb), .16);
}

.wizard-shell .form-control:disabled {
    background: #f3f1ed;
    color: #8d8880;
    cursor: not-allowed;
}

.wizard-shell .form-control.is-invalid {
    border-color: #c0392b;
}

.wizard-shell .invalid-feedback {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #c0392b;
}

.wizard-shell .form-group {
    margin-bottom: 15px;
}

/* ---------- buttons ---------- */

.wizard-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wz-ink);
    background: #fff;
    border: 1px solid #d9d5cd;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.wizard-shell .btn:hover {
    background: #f6f3ee;
}

.wizard-shell .btn:focus-visible {
    outline: 2px solid var(--wz-accent);
    outline-offset: 2px;
}

.wizard-shell .btn:disabled,
.wizard-shell .btn.disabled {
    opacity: .55;
    cursor: not-allowed;
}

.wizard-shell .btn-primary {
    color: #fff;
    background: var(--wz-accent);
    border-color: var(--wz-accent);
}

.wizard-shell .btn-primary:hover {
    background: var(--wz-accent-dark);
    border-color: var(--wz-accent-dark);
}

.wizard-shell .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: #6f6a63;
}

.wizard-shell .btn-ghost:hover {
    background: rgba(0, 0, 0, .05);
    color: var(--wz-ink);
}

.wizard-shell .btn-outline-info,
.wizard-shell .btn-outline-secondary {
    background: #fff;
    border-color: #d9d5cd;
    color: var(--wz-ink);
}

.wizard-shell .btn-outline-info:hover,
.wizard-shell .btn-outline-secondary:hover {
    border-color: var(--wz-accent);
    color: var(--wz-accent);
    background: #fff;
}

.wizard-shell .btn-sm,
.wizard-shell .btn-group-sm .btn {
    padding: 6px 11px;
    font-size: 12px;
}

/* A segmented control, not five separate buttons: the shared corners say they belong together. */
.wizard-shell .btn-group {
    display: inline-flex;
}

.wizard-shell .btn-group > .btn + .btn {
    margin-left: -1px;
}

.wizard-shell .btn-group > .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wizard-shell .btn-group > .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wizard-shell .btn-group > .btn.active {
    color: #fff;
    background: var(--wz-accent);
    border-color: var(--wz-accent);
    position: relative;
    z-index: 1;
}

/* ---------- input group (field + attached button) ---------- */

.wizard-shell .input-group {
    display: flex;
    align-items: stretch;
}

.wizard-shell .input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.wizard-shell .input-group-append > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
    white-space: nowrap;
}

/* ---------- checkbox / radio ---------- */

.wizard-shell .form-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.wizard-shell .form-check-input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--wz-accent);
    flex: 0 0 auto;
}

.wizard-shell .form-check-label {
    font-size: 14px;
    line-height: 1.45;
}

/* AdminLTE hides the real box and draws its own; without that CSS the input would be invisible,
   so it is made visible again and the decorative label is dropped to zero width. */
.wizard-shell .custom-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
}

.wizard-shell .custom-control-input {
    position: static;
    width: 17px;
    height: 17px;
    margin: 0;
    opacity: 1;
    accent-color: var(--wz-accent);
    cursor: pointer;
}

.wizard-shell .custom-control-label {
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- table ---------- */

.wizard-shell .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.wizard-shell .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.wizard-shell .table th {
    padding: 9px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a847c;
    border-bottom: 1px solid #e6e1d9;
}

.wizard-shell .table td {
    padding: 11px 12px;
    border-bottom: 1px solid #efebe4;
    vertical-align: middle;
}

.wizard-shell .table tbody tr:last-child td {
    border-bottom: 0;
}

.wizard-shell .table .row-muted td {
    color: #a39e97;
}

.wizard-shell .badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.wizard-shell .badge-success {
    color: #0a7a51;
    background: #d9f5e9;
}

.wizard-shell .badge-warning {
    color: #8a5c00;
    background: #fdf1dc;
}

/* ---------- grid ---------- */

.wizard-shell .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
}

.wizard-shell .row > [class^="col-"],
.wizard-shell .row > [class*=" col-"] {
    flex: 1 1 0;
    min-width: 0;
}

/* Written as `.row > .col-md-*` on purpose (21/09/2026). The generic rule above matches with
   an attribute selector, which counts as a class, so `.wizard-shell .col-md-4` weighed less
   and `flex: 1 1 0` kept winning: every column shrank to fit one row instead of wrapping.
   With three tiles that looked correct by accident; the Upstream hosting wizard has five
   plans and they were squeezed until the spec text was clipped mid-word. */
@media (min-width: 720px) {
    .wizard-shell .row > .col-md-4 { flex: 0 0 calc(33.333% - 11px); }
    .wizard-shell .row > .col-md-6 { flex: 0 0 calc(50% - 8px); }
    .wizard-shell .row > .col-md-8 { flex: 0 0 calc(66.666% - 6px); }
}

@media (max-width: 719px) {
    .wizard-shell .row > [class^="col-"],
    .wizard-shell .row > [class*=" col-"] {
        flex: 1 1 100%;
    }
}

/* ---------- spacing and alignment utilities that are actually used ---------- */

.wizard-shell .d-flex { display: flex; }
.wizard-shell .justify-content-between { justify-content: space-between; }
.wizard-shell .align-items-center { align-items: center; }
.wizard-shell .text-right { text-align: right; }
.wizard-shell .text-center { text-align: center; }
.wizard-shell .text-muted { color: #8a847c; }
.wizard-shell .small { font-size: 12px; }
.wizard-shell .font-weight-bold { font-weight: 700; }
.wizard-shell .mb-0 { margin-bottom: 0; }
.wizard-shell .mb-2 { margin-bottom: 9px; }
.wizard-shell .mb-3 { margin-bottom: 15px; }
.wizard-shell .mt-1 { margin-top: 5px; }
.wizard-shell .mt-3 { margin-top: 15px; }
.wizard-shell .mt-n2 { margin-top: -8px; }
.wizard-shell .ml-1 { margin-left: 5px; }
.wizard-shell .mr-2 { margin-right: 9px; }

/* ---------- help text under a field ---------- */

/* Bootstrap makes .form-text a block with a small top margin. Without it the <small> stays
   inline, and two hints under the same field print on top of each other (19/09/2026: the
   DNS-template hint and the DNS-import note did exactly that). */
.wizard-shell .form-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.45;
    color: #8a847c;
}

.wizard-shell .text-warning {
    color: #8a5c00;
}

.wizard-shell .text-secondary {
    color: #6f6a63;
}

/* ---------- card ---------- */

.wizard-shell .card {
    background: #fff;
    border: 1px solid #e6e1d9;
    border-radius: 12px;
    margin-bottom: 15px;
}

.wizard-shell .card-header {
    padding: 12px 15px;
    border-bottom: 1px solid #efebe4;
}

.wizard-shell .card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.wizard-shell .card-body {
    padding: 15px;
}

/* ---------- remaining utilities in use ---------- */

.wizard-shell .table-hover tbody tr:hover { background: #faf8f5; }
.wizard-shell .align-middle { vertical-align: middle; }
.wizard-shell .w-100 { width: 100%; }
.wizard-shell .mb-1 { margin-bottom: 5px; }
.wizard-shell .mt-2 { margin-top: 9px; }
.wizard-shell .ml-2 { margin-left: 9px; }
.wizard-shell .px-3 { padding-left: 15px; padding-right: 15px; }
.wizard-shell .py-2 { padding-top: 9px; padding-bottom: 9px; }

@media (min-width: 720px) {
    .wizard-shell .col-md-3 { flex: 0 0 calc(25% - 12px); }
    .wizard-shell .col-md-5 { flex: 0 0 calc(41.666% - 10px); }
    .wizard-shell .text-md-right { text-align: right; }
}

/* ---------- icons ----------
 *
 * Font Awesome went out with AdminLTE, but the shared js/pages/wizard_domain.js and the shared
 * step partials still emit <i class="fas fa-gem"> and friends -- and those are shared with the
 * live wizard, which still loads Font Awesome. Rather than fork that code, the eight icons
 * actually used are redrawn here as masked SVG, so they inherit the surrounding text colour.
 */

.wizard-shell .fas,
.wizard-shell .fab {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.wizard-shell .fa-gem {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M9 3 6 9l6 12M15 3l3 6-6 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l4 6-10 12L2 9z'/%3E%3Cpath d='M2 9h20M9 3 6 9l6 12M15 3l3 6-6 12'/%3E%3C/svg%3E");
}

.wizard-shell .fa-credit-card,
.wizard-shell .fa-cc-paypal {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2.5'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

.wizard-shell .fa-wallet {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10h19'/%3E%3Ccircle cx='17' cy='14.5' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10h19'/%3E%3Ccircle cx='17' cy='14.5' r='1.3' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.wizard-shell .fa-university {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20h18'/%3E%3C/svg%3E");
}

.wizard-shell .fa-server {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='6.5' rx='2'/%3E%3Crect x='2.5' y='13.5' width='19' height='6.5' rx='2'/%3E%3Cpath d='M6 7.2h.01M6 16.8h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='6.5' rx='2'/%3E%3Crect x='2.5' y='13.5' width='19' height='6.5' rx='2'/%3E%3Cpath d='M6 7.2h.01M6 16.8h.01'/%3E%3C/svg%3E");
}

.wizard-shell .fa-random {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h4l10 12h4M3 18h4l10-12h4'/%3E%3Cpath d='m18 3 3 3-3 3M18 15l3 3-3 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h4l10 12h4M3 18h4l10-12h4'/%3E%3Cpath d='m18 3 3 3-3 3M18 15l3 3-3 3'/%3E%3C/svg%3E");
}

.wizard-shell .fa-file-import {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 14h6m0 0-2.4-2.4M15 14l-2.4 2.4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 14h6m0 0-2.4-2.4M15 14l-2.4 2.4'/%3E%3C/svg%3E");
}

/* ---------- one treatment for "pick one of two" ---------- */

/* Step 2 shows two segmented controls at once: new account / existing account, and private
   person / company. They used to look different (a pale outline versus a filled accent) for
   the same kind of choice, because one came from wizard-shell.css and the other from
   AdminLTE's button group. Same job, same look (19/09/2026).

   Deliberately styled here rather than in wizard-shell.css: that file still serves the three
   live wizards, and this preview is the only page meant to change yet. */
.wizard-shell .account-tabs button.active {
    color: #fff;
    background: var(--wz-accent);
    border-color: var(--wz-accent);
}

.wizard-shell .flex-fill {
    flex: 1 1 auto;
}

/* ---------- text that had no size of its own ---------- */

/* These four carried no font-size, so they fell back to the body's 16px while everything
   around them sits at 12 to 14. That reads as a different typeface rather than a bigger one,
   which is exactly how Tom described it (20/09/2026): the summary's "3 Domeinen", the
   "Prijzen excl. btw" note, the "Resultaten" label and the line under it.
   wizard-shell.css only styles .lbl and .hint INSIDE label.field, and these sit outside one.
   Lower specificity than those rules on purpose, so fields keep their own treatment. */
.wizard-shell .lbl {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wz-ink);
}

.wizard-shell .hint {
    font-size: 12px;
    line-height: 1.45;
    color: #8a847c;
}

.wizard-shell .wizard-summary #wzSumItems {
    font-size: 14px;
    line-height: 1.45;
}

/* Bootstrap's "button group as a radio group": the real radio sits inside the label and AdminLTE
   hid it, so without that CSS the dots came back and the control stopped matching the plain
   segmented switch right above it (Tom, 20/09/2026). Clipped rather than display:none, so it
   stays focusable and screen readers keep announcing which option is chosen. */
.wizard-shell .btn-group-toggle .btn > input[type="radio"],
.wizard-shell .btn-group-toggle .btn > input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
    pointer-events: none;
}

/* The label is the clickable surface now, so it has to look like the other segmented control. */
.wizard-shell .btn-group-toggle .btn {
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
}

/* Keyboard focus only (21/09/2026). On :focus-within this ring also fired on a plain mouse
   click, drawing a second line just outside the segment's own selected border -- Tom saw the
   double line on the domain wizard as well as on the hosting one. :has(input:focus-visible)
   leaves the click alone and still marks the segment when you tab to it. */
.wizard-shell .btn-group-toggle .btn:has(input:focus-visible) {
    outline: 2px solid var(--wz-accent);
    outline-offset: 2px;
}

/* ---------- breathing room ---------- */

/* The spacing has to GROUP, and that was the real problem on step 2: a label sat 5px under the
   previous field and 5px above its own, so ten fields read as one undifferentiated block (Tom,
   20/09/2026). A label now hugs its own input and every group gets real air after it.
   14px comes from css/app-shell.css, but there the fields sit in roomy cards; on a form this
   long it is not enough on its own. */
.wizard-shell label.field {
    margin-bottom: 18px;
}

/* Quieter and a shade smaller than css/wizard-shell.css sets it, matching app-shell.css: a
   label names its field, it does not compete with it. The smaller label is also what lets the
   gap below drop from 20px to 18px without the fields reading as stuck together again. */
.wizard-shell label.field .lbl,
.wizard-shell .wz-picker > .lbl {
    display: block;
    font-size: 12.8px;
    font-weight: 620;
    color: #6f6a63;
    margin-bottom: 6px;
}

/* A .row of two fields only had a horizontal gap, so the next row started against it. */
.wizard-shell .row > [class^="col-"] > label.field:last-child,
.wizard-shell .row > [class*=" col-"] > label.field:last-child {
    margin-bottom: 18px;
}

.wizard-shell .form-group {
    margin-bottom: 18px;
}

/* Privépersoon/Bedrijf and Nieuw account/Ik heb al een account ask the same kind of question,
   so they get the same shape (Tom, 20/09/2026). The Bootstrap markup calls this one a button
   GROUP -- joined corners, borders overlapping -- while .account-tabs above it is two separate
   rounded buttons with a gap. Undoing the group look here is less work than rewriting markup
   that all four wizards share, and the two controls then read as one pattern.

   More air than between two fields: this is a choice, not an input. */
.wizard-shell .btn-group-toggle {
    display: flex;
    gap: 8px;
    margin: 6px 0 24px;
}

.wizard-shell .btn-group-toggle > .btn {
    flex: 1;
    border-radius: 8px;
    margin-left: 0;
    z-index: auto;
}

.wizard-shell .btn-group-toggle > .btn + .btn {
    margin-left: 0;
}

.wizard-shell .btn-group-toggle > .btn:not(:first-child),
.wizard-shell .btn-group-toggle > .btn:not(:last-child) {
    border-radius: 8px;
}

.wizard-shell .account-tabs {
    margin-bottom: 24px;
}

.wizard-shell .form-check {
    margin: 4px 0 20px;
}


/* ================= choice cards, segmented toggle, labelled groups =================
   Moved here from css/pages/wizard_hosting.css (21/09/2026) the moment a second wizard
   needed them: SSL picks a certificate type with exactly the same card, and copying the
   block would have given us two versions to keep in step. The hosting wizard loads this
   file, so nothing changes for it. */

/* ---------- plan tiles, rebuilt on the app shell's pattern (21/09/2026) ----------
   app/order_hosting.php shows the same plans to a logged-in client as an auto-fit grid of
   cards: icon, name, tick list, price on the bottom edge. This is that component on the
   wizard's own tokens, replacing the AdminLTE row/col with a radio in the corner that this
   step had inherited. Kept in this file, not in the shared one, so the SSL and VPS wizards
   keep rendering exactly as they do until their own turn comes. */
.wizard-shell .wz-pickgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 12px;
}

.wizard-shell .wz-pickcard {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid rgba(43, 46, 55, .14);
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.wizard-shell .wz-pickcard:hover {
    border-color: rgba(var(--wz-accent-rgb), .45);
}

/* The radio still carries the value and the required check -- it is simply not the thing you
   look at any more, the card is. Kept focusable so the group is still reachable by keyboard,
   and the focus ring is drawn on the card around it. */
.wizard-shell .wz-pickcard-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Only for keyboard focus (21/09/2026). On :focus-within the ring also appeared on a plain
   mouse click, drawing a second line just outside the selected card's own border -- two rings
   around one tile. :has(:focus-visible) leaves the click alone and still marks the card when
   you tab to it. */
.wizard-shell .wz-pickcard:has(.wz-pickcard-input:focus-visible) {
    outline: 2px solid rgba(var(--wz-accent-rgb), .55);
    outline-offset: 2px;
}

.wizard-shell .domain-ns-choice-card.is-active,
.wizard-shell .wz-pickcard.is-active {
    border-color: var(--wz-accent);
    background: rgba(var(--wz-accent-rgb), .07);
}

.wizard-shell .wz-pickcard-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.wizard-shell .wz-pickcard-head .ico {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(var(--wz-accent-rgb), .12);
    color: var(--wz-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-shell .wz-pickcard-head .ico svg {
    width: 15px;
    height: 15px;
}

.wizard-shell .wz-pickcard-head .nm {
    min-width: 0;
    font-weight: 650;
    font-size: 13.8px;
    color: var(--wz-ink);
}

.wizard-shell .wz-speclist {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wizard-shell .wz-speclist li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12.2px;
    line-height: 1.45;
    color: #5f6270;
}

.wizard-shell .wz-speclist svg {
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 2px;
    color: #0a7a51;
}

.wizard-shell .wz-pickcard-desc {
    font-size: 12.2px;
    line-height: 1.45;
    color: #5f6270;
    margin-bottom: 10px;
}

/* margin-top:auto pins the price to the bottom edge, so prices line up across a row even
   when one plan lists fewer specs than its neighbour. */
.wizard-shell .wz-pickcard-price {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--wz-ink);
}

/* ---------- segmented control (21/09/2026) ----------
   .period-toggle is the billing period; .wz-segmented is the same component under a neutral
   name, for the choices that are not a period -- the SSL wizard picks individual vs company
   with it.
   Ported from the app shell's .period-toggle: one pill with a shared outer border and the
   segments meeting edge to edge. The live wizard has no .period-toggle in its markup, so
   although it loads this file, none of these rules reach it. */
.wizard-shell .period-toggle,
.wizard-shell .wz-segmented {
    display: flex;
    border: 1px solid rgba(43, 46, 55, .16);
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
}

/* Undoing the shared .btn look inside the pill: no border, no radius, no shadow of its own --
   the pill owns those. */
.wizard-shell .period-toggle .btn,
.wizard-shell .wz-segmented .btn {
    flex: 1;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    color: #5f6270;
    font-size: 13px;
    font-weight: 620;
    /* A segment label that wraps makes every segment as tall as the longest one, turning a
       one-line control into a two-line block. */
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wizard-shell .period-toggle .btn:not(:last-child),
.wizard-shell .wz-segmented .btn:not(:last-child) {
    border-right: 1px solid rgba(43, 46, 55, .16);
}

.wizard-shell .period-toggle .btn input,
.wizard-shell .wz-segmented .btn input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wizard-shell .period-toggle .btn.active,
.wizard-shell .wz-segmented .btn.active {
    background: rgba(var(--wz-accent-rgb), .12);
    color: var(--wz-accent-dark);
}

.wizard-shell .period-toggle .btn:hover:not(.active),
.wizard-shell .wz-segmented .btn:hover:not(.active) {
    background: rgba(43, 46, 55, .04);
}

.wizard-shell .period-toggle:has(input:focus-visible),
.wizard-shell .wz-segmented:has(input:focus-visible) {
    outline: 2px solid rgba(var(--wz-accent-rgb), .55);
    outline-offset: 2px;
}

/* A labelled group that is not one field: the billing-period radios. label.field's own
   spacing does not apply (that selector is scoped to <label>), so it is set here -- and the
   gap above is wider than the one below, so the label reads as belonging to the control
   underneath it rather than to the plan tiles above (Tom, 21/09/2026: "het plakt ook te hard
   tegen de keuze"). */
.wizard-shell .wz-field-group {
    margin: 22px 0 18px;
}

.wizard-shell .wz-field-group > .lbl {
    margin-bottom: 7px;
}

/* ================= inline notices =================
   Not the floating toast (#wizardAlert, styled in wizard-shell.css) but the notices that sit
   in the flow of a step: the SSL wizard has four of them (no offering, the auto-certificate
   note, the CSR-generated confirmation). Bootstrap's base .alert gave them their box, so on a
   wizard without AdminLTE they rendered as bare text with the variant's colours doing nothing
   (21/09/2026). Colours are semantic and brand-independent, matching the toast. */
.wizard-shell .alert:not(#wizardAlert) {
    display: block;
    padding: 11px 14px;
    margin: 0 0 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.5;
}

.wizard-shell .alert-warning:not(#wizardAlert) {
    background: #fdf3e0;
    border-color: #e8c894;
    color: #7a5310;
}

.wizard-shell .alert-info:not(#wizardAlert) {
    background: #eaf2fb;
    border-color: #b9d2ee;
    color: #234a72;
}

.wizard-shell .alert-success:not(#wizardAlert) {
    background: #e6f4ea;
    border-color: #a8d5b5;
    color: #1e7e34;
}

.wizard-shell .alert-danger:not(#wizardAlert) {
    background: #fbeae7;
    border-color: #e3ada3;
    color: #8a3a2e;
}

/* Inline error text under a field (21/09/2026). Bootstrap's .text-danger supplied the colour;
   without AdminLTE these five notices in the SSL wizard rendered in ordinary body grey, so a
   validation message read as a plain sentence. */
.wizard-shell .text-danger {
    color: #c0392b;
}

/* An icon inside a button: the two CSR/key download buttons. Sized and spaced here rather
   than with a utility class, so the gap travels with the icon. */
.wizard-shell .btn .wz-btn-ico {
    width: 14px;
    height: 14px;
    flex: none;
    margin-right: 6px;
    vertical-align: -2px;
}

/* ================= type-to-search picker =================
   Moved here from css/pages/wizard_domain_catalog.css (21/09/2026) when the SSL wizard needed
   the same control for its certificate contact. Behaviour lives in js/wizard-picker.js. */

/* ---------- type-to-search picker ----------
 *
 * The visible half of a <select> that stays in the DOM for js/pages/wizard_domain.js. A client
 * can have a long contact list, and every other picker in the portal (Servicetoegang, the
 * holder on app/order_domain.php) already works this way (Tom, 20/09/2026).
 */

.wizard-shell .wz-picker {
    position: relative;
    margin-bottom: 18px;
}

.wizard-shell .row > [class^="col-"] > .wz-picker:last-child,
.wizard-shell .row > [class*=" col-"] > .wz-picker:last-child {
    margin-bottom: 18px;
}

/* Present, focusable by script, never seen: the shared file writes its options here. */
.wizard-shell .wz-picker-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
}

/* The invalid state is set on the hidden select, so it has to surface on the box you can see. */
.wizard-shell .wz-picker:has(> .wz-picker-native.is-invalid) > .form-control {
    border-color: #c0392b;
}

.wizard-shell .wz-picker-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    padding: 4px;
    max-height: 232px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d9d5cd;
    border-radius: 9px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .09);
}

.wizard-shell .wz-picker-option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 13.4px;
    text-align: left;
    color: var(--wz-ink);
    background: none;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.wizard-shell .wz-picker-option:hover,
.wizard-shell .wz-picker-option.active {
    background: rgba(var(--wz-accent-rgb), .10);
    color: var(--wz-accent-dark);
}

.wizard-shell .wz-picker-empty {
    padding: 8px 10px;
    font-size: 13px;
    color: #8a847c;
}

/* Compact card: icon beside the name instead of above it, for a choice that carries nothing
   but a label -- the VPS operating systems (21/09/2026). Stacked, those tiles were mostly
   empty vertical space. Same variant the app shell calls .pickcard-row. */
.wizard-shell .wz-pickgrid-compact {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.wizard-shell .wz-pickcard-row {
    flex-direction: row;
    align-items: center;
    gap: 11px;
}

.wizard-shell .wz-pickcard-row .ico {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(var(--wz-accent-rgb), .12);
    color: var(--wz-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-shell .wz-pickcard-row .ico svg {
    width: 17px;
    height: 17px;
}

.wizard-shell .wz-pickcard-row .nm {
    min-width: 0;
    font-weight: 620;
    font-size: 13.6px;
    color: var(--wz-ink);
}

/* Add-on rows in the VPS wizard (21/09/2026): the name beside its control. These were bare
   <label> elements with only a font-weight set, so they took the browser's default size and
   read a size larger than every other label on the step. */
.wizard-shell .wz-addon-name {
    font-size: 13px;
    font-weight: 400;
    color: var(--wz-ink);
}

/* The other-services line at the foot of step 0 (21/09/2026). Quiet on purpose: it sits under
   a divider, below the step's own button, in the same grey as a hint. Someone who is ordering
   should not be pulled away; someone who came through the wrong door should be able to find
   the right one. */
.wizard-shell .wz-other-services {
    margin: 18px 0 0;
    padding-top: 15px;
    border-top: 1px solid rgba(43, 46, 55, .07);
    font-size: 12.8px;
    line-height: 1.6;
    color: #8a847c;
}

.wizard-shell .wz-other-services a {
    font-weight: 600;
    color: var(--wz-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--wz-accent-rgb), .35);
}

.wizard-shell .wz-other-services a:hover,
.wizard-shell .wz-other-services a:focus {
    color: var(--wz-accent-dark);
    border-bottom-color: var(--wz-accent-dark);
}