/* =========================================================================
   Shop — the configure step (site/shop/configure.blade.php).

   Built on shop.css and nothing else: the same --shop-* surfaces, the same
   14px card and 10–12px control radii, the same orange for "chosen". Every
   colour is a token or has a .light-theme twin, and every direction is a
   logical property, so one file serves both themes and both languages.

   Choices are real inputs inside their labels. The input is kept (1px,
   transparent, still focusable) and styles the card through `+`; panels
   that belong to one choice open with :has(), so none of this needs script.
   One spacing scale throughout: 4 · 8 · 12 · 16 · 20 · 24 · 28.
   ========================================================================= */

.shop {
    --cfg-field: rgba(255, 255, 255, 0.14);
    --cfg-control: rgba(255, 255, 255, 0.34);
    --cfg-tint: rgba(218, 120, 0, 0.1);
    --cfg-ring: rgba(218, 120, 0, 0.45);
    --cfg-ok: #15cd72;
    --cfg-ok-bg: rgba(21, 205, 114, 0.12);
    /* The term's saving badge: 11px text, so it needs AA's 4.5:1 on its fill —
       dark ink on the bright green here (8:1), white on a deeper green in light (5.4:1). */
    --cfg-save-bg: #15cd72;
    --cfg-save-ink: #0b1f14;
    --cfg-bad-bg: rgba(236, 98, 95, 0.12);
    --cfg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.light-theme .shop {
    --cfg-field: #d8dce3;
    --cfg-control: #aeb5c0;
    --cfg-tint: rgba(218, 120, 0, 0.07);
    --cfg-ok: #0b8f4d;
    --cfg-ok-bg: rgba(11, 143, 77, 0.1);
    --cfg-save-bg: #0a7a42;
    --cfg-save-ink: #ffffff;
}

/* Native controls (tick boxes, select lists, the file button's text) in the page's theme. */
.cfg {
    color-scheme: dark;
}

.light-theme .cfg {
    color-scheme: light;
}

.cfg [hidden] {
    display: none !important;
}

.cfg-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- columns and sections ----------------------------------------------- */

/* minmax(0, 1fr), not auto: a long fingerprint or domain must wrap, not widen the phone page. */
.cfg-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.cfg-section__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--shop-line);
}

.cfg-section__num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffb830, var(--primary));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.cfg-section__heading {
    min-width: 0;
}

.cfg-section__title {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--shop-heading);
}

.cfg-section__hint {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--shop-muted);
}

.cfg-block {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.cfg-block + .cfg-block,
.cfg-block + .cfg-error + .cfg-note,
.cfg-block + .cfg-note,
.cfg-subfield {
    margin-top: 24px;
}

.cfg-legend,
.cfg-label {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--shop-heading);
}

.cfg-label {
    margin-bottom: 8px;
}

.cfg-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--shop-muted);
}

.cfg-hint:empty {
    display: none;
}

.cfg-hint--lead {
    margin: -4px 0 12px;
}

.cfg-hint--error {
    color: var(--red);
}

.cfg-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--red);
}

.cfg-error svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 4px;
}

/* The list of everything refused, above the form. */
.cfg-errors {
    align-items: flex-start;
}

.cfg-errors svg {
    margin-top: 4px;
}

.cfg-errors__title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
}

/* .shop first: the RTL sheet indents every [dir=rtl] ul. */
.shop .cfg-errors__list {
    margin: 0;
    padding: 0;
    padding-inline-start: 18px;
    font-size: 13.5px;
    line-height: 1.9;
}

/* --- choice cards ---------------------------------------------------------
   A label holding a radio or tick box: the card is the label's body. */

