/* css/pages/wizard_domain_catalog.css
 *
 * The extension catalogue on step 0 of the guest domain wizard (19/09/2026), ported from the
 * one on app/order_domain.php. The portal version exists to help a customer who already knows
 * what they want; here it has a second job, which is to show a visitor what is possible at all.
 * Hence the categories sit above the fold rather than behind a "more extensions" link.
 *
 * Loaded after css/wizard-shell.css and css/wizard-forms.css, so the --wz-* tokens apply and
 * the extensions pick up the brand's accent without a line of per-brand CSS here.
 */

.wzc-search {
    display: flex;
    gap: 9px;
    align-items: stretch;
}

.wzc-search .form-control {
    font-size: 15px;
    padding: 10px 13px;
}

.wzc-search .btn {
    padding-left: 17px;
    padding-right: 17px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .wzc-search { flex-direction: column; }
}

.wzc-block {
    margin-top: 18px;
}

.wzc-lbl {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6f6a63;
    margin-bottom: 8px;
}

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

.wzc-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.wzc-cat {
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--wz-ink);
    background: #fff;
    border: 1px solid #ddd8d0;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.wzc-cat:hover {
    border-color: var(--wz-accent);
    color: var(--wz-accent);
}

.wzc-cat.on {
    color: #fff;
    background: var(--wz-accent);
    border-color: var(--wz-accent);
}

/* How many extensions sit behind this category. Quieter than the name: it is there to say
   "there is more here than you think", not to compete with the label itself. */
.wzc-cat-n {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #a09a92;
}

.wzc-cat:hover .wzc-cat-n {
    color: var(--wz-accent);
}

.wzc-cat.on .wzc-cat-n {
    color: rgba(255, 255, 255, .75);
}

/* ---------- the chosen extensions ---------- */

.wzc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.wzc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wz-ink);
    background: #fff;
    border: 1px solid #ddd8d0;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.wzc-chip:hover {
    border-color: var(--wz-accent);
}

.wzc-chip.on {
    color: var(--wz-accent);
    border-color: var(--wz-accent);
    background: rgba(var(--wz-accent-rgb), .08);
}

/* The tick only appears once an extension is picked, so an unpicked row stays quiet. */
.wzc-chip .wzc-tick {
    display: none;
    width: 11px;
    height: 11px;
}

.wzc-chip.on .wzc-tick {
    display: inline-block;
}

.wzc-note {
    margin: 9px 0 0;
    font-size: 12px;
    color: #8a847c;
}

/* ---------- the full list behind "more extensions" ---------- */

.wzc-more {
    margin-top: 11px;
    border: 1px solid #e6e1d9;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.wzc-more-head {
    padding: 10px 12px;
    border-bottom: 1px solid #efebe4;
}

.wzc-more-head .form-control {
    font-size: 13.6px;
}

