/* =============================================================================
   ZHosting shop — pricing, configuration and checkout.

   The revenue path: /order and everything the order button renders inside it.
   Kept in its own file rather than in cpanel-ui.css because the shop is
   marketing-facing and allowed to be richer than the logged-in control panel,
   but it borrows that file's tokens (--cpui-*) so a customer who buys and then
   signs in sees one product, not two.

   Everything here is prefixed `zhs-`. The theme's older shop rules (compiled
   into build/css/huraga.css as `.zh-plan`, `.zh-shop-layout`, `.zh-product-*`)
   are deliberately NOT reused or overridden — the markup they styled is gone,
   so those rules simply match nothing and there is no specificity war.

   WIDTH IS THE RECURRING BUG HERE. The shop is reachable while logged in, where
   two sidebars leave the content column far narrower than the viewport. Every
   grid below is auto-fit + minmax(min(100%, N), 1fr) so it collapses on its own
   content box, and anything that can be long (domains, product titles) wraps.
   Do not add viewport media queries for column counts.

   VOCABULARY
     Hero        .zhs-hero __copy __art __eyebrow __title __lead __points
     Toggle      .zhs-billing  __label __switch __option __save
     Plans       .zhs-plans  .zhs-plan --featured
                 __flag __name __tagline __price __amount __period __note
                 __cta __features __feature --absent
     Compare     .zhs-compare  __table __row __label __cell
     Domains     .zhs-domain __form __input __submit __tlds __tld
                 .zhs-tld-table
     Trust       .zhs-trust __item __icon __title __text
     Steps       .zhs-layout .zhs-main .zhs-aside
                 .zhs-step (wraps a Bootstrap accordion-item)
                 .zhs-step__header __index __title __hint
     Summary     .zhs-summary __head __items __item __line __totals __row
                 __total __cta __note
     Recap       .zhs-recap __plan __specs __change
   ========================================================================== */

:root {
    --zhs-violet: #6535e8;
    --zhs-violet-strong: #5528d4;
    --zhs-gradient: linear-gradient(135deg, #6633eb 0%, #4924bd 100%);
    --zhs-tint: #f4f0ff;
    --zhs-ink: #17172a;
    --zhs-ink-soft: #2b2c3d;
    --zhs-muted: #6b6d80;
    --zhs-faint: #8a8c9e;
    --zhs-surface: #ffffff;
    --zhs-sunken: #f6f6fa;
    --zhs-border: #e7e8ee;
    --zhs-success: #0f7b52;
    --zhs-success-bg: #eaf7f1;
    --zhs-radius: 18px;
    --zhs-radius-sm: 10px;
    --zhs-shadow: 0 1px 2px rgba(20, 20, 43, .04), 0 12px 32px -18px rgba(20, 20, 43, .28);
    --zhs-shadow-lift: 0 2px 4px rgba(20, 20, 43, .06), 0 28px 56px -24px rgba(76, 40, 190, .38);
}

/* Shared page rhythm. Sections are the unit of vertical space so nothing needs
   ad-hoc margins. */
.zhs-shop {
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 5vw, 64px);
    color: var(--zhs-ink);
}

.zhs-shop *,
.zhs-shop *::before,
.zhs-shop *::after {
    box-sizing: border-box;
}

.zhs-section-head {
    max-width: 62ch;
    margin: 0 0 22px;
}

.zhs-section-head h2 {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--zhs-ink);
}

.zhs-section-head p {
    margin: 0;
    color: var(--zhs-muted);
    font-size: .95rem;
    line-height: 1.6;
}

.zhs-eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--zhs-violet);
}

/* ------------------------------------------------------------------ hero --- */

.zhs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: clamp(28px, 4vw, 52px);
    border-radius: var(--zhs-radius);
    background: var(--zhs-gradient);
    color: #fff;
    overflow: hidden;
}

@media (min-width: 860px) {
    .zhs-hero {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    }
}

/* Same reasoning as the summary column: signed in, the content box is far narrower
   than the viewport, so the hero stays stacked for longer. */