.cfg-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* Datacenters: wide enough for "Falkenstein" beside its flag and the dot. */
.cfg-choices--compact {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.cfg-choices--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cfg-choices--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media only screen and (max-width: 767.98px) {
    .cfg-choices--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 575.98px) {
    .cfg-choices--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cfg-choice {
    position: relative;
    display: flex;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.cfg-choice__input {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.cfg-choice__body {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    padding-inline-end: 44px;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background-color: var(--shop-surface-2);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cfg-choice:hover .cfg-choice__body {
    border-color: var(--cfg-ring);
}

.cfg-choice__input:checked + .cfg-choice__body {
    border-color: var(--primary);
    background-color: var(--cfg-tint);
    box-shadow: 0 0 0 1px var(--primary);
}

.cfg-choice__input:focus-visible + .cfg-choice__body {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.cfg-choice__input:disabled + .cfg-choice__body {
    opacity: 0.5;
    cursor: not-allowed;
}

.cfg-choice__media {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(218, 120, 0, 0.12);
    color: var(--primary);
}

.cfg-choice__media svg {
    width: 20px;
    height: 20px;
}

.cfg-choice__media--flag {
    background-color: transparent;
}

.cfg-choice__media--flag img {
    width: 30px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--shop-line);
}

.cfg-choice__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}

.cfg-choice__title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--shop-heading);
    overflow-wrap: break-word;
}

.cfg-choice__desc {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--shop-muted);
    overflow-wrap: anywhere;
}

/* The radio dot or tick in the card's corner. */
.cfg-choice__mark {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--cfg-control);
    background-color: var(--shop-surface);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cfg-choice__mark--box {
    border-radius: 5px;
}

.cfg-choice__input:checked + .cfg-choice__body .cfg-choice__mark,
.cfg-os:has(.cfg-choice__input:checked) .cfg-choice__mark {
    border-color: var(--primary);
    background-color: var(--primary);
    box-shadow: inset 0 0 0 3px var(--shop-surface);
}

.cfg-choice__input:checked + .cfg-choice__body .cfg-choice__mark--box {
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- panels that belong to one choice -------------------------------------
   A .cfg-switch holds radios marked data-cfg-case and panels marked
   data-cfg-when; the checked case opens its panel. Without :has() every
   panel stays open, which still posts correctly. */

.cfg-panel {
    margin-top: 16px;
    padding: 20px;
    border-radius: 12px;
    background-color: var(--shop-surface-2);
    border: 1px solid var(--shop-line);
}

.cfg-panel__text {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--shop-muted);
}

.cfg-panel > :last-child,
.cfg-tabpanel > :last-child {
    margin-bottom: 0;
}

.cfg-panel .cfg-input,
.cfg-tabpanel .cfg-panel .cfg-input {
    background-color: var(--shop-surface);
}

.cfg [data-cfg-windows],
.cfg [data-cfg-wildcard-note] {
    display: none;
}

@supports selector(:has(*)) {
    .cfg-switch [data-cfg-when] {
        display: none;
    }

    .cfg-switch:has([data-cfg-case="account"]:checked) [data-cfg-when="account"],
    .cfg-switch:has([data-cfg-case="register"]:checked) [data-cfg-when="register"],
    .cfg-switch:has([data-cfg-case="transfer"]:checked) [data-cfg-when="transfer"],
    .cfg-switch:has([data-cfg-case="own"]:checked) [data-cfg-when="own"],
    .cfg-switch:has([data-cfg-case="saved"]:checked) [data-cfg-when="saved"],
    .cfg-switch:has([data-cfg-case="paste"]:checked) [data-cfg-when="paste"],
    .cfg-switch:has([data-cfg-case="generate"]:checked) [data-cfg-when="generate"],
    .cfg-switch:has([data-cfg-case="password"]:checked) [data-cfg-when="password"],
    .cfg-switch:has([data-cfg-case="custom"]:checked) [data-cfg-when="custom"],
    .cfg-switch:has([data-cfg-case="other"]:checked) [data-cfg-when="other"] {
        display: block;
    }

    .cfg-switch:has([data-cfg-case="password"]:checked) [data-cfg-keys-foot] {
        display: none;
    }

    /* Windows: no keys to choose; the note says why. */
    .cfg:has(input[name="os_family"][data-windows]:checked) [data-cfg-windows] {
        display: block;
    }

    .cfg:has(input[name="os_family"][data-windows]:checked) [data-cfg-unix] {
        display: none;
    }

    .cfg:has([data-cfg-wildcard]:checked) [data-cfg-wildcard-note] {
        display: block;
    }
}

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

.cfg-input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--cfg-field);
    border-radius: 10px;
    background-color: var(--shop-surface-2);
    color: var(--shop-heading);
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select.cfg-input {
    padding-inline-end: 34px;
    cursor: pointer;
}