.wzc-more-list {
    max-height: 232px;
    overflow-y: auto;
    padding: 11px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.wzc-more-empty {
    margin: 0;
    padding: 6px 0;
    font-size: 13px;
    color: #8a847c;
}

.wzc-toggle {
    margin-top: 10px;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--wz-accent);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wzc-toggle:hover {
    color: var(--wz-accent-dark);
}

/* The cap message sits above a long list, so a refused click needs to pull the eye back up. */
.wzc-note-flash {
    animation: wzc-note-flash 1.1s ease;
}

@keyframes wzc-note-flash {
    0%, 100% { color: #8a847c; }
    12%, 60% { color: #c0392b; }
}

@media (prefers-reduced-motion: reduce) {
    .wzc-note-flash { animation: none; color: #c0392b; }
}

/* The stepper marked a finished step in Bootstrap green (#28a745) regardless of brand, which
   on the navy and blue brands reads as a different product's colour. The accent already means
   "this is us" everywhere else on the page. */
.wizard-shell .stepper .step-dot.done .circle {
    background: var(--wz-accent);
    border-color: var(--wz-accent);
}

.wizard-shell .stepper .step-dot.done::before {
    background: var(--wz-accent);
}

/* ---------- the period on a result row ---------- */

.wizard-shell .wzr-period {
    /* Narrow: the widest option is "10 jaar", so a full-width field only pushes the price
       column away from the domain it belongs to. */
    width: auto;
    min-width: 96px;
    padding: 5px 27px 5px 9px;
    font-size: 13px;
    border-radius: 7px;
    background-position: right 8px center;
}

.wizard-shell .wzr-period-fixed {
    font-size: 13px;
    color: #8a847c;
}

.wizard-shell .price-col {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Facts that only make sense once their own step has been reached. Driven off which panel is
   open, so nothing has to be told when the step changes. */
.wizard-shell:has(.step-panel[data-panel="0"].active) .wz-fact-later,
.wizard-shell:has(.step-panel[data-panel="1"].active) .wz-fact-later {
    display: none;
}

/* ---------- step 3: domain details ----------
 *
 * Built on app/order_domain.php's information architecture (20/09/2026): the same blocks in
 * the same order, with the wizard's own, roomier measure. The portal page can be dense because
 * someone works there daily; someone reaches this screen once, and hesitating.
 */

.wizard-shell .wz-card-sub {
    margin: 0 0 16px;
}

.wizard-shell .wz-card-header-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* The nameserver choice sits in the card header, so it sizes to its own labels instead of
   stretching like the form-level toggles do -- but keeps their shape, which is the whole
   point of using the same component twice. */
.wizard-shell .btn-group-toggle.wz-dns-seg {
    margin: 0;
    flex: 0 1 auto;
}

.wizard-shell .btn-group-toggle.wz-dns-seg > .btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 12.8px;
}

/* js/pages/wizard_domain.js writes is-active on the chosen option; the account/company toggle
   writes active. Same state, so the same paint -- cheaper and safer than teaching a file four
   live wizards share about a second class name. */
.wizard-shell .btn-group-toggle > .btn.is-active {
    color: #fff;
    background: var(--wz-accent);
    border-color: var(--wz-accent);
}

/* The control on the left, the facts on the right -- which nameservers this domain will
   actually land on. Without the second column the template select stretched across the whole
   card to hold a name three words long. */
.wizard-shell .wz-dns-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 22px;
    align-items: start;
}

/* Set by the page's own script whenever the visible half of the aside would be empty: an empty
   column with a rule down its left edge reads as a rendering fault. */
.wizard-shell .wz-dns-split.no-aside {
    grid-template-columns: minmax(0, 1fr);
}

.wizard-shell .wz-dns-split.no-aside .wz-dns-aside {
    display: none;
}

.wizard-shell .wz-dns-aside {
    border-left: 1px solid #e6e1d9;
    padding-left: 18px;
}

.wizard-shell .wz-dns-aside-t {
    font-size: 12.4px;
    font-weight: 620;
    color: #6f6a63;
    margin-bottom: 8px;
}

.wizard-shell .wz-dns-aside-p {
    font-size: 12.6px;
    color: #6f6a63;
    line-height: 1.55;
}

.wizard-shell .wz-dns-ns {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    font-size: 12.4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.wizard-shell .wz-dns-ns .ip {
    color: #a09a92;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .wizard-shell .wz-dns-split { grid-template-columns: minmax(0, 1fr); }
    .wizard-shell .wz-dns-aside { border-left: 0; border-top: 1px solid #e6e1d9; padding: 14px 0 0; }
}

.wizard-shell .wz-dns-hint {
    margin: 0;
    font-size: 12.2px;
    color: #8a847c;
    line-height: 1.5;
}

.wizard-shell .wz-dns-hint-foot {
    margin-top: 16px;
}

.wizard-shell .wz-dns-hint-warn {
    margin-top: 10px;
    color: #b06a13;
}

.wizard-shell .wz-dns-scanrow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.wizard-shell .alert-info {
    border: 1px solid #e6e1d9;
    border-radius: 9px;
    background: #faf8f5;
    font-size: 12.6px;
    color: #57534d;
}

/* Label above its own field, IP below it and only once the hostname fails to resolve -- the
   three-column row this replaces put a 3/5/4 grid inside a column that is no longer full width. */
.wizard-shell .wz-ns-row {
    margin-bottom: 14px;
}

.wizard-shell .wz-ns-row:last-child {
    margin-bottom: 0;
}

.wizard-shell .wz-ns-row > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6f6a63;
    margin-bottom: 6px;
}

.wizard-shell .wz-ns-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wizard-shell .wz-ns-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wizard-shell .wz-ns-status {
    font-size: 12px;
    color: #8a847c;
}

/* The second pair of contacts is off by default and says so, where the link it replaces only
   read as "more work hidden here". Same control as app/order_domain.php, one size up. */
.wizard-shell .wz-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13.4px;
    color: #57534d;
    cursor: pointer;
}

/* Add a contact on the left, the second-contacts switch on the right, one line. Stacked, the
   checkbox sat directly under the button and read as a second half of it (Tom, 20/09/2026). */
.wizard-shell .wz-contact-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Wrapped onto two lines the right-alignment is meaningless, so the switch goes back under the
   button with real space between them. */
@media (max-width: 560px) {
    .wizard-shell .wz-contact-actions { justify-content: flex-start; gap: 14px; }
}

.wizard-shell #wzAdvancedContactsGroup {
    margin-top: 18px;
}

.wizard-shell .wz-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--wz-accent);
}