@media (min-width: 860px) and (max-width: 1199.98px) {
    body.zh-client-shell .zhs-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

.zhs-hero__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.zhs-hero__title {
    margin: 0 0 14px;
    font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.zhs-hero__lead {
    margin: 0;
    max-width: 52ch;
    font-size: clamp(.98rem, .94rem + .2vw, 1.1rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.zhs-hero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.zhs-hero__points li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .94);
}

.zhs-hero__points svg {
    flex: none;
    width: 17px;
    height: 17px;
}

.zhs-hero__art {
    justify-self: center;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------- billing toggle --- */

/* The toggle must not move anything. It only flips a class on .zhs-plans, and
   both prices are already in the DOM at a reserved height — see .zhs-plan__price. */
.zhs-billing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 0 30px;
}

.zhs-billing__switch {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--zhs-sunken);
    border: 1px solid var(--zhs-border);
}

.zhs-billing__option {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 20px;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--zhs-muted);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.zhs-billing__option:hover {
    color: var(--zhs-ink);
}

.zhs-billing__option:focus-visible {
    outline: 2px solid var(--zhs-violet);
    outline-offset: 2px;
}

.zhs-billing__option[aria-pressed="true"] {
    background: var(--zhs-surface);
    color: var(--zhs-ink);
    box-shadow: 0 1px 2px rgba(20, 20, 43, .1);
}

.zhs-billing__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--zhs-success-bg);
    color: var(--zhs-success);
    font-size: .82rem;
    font-weight: 650;
}

/* ----------------------------------------------------------------- plans --- */

.zhs-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
    gap: 20px;
    align-items: start;
}

.zhs-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 24px 26px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius);
    background: var(--zhs-surface);
    box-shadow: var(--zhs-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.zhs-plan:hover {
    transform: translateY(-3px);
    border-color: #d9d3f7;
    box-shadow: var(--zhs-shadow-lift);
}

.zhs-plan--featured {
    border-color: var(--zhs-violet);
    box-shadow: var(--zhs-shadow-lift);
}

/* The popular tier gets a gradient hairline along the top rather than a heavier
   border, so the three cards stay the same height. */
.zhs-plan--featured::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 4px;
    border-radius: var(--zhs-radius) var(--zhs-radius) 0 0;
    background: var(--zhs-gradient);
}

.zhs-plan__flag {
    position: absolute;
    top: -12px;
    right: 20px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--zhs-gradient);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px -6px rgba(76, 40, 190, .7);
}

.zhs-plan__name {
    margin: 0 0 6px;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zhs-ink);
}

.zhs-plan__tagline {
    margin: 0 0 20px;
    min-height: 2.9em;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--zhs-muted);
}

/* Reserved height is what keeps the billing toggle from shifting the layout:
   the tallest state (amount + period + saving note) always occupies the box,
   whichever period is showing. */
.zhs-plan__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 92px;
    margin: 0 0 20px;
}

.zhs-plan__amount {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: clamp(1.9rem, 1.6rem + 1vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--zhs-ink);
}

.zhs-plan__period {
    font-size: .92rem;
    font-weight: 550;
    color: var(--zhs-muted);
}

.zhs-plan__note {
    font-size: .84rem;
    line-height: 1.45;
    color: var(--zhs-muted);
}

.zhs-plan__note--save {
    color: var(--zhs-success);
    font-weight: 600;
}

.zhs-plan__note--free {
    color: var(--zhs-success);
    font-weight: 600;
}

/* Both period blocks are rendered server-side (so prices stay formatted by
   FOSSBilling's currency helper in whatever currency the cart is in) and the
   toggle only picks which one is visible. */
.zhs-plan__for-monthly,
.zhs-plans[data-period="1Y"] .zhs-plan__for-annual {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.zhs-plan__for-annual,
.zhs-plans[data-period="1Y"] .zhs-plan__for-monthly {
    display: none;
}

.zhs-plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    border: 1px solid var(--zhs-violet);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-surface);
    color: var(--zhs-violet);
    font-size: .94rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.zhs-plan__cta:hover {
    background: var(--zhs-tint);
    color: var(--zhs-violet-strong);
    border-color: var(--zhs-violet-strong);
}