.cfg-input option {
    color: #111;
    background-color: #fff;
}

.cfg-input::placeholder {
    color: var(--shop-muted);
    opacity: 0.75;
}

.cfg-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(218, 120, 0, 0.15);
}

.cfg-input[aria-invalid="true"] {
    border-color: var(--red);
}

/* A domain, a hostname or a key reads left to right on either page. */
.cfg-input[dir="ltr"] {
    text-align: left;
}

.cfg-textarea {
    height: auto;
    min-height: 112px;
    padding: 12px 14px;
    font-family: var(--cfg-mono);
    font-size: 12.5px;
    line-height: 1.7;
    resize: vertical;
    word-break: break-all;
}

.cfg-textarea--short {
    min-height: 84px;
}

.cfg-textarea[readonly] {
    color: var(--shop-muted);
}

.cfg-inline {
    display: flex;
    gap: 12px;
}

.cfg-inline .cfg-input {
    flex: 1 1 auto;
    min-width: 0;
}

.cfg-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media only screen and (max-width: 767.98px) {
    .cfg-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cfg-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    background-color: transparent;
    color: var(--primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.cfg-btn:hover {
    background-color: rgba(218, 120, 0, 0.1);
    color: var(--primary);
}

.cfg-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cfg-btn--solid {
    background-color: var(--primary);
    color: #fff;
}

.cfg-btn--solid:hover {
    background-color: var(--primary);
    color: #fff;
    filter: brightness(1.08);
}

.cfg-btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.cfg-btn svg {
    width: 16px;
    height: 16px;
}

/* A tick box that is the control itself (lists, "save my keys"). */
.cfg-tick {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.cfg-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.cfg-check .cfg-tick {
    margin-top: 3px;
}

.cfg-tick:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cfg-check__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cfg-check__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--shop-heading);
}

.cfg-check__hint {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--shop-muted);
}

.cfg-file {
    display: block;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--shop-muted);
}

.cfg-file::file-selector-button {
    height: 38px;
    margin-inline-end: 12px;
    padding: 0 16px;
    border: 1px solid var(--primary);
    border-radius: 9px;
    background-color: transparent;
    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cfg-file:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 9px;
}

.cfg-code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--cfg-mono);
    font-size: 11.5px;
    color: var(--shop-muted);
    direction: ltr;
    unicode-bidi: isolate;
    background: none;
    padding: 0;
}

/* --- notes ---------------------------------------------------------------- */

.cfg-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(218, 120, 0, 0.3);
    background-color: var(--cfg-tint);
    font-size: 13px;
    line-height: 1.9;
    color: var(--shop-heading);
}

.cfg-note svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--primary);
}

.cfg-note--muted {
    border-color: var(--shop-line);
    background-color: var(--shop-surface-2);
    color: var(--shop-muted);
}

.cfg-note--muted svg {
    color: var(--shop-muted);
}

.cfg-error + .cfg-note,
.cfg-block + .cfg-note {
    margin-top: 20px;
}

/* --- plan: billing terms --------------------------------------------------
   Equal cards; the saving sits on the top edge so a term without one is
   exactly as tall as a term with one. */

.cfg-terms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 12px;
    padding-top: 10px;
}

.cfg-term {
    position: relative;
    display: flex;
    margin: 0;
    cursor: pointer;
}