/* The type-to-search picker moved to css/wizard-forms.css on 21/09/2026: the SSL wizard now
   uses the same control for its certificate contact, and this file is loaded by the domain
   wizard alone. */
/* ---------- transfer codes ----------
 *
 * The code beside the domain it belongs to rather than under it: an EPP code is short, so a
 * full-width field under a full-width label spent two lines on twelve characters (Tom,
 * 20/09/2026). The markup comes from the shared wizard file, so this is styling only.
 */

.wizard-shell #wzTransferAuthcodeFields label.field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.wizard-shell #wzTransferAuthcodeFields label.field:last-child {
    margin-bottom: 0;
}

.wizard-shell #wzTransferAuthcodeFields label.field .lbl {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.4px;
    font-weight: 600;
    color: var(--wz-ink);
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .wizard-shell #wzTransferAuthcodeFields label.field {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 6px;
        margin-bottom: 14px;
    }
}

/* Set by the page's own script: beats the inline display the shared wizard file writes. */
.wizard-shell .wz-hide {
    display: none !important;
}

/* The scan indicator, matching css/dc-shell.css's .dc-spin: a turning arrow beside the button,
   not a static icon that leaves you wondering whether anything is happening. */
@keyframes wz-spin {
    to { transform: rotate(360deg); }
}

.wizard-shell .wz-spin {
    display: inline-flex;
    vertical-align: -2px;
    color: #8a847c;
    animation: wz-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .wizard-shell .wz-spin { animation: none; }
}

/* ---------- dialog ----------
 *
 * Adding a contact used to replace the picker with ten fields in place, which made the whole
 * step jump for something a client does rarely (Tom, 20/09/2026). Same proportions as
 * css/app-shell.css's .app-modal, in the wizard's own palette. Only the body scrolls, so the
 * Save button stays reachable on a short screen.
 */

.wizard-shell .wz-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28, 24, 20, .42);
}

.wizard-shell .wz-modal-overlay[hidden] {
    display: none;
}

body.wz-modal-open {
    overflow: hidden;
}

.wizard-shell .wz-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 86vh;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}

.wizard-shell .wz-modal-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid #efebe4;
}

.wizard-shell .wz-modal-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.wizard-shell .wz-modal-close {
    padding: 2px 6px;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    color: #8a847c;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

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

.wizard-shell .wz-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 4px;
}

.wizard-shell .wz-modal-body > .btn-group-toggle {
    margin-top: 0;
}

.wizard-shell .wz-modal-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    padding: 13px 18px;
    border-top: 1px solid #efebe4;
}

/* Left of the buttons, on the same line: an error above the fold would be scrolled away in
   the body, and below the buttons it would move them. */
.wizard-shell .wz-modal-error {
    margin: 0 auto 0 0;
    font-size: 12.6px;
    color: #c0392b;
}

.wizard-shell .wz-modal-error[hidden] {
    display: none;
}

/* ---------- payment methods ----------
 *
 * The shared step's icon slot was sized for a Font Awesome glyph; it now holds the same inline
 * SVG app/order_payment_method.php uses, so it has to centre a real element (20/09/2026).
 */

.wizard-shell .wz-payment-option .wz-payment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
}

/* "NL" / "BE" after the method name: iDEAL is a Dutch scheme and Bancontact a Belgian one, and
   the app shell says so in the same place. Quiet, because it is a hint, not a label. */
.wizard-shell .wz-payment-tag {
    margin-left: 7px;
    padding: 2px 6px;
    font-size: 10.8px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #8a847c;
    background: #f3f1ed;
    border-radius: 999px;
}