.zhs-plan__cta:focus-visible {
    outline: 2px solid var(--zhs-violet);
    outline-offset: 2px;
}

.zhs-plan__cta--primary {
    background: var(--zhs-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px -12px rgba(76, 40, 190, .8);
}

.zhs-plan__cta--primary:hover {
    background: var(--zhs-violet-strong);
    color: #fff;
    border-color: transparent;
}

.zhs-plan__features {
    margin: 24px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--zhs-border);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.zhs-plan__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .89rem;
    line-height: 1.45;
    color: var(--zhs-ink-soft);
}

.zhs-plan__feature svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--zhs-success);
}

.zhs-plan__feature b {
    font-weight: 650;
}

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

.zhs-compare {
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius);
    background: var(--zhs-surface);
    overflow: hidden;
}

/* The table is the one thing here that genuinely cannot collapse — it scrolls
   inside its own box rather than pushing the page sideways. */
.zhs-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.zhs-compare__table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .9rem;
}

.zhs-compare__table th,
.zhs-compare__table td {
    padding: 13px 18px;
    text-align: left;
    border-bottom: 1px solid var(--zhs-border);
}

.zhs-compare__table thead th {
    position: sticky;
    top: 0;
    background: var(--zhs-sunken);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zhs-muted);
    white-space: nowrap;
}

.zhs-compare__table tbody tr:last-child th,
.zhs-compare__table tbody tr:last-child td {
    border-bottom: 0;
}

.zhs-compare__table tbody th {
    font-weight: 600;
    color: var(--zhs-ink-soft);
    white-space: nowrap;
}

.zhs-compare__table td {
    font-variant-numeric: tabular-nums;
    color: var(--zhs-ink);
}

.zhs-compare__table td.is-featured {
    background: var(--zhs-tint);
    font-weight: 650;
}

.zhs-compare__table thead th.is-featured {
    background: #ece5ff;
    color: var(--zhs-violet-strong);
}

/* ---------------------------------------------------------------- domains --- */

.zhs-domain {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding: clamp(24px, 3.5vw, 40px);
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius);
    background: linear-gradient(180deg, var(--zhs-tint) 0%, var(--zhs-surface) 62%);
}

.zhs-domain__title {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--zhs-ink);
}

.zhs-domain__lead {
    margin: 0;
    max-width: 54ch;
    color: var(--zhs-muted);
    font-size: .95rem;
    line-height: 1.6;
}

.zhs-domain__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 0;
}

.zhs-domain__input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-surface);
    font-size: .96rem;
    color: var(--zhs-ink);
}

.zhs-domain__input::placeholder {
    color: var(--zhs-faint);
}

.zhs-domain__input:focus {
    outline: 0;
    border-color: var(--zhs-violet);
    box-shadow: 0 0 0 3px rgba(101, 53, 232, .16);
}

.zhs-domain__tld {
    flex: 0 0 auto;
    max-width: 160px;
}

.zhs-domain__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: 0;
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-gradient);
    color: #fff;
    font-size: .94rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: filter .18s ease;
}

.zhs-domain__submit:hover {
    filter: brightness(1.08);
    color: #fff;
}

.zhs-domain__submit:focus-visible {
    outline: 2px solid var(--zhs-violet-strong);
    outline-offset: 2px;
}

.zhs-domain__hint {
    margin: 12px 0 0;
    font-size: .86rem;
    color: var(--zhs-muted);
}

/* Per-TLD prices come straight from the registrar table; the table shows every
   figure the customer will be charged rather than a single "from" headline. */
.zhs-tld-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    background: var(--zhs-surface);
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    overflow: hidden;
}

.zhs-tld-table th,
.zhs-tld-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--zhs-border);
}

.zhs-tld-table thead th {
    background: var(--zhs-sunken);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--zhs-muted);
}

.zhs-tld-table tbody tr:last-child th,
.zhs-tld-table tbody tr:last-child td {
    border-bottom: 0;
}