.cfg-term__body {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 84px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background-color: var(--shop-surface-2);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cfg-term:hover .cfg-term__body {
    border-color: var(--cfg-ring);
}

.cfg-choice__input:checked + .cfg-term__body {
    border-color: var(--primary);
    background-color: var(--cfg-tint);
    box-shadow: 0 0 0 1px var(--primary);
}

.cfg-choice__input:focus-visible + .cfg-term__body {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.cfg-term__title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--shop-heading);
}

.cfg-term__price {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--shop-muted);
}

.cfg-choice__input:checked + .cfg-term__body .cfg-term__price {
    color: var(--shop-heading);
}

.cfg-term__save {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 10px;
    border-radius: 999px;
    background-color: var(--cfg-save-bg);
    color: var(--cfg-save-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}

/* --- domain -------------------------------------------------------------- */

.cfg-result {
    margin-top: 12px;
}

.cfg-result:empty {
    display: none;
}

.cfg-found {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 14px;
    border: 1px solid var(--shop-line);
    border-radius: 10px;
    background-color: var(--shop-surface);
}

.cfg-found__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--shop-heading);
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

.cfg-found__status {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    background-color: var(--shop-surface-2);
    color: var(--shop-muted);
}

.cfg-found.is-available .cfg-found__status {
    background-color: var(--cfg-ok-bg);
    color: var(--cfg-ok);
}

.cfg-found.is-taken .cfg-found__status {
    background-color: var(--cfg-bad-bg);
    color: var(--red);
}

.cfg-found__price {
    margin-inline-start: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shop-heading);
    white-space: nowrap;
}

.cfg-found__per {
    margin-inline-start: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--shop-muted);
}

.cfg-result__message {
    margin: 0;
    font-size: 13px;
    line-height: 1.9;
    color: var(--shop-muted);
}

.cfg-result__message.is-error {
    color: var(--red);
}

.cfg-result__message + .cfg-found,
.cfg-found + .cfg-result__message,
.cfg-found + .cfg-result__actions,
.cfg-result__message + .cfg-result__actions {
    margin-top: 10px;
}

.cfg-result__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cfg-result__label {
    font-size: 12.5px;
    color: var(--shop-muted);
}

.cfg-chipbtn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--cfg-field);
    border-radius: 999px;
    background-color: var(--shop-surface);
    color: var(--shop-heading);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.cfg-chipbtn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.cfg-chipbtn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cfg-chipbtn[dir="ltr"] {
    unicode-bidi: isolate;
}

.shop .cfg-ns {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
}

.cfg-ns li {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--shop-line);
    background-color: var(--shop-surface);
    font-family: var(--cfg-mono);
    font-size: 12.5px;
    color: var(--shop-heading);
    unicode-bidi: isolate;
}

/* --- server: operating system --------------------------------------------- */

.cfg-os-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.cfg-os {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background-color: var(--shop-surface-2);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cfg-os:hover {
    border-color: var(--cfg-ring);
}

.cfg-os:has(.cfg-choice__input:checked) {
    border-color: var(--primary);
    background-color: var(--cfg-tint);
    box-shadow: 0 0 0 1px var(--primary);
}

.cfg-os:has(.cfg-choice__input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.cfg-os__pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 20px 16px 12px;
    text-align: center;
    cursor: pointer;
}

.cfg-os__logo {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-muted);
}

.cfg-os__logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.cfg-os__logo svg {
    width: 28px;
    height: 28px;
}

.cfg-os__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--shop-heading);
}

.cfg-os .cfg-choice__mark {
    top: 12px;
    inset-inline-end: 12px;
}

.cfg-os__foot {
    margin-top: auto;
    padding: 0 12px 12px;
}

.cfg-os__version {
    display: block;
    width: 100%;
    height: 34px;
    padding-block: 0;
    padding-inline: 10px 28px;
    border: 1px solid var(--cfg-field);
    border-radius: 8px;
    background-color: var(--shop-surface);
    color: var(--shop-heading);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cfg-os__version:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(218, 120, 0, 0.15);
}

.cfg-os__version option {
    color: #111;
    background-color: #fff;
}