.zhs-tld-table tbody th {
    font-weight: 700;
    color: var(--zhs-violet);
    font-variant-numeric: tabular-nums;
}

.zhs-tld-table td {
    font-variant-numeric: tabular-nums;
    color: var(--zhs-ink-soft);
}

.zhs-tld-scroll {
    overflow-x: auto;
}

/* ------------------------------------------------------------------ trust --- */

.zhs-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

.zhs-trust__item {
    display: flex;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-surface);
}

.zhs-trust__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--zhs-tint);
    color: var(--zhs-violet);
}

.zhs-trust__icon svg {
    width: 20px;
    height: 20px;
}

.zhs-trust__title {
    margin: 0 0 4px;
    font-size: .93rem;
    font-weight: 650;
    color: var(--zhs-ink);
}

.zhs-trust__text {
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
    color: var(--zhs-muted);
}

/* ------------------------------------------------- configure / checkout --- */

.zhs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* The summary only earns its own column when the CONTENT column is wide enough for
   both — which is not the same as the viewport being wide. The shop is reachable
   while signed in, where a 260px nav rail and the currency sidebar eat several
   hundred pixels before this grid sees any of it; splitting on viewport width alone
   is what squeezed the dashboard's content column once already. Hence the higher
   threshold under .zh-client-shell. */
@media (min-width: 1100px) {
    .zhs-layout--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    }

    .zhs-layout--split .zhs-aside {
        position: sticky;
        top: 22px;
    }
}

@media (min-width: 1100px) and (max-width: 1499.98px) {
    body.zh-client-shell .zhs-layout--split {
        grid-template-columns: minmax(0, 1fr);
    }

    body.zh-client-shell .zhs-layout--split .zhs-aside {
        position: static;
    }
}

.zhs-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.zhs-aside {
    min-width: 0;
}

/* Each accordion step. The Bootstrap classes underneath (.accordion-item,
   .accordion-collapse, data-bs-parent) are untouched — this only restyles them. */
.zhs-shop .accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
    --bs-accordion-border-color: transparent;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
}

.zhs-shop .accordion-item {
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius);
    background: var(--zhs-surface);
    box-shadow: var(--zhs-shadow);
    overflow: hidden;
}

.zhs-shop .accordion-header {
    margin: 0;
}

.zhs-shop .accordion-button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 20px 24px;
    border: 0;
    border-radius: 0;
    background: var(--zhs-surface);
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--zhs-ink);
    box-shadow: none;
}

.zhs-shop .accordion-button:not(.collapsed) {
    background: var(--zhs-surface);
    color: var(--zhs-ink);
    box-shadow: none;
}

.zhs-shop .accordion-button:focus-visible {
    outline: 2px solid var(--zhs-violet);
    outline-offset: -2px;
}

.zhs-shop .accordion-button::after {
    margin-left: auto;
}

/* Numbered step marker. Sits inside the accordion button so the customer can
   see where they are without a separate progress bar. */
.zhs-step__index {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--zhs-tint);
    color: var(--zhs-violet);
    font-size: .84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.zhs-shop .accordion-button:not(.collapsed) .zhs-step__index {
    background: var(--zhs-gradient);
    color: #fff;
}

.zhs-step__title {
    min-width: 0;
}

.zhs-step__hint {
    display: block;
    margin-top: 2px;
    font-size: .82rem;
    font-weight: 450;
    color: var(--zhs-muted);
}

.zhs-shop .accordion-body {
    padding: 4px 24px 26px;
}

/* The module's own order forms render Bootstrap controls; give them the same
   shape as the rest of the shop without touching their markup or hooks. */
.zhs-shop .accordion-body .form-control,
.zhs-shop .accordion-body .form-select {
    border-radius: var(--zhs-radius-sm);
    border-color: var(--zhs-border);
    padding: 10px 13px;
    font-size: .94rem;
}

.zhs-shop .accordion-body .form-control:focus,
.zhs-shop .accordion-body .form-select:focus {
    border-color: var(--zhs-violet);
    box-shadow: 0 0 0 3px rgba(101, 53, 232, .16);
}

.zhs-shop .accordion-body .form-label,
.zhs-shop .accordion-body label.form-label {
    font-size: .86rem;
    font-weight: 600;
    color: var(--zhs-ink-soft);
}

.zhs-shop .accordion-body .btn-primary {
    background: var(--zhs-gradient);
    border-color: transparent;
    border-radius: var(--zhs-radius-sm);
    padding: 11px 22px;
    font-weight: 650;
}

.zhs-shop .accordion-body .btn-primary:hover,
.zhs-shop .accordion-body .btn-primary:focus {
    background: var(--zhs-violet-strong);
    border-color: transparent;
}

.zhs-shop .accordion-body .btn-primary:disabled,
.zhs-shop .accordion-body .btn-primary[disabled] {
    background: #c8c6d6;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

.zhs-shop .accordion-body .nav-pills .nav-link {
    border-radius: var(--zhs-radius-sm);
    color: var(--zhs-ink-soft);
    font-weight: 600;
}

.zhs-shop .accordion-body .nav-pills .nav-link.active {
    background: var(--zhs-violet);
    color: #fff;
}

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

.zhs-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 18px;
    margin: 0 0 6px;
}

.zhs-config__block {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.zhs-config__label {
    font-size: .86rem;
    font-weight: 600;
    color: var(--zhs-ink-soft);
}

.zhs-config__hint {
    font-size: .81rem;
    line-height: 1.45;
    color: var(--zhs-muted);
}

.zhs-config__price {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--zhs-ink);
}

.zhs-config__price--free {
    color: var(--zhs-success);
}

.zhs-config__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--zhs-border);
}

.zhs-config__actions .btn svg {
    width: 16px;
    height: 16px;
    margin-left: 7px;
}

/* ----------------------------------------------------------- plan recap --- */

/* Shown in place of the pricing grid once a plan is chosen, so the customer can
   always see what they are configuring and get back without the browser button. */
.zhs-recap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius);
    background: var(--zhs-surface);
    box-shadow: var(--zhs-shadow);
}

.zhs-recap__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--zhs-gradient);
    color: #fff;
}

.zhs-recap__mark svg {
    width: 22px;
    height: 22px;
}

.zhs-recap__body {
    flex: 1 1 220px;
    min-width: 0;
}

.zhs-recap__label {
    margin: 0 0 3px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--zhs-violet);
}

.zhs-recap__plan {
    margin: 0 0 4px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--zhs-ink);
}

.zhs-recap__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: var(--zhs-muted);
}

.zhs-recap__specs li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.zhs-recap__specs li + li::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.zhs-recap__change {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-surface);
    color: var(--zhs-ink-soft);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.zhs-recap__change:hover {
    border-color: var(--zhs-violet);
    background: var(--zhs-tint);
    color: var(--zhs-violet);
}

.zhs-recap__change:focus-visible {
    outline: 2px solid var(--zhs-violet);
    outline-offset: 2px;
}

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

.zhs-summary {
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius);
    background: var(--zhs-surface);
    box-shadow: var(--zhs-shadow);
    overflow: hidden;
}

.zhs-summary__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--zhs-border);
    background: var(--zhs-sunken);
}

.zhs-summary__head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--zhs-ink);
}

.zhs-summary__count {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--zhs-tint);
    color: var(--zhs-violet);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.zhs-summary__body {
    padding: 20px 22px 22px;
}

.zhs-summary__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.zhs-summary__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 4px 12px;
}

.zhs-summary__item-title {
    grid-column: 1;
    min-width: 0;
    font-size: .93rem;
    font-weight: 650;
    color: var(--zhs-ink);
    overflow-wrap: anywhere;
}

.zhs-summary__item-meta {
    grid-column: 1;
    font-size: .82rem;
    color: var(--zhs-muted);
    overflow-wrap: anywhere;
}

.zhs-summary__item-price {
    grid-column: 2;
    grid-row: 1;
    font-size: .93rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--zhs-ink);
    white-space: nowrap;
}