.cfg-os__version--single {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-color: transparent;
    background-color: transparent;
    color: var(--shop-muted);
    cursor: default;
}

/* --- server: access tabs --------------------------------------------------- */

.cfg-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background-color: var(--shop-surface-2);
}

@media only screen and (max-width: 767.98px) {
    .cfg-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cfg-tab {
    position: relative;
    display: flex;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.cfg-tab__body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--shop-muted);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.cfg-tab__body svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.cfg-tab:hover .cfg-tab__body {
    color: var(--shop-heading);
}

.cfg-choice__input:checked + .cfg-tab__body {
    border-color: var(--cfg-ring);
    background-color: rgba(218, 120, 0, 0.12);
    color: var(--primary);
}

.cfg-choice__input:focus-visible + .cfg-tab__body {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cfg-tabpanel {
    margin-top: 16px;
}

.shop .cfg-list {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
}

.cfg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--shop-line);
    border-radius: 10px;
    background-color: var(--shop-surface-2);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cfg-row:hover {
    border-color: var(--cfg-ring);
}

.cfg-row:has(.cfg-tick:checked) {
    border-color: var(--primary);
    background-color: var(--cfg-tint);
}

.cfg-row:has(.cfg-tick:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.cfg-row__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cfg-row__name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--shop-heading);
    overflow-wrap: anywhere;
}

.cfg-row__name[dir="ltr"] {
    unicode-bidi: isolate;
}

/* A hostname stays by its tick box on a right-to-left page, not at the far edge. */
[dir="rtl"] .cfg-row__name[dir="ltr"] {
    text-align: right;
}

.cfg-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--shop-muted);
}

/* Next to its type chip, not pushed to the far edge: a fingerprint reads left to right on either page. */
.cfg-row__meta .cfg-code {
    flex: 0 1 auto;
    min-width: 0;
}

.cfg-generated {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.cfg-generated__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background-color: var(--cfg-ok-bg);
}

.cfg-generated__label {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cfg-ok);
}

.cfg-generated__row .cfg-code {
    min-width: 0;
    color: var(--shop-heading);
}

.cfg-generated .cfg-label {
    margin: 8px 0 0;
}

.cfg-generate-status {
    font-weight: 600;
    color: var(--shop-heading);
}

.cfg-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--shop-line);
}

.cfg-count {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shop-muted);
}

/* --- server: IPv4 ---------------------------------------------------------- */

.cfg-ip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cfg-ip__text {
    min-width: 0;
    flex: 1 1 220px;
}

.cfg-ip .cfg-label {
    margin-bottom: 0;
}

.cfg-ip .cfg-hint {
    margin-top: 4px;
}

.cfg-ip .shop-qty__input {
    width: 56px;
}

.cfg-ip .shop-qty__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cfg-ip .shop-qty__btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* --- sizes (StorageSize) ------------------------------------------------------
   One field in a pill-cornered box: − · the number · "GB" · +, then the
   usual sizes as chips. The buttons only fill the field in, so they are
   left out when scripting is off; the field posts either way. */

.cfg-size {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.cfg-size__field {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 46px;
    border: 1px solid var(--cfg-field);
    border-radius: 10px;
    background-color: var(--shop-surface-2);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cfg-size__field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(218, 120, 0, 0.15);
}

.cfg-size__field:has([aria-invalid="true"]) {
    border-color: var(--red);
}

.cfg-size__btn {
    flex: 0 0 auto;
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shop-heading);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cfg-size__btn:hover {
    background-color: var(--cfg-tint);
    color: var(--primary);
}

.cfg-size__btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.cfg-size__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
    color: var(--shop-heading);
}

/* Wide enough for 100000; the arrows are the − and + beside it. */
.cfg-size__input {
    width: 8ch;
    min-width: 0;
    height: 100%;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--shop-heading);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.cfg-size__input::-webkit-outer-spin-button,
.cfg-size__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.cfg-size__input:focus {
    outline: none;
}