.zhs-summary__item-price del {
    display: block;
    font-size: .8rem;
    font-weight: 450;
    color: var(--zhs-faint);
}

.zhs-summary__item-price ins {
    display: block;
    text-decoration: none;
    color: var(--zhs-success);
}

.zhs-summary__remove {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--zhs-border);
    border-radius: 8px;
    background: var(--zhs-surface);
    color: var(--zhs-faint);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.zhs-summary__remove:hover {
    border-color: #f5c9d0;
    background: #fdeef0;
    color: #c62d42;
}

.zhs-summary__remove:focus-visible {
    outline: 2px solid var(--zhs-violet);
    outline-offset: 2px;
}

.zhs-summary__remove svg {
    width: 13px;
    height: 13px;
}

/* Setup fees and other add-on lines sit under their parent item, indented, so a
   customer never meets a charge at the total that was not shown as a line. */
.zhs-summary__subline {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-left: 12px;
    border-left: 2px solid var(--zhs-border);
    font-size: .83rem;
    color: var(--zhs-muted);
}

.zhs-summary__subline span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.zhs-summary__totals {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px 0 0;
    border-top: 1px solid var(--zhs-border);
}

.zhs-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .89rem;
}

.zhs-summary__row dt {
    font-weight: 450;
    color: var(--zhs-muted);
}

.zhs-summary__row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--zhs-ink-soft);
    white-space: nowrap;
}

.zhs-summary__row--discount dd {
    color: var(--zhs-success);
}

.zhs-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 13px;
    border-top: 1px solid var(--zhs-border);
}

.zhs-summary__total dt {
    font-size: .95rem;
    font-weight: 650;
    color: var(--zhs-ink);
}

.zhs-summary__total dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--zhs-ink);
    white-space: nowrap;
}

.zhs-summary__currency {
    display: block;
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--zhs-faint);
    text-align: right;
}

/* ------------------------------------------------------ promo & gateways --- */

.zhs-promo {
    margin: 16px 0 0;
}

.zhs-promo__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    color: var(--zhs-violet);
    text-decoration: none;
    cursor: pointer;
}

.zhs-promo__toggle:hover {
    color: var(--zhs-violet-strong);
    text-decoration: underline;
}

.zhs-promo__fields {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.zhs-promo__fields input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 13px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    font-size: .9rem;
}

.zhs-promo__fields input:focus {
    outline: 0;
    border-color: var(--zhs-violet);
    box-shadow: 0 0 0 3px rgba(101, 53, 232, .16);
}

.zhs-gateways {
    margin: 20px 0 0;
}

.zhs-gateways__label {
    margin: 0 0 10px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--zhs-ink-soft);
}

.zhs-gateways__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* The radio itself stays in the DOM under its original name/id — only its label
   is restyled, so the posted gateway_id is unchanged. */
.zhs-gateway input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.zhs-gateway label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 18px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-surface);
    font-size: .89rem;
    font-weight: 600;
    color: var(--zhs-ink-soft);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.zhs-gateway label:hover {
    border-color: #cfc6f4;
}

.zhs-gateway input:checked + label {
    border-color: var(--zhs-violet);
    background: var(--zhs-tint);
    box-shadow: 0 0 0 1px var(--zhs-violet) inset;
}

.zhs-gateway input:focus-visible + label {
    outline: 2px solid var(--zhs-violet);
    outline-offset: 2px;
}

.zhs-checkout-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 18px;
    padding: 15px 22px;
    border: 0;
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-gradient);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .18s ease, box-shadow .18s ease;
    box-shadow: 0 12px 28px -14px rgba(76, 40, 190, .9);
}

.zhs-checkout-cta:hover:not(:disabled) {
    filter: brightness(1.08);
}

.zhs-checkout-cta:focus-visible {
    outline: 2px solid var(--zhs-violet-strong);
    outline-offset: 2px;
}

.zhs-checkout-cta:disabled,
.zhs-checkout-cta[disabled] {
    background: #c8c6d6;
    box-shadow: none;
    cursor: not-allowed;
}

.zhs-checkout-note {
    margin: 12px 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--zhs-muted);
}

.zhs-checkout-note a {
    color: var(--zhs-violet);
}

.zhs-signin-required {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 13px 15px;
    border: 1px solid #ccd5f6;
    border-radius: var(--zhs-radius-sm);
    background: #eef1fd;
    font-size: .86rem;
    line-height: 1.5;
    color: #2f4bbd;
}

.zhs-signin-required svg {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 2px;
}

.zhs-balance-note {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 13px 15px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-success-bg);
    border-color: #bfe6d5;
    font-size: .86rem;
    line-height: 1.5;
    color: var(--zhs-success);
}

/* ------------------------------------------------------------------ misc --- */

.zhs-empty-cart {
    padding: 30px 22px;
    text-align: center;
    color: var(--zhs-muted);
}

.zhs-empty-cart svg {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    color: var(--zhs-faint);
}

.zhs-empty-cart p {
    margin: 0;
    font-size: .89rem;
    line-height: 1.55;
}

.zhs-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border: 1px dashed var(--zhs-border);
    border-radius: var(--zhs-radius);
    background: var(--zhs-sunken);
}

.zhs-help__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--zhs-surface);
    color: var(--zhs-violet);
}

.zhs-help__body {
    flex: 1 1 200px;
    min-width: 0;
}

.zhs-help__body strong {
    display: block;
    font-size: .92rem;
    color: var(--zhs-ink);
}

.zhs-help__body small {
    font-size: .84rem;
    color: var(--zhs-muted);
}

.zhs-help__link {
    flex: none;
    padding: 9px 17px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-surface);
    font-size: .88rem;
    font-weight: 600;
    color: var(--zhs-ink-soft);
    text-decoration: none;
}

.zhs-help__link:hover {
    border-color: var(--zhs-violet);
    color: var(--zhs-violet);
}

.zhs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .zhs-plan,
    .zhs-plan__cta,
    .zhs-billing__option,
    .zhs-recap__change,
    .zhs-checkout-cta {
        transition: none;
    }

    .zhs-plan:hover {
        transform: none;
    }
}

/* ==========================================================================
   Registrant contact details (checkout)

   Rendered inside the checkout form only when the cart contains a domain that
   will actually be sent to a registrar. It sits above the payment method
   because the customer should give the registry what it needs before they are
   asked to pay for something that cannot yet be delivered.
   ========================================================================== */

.zhs-registrant {
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-sunken);
}

.zhs-registrant__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.zhs-registrant__head .icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--zhs-violet);
}

.zhs-registrant__title {
    margin: 0;
    font-size: .92rem;
    font-weight: 650;
    color: var(--zhs-ink);
}

.zhs-registrant__head small {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--zhs-muted);
}

/* The short form a returning customer sees: what we already hold on file, plus
   one control to open the full set of inputs (which stay in the DOM either way). */
.zhs-registrant__summary p {
    margin: 0 0 2px;
    font-size: .88rem;
    color: var(--zhs-ink-soft);
}

.zhs-registrant__edit {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: .84rem;
    font-weight: 650;
    color: var(--zhs-violet);
    cursor: pointer;
}

.zhs-registrant__edit:hover {
    text-decoration: underline;
}

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

.zhs-registrant__grid[hidden] {
    display: none;
}

.zhs-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.zhs-field--wide {
    grid-column: 1 / -1;
}

.zhs-field label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--zhs-ink-soft);
}

.zhs-field .form-control,
.zhs-field .form-select {
    border-radius: var(--zhs-radius-sm);
    border: 1px solid var(--zhs-border);
    padding: 9px 12px;
    font-size: .9rem;
    background: var(--zhs-surface);
    color: var(--zhs-ink);
}

.zhs-field .form-control:focus,
.zhs-field .form-select:focus {
    border-color: var(--zhs-violet);
    box-shadow: 0 0 0 3px rgba(101, 53, 232, .16);
    outline: none;
}