.cfg-size__unit {
    flex: 0 0 auto;
    padding-inline-end: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--shop-muted);
}

.cfg-size__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.cfg-size__preset[aria-pressed="true"] {
    border-color: var(--primary);
    background-color: var(--cfg-tint);
    color: var(--primary);
}

/* The service's own size: the field with its price level at the far end,
   the chips under both. The control's box steps aside (display: contents)
   so its field and chips take their own places in this grid; a phone puts
   the price under the field. The price's line is the field's height, so its
   two sizes of text share a baseline centred on the field. */
.cfg-size-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "field price"
        "presets presets";
    align-items: start;
    gap: 12px 20px;
}

.cfg-size-row .cfg-size {
    display: contents;
}

.cfg-size-row .cfg-size__field {
    grid-area: field;
    justify-self: start;
}

.cfg-size-row .cfg-size__presets {
    grid-area: presets;
}

.shop .cfg-size__price {
    grid-area: price;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    line-height: 46px;
    white-space: nowrap;
}

@media only screen and (max-width: 575.98px) {
    .cfg-size-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "field"
            "price"
            "presets";
        row-gap: 10px;
    }

    .shop .cfg-size__price {
        line-height: 1.5;
    }
}

.cfg-size__price strong {
    font-size: 17px;
    font-weight: 700;
    color: var(--shop-heading);
}

.cfg-size__price span {
    font-size: 12.5px;
    color: var(--shop-muted);
}

.cfg-size-row + .cfg-hint {
    margin-top: 8px;
}

@media (scripting: none) {
    .cfg [data-cfg-js] {
        display: none !important;
    }
}

/* --- add-ons ----------------------------------------------------------------
   Tick-box cards, equal in height: the price row sits at the bottom. */

.cfg-addons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media only screen and (max-width: 767.98px) {
    .cfg-addons {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cfg-addon__body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-inline-end: 16px;
}

.cfg-addon__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding-inline-end: 28px;
}

.cfg-addon__media {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(218, 120, 0, 0.12);
    color: var(--primary);
}

.cfg-addon__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cfg-addon__media svg {
    width: 20px;
    height: 20px;
}

.cfg-addon__copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cfg-addon__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.cfg-addon__meta .shop-chip {
    padding: 2px 8px;
    font-size: 11.5px;
}

.cfg-addon__for {
    font-size: 12px;
    color: var(--shop-muted);
    overflow-wrap: anywhere;
}

.cfg-addon__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--shop-line);
}

.cfg-addon__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--shop-heading);
    white-space: nowrap;
}

.cfg-addon__period {
    font-size: 12px;
    color: var(--shop-muted);
    white-space: nowrap;
}

/* A sized add-on: the card is drawn around the tick box's label and the
   size field under it (a label holds one control), and lights up like the
   others when ticked. The corner tick sits where it sits on every card. */
.cfg-addon--sized {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--shop-line);
    border-radius: 12px;
    background-color: var(--shop-surface-2);
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cfg-addon--sized:hover {
    border-color: var(--cfg-ring);
}

.cfg-addon--sized:has(.cfg-addon__toggle .cfg-choice__input:checked) {
    border-color: var(--primary);
    background-color: var(--cfg-tint);
    box-shadow: 0 0 0 1px var(--primary);
}

.cfg-addon--sized:has(.cfg-addon__toggle .cfg-choice__input:focus-visible) {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.cfg-addon--sized .cfg-addon__toggle {
    position: static;
}

.cfg-addon--sized .cfg-choice__body,
.cfg-addon--sized .cfg-choice__input:checked + .cfg-choice__body,
.cfg-addon--sized .cfg-choice:hover .cfg-choice__body {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.cfg-addon--sized .cfg-choice__input:focus-visible + .cfg-choice__body {
    outline: none;
}

.cfg-addon__size .cfg-label {
    margin-bottom: 8px;
    font-size: 12.5px;
}

.cfg-addon__size .cfg-hint {
    margin-top: 8px;
}

.cfg-addon__size .cfg-size__field {
    height: 40px;
    background-color: var(--shop-surface);
}

.cfg-addon__size .cfg-chipbtn {
    height: 30px;
    padding: 0 10px;
}

.cfg-prices__size {
    display: block;
    font-size: 12px;
    color: var(--shop-muted);
}

/* --- summary --------------------------------------------------------------- */

.cfg-product {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--shop-line);
}

.cfg-product__media {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--shop-surface-2);
    border: 1px solid var(--shop-line);
    color: var(--primary);
}