/* intl-tel-input wraps the phone control in its own container; make it fill the
   field the same way a bare input would. */
.zhs-field .iti {
    width: 100%;
}

@media (max-width: 480px) {
    .zhs-registrant__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Domain search and suggestions (configure step)

   Availability for the exact name, then alternatives. Every row in the
   suggestion list has been confirmed available by the registrar before it is
   rendered — the markup has no "probably available" state on purpose.
   ========================================================================== */

.zhs-domain {
    margin: 0 0 4px;
}

.zhs-domain__search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.zhs-domain__input {
    flex: 1 1 240px;
    min-width: 0;
    border-radius: var(--zhs-radius-sm);
    border: 1px solid var(--zhs-border);
    padding: 11px 14px;
    font-size: .95rem;
    background: var(--zhs-surface);
    color: var(--zhs-ink);
}

.zhs-domain__input:focus {
    border-color: var(--zhs-violet);
    box-shadow: 0 0 0 3px rgba(101, 53, 232, .16);
    outline: none;
}

.zhs-domain__tld {
    flex: 0 0 auto;
    width: 130px;
    border-radius: var(--zhs-radius-sm);
    border: 1px solid var(--zhs-border);
    padding: 11px 12px;
    font-size: .95rem;
    background: var(--zhs-surface);
    color: var(--zhs-ink);
}

.zhs-domain__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-gradient);
    color: #fff;
    font-size: .92rem;
    font-weight: 650;
    cursor: pointer;
}

.zhs-domain__go:hover:not(:disabled) {
    background: var(--zhs-violet-strong);
}

.zhs-domain__go:disabled {
    background: #c8c6d6;
    cursor: progress;
}

.zhs-domain__status {
    margin: 14px 0 0;
    font-size: .88rem;
    color: var(--zhs-muted);
}

/* The exact name the customer typed. Its own card so the answer to the question
   they actually asked is never lost among the alternatives. */
.zhs-domain__exact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: var(--zhs-radius-sm);
    border: 1px solid var(--zhs-border);
    background: var(--zhs-surface);
}

.zhs-domain__exact--available {
    border-color: var(--zhs-success);
    background: var(--zhs-success-bg);
}

.zhs-domain__exact--taken {
    border-color: #e6c9c9;
    background: #fdf3f3;
}

.zhs-domain__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--zhs-ink);
    overflow-wrap: anywhere;
}

.zhs-domain__verdict {
    flex: none;
    font-size: .84rem;
    font-weight: 650;
}

.zhs-domain__verdict--available { color: var(--zhs-success); }
.zhs-domain__verdict--taken { color: #a33; }
.zhs-domain__verdict--unknown { color: var(--zhs-muted); }

.zhs-domain__price {
    flex: none;
    font-size: .92rem;
    font-weight: 650;
    color: var(--zhs-ink);
}

.zhs-domain__suggestions {
    margin-top: 18px;
}

.zhs-domain__suggestions h4 {
    margin: 0 0 4px;
    font-size: .92rem;
    font-weight: 650;
    color: var(--zhs-ink);
}

.zhs-domain__suggestions p.zhs-domain__note {
    margin: 0 0 10px;
    font-size: .8rem;
    color: var(--zhs-muted);
}

.zhs-domain__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zhs-domain__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--zhs-border);
    border-radius: var(--zhs-radius-sm);
    background: var(--zhs-surface);
    text-align: left;
    cursor: pointer;
}

.zhs-domain__option:hover {
    border-color: var(--zhs-violet);
    box-shadow: var(--zhs-shadow);
}

.zhs-domain__option[aria-pressed="true"] {
    border-color: var(--zhs-violet);
    background: var(--zhs-tint);
}

.zhs-domain__option-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--zhs-ink);
    overflow-wrap: anywhere;
}

.zhs-domain__option-price {
    flex: none;
    font-size: .84rem;
    font-weight: 650;
    color: var(--zhs-violet);
}

.zhs-domain__unverified {
    margin: 10px 0 0;
    font-size: .78rem;
    color: var(--zhs-faint);
}