.cfg-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cfg-product__media svg {
    width: 22px;
    height: 22px;
}

.cfg-product__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.cfg-product__name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--shop-heading);
    overflow-wrap: anywhere;
}

.cfg-facts {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--shop-line);
}

.cfg-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.7;
}

.cfg-fact dt {
    flex: 0 0 auto;
    font-weight: 400;
    color: var(--shop-muted);
}

.cfg-fact dd {
    min-width: 0;
    margin: 0;
    font-weight: 600;
    text-align: end;
    color: var(--shop-heading);
    overflow-wrap: anywhere;
}

.cfg-fact dd[dir="ltr"] {
    unicode-bidi: isolate;
}

[dir="rtl"] .cfg-fact dd[dir="ltr"] {
    text-align: left;
}

.cfg-prices {
    padding-top: 8px;
}

.cfg-prices .shop-row {
    padding: 8px 0;
    align-items: baseline;
}

.cfg-prices .shop-row > span {
    min-width: 0;
}

.cfg-prices .shop-row strong {
    white-space: nowrap;
}

.cfg-fine {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--shop-muted);
}

.cfg-summary .shop-total {
    padding-bottom: 12px;
}

.cfg-summary .shop-actions {
    margin-top: 20px;
}

.cfg-summary [data-cfg-submit].is-busy,
.cfg-dock [data-cfg-submit].is-busy {
    opacity: 0.7;
    pointer-events: none;
}

/* --- phone dock ---------------------------------------------------------------
   Below 992px the summary comes after every section, a long scroll from the
   choices: this bar keeps the running total and the submit button in reach.
   Fixed, so it never moves the page; the script slides it away while the
   summary's own button is on screen or above, and without script the page
   keeps room for it under the footer. */

.cfg-dock {
    display: none;
}

@media only screen and (max-width: 991.98px) {
    .cfg-dock {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1020;
        display: block;
        padding-block: 12px calc(12px + env(safe-area-inset-bottom, 0px));
        background-color: var(--shop-surface);
        border-top: 1px solid var(--shop-line);
        box-shadow: 0 -16px 32px -20px rgba(0, 0, 0, 0.7);
        transition: transform 0.25s ease, visibility 0.25s;
    }

    .light-theme .cfg-dock {
        box-shadow: 0 -12px 28px -18px rgba(15, 23, 42, 0.28);
    }

    .cfg-dock.is-away {
        transform: translateY(100%);
        visibility: hidden;
    }
}

@media only screen and (max-width: 991.98px) and (scripting: none) {
    body:has(.cfg-dock) {
        padding-bottom: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cfg-dock {
        transition: none;
    }
}

.cfg-dock__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cfg-dock__total {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cfg-dock__label {
    font-size: 12px;
    line-height: 1.6;
    color: var(--shop-muted);
}

.cfg-dock__value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--shop-heading);
    white-space: nowrap;
}

.cfg-dock .btn {
    flex: 0 0 auto;
}

.cfg-dock .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

@media only screen and (max-width: 575.98px) {
    .cfg-section__head {
        gap: 12px;
    }

    .cfg-panel {
        padding: 16px;
    }

    .cfg-inline {
        flex-wrap: wrap;
    }

    .cfg-inline .cfg-btn {
        flex: 1 1 100%;
    }
}

/* A domain line's name as the page title: left to right, but on the page's side. */
[dir="rtl"] .cfg-page .shop-title[dir="ltr"] {
    text-align: right;
}