/*
 * One Checkout — page styles.
 *
 * The active theme's stylesheet is still loaded (its JS needs the rest of the
 * page to keep working), so everything here is scoped under .onecheckout and
 * resets aggressively rather than assuming a clean slate.
 *
 * Merchants brand this by overriding the custom properties below from the
 * module's Custom CSS setting — no need to edit this file.
 */

:root {
    /* WebGee brand tokens, taken from webgee.com's own stylesheet. */
    --oc-navy:          #112338;
    --oc-navy-mid:      #273d57;
    --oc-accent:        #ff9900;
    --oc-accent-hover:  #e68a00;

    --oc-bg:            #f4f6f9;
    --oc-surface:       #ffffff;
    --oc-border:        #e2e6ec;
    --oc-border-strong: #cbd3dd;
    --oc-text:          #1a1a1a;
    --oc-text-muted:    #5c6670;

    /* Orange is the brand accent, but white on #ff9900 is unreadable, so the
       primary action is navy and orange marks selection and savings. */
    --oc-action:        var(--oc-navy);
    --oc-action-hover:  var(--oc-navy-mid);
    --oc-action-text:   #ffffff;
    --oc-accent-soft:   rgba(255, 153, 0, .08);
    --oc-accent-ring:   rgba(255, 153, 0, .22);

    --oc-save-bg:       #fff4e0;
    --oc-save-text:     #8a5200;
    --oc-include-bg:    #eef3f8;

    --oc-danger:        #c02a2a;
    --oc-danger-soft:   #fdecec;
    --oc-success:       #17794a;
    --oc-success-soft:  #e6f4ec;

    --oc-radius:        12px;
    --oc-radius-sm:     10px;
    --oc-gap:           20px;
    --oc-navbar-h:      68px;
    --oc-shadow:        0 8px 30px rgba(17, 35, 56, .08);
    --oc-font:          "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Arabic and the other RTL locales get the brand's Arabic face. */
[dir="rtl"] {
    --oc-font: "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
}

body.onecheckout {
    margin: 0;
    padding: 0;
    background: var(--oc-bg);
    color: var(--oc-text);
    font-family: var(--oc-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body.onecheckout .oc-shell,
body.onecheckout .oc-shell * {
    box-sizing: border-box;
}

/* The theme's own chrome can still slip through in inline mode. */
body.onecheckout .oc-shell img { max-width: 100%; height: auto; }

/* --- Navbar ------------------------------------------------------------- */

.oc-navbar {
    background: var(--oc-surface);
    border-bottom: 1px solid var(--oc-border);
}

.oc-navbar__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: var(--oc-navbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.oc-navbar__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--oc-navy);
}

.oc-navbar__logo { max-height: 36px; width: auto; display: block; }

.oc-navbar__name { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; }

.oc-navbar__aside { display: flex; align-items: center; gap: 4px; }

.oc-navbar__link {
    color: var(--oc-text-muted);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--oc-radius-sm);
}
.oc-navbar__link:hover { color: var(--oc-navy); background: var(--oc-bg); }

/* Kept out of the accessibility tree's way: hiding a label with display:none
   removes it for a screen reader too, and a bare chat bubble tells those users
   nothing. */
.oc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The combined menu is a phone-only control. */
.oc-navbar__more { display: none; }

/*
 * Five controls across 390px left the bar wrapping and nothing with room to
 * breathe. On a phone it becomes three: the logo, Need help?, and one button
 * holding signing in, language and currency.
 *
 * Need help? keeps its words. It is the one control here a stuck buyer needs
 * to find, and an unlabelled icon is a guess.
 */
@media (max-width: 620px) {
    .oc-navbar__inner { padding: 0 12px; gap: 8px; }
    .oc-navbar__aside { gap: 2px; }

    /* The separate controls give way to the combined one.
       Scoped to body.onecheckout .oc-shell to match the rule these have to
       beat: .oc-menu__toggle is set to display:flex there, and Sign In is one,
       so the unscoped selector lost to it and hid nothing at all. */
    body.onecheckout .oc-shell .oc-navbar__aside > .oc-menu:not(.oc-navbar__more),
    body.onecheckout .oc-shell .oc-navbar__aside > .oc-navbar__signin { display: none; }

    .oc-navbar__more { display: block; }

    .oc-navbar__more-btn {
        width: 42px;
        justify-content: center;
        padding: 0;
    }

    .oc-navbar__more-btn svg { width: 21px; height: 21px; }

    .oc-navbar__link { padding: 8px 10px; font-size: 13.5px; }
    .oc-caret { width: 10px; height: 10px; }

    .oc-navbar__link { padding: 10px; }
    .oc-navbar__chat { width: 20px; height: 20px; }

    /*
     * Zoho's floating bubble sits bottom-right, which on a phone is exactly
     * where the Complete Order button is — it covered the one control the
     * whole page exists to get pressed. Hidden here, and the navbar's chat
     * icon opens it instead.
     *
     * Only when that icon is actually on the page: the class is set by
     * onecheckout.js when it finds the trigger, so a merchant who has turned
     * the help link off keeps the bubble rather than losing chat entirely.
     */
    body.oc-chat-in-navbar #zsiq_float,
    body.oc-chat-in-navbar .zsiq_floatmain,
    body.oc-chat-in-navbar .zsiq_flt_rel { display: none !important; }

    /* Comfortable to hit with a thumb; 38px was under every guideline. */
    .oc-menu__toggle,
    .oc-navbar__link {
        min-height: 42px;
        display: inline-flex;
        align-items: center;
    }

    /* The panel is a list of real choices now, not a two-item dropdown, so it
       gets room and stays inside the screen. */
    .oc-navbar__more .oc-menu__panel {
        min-width: 210px;
        max-height: calc(100vh - var(--oc-navbar-h) - 24px);
        overflow-y: auto;
    }
}

/* A heading inside a menu, telling one group of choices from the next. */
.oc-menu__meta--head {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--oc-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}


/* The help control is a button when there is no URL to fall back to. */
body.onecheckout .oc-shell .oc-navbar__link--button {
    font: inherit;
    font-size: 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.oc-navbar__link.is-busy { opacity: .55; pointer-events: none; }

.oc-navbar__username {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .oc-navbar__inner { padding: 0 16px; gap: 8px; }
    .oc-navbar__username, .oc-navbar__link { display: none; }
}

/* --- Navbar dropdowns --------------------------------------------------- */

.oc-menu { position: relative; }

body.onecheckout .oc-shell .oc-menu__toggle {
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--oc-radius-sm);
    color: var(--oc-navy);
    cursor: pointer;
    white-space: nowrap;
}
body.onecheckout .oc-shell .oc-menu__toggle:hover { background: var(--oc-bg); }

.oc-menu.is-open .oc-caret { transform: rotate(180deg); }

.oc-caret { width: 12px; height: 12px; flex: none; transition: transform .15s ease; }

.oc-flag {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.oc-flag img {
    width: 20px;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(17, 35, 56, .12);
}

body.onecheckout .oc-shell .oc-menu__item--flag {
    display: flex;
    align-items: center;
    gap: 10px;
}

.oc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--oc-navy);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.oc-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    z-index: 60;
    min-width: 200px;
    max-height: 22rem;
    overflow-y: auto;
    padding: 6px;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    box-shadow: var(--oc-shadow);
}

.oc-menu__panel--end { inset-inline-start: auto; inset-inline-end: 0; }

.oc-menu__panel--form { width: 300px; padding: 16px; }

.oc-menu__panel[hidden] { display: none; }

body.onecheckout .oc-shell .oc-menu__item {
    font: inherit;
    font-size: 14px;
    display: block;
    width: 100%;
    text-align: start;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--oc-radius-sm);
    background: transparent;
    color: var(--oc-text);
    text-decoration: none;
    cursor: pointer;
}
body.onecheckout .oc-shell .oc-menu__item:hover { background: var(--oc-bg); }
body.onecheckout .oc-shell .oc-menu__item.is-active { color: var(--oc-navy); font-weight: 600; }
body.onecheckout .oc-shell .oc-menu__item--danger { color: var(--oc-danger); }

.oc-menu__meta {
    padding: 6px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--oc-border);
    font-size: 13px;
    color: var(--oc-text-muted);
    overflow-wrap: anywhere;
}

.oc-menu__forgot {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    text-align: center;
    color: var(--oc-text-muted);
}

/* --- Money-back guarantee ----------------------------------------------- */

.oc-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--oc-success);
    text-align: center;
}

.oc-guarantee__icon { width: 18px; height: 18px; flex: none; }

/* --- Inline sign-in ----------------------------------------------------- */

.oc-login {
    margin-bottom: 20px;
    padding: 18px;
    background: var(--oc-bg);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm);
}

.oc-login[hidden] { display: none; }

.oc-login__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/*
 * WHMCS's linkedaccounts.tpl brings its own Bootstrap-flavoured markup, so the
 * few classes it relies on are given shape here rather than left unstyled.
 */
.oc-login__sso { margin-top: 18px; }

/*
 * WHMCS's linkedaccounts markup carries theme classes of its own —
 * .primary-bg-color paints a filled chip, which lands as a grey block here.
 * The heading is reduced to a divider rule instead.
 */
.oc-login__sso .sub-heading,
.oc-login__sso .sub-heading-borderless {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--oc-text-muted);
}

.oc-login__sso .sub-heading::before,
.oc-login__sso .sub-heading::after,
.oc-login__sso .sub-heading-borderless::before,
.oc-login__sso .sub-heading-borderless::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--oc-border);
}

body.onecheckout .oc-shell .oc-login__sso .primary-bg-color {
    padding: 0;
    background: none;
    color: inherit;
    white-space: nowrap;
}

.oc-login__sso .social-signin-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oc-login__sso .social-signin-btns > * { flex: 1 1 180px; }

.oc-login__sso .providerLinkingFeedback:empty { display: none; }

.oc-login__sso p.small,
.oc-login__sso .text-muted {
    font-size: 13px;
    color: var(--oc-text-muted);
}

.w-hidden { display: none; }

/* --- Included free ------------------------------------------------------ */

.oc-includes { margin-top: 18px; }

.oc-includes__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 650;
    color: var(--oc-navy);
}

.oc-include {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 8px;
    border-radius: var(--oc-radius-sm);
    background: var(--oc-include-bg);
}
.oc-include:last-child { margin-bottom: 0; }

.oc-include__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--oc-surface);
    color: var(--oc-navy);
}
.oc-include__icon svg { width: 20px; height: 20px; }

.oc-include__body { min-width: 0; }

.oc-include__name {
    margin: 0;
    font-weight: 600;
    color: var(--oc-navy);
}

.oc-include__text {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--oc-navy-mid);
}

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

.oc-main { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

.oc-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 32px;
    align-items: start;
}

.oc-col-main { min-width: 0; display: flex; flex-direction: column; gap: var(--oc-gap); }

/*
 * The details, registrant and payment panels all sit inside #frmCheckout, which
 * is one flex child of .oc-col-main — so the column gap never falls between
 * them. The form needs to be a column in its own right.
 */
body.onecheckout .oc-shell #frmCheckout {
    display: flex;
    flex-direction: column;
    gap: var(--oc-gap);
    min-width: 0;
}

.oc-col-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 900px) {
    .oc-main { padding: 20px 16px 120px; }
    .oc-page { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .oc-col-side { position: static; }

    /* The 120px above clears the mobile total bar, which an empty cart does
       not render — so it would just be dead space to scroll past. */
    .oc-main:has(.oc-page--empty) {
        padding-bottom: 40px;
        min-height: calc(100vh - var(--oc-navbar-h) - 60px);
    }
}

/* --- Panels ------------------------------------------------------------- */

.oc-panel {
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
    padding: 24px;
    box-shadow: var(--oc-shadow);
}

.oc-panel--flush { padding: 0; overflow: hidden; }

.oc-panel__title {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.oc-panel__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-inline-end: 9px;
    border-radius: 50%;
    background: var(--oc-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

.oc-panel.is-gated { opacity: 0.45; pointer-events: none; }

/* --- Steps -------------------------------------------------------------- */

.oc-step__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.oc-step.oc-panel--flush .oc-step__head { padding: 24px 24px 0; }

.oc-step.is-done .oc-step__head,
.oc-step:not(.is-open) .oc-step__head { cursor: pointer; }

/*
 * The title's own 16px bottom margin has to go — the head is a flex row and a
 * margin there would push the summary and Edit button out of line with it. But
 * nothing was putting that space back underneath, so every step heading sat
 * directly on top of its first row.
 */
.oc-step__head .oc-panel__title { margin: 0; }

.oc-step__head { margin-bottom: 16px; }

/* ...but not when the step is collapsed and there is nothing under it, or the
   space becomes a gap at the bottom of the panel. Keyed on the body actually
   being hidden rather than on is-open, which is absent before the script runs
   and when the accordion is switched off — in both of those the body is
   showing and the space is wanted. */
.oc-step:has([data-oc-step-body][hidden]) .oc-step__head { margin-bottom: 0; }

/* A closed step still says what it settled. */
.oc-step__summary {
    flex: 1 1 100%;
    padding-inline-start: 31px;
    font-size: 13px;
    color: var(--oc-text-muted);
    overflow-wrap: anywhere;
}

.oc-step__edit { margin-inline-start: auto; }

.oc-step__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.oc-step.oc-panel--flush .oc-step__actions { padding: 0 24px 24px; margin-top: 16px; }

.oc-step:not(.is-open) { padding-bottom: 20px; }

.oc-step.oc-panel--flush:not(.is-open) { padding-bottom: 24px; }

/* A finished step recedes; the open one is where the attention belongs. */
.oc-step.is-done .oc-panel__step { background: var(--oc-success); }

.oc-step [data-oc-step-body][hidden] { display: none; }

/* --- Forms -------------------------------------------------------------- */

.oc-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

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

@media (max-width: 560px) {
    .oc-fields { grid-template-columns: minmax(0, 1fr); }
}

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

.oc-field > label,
.oc-field__label {
    font-size: 13px;
    font-weight: 550;
    color: var(--oc-text-muted);
}

.oc-field__hint { font-size: 12px; color: var(--oc-text-muted); }

body.onecheckout .oc-shell input[type="text"],
body.onecheckout .oc-shell input[type="email"],
body.onecheckout .oc-shell input[type="tel"],
body.onecheckout .oc-shell input[type="password"],
body.onecheckout .oc-shell input[type="number"],
body.onecheckout .oc-shell select,
body.onecheckout .oc-shell textarea {
    font: inherit;
    font-size: 15px;
    width: 100%;
    height: auto;
    color: var(--oc-text);
    background: var(--oc-surface);
    border: 1px solid var(--oc-border-strong);
    border-radius: var(--oc-radius-sm);
    padding: 9px 11px;
    box-shadow: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

/* A select renders a shade shorter than a text input of the same padding, and
   beside one on a phone the difference is visible and the target is smaller. */
@media (max-width: 620px) {
    body.onecheckout .oc-shell input[type="text"],
    body.onecheckout .oc-shell input[type="email"],
    body.onecheckout .oc-shell input[type="tel"],
    body.onecheckout .oc-shell input[type="password"],
    body.onecheckout .oc-shell input[type="number"],
    body.onecheckout .oc-shell select {
        min-height: 44px;
    }
}

body.onecheckout .oc-shell input:focus,
body.onecheckout .oc-shell select:focus,
body.onecheckout .oc-shell textarea:focus {
    outline: none;
    border-color: var(--oc-accent);
    box-shadow: 0 0 0 3px var(--oc-accent-ring);
}

body.onecheckout .oc-shell input[type="checkbox"],
body.onecheckout .oc-shell input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--oc-accent);
    flex: none;
}

/* --- Choice rows (billing cycle, gateways, domain options) --------------- */

.oc-choices { display: flex; flex-direction: column; gap: 8px; }

.oc-choices--inline { flex-direction: row; flex-wrap: wrap; }

.oc-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--oc-border-strong);
    border-radius: var(--oc-radius-sm);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.oc-choice:hover { border-color: var(--oc-accent); }

.oc-choice.is-selected { border-color: var(--oc-accent); background: var(--oc-accent-soft); }

.oc-choice__label { flex: 1; min-width: 0; }

/*
 * A surcharge is a qualifier on the option, not the point of the row, so it
 * sits at the end quietly rather than competing with the name.
 */
.oc-choice__price,
.oc-opt-price {
    margin-inline-start: auto;
    text-align: end;
    font-size: 13px;
    font-weight: 400;
    color: var(--oc-text-muted);
    white-space: nowrap;
}

.oc-opt-price small {
    display: block;
    font-size: 12px;
}

/* --- Billing cycles ----------------------------------------------------- */

.oc-cycle .oc-choice__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.oc-cycle__name { font-weight: 550; }

/* The reason a longer term is worth choosing, stated plainly. */
.oc-save {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.6;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--oc-save-bg);
    color: var(--oc-save-text);
    white-space: nowrap;
}

/* A free domain is worth more than a percentage off, so it reads in the
   colour of a gain rather than the colour of a discount. */
.oc-save--free {
    background: var(--oc-success-soft);
    color: var(--oc-success);
}

.oc-cycle__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    line-height: 1.3;
    white-space: nowrap;
}

.oc-cycle__rate { font-weight: 650; }

/*
 * On a phone the row cannot hold all four parts side by side. The name wraps,
 * the badges will not, and the price — which cannot wrap either — was pushed
 * clean off the right edge: measured 107px outside the viewport, so the one
 * figure the buyer is choosing between was invisible.
 *
 * Below this width the price takes a line of its own, indented to sit under
 * the name rather than under the radio.
 *
 * Kept here, next to the rules it overrides, because a media query carries no
 * extra specificity and an override written earlier in the file simply loses.
 */
@media (max-width: 560px) {
    .oc-cycle { flex-wrap: wrap; }

    .oc-cycle__price {
        flex: 1 0 100%;
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 8px;
        margin-top: 2px;
        padding-inline-start: 28px;
        text-align: start;
        white-space: normal;
    }
}

.oc-cycle__rate small {
    font-weight: 500;
    font-size: 12px;
    color: var(--oc-text-muted);
    margin-inline-start: 2px;
}

.oc-cycle__total { font-size: 12px; color: var(--oc-text-muted); }

/* --- Option icons ------------------------------------------------------- */

.oc-opt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--oc-text-muted);
}

.oc-opt-icon svg { width: 20px; height: 20px; }

.oc-opt-icon img {
    max-width: 26px;
    max-height: 20px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 2px;
    /* Japan, Poland and Switzerland are mostly white and would otherwise have
       no edge against the panel. */
    box-shadow: 0 0 0 1px rgba(17, 35, 56, .12);
}

.oc-choice.is-selected .oc-opt-icon { color: var(--oc-accent); }

/* --- Location latency --------------------------------------------------- */

.oc-latency,
.oc-closest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--oc-bg);
    color: var(--oc-text-muted);
}

.oc-latency { margin-inline-start: auto; }

/* A dot rather than colour alone, so the reading does not depend on hue. */
.oc-latency::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
}

.oc-latency--good { background: var(--oc-success-soft); color: var(--oc-success); }
.oc-latency--fair { background: var(--oc-save-bg);      color: var(--oc-save-text); }
.oc-latency--poor { background: var(--oc-danger-soft);  color: var(--oc-danger); }

.oc-closest {
    margin-inline-start: auto;
    background: var(--oc-success-soft);
    color: var(--oc-success);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* With a "closest" badge present the reading follows it rather than pushing
   away from the label. */
.oc-closest + .oc-latency { margin-inline-start: 0; }

/* --- Payment method marks ----------------------------------------------- */

.oc-gw {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: none;
    margin-inline-start: auto;
    min-width: 40px;
    color: var(--oc-text-muted);
}

.oc-gw__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 40px;
    max-height: 28px;
}

.oc-gw__icon { display: block; width: 22px; height: 22px; }

.oc-choice.is-selected .oc-gw { color: var(--oc-accent); }

/*
 * Where remote-input gateways (Stripe Elements and friends) inject their card
 * form. Only framed once something is actually in it.
 */
#paymentGatewayInput:not(:empty) {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm);
    background: var(--oc-surface);
}

/* --- Buttons ------------------------------------------------------------ */

body.onecheckout .oc-shell .oc-btn {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--oc-radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: filter .12s ease, background .12s ease;
}

body.onecheckout .oc-shell .oc-btn--primary {
    background: var(--oc-action);
    color: var(--oc-action-text);
}
body.onecheckout .oc-shell .oc-btn--primary:hover { background: var(--oc-action-hover); }

body.onecheckout .oc-shell .oc-btn--ghost {
    background: transparent;
    color: var(--oc-text);
    border-color: var(--oc-border-strong);
}
body.onecheckout .oc-shell .oc-btn--ghost:hover { border-color: var(--oc-accent); }

body.onecheckout .oc-shell .oc-btn--block { width: 100%; }

body.onecheckout .oc-shell .oc-btn--lg { padding: 14px 20px; font-size: 16px; }

body.onecheckout .oc-shell .oc-btn[disabled],
body.onecheckout .oc-shell .oc-btn.is-busy {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

/*
 * Working, as opposed to unavailable.
 *
 * The dimming above says "not now". An order being placed takes seconds — a
 * gateway call, a card tokenised, a captcha solved — and dimming it for that
 * says the button is broken rather than busy. This one keeps its colour, keeps
 * its size so nothing under it jumps, and turns.
 */
body.onecheckout .oc-shell .oc-btn.is-working {
    opacity: 1;
    cursor: progress;
    pointer-events: none;
}

body.onecheckout .oc-shell .oc-btn.is-working .oc-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.oc-submit-problem {
    margin-top: 12px;
    text-align: start;
    line-height: 1.55;
}

.oc-submit-problem[hidden] { display: none; }

.oc-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--oc-navy-mid);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.oc-link:hover { text-decoration: underline; }

/* A text link in a step heading — "Existing Customer Login", "Edit" — was 22px
   tall, which is a small thing to hit while holding a phone one-handed. The
   padding is negative-margined back out so the heading keeps its alignment. */
@media (max-width: 620px) {
    .oc-step__head .oc-link,
    .oc-panel__title .oc-link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 6px;
        margin: 0 -6px;
    }
}

/* --- Cart items --------------------------------------------------------- */

.oc-item { padding: 18px 20px; border-bottom: 1px solid var(--oc-border); }
.oc-item:last-child { border-bottom: 0; }

.oc-item__head { display: flex; align-items: flex-start; gap: 14px; }

.oc-item__title { min-width: 0; }

.oc-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--oc-include-bg);
    color: var(--oc-navy);
}

.oc-item__icon svg { width: 22px; height: 22px; }

.oc-item__icon img {
    max-width: 28px;
    max-height: 28px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
}

.oc-item__name { font-weight: 600; margin: 0; }

.oc-item__domain { color: var(--oc-text-muted); font-size: 14px; }

.oc-item__price { margin-inline-start: auto; text-align: end; white-space: nowrap; }

.oc-item__cycle { display: block; color: var(--oc-text-muted); font-size: 13px; }

.oc-item__meta {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: var(--oc-text-muted);
    font-size: 14px;
}
.oc-item__meta li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }

.oc-item__actions { display: flex; gap: 14px; margin-top: 12px; }

/*
 * On a phone the name and the price were competing for one line: the price
 * cannot wrap, so a real product name — "Cloud Servers - ECX – ECX-22" — broke
 * across two or three lines against a narrow column while the price sat in the
 * corner. Stacked, the name gets the full width and the price sits under it.
 *
 * The option list below it is deliberately left alone. Stacking it too was
 * tried and made things worse: every included option put its "$0.00USD" on a
 * line of its own, turning a compact list into a column of zeroes taller than
 * the thing being bought. Side by side, the label wraps and the figure stays
 * out of the way.
 */
@media (max-width: 560px) {
    .oc-item__row { flex-wrap: wrap; }

    .oc-item__title { flex: 1 0 100%; }

    .oc-item__price {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex: 1 0 100%;
        margin-top: 6px;
        margin-inline-start: 0;
        text-align: start;
    }

    .oc-item__cycle { display: inline; }
}

.oc-config { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--oc-border); }

.oc-config[hidden] { display: none; }

/* --- Summary ------------------------------------------------------------ */

.oc-summary__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--oc-border);
}

.oc-summary__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.oc-summary__item-name { min-width: 0; font-weight: 550; line-height: 1.35; }

/* An addon belongs to the product above it, and is indented to say so. */
.oc-summary__item--sub {
    margin-top: -6px;
    padding-inline-start: 14px;
    font-size: 13px;
}

.oc-summary__item--sub .oc-summary__item-name { font-weight: 400; color: var(--oc-navy-mid); }
.oc-summary__item--sub .oc-summary__item-price { font-weight: 500; }

.oc-summary__item-name small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--oc-text-muted);
    overflow-wrap: anywhere;
}

.oc-summary__item-price { white-space: nowrap; font-weight: 600; }

.oc-summary__rows { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }

.oc-summary__row { display: flex; justify-content: space-between; gap: 12px; }

.oc-summary__row--muted { color: var(--oc-text-muted); }

/* A deduction reads as one. */
.oc-summary__row--credit { color: var(--oc-success); font-weight: 550; }

.oc-summary__total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--oc-border);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
}

.oc-summary__total small { font-size: 13px; font-weight: 500; color: var(--oc-text-muted); }

.oc-summary.is-stale { opacity: .5; transition: opacity .15s ease; }

/* The real charge, stated where the decision is made. Not decorative. */
.oc-fx-note {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: var(--oc-radius-sm);
    background: var(--oc-bg);
    font-size: 12px;
    line-height: 1.45;
    color: var(--oc-text-muted);
}

.oc-fx-note strong { color: var(--oc-navy); white-space: nowrap; }

.oc-menu__meta--foot {
    margin: 4px 0 0;
    padding: 8px 12px 2px;
    border-top: 1px solid var(--oc-border);
    border-bottom: 0;
    font-size: 12px;
}

.oc-recurring { margin-top: 12px; font-size: 13px; color: var(--oc-text-muted); }

.oc-recurring__label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.oc-recurring__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 0;
}

.oc-recurring__what {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-recurring__amount { white-space: nowrap; }

.oc-promo { display: flex; gap: 8px; }
.oc-promo input { flex: 1; min-width: 0; }

.oc-promo__error { margin-top: 10px; }
.oc-promo__error[hidden] { display: none; }

.oc-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--oc-success);
    background: var(--oc-success-soft);
    border-radius: var(--oc-radius-sm);
    padding: 10px 12px;
}

/* --- Domain panel ------------------------------------------------------- */

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

.oc-plan {
    margin: 0 0 20px;
    padding: 18px;
    background: var(--oc-bg);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
}

.oc-plan__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.oc-plan__title { min-width: 0; }

.oc-plan__group {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oc-text-muted);
}

.oc-plan__name {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--oc-navy);
}

.oc-plan__price { text-align: end; white-space: nowrap; }

.oc-plan__amount { font-size: 20px; font-weight: 700; color: var(--oc-navy); }

.oc-plan__amount small {
    font-size: 13px;
    font-weight: 500;
    color: var(--oc-text-muted);
}

.oc-plan__term { display: block; font-size: 12px; color: var(--oc-text-muted); }

.oc-plan__description {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--oc-navy-mid);
}

.oc-plan__saving {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--oc-text-muted);
}

.oc-plan__saving strong { color: var(--oc-navy); }

.oc-plan .oc-includes { margin-top: 16px; }

@media (max-width: 560px) {
    .oc-plan__price { text-align: start; }
}

/*
 * A segmented control rather than three cards: the cards were sized to their
 * own text, so they came out uneven and wrapped a lone option onto a second
 * row. Equal columns keep the three choices reading as one control.
 */
.oc-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: var(--oc-bg);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius);
}

@media (max-width: 620px) {
    .oc-segmented { grid-template-columns: minmax(0, 1fr); }
}

.oc-segmented__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.25;
    color: var(--oc-text-muted);
    text-align: center;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.oc-segmented__item:hover { color: var(--oc-navy); }

/* The radio still carries the state and the keyboard behaviour; only its
   default rendering is replaced. */
body.onecheckout .oc-shell .oc-segmented__item input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.oc-segmented__item.is-selected {
    background: var(--oc-surface);
    color: var(--oc-navy);
    box-shadow: 0 1px 3px rgba(17, 35, 56, .12);
}

body.onecheckout .oc-shell .oc-segmented__item input:focus-visible + span {
    outline: 2px solid var(--oc-accent);
    outline-offset: 4px;
    border-radius: 3px;
}

/* --- Domain search ------------------------------------------------------ */

.oc-domain__search {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Name and extension are one value, so they are drawn as one field. */
.oc-domain__group {
    display: flex;
    flex: 1 1 22rem;
    min-width: 0;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border-strong);
    border-radius: var(--oc-radius-sm);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.oc-domain__group:focus-within {
    border-color: var(--oc-accent);
    box-shadow: 0 0 0 3px var(--oc-accent-ring);
}

body.onecheckout .oc-shell .oc-domain__group input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.onecheckout .oc-shell .oc-domain__group input[type="text"]:focus {
    border: 0;
    box-shadow: none;
}

body.onecheckout .oc-shell .oc-domain__group select {
    flex: 0 0 auto;
    width: auto;
    min-width: 6.5rem;
    border: 0;
    border-inline-start: 1px solid var(--oc-border);
    border-radius: 0;
    background: var(--oc-bg);
    box-shadow: none;
    font-weight: 550;
}

body.onecheckout .oc-shell .oc-domain__group select:focus {
    border-inline-start: 1px solid var(--oc-border);
    box-shadow: none;
}

.oc-domain__search .oc-btn { flex: 0 0 auto; min-width: 7rem; }

/*
 * Both selectors are needed: .oc-domain__search .oc-btn above is more specific
 * than "> *", so a rule matching only the universal selector loses to it even
 * inside a media query and the button stays narrow on its own row.
 */
@media (max-width: 480px) {
    .oc-domain__search > *,
    .oc-domain__search .oc-btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

.oc-domain__hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--oc-text-muted);
}

/* What the plan gives away is a reason to carry on, so it is stated rather
   than left as the faintest line on the panel. */
.oc-freebie {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--oc-success-soft);
    color: var(--oc-success);
    font-size: 13px;
    font-weight: 600;
}

.oc-freebie svg { width: 17px; height: 17px; flex: none; }

/* The offer form of the line carries an action, so it needs to wrap and to
   sit full width rather than hugging its text like a badge. */
.oc-freebie--offer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-radius: var(--oc-radius);
    font-weight: 500;
}

.oc-freebie--offer .oc-link {
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
}

/* Rows put away behind "show all"; the toggle sits under its own list. */
.oc-collapse__toggle {
    margin-top: 10px;
    font-size: 13px;
}

.oc-promo__toggle { font-size: 13px; }

/* Reassurance belongs beside the button that needs it, not in a section the
   buyer has already scrolled past. */
.oc-accepted {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    opacity: .75;
}

.oc-accepted__mark {
    display: inline-flex;
    align-items: center;
    height: 20px;
}

.oc-accepted__mark img,
.oc-accepted__mark svg { height: 18px; width: auto; max-width: 40px; }

.oc-domain__results { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }

.oc-domain__result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm);
}

.oc-domain__result.is-available { border-color: var(--oc-success); background: var(--oc-success-soft); }
.oc-domain__result.is-taken { color: var(--oc-text-muted); }

.oc-domain__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }

.oc-domain__epp {
    margin-top: 10px;
    padding: 14px;
    background: var(--oc-bg);
    border-radius: var(--oc-radius-sm);
}

.oc-domain__price {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
}

.oc-badge {
    font-size: 12px;
    font-weight: 650;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--oc-success);
    color: #fff;
    white-space: nowrap;
}

/* --- Alerts ------------------------------------------------------------- */

.oc-alert {
    border-radius: var(--oc-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
}
.oc-alert--error   { background: var(--oc-danger-soft);  color: var(--oc-danger); }
.oc-alert--success { background: var(--oc-success-soft); color: var(--oc-success); }
.oc-alert--info    { background: var(--oc-include-bg);   color: var(--oc-navy); }
.oc-alert ul { margin: 6px 0 0; padding-inline-start: 18px; }

/* --- Empty / complete states -------------------------------------------- */

.oc-centered { max-width: 520px; margin: 40px auto; text-align: center; }

.oc-centered h1 { font-size: 22px; margin: 0 0 10px; }

/* --- Empty cart --------------------------------------------------------- */

/*
 * One column, and narrow. The two-column grid exists to put an order beside
 * its summary; with neither, it only holds the page open around nothing.
 */
/* width:100% because the centring below makes this a flex item, and a flex
   item shrinks to its content — without it the panel never reaches 560px and
   its width is whatever the longest line happens to be. */
.oc-page--empty {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    /* Wide enough for two group cards to sit side by side without their names
       wrapping. Narrower and the choice reads as a cramped list. */
    max-width: 760px;
    margin: 0 auto;
}

/*
 * Held in the middle of what is left of the window rather than sitting near
 * the top of a page-height void. The navbar and the main padding are the only
 * things above it, so subtracting them centres it against what the visitor
 * actually sees.
 */
.oc-main:has(.oc-page--empty) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--oc-navbar-h) - 80px);
}

.oc-empty {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 32px 44px;
    text-align: center;
    overflow: hidden;
}

/* A wash behind the illustration so the panel has a focal point without
   needing an image. Sits under the content and never intercepts a click. */
.oc-empty::before {
    content: "";
    position: absolute;
    top: -110px;
    left: 50%;
    width: 460px;
    height: 340px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, var(--oc-accent-soft), transparent 70%);
    pointer-events: none;
}

.oc-empty > * {
    position: relative;
    animation: oc-rise .5s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes oc-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- illustration */

.oc-empty__art {
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    margin-bottom: 22px;
}

.oc-empty__art > * { grid-area: 1 / 1; }

.oc-empty__ring {
    width: 108px;
    height: 108px;
    border: 1.5px dashed var(--oc-border-strong);
    border-radius: 50%;
    opacity: .8;
    animation: oc-spin 26s linear infinite;
}

.oc-empty__ring--wide {
    width: 132px;
    height: 132px;
    border-style: solid;
    border-color: var(--oc-border);
    opacity: .55;
    animation-duration: 38s;
    animation-direction: reverse;
}

@keyframes oc-spin {
    to { transform: rotate(360deg); }
}

.oc-empty__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--oc-surface);
    color: var(--oc-navy-mid);
    box-shadow: var(--oc-shadow);
    animation: oc-bob 4.5s ease-in-out infinite;
}

.oc-empty__cart svg { width: 36px; height: 36px; }

@keyframes oc-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* The parcels that could have been in it, drifting around the rim. Each is
   rotated into place, then floats along its own radius, so the three never
   pulse together. */
.oc-empty__parcel {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--oc-accent);
    opacity: .9;
    transform: rotate(calc(var(--i) * 120deg + 30deg)) translateY(-58px);
    animation: oc-drift 5.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.8s);
}

.oc-empty__parcel:nth-child(4) { background: var(--oc-navy-mid); }
.oc-empty__parcel:nth-child(5) { background: var(--oc-border-strong); }

@keyframes oc-drift {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* --------------------------------------------------------------- copy */

.oc-empty__title {
    margin: 0;
    font-size: 26px;
    letter-spacing: -.01em;
}

.oc-empty__lead {
    margin: 8px 0 0;
    max-width: 40ch;
    line-height: 1.6;
}

/* ------------------------------------------------------- where to start */

.oc-empty__groups {
    width: 100%;
    max-width: 620px;
    margin-top: 30px;
}

.oc-empty__label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oc-text-muted);
}

.oc-empty__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.oc-dest {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 12px;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm);
    background: var(--oc-surface);
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    animation: oc-rise .45s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: calc(240ms + var(--i, 0) * 55ms);
}

.oc-dest:hover {
    border-color: var(--oc-accent);
    box-shadow: 0 6px 18px rgba(17, 35, 56, .08);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.oc-dest__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: var(--oc-radius-sm);
    background: var(--oc-include-bg);
    color: var(--oc-navy-mid);
    transition: background .18s, color .18s;
}

.oc-dest:hover .oc-dest__icon {
    background: var(--oc-accent-soft);
    color: var(--oc-navy);
}

.oc-dest__icon svg,
.oc-dest__icon img { width: 20px; height: 20px; object-fit: contain; }

/* min-width:0 lets a long name ellipsis instead of pushing the chevron out:
   a flex item is sized by its content until told otherwise. */
.oc-dest__text { flex: 1 1 auto; min-width: 0; }

.oc-dest__name {
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
}

.oc-dest__tagline {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--oc-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oc-dest__go {
    flex: 0 0 auto;
    color: var(--oc-border-strong);
    transition: color .18s, transform .18s;
}

.oc-dest__go svg { display: block; width: 18px; height: 18px; }

.oc-dest:hover .oc-dest__go {
    color: var(--oc-accent);
    transform: translateX(3px);
}

/* ------------------------------------------------------------- actions */

.oc-empty__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}

.oc-empty__trust {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--oc-success);
}

.oc-empty__trust svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* Kept here rather than with the other narrow-screen rules near the top of the
   file: a media query carries no extra specificity, so an override written
   above the rule it means to beat simply loses. */
@media (max-width: 900px) {
    .oc-empty { padding: 40px 20px 34px; }
    .oc-empty__art { width: 112px; height: 112px; margin-bottom: 18px; }
    .oc-empty__ring { width: 92px; height: 92px; }
    .oc-empty__ring--wide { width: 112px; height: 112px; }
    .oc-empty__cart { width: 64px; height: 64px; }
    .oc-empty__cart svg { width: 30px; height: 30px; }
    .oc-empty__parcel { transform: rotate(calc(var(--i) * 120deg + 30deg)) translateY(-49px); }
    .oc-empty__title { font-size: 22px; }
    .oc-empty__groups { margin-top: 24px; }
    .oc-empty__actions { margin-top: 20px; }
}

/* Movement is decoration here, and for some people it is worse than that.
   Everything above degrades to the same layout, standing still. */
@media (prefers-reduced-motion: reduce) {
    .oc-empty > *,
    .oc-dest {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .oc-empty__ring,
    .oc-empty__cart,
    .oc-empty__parcel { animation: none; }

    .oc-empty__parcel { opacity: .9; }

    .oc-dest:hover { transform: none; }
    .oc-dest:hover .oc-dest__go { transform: none; }
}

.oc-muted { color: var(--oc-text-muted); }

.oc-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: oc-spin .7s linear infinite;
    vertical-align: -2px;
}

@keyframes oc-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .oc-spinner { animation-duration: 2s; }
    body.onecheckout .oc-shell * { transition: none !important; }
}

/* --- Mobile sticky checkout bar ----------------------------------------- */

.oc-mobile-bar { display: none; }

@media (max-width: 900px) {
    .oc-mobile-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: var(--oc-surface);
        border-top: 1px solid var(--oc-border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
    }
    .oc-mobile-bar__total { font-weight: 700; white-space: nowrap; }
    .oc-mobile-bar .oc-btn { flex: 1; }
    .oc-col-side .oc-submit-desktop { display: none; }
}


/* ---------------------------------------------------------------- navbar */

.oc-navbar__link--chat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.oc-navbar__chat { width: 17px; height: 17px; flex: none; }

/* The currency button carries a code and its symbol; the symbol is the
   recognisable half, so it is not allowed to fade into the muted grey the
   dropdown uses for the same pairing. */
.oc-menu__symbol { opacity: .8; }

/* ---------------------------------------------------------------- modals */

.oc-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.oc-modal[hidden] { display: none; }

.oc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 35, 56, .55);
}

.oc-modal__box {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    border-radius: var(--oc-radius);
    background: var(--oc-surface);
    box-shadow: 0 24px 60px rgba(17, 35, 56, .25);
}

.oc-modal__x {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    display: inline-flex;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--oc-text-muted);
    cursor: pointer;
}

.oc-modal__x:hover { background: var(--oc-bg); color: var(--oc-text); }
.oc-modal__x svg { width: 18px; height: 18px; }

.oc-modal__title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding-inline-end: 28px;
    font-size: 20px;
}

.oc-modal__body {
    margin-bottom: 20px;
    color: var(--oc-text-muted);
    line-height: 1.65;
}

.oc-modal__foot { margin-top: 14px; text-align: center; }

/*
 * A dialog stacks its parts with no rhythm of its own, so the button ended up
 * flush against the input above it — close enough to read as one control, like
 * a search field with its own submit attached, rather than as a field and then
 * the action.
 *
 * Adjacent siblings rather than a margin on the button itself: an error that is
 * hidden still sits between the two in the markup, so the space has to be able
 * to come from whichever element is actually next. A hidden element takes no
 * margin, which is what makes this work in both states.
 */
.oc-modal__box .oc-fields + .oc-alert,
.oc-modal__box .oc-fields + .oc-btn,
.oc-modal__box .oc-alert + .oc-fields,
.oc-modal__box .oc-alert + .oc-btn { margin-top: 16px; }

/* Stacked, because a dialog is narrow and a two-column pair of fields in it
   leaves both too short to type a real email address into. */
.oc-fields--stack { grid-template-columns: 1fr; }

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

/* The guarantee, when there are terms behind it to read. */
.oc-guarantee--button {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.oc-guarantee--button:hover { text-decoration: underline; }
.oc-guarantee__more { width: 15px; height: 15px; flex: none; opacity: .7; }


/* ------------------------------------------------------------- save cart */

.oc-savecart__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.oc-savecart__toggle svg { width: 17px; height: 17px; flex: none; }

.oc-savecart__body { margin-top: 14px; }

.oc-savecart__note {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
}

.oc-savecart__label {
    display: block;
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--oc-text-muted);
}

.oc-savecart__link { display: flex; gap: 8px; }
.oc-savecart__link input { flex: 1; min-width: 0; font-size: 12px; }
.oc-savecart__error { margin-top: 12px; }

.oc-savecart__email {
    display: inline-block;
    margin-top: 10px;
    font-size: 12.5px;
}


/* ------------------------------------------------------ order complete */

.oc-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 44px 32px 36px;
    text-align: center;
}

.oc-done__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--oc-save-bg);
    color: var(--oc-save-text);
}

.oc-done__icon--ok { background: var(--oc-success-soft); color: var(--oc-success); }
.oc-done__icon svg { width: 32px; height: 32px; }

.oc-done h1 { margin: 0; font-size: 22px; }
.oc-done p { margin: 0; max-width: 42ch; line-height: 1.55; }

.oc-done__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.oc-done__forward { margin-top: 18px; font-size: 12.5px; }

@media (max-width: 900px) {
    .oc-done { padding: 32px 20px 28px; }
}


/* The campaign's own name, under the code it was entered as. */
.oc-promo-applied small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    opacity: .85;
}


/* ------------------------------------------------------- leaving offer */

.oc-modal__box--offer { text-align: center; max-width: 400px; }

.oc-offer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--oc-accent-soft);
    color: var(--oc-accent-hover);
}

.oc-offer__icon svg { width: 30px; height: 30px; }

.oc-offer__title { justify-content: center; padding-inline-end: 0; }

.oc-modal__box--offer .oc-modal__body { margin-bottom: 22px; }

.oc-offer__actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.oc-offer__error { margin-top: 14px; text-align: start; }

/*
 * What the offer is, said plainly.
 *
 * The dialog used to be all persuasion and no number, which asks the buyer to
 * click and find out — the opposite of a reason to stay. This is the number,
 * given the weight it deserves.
 */
.oc-offer__deal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 18px 0 4px;
    padding: 16px 18px;
    border: 1px dashed var(--oc-accent-ring);
    border-radius: var(--oc-radius);
    background: var(--oc-accent-soft);
    overflow: hidden;
}

.oc-offer__amount {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--oc-navy);
}

.oc-offer__for { font-size: 13px; color: var(--oc-text-muted); }

.oc-offer__code {
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--oc-text-muted);
}

/* --------------------------------------------------------- applied */

/* Covers the chip on success. Hidden rather than absent so the tick has
   somewhere to be drawn from. */
.oc-offer__tick {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--oc-success-soft);
    color: var(--oc-success);
    opacity: 0;
    visibility: hidden;
}

.oc-offer__tick svg { width: 46px; height: 46px; }

/* The stroke is drawn rather than faded in: a tick that draws reads as
   something completing, which is what just happened. */
.oc-offer__tick path {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
}

.is-applied .oc-offer__deal {
    border-style: solid;
    border-color: var(--oc-success);
}

.is-applied .oc-offer__tick {
    visibility: visible;
    animation: oc-offer-cover .28s ease-out both;
}

.is-applied .oc-offer__tick path {
    animation: oc-offer-tick .42s cubic-bezier(.65, 0, .45, 1) .16s forwards;
}

/* Scoped to match body.onecheckout .oc-shell .oc-btn--primary, which is where
   the navy comes from. A shorter selector here simply loses and the button
   stays navy while claiming to be done. */
body.onecheckout .oc-shell .is-applied [data-oc-exit-apply] {
    background: var(--oc-success);
    pointer-events: none;
}

@keyframes oc-offer-cover {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: none; }
}

@keyframes oc-offer-tick {
    to { stroke-dashoffset: 0; }
}

/*
 * The summary's discount line, lit as it comes back.
 *
 * This is where the buyer has to look to believe the offer landed, and it is
 * the one part of the page that changed. The highlight is on the row rather
 * than the number so the label travels with it.
 */
.oc-flash {
    animation: oc-flash 1.3s ease-out;
    border-radius: var(--oc-radius-sm);
}

/*
 * The new-card option carries Bootstrap's .radio-inline because gateway scripts
 * select on it. The theme's stylesheet is still in the page, so its idea of what
 * that class looks like has to be put back to ours.
 */
body.onecheckout .oc-shell .oc-choice.radio-inline {
    display: flex;
    padding-inline-start: 0;
    margin: 0;
    font-weight: inherit;
}

/* The checkout's own captcha. Left at Cloudflare's own width so the widget is
   never squeezed into something it cannot draw in. */
.oc-captcha { display: flex; justify-content: flex-start; }
.oc-captcha .cf-turnstile { min-height: 65px; }

/* The gateway's card form, on its way. */
.oc-card-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 2px;
    color: var(--oc-text-muted);
    font-size: 14px;
}

/* A domain nobody can buy. Stated rather than priced. */
.oc-domain__taken {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--oc-danger-soft);
    color: var(--oc-danger);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------- order under review */

.oc-review {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
    padding: 44px 32px 36px;
    text-align: center;
}

/* The panel arrives rather than appears, and its contents follow it in order,
   so the eye is led down to what the buyer has to do. Same stagger as the empty
   cart page: see oc-rise. */
.oc-review > * {
    animation: oc-rise .5s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

/* Blue rather than red. Nothing has gone wrong, and a page that looks like an
   error teaches the buyer to expect one. */
.oc-review__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--oc-include-bg);
    color: var(--oc-navy-mid);
}

.oc-review__icon svg { position: relative; width: 30px; height: 30px; }

/* Rings travelling outwards: something is happening to this order, and it is
   being watched rather than going wrong. Behind the shield, never over it. */
.oc-review__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--oc-navy-mid);
    opacity: 0;
    animation: oc-review-ring 2.8s cubic-bezier(.2, .6, .35, 1) infinite;
    animation-delay: calc(var(--i, 0) * 1.4s);
}

@keyframes oc-review-ring {
    0%   { opacity: .35; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.65); }
    100% { opacity: 0;   transform: scale(1.65); }
}

/* The check draws itself once, as the panel settles. It is a promise about
   where this ends, so it is not looped. */
.oc-review__tick {
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    animation: oc-review-tick .5s cubic-bezier(.6, 0, .3, 1) .5s forwards;
}

@keyframes oc-review-tick { to { stroke-dashoffset: 0; } }

.oc-review__title { margin: 0 0 12px; font-size: 24px; letter-spacing: -.01em; }

.oc-review__body {
    margin: 0 0 6px;
    max-width: 46ch;
    line-height: 1.65;
    color: var(--oc-text-muted);
}

/* ------------------------------------------------------- where it has got to */

/*
 * Three steps, joined by a line. The buyer has paid and been told to wait, so
 * this answers what is happening now and what is left, which is most of what
 * makes waiting bearable.
 *
 * A grid rather than three flex items: the connector is drawn on the row itself
 * and the columns stay equal whatever the translated labels do to their width.
 */
.oc-review__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    max-width: 460px;
    margin: 28px 0 4px;
    padding: 0;
    list-style: none;
}

.oc-review__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    text-align: center;
}

/* The joining line sits behind the dots, drawn from each step back towards the
   one before it, so the ends of the track stay clean. */
.oc-review__step + .oc-review__step::before {
    content: "";
    position: absolute;
    inset-inline-end: 50%;
    inset-inline-start: -50%;
    top: 9px;
    height: 2px;
    background: var(--oc-border);
}

.oc-review__step.is-done + .oc-review__step::before,
.oc-review__step.is-active::before { background: var(--oc-navy-mid); }

.oc-review__dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--oc-border-strong);
    background: var(--oc-surface);
    color: #fff;
}

.oc-review__dot svg { width: 11px; height: 11px; }

.oc-review__step.is-done .oc-review__dot {
    border-color: var(--oc-navy-mid);
    background: var(--oc-navy-mid);
}

/* The live step keeps a pulse going, because it is the one still running. */
.oc-review__step.is-active .oc-review__dot {
    border-color: var(--oc-navy-mid);
    background: var(--oc-navy-mid);
    animation: oc-review-pulse 1.9s ease-in-out infinite;
}

@keyframes oc-review-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39, 61, 87, .35); }
    50%      { box-shadow: 0 0 0 6px rgba(39, 61, 87, 0); }
}

.oc-review__step-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--oc-text-muted);
}

.oc-review__step-state {
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--oc-text-muted);
    opacity: .7;
}

.oc-review__step.is-done .oc-review__step-name,
.oc-review__step.is-active .oc-review__step-name { color: var(--oc-text); }

.oc-review__step.is-active .oc-review__step-state {
    color: var(--oc-navy-mid);
    opacity: 1;
}

/* Both ways out are buttons. One of them is not a lesser choice than the other:
   a buyer who wants to ask and a buyer who wants to get on with something else
   are both doing something reasonable. */
.oc-review__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.oc-review__actions .oc-btn { min-width: 168px; }

/* WHMCS's identity-check dialog is Bootstrap's, and Bootstrap hides it until
   its own script opens it. This page can be reached on a theme that does not
   load Bootstrap, where the markup would otherwise sit open in the panel. The
   inline style Bootstrap sets when opening beats this. */
.oc-review .modal { display: none; }

@media (max-width: 900px) {
    .oc-review { padding: 32px 20px 28px; }
    .oc-review__title { font-size: 21px; }
    .oc-review__steps { margin-top: 24px; }
    .oc-review__step-name { font-size: 12px; }
    .oc-review__actions { width: 100%; }
    .oc-review__actions .oc-btn { flex: 1 1 100%; }
}

/* Motion here is decoration on a page someone reads while anxious. Taken away,
   everything it was saying is still said in words and colour. */
@media (prefers-reduced-motion: reduce) {
    .oc-review > *,
    .oc-review__ring,
    .oc-review__tick,
    .oc-review__step.is-active .oc-review__dot {
        animation: none;
    }

    .oc-review > * { opacity: 1; transform: none; }
    .oc-review__ring { display: none; }
    .oc-review__tick { stroke-dashoffset: 0; }
}

/* ----------------------------------------------- notes in a description */

/*
 * The info icons a merchant writes into a product description. Only the ones
 * with a note behind them are given away as clickable — the class is added by
 * the script, and only after it has found something to show.
 */
.oc-note-icon {
    cursor: pointer;
    color: var(--oc-text-muted);
    text-decoration: none;
    transition: color .15s;
}

.oc-note-icon:hover,
.oc-note-icon:focus-visible { color: var(--oc-accent); }

/*
 * Font Awesome may not be loaded in the checkout shell, and an <a> with no text
 * and no glyph is an invisible target. So we draw one — but only where the
 * icon turned out to have no width of its own, which the script measures. The
 * class it is wearing does not settle it: an element can carry "fad fa-info-
 * circle" all day with no font behind it.
 */
.oc-note-icon--bare::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    background: currentColor;
    -webkit-mask: var(--oc-note-mark) center / contain no-repeat;
            mask: var(--oc-note-mark) center / contain no-repeat;
}

:root {
    --oc-note-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 4.4a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6Zm1.4 11.1h-2.8v-6.9h2.8Z'/%3E%3C/svg%3E");
}

.oc-note__body {
    color: var(--oc-text);
    line-height: 1.7;
}

.oc-note__body p { margin: 0 0 12px; }
.oc-note__body p:last-child { margin-bottom: 0; }
.oc-note__body strong { font-weight: 600; }
.oc-note__body ul { margin: 0 0 12px; padding-inline-start: 20px; }
.oc-note__body img { max-width: 100%; height: auto; border-radius: var(--oc-radius-sm); }

/* ------------------------------------------------- country and phone */

/* The flag sits inside the field, left of the select's own text. */
.oc-country { position: relative; display: block; }

.oc-country__flag {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Empty until the script fills it in, and empty for a country the sprite
       does not have — no box, no broken image. */
    background-repeat: no-repeat;
}

/*
 * Only reserve the space once there is a flag to put in it.
 *
 * Scoped to match the rule that sets the padding in the first place
 * (body.onecheckout .oc-shell select). A shorter selector loses to it, and what
 * that looks like is a flag sitting on top of the country's name.
 */
body.onecheckout .oc-shell .oc-country__flag.iti-flag ~ select {
    padding-inline-start: 40px;
}

/* ---------------------------------------------- the searchable picker */

/* Once the picker is built the select is still in the form, still posting,
   just no longer the thing being looked at. */
.oc-country.is-enhanced > select,
.oc-country.is-enhanced > [data-oc-country-flag] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.onecheckout .oc-shell .oc-country__button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font: inherit;
    font-size: 15px;
    text-align: start;
    color: var(--oc-text);
    background: var(--oc-surface);
    border: 1px solid var(--oc-border-strong);
    border-radius: var(--oc-radius-sm);
    padding: 9px 11px;
    cursor: pointer;
}

body.onecheckout .oc-shell .oc-country__button:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 1px;
}

.oc-country__name { flex: 1 1 auto; min-width: 0; }

.oc-country__panel {
    position: absolute;
    z-index: 6;
    inset-inline: 0;
    margin-top: 4px;
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm);
    box-shadow: var(--oc-shadow);
    padding: 8px;
}

.oc-country__panel[hidden] { display: none; }

body.onecheckout .oc-shell .oc-country__search { margin-bottom: 6px; }

.oc-country__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.oc-country__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.oc-country__option[hidden] { display: none; }

.oc-country__option:hover,
.oc-country__option.is-active { background: var(--oc-bg); }

.oc-country__option[aria-selected="true"] { font-weight: 600; }

/* The flag inside the button and the rows is in the flow, not pinned to the
   left edge the way the one behind the bare select was. */
.oc-country__button .oc-country__flag,
.oc-country__option .oc-country__flag {
    position: static;
    transform: none;
    flex: 0 0 20px;
}

/* --------------------------------------------------------- the offer bar */

/*
 * Sits between the navbar and the page while a live offer is held. Warm rather
 * than loud: it is information the buyer wants, not a countdown shouting at
 * them, and a checkout that shouts is one they leave.
 */
.oc-offerbar {
    background: var(--oc-save-bg);
    color: var(--oc-save-text);
    border-bottom: 1px solid rgba(255, 153, 0, .25);
    font-size: 14px;
}

.oc-offerbar__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.oc-offerbar__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.oc-offerbar__icon { width: 16px; height: 16px; flex: 0 0 16px; }

.oc-offerbar__clock {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.oc-offerbar__save {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.oc-offerbar__save:hover { color: var(--oc-navy); }

/* Once it is over the bar has nothing to hurry anyone about. */
.oc-offerbar.is-over {
    background: var(--oc-bg);
    color: var(--oc-text-muted);
    border-bottom-color: var(--oc-border);
}

@media (max-width: 700px) {
    .oc-offerbar__inner { padding: 9px 16px; gap: 10px; font-size: 13px; }
}

/* ------------------------------------------------------- the held price */

.oc-hold__text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.oc-hold__icon { width: 14px; height: 14px; flex: 0 0 14px; }

.oc-hold__clock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* Under an hour. Warm rather than alarming: this is information, and a
   checkout that shouts at people is a checkout they leave. */
.oc-hold.is-soon { color: var(--oc-save-text); }

.oc-hold.is-over { opacity: .75; }

/* Tabular figures already stop the clock jittering as digits change, so it
   needs no animation of its own — a number that pulses every second is the
   fastest way to make a page feel like a scam. */

@keyframes oc-flash {
    0%      { background: var(--oc-success-soft); box-shadow: 0 0 0 6px var(--oc-success-soft); }
    70%     { background: var(--oc-success-soft); box-shadow: 0 0 0 6px var(--oc-success-soft); }
    100%    { background: transparent; box-shadow: 0 0 0 6px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    /* The confirmation still happens, it just arrives rather than plays. */
    .is-applied .oc-offer__tick { animation: none; opacity: 1; }
    .is-applied .oc-offer__tick path { animation: none; stroke-dashoffset: 0; }
    .oc-flash { animation: none; }
}


.oc-savecart__to { margin-bottom: 12px; }

/* Two full-width buttons stacked need a gap, or they read as one control
   split by a hairline. */
.oc-savecart__body .oc-btn--block + .oc-btn--block { margin-top: 10px; }
.oc-savecart__sent { margin-top: 12px; }
.oc-savecart__sent[hidden] { display: none; }


/* The percentage beside the money, when both are shown: the money is the
   headline and the ratio is the footnote, not two competing badges. */
.oc-save--muted {
    background: transparent;
    color: var(--oc-text-muted);
    padding-inline: 0;
    font-weight: 600;
}


/* What happens once they pay, beside the button that does it. */
.oc-nextstep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--oc-navy-mid);
    text-align: center;
}

.oc-nextstep__icon { width: 17px; height: 17px; flex: none; }


/* The way out for someone who is not buying a domain. */
.oc-domain__own { margin: 10px 0 0; font-size: 13px; }
.oc-domain__own[hidden] { display: none; }

/* --- Premium mode ------------------------------------------------------- *
 *
 * Switched on by lib/Premium.php when the cart holds a product from one of the
 * groups the merchant nominated. The class is on <body> because the navbar it
 * restyles sits outside the page container, and <body> is the one element above
 * both.
 *
 * Almost all of it is token overrides. A second palette rather than a second
 * stylesheet means every panel, button and border follows without being told,
 * and there is no plain-mode rule quietly left behind when something new is
 * added to the checkout.
 */

body.onecheckout.oc-premium {
    --oc-gold:        #ff9900;
    --oc-gold-soft:   rgba(255, 153, 0, .16);
    --oc-gold-line:   rgba(255, 153, 0, .42);

    --oc-bg:          #f6f4f0;
    --oc-accent-soft: rgba(255, 153, 0, .10);
    --oc-accent-ring: rgba(255, 153, 0, .30);
    --oc-include-bg:  #f7f1e6;
    --oc-shadow:      0 10px 34px rgba(17, 23, 35, .10);
}

/* The navbar goes dark, as it is on the marketing site, with the gold hairline
   under it that separates the bar from the page. */
body.onecheckout.oc-premium .oc-navbar {
    background: #0f1b2b;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06);
}

body.onecheckout.oc-premium .oc-navbar::after {
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(90deg, #e8a84a, #ff9900 45%, #ffd79a 70%, #ff9900);
}

body.onecheckout.oc-premium .oc-navbar__brand,
body.onecheckout.oc-premium .oc-navbar__name { color: #ffffff; }

body.onecheckout.oc-premium .oc-navbar__link,
body.onecheckout.oc-premium .oc-menu__toggle { color: rgba(255, 255, 255, .78); }

body.onecheckout.oc-premium .oc-navbar__link:hover,
body.onecheckout.oc-premium .oc-shell .oc-menu__toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
}

/* The dropdowns hang off a dark bar but open onto the page, so they keep the
   light surface they have everywhere else. */
body.onecheckout.oc-premium .oc-menu { color: var(--oc-text); }

/* ----------------------------------------------------------- the mark */

.oc-navbar__mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.oc-premium-rule {
    width: 1px;
    height: 26px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .30), transparent);
    animation: oc-premium-rule 3.6s ease-in-out infinite;
}

.oc-premium-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border: 1px solid var(--oc-gold-line, rgba(255, 153, 0, .42));
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 153, 0, .16), rgba(255, 153, 0, .05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(0, 0, 0, .12);
    overflow: hidden;
    animation: oc-premium-enter .6s cubic-bezier(.22, .8, .3, 1) both;
    animation-delay: .12s;
}

.oc-premium-badge__glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 153, 0, .35), transparent 62%);
    opacity: .55;
    animation: oc-premium-glow 3.6s ease-in-out infinite;
}

/* The sweep that crosses the pill every few seconds. Skewed so it reads as a
   highlight passing over glass rather than a bar sliding across. */
.oc-premium-badge__shine {
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg);
    animation: oc-premium-shine 4.5s ease-in-out infinite;
}

.oc-premium-badge__text {
    position: relative;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    line-height: 1;
    white-space: nowrap;
    background-image: linear-gradient(100deg,
        #e8a84a, #fff6e8 22%, #ff9900 45%, #fff0d4 68%, #ff9900);
    background-size: 220% auto;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: oc-premium-shimmer 4.5s linear infinite;
}

@keyframes oc-premium-enter {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes oc-premium-rule {
    0%, 100% { opacity: .75; }
    50%      { opacity: 1; }
}

@keyframes oc-premium-glow {
    0%, 100% { opacity: .40; transform: scale(.95); }
    50%      { opacity: .75; transform: scale(1.05); }
}

@keyframes oc-premium-shine {
    0%, 12%   { transform: translateX(0) skewX(-18deg); opacity: 0; }
    28%       { opacity: 1; }
    52%, 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

@keyframes oc-premium-shimmer {
    to { background-position: 220% center; }
}

/* --------------------------------------------------- the page in premium */

/* The order summary is where the money is, so it is the one panel that gets
   the gold edge rather than every panel getting it and none of them standing
   out. */
body.onecheckout.oc-premium .oc-summary {
    border-top: 2px solid transparent;
    background-image:
        linear-gradient(var(--oc-surface), var(--oc-surface)),
        linear-gradient(90deg, #e8a84a, #ff9900 55%, #ffd79a);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

body.onecheckout.oc-premium .oc-btn--primary {
    background: #0f1b2b;
    box-shadow: 0 0 0 1px var(--oc-gold-line), 0 8px 22px rgba(255, 153, 0, .16);
}

body.onecheckout.oc-premium .oc-btn--primary:hover { background: #16283e; }

/* Narrow screens hide the word rather than shrink it to nothing: the dark bar
   and the gold rule already say the same thing in the space available. */
/*
 * The badge costs about 70px of a navbar that had none to spare, and what gave
 * way was "Need help?" wrapping onto two lines to make itself narrower. So the
 * space comes back from the parts that can afford it: the rule goes, the pill
 * tightens, and the logo drops a few pixels of height. All scoped to premium —
 * a plain navbar has no badge and no shortage.
 */
@media (max-width: 560px) {
    body.onecheckout.oc-premium .oc-navbar__inner { padding: 0 12px; gap: 8px; }
    body.onecheckout.oc-premium .oc-navbar__logo { max-height: 26px; }
    body.onecheckout.oc-premium .oc-navbar__aside { gap: 0; }
    body.onecheckout.oc-premium .oc-navbar__link { padding: 8px; }

    /* It has the room now, and a two-line link in a one-line bar reads as a
       mistake rather than as a wrap. */
    body.onecheckout.oc-premium .oc-navbar__link--chat { white-space: nowrap; }

    /* The wrapper is in both navbars; only the one with a badge in it has
       anything to space. */
    body.onecheckout.oc-premium .oc-navbar__mark { gap: 8px; }
    .oc-premium-rule { display: none; }
    .oc-premium-badge { padding: 4px 9px; }
    .oc-premium-badge__text { font-size: 10px; letter-spacing: .14em; }
}

/* The badge is the one thing here that is meant to catch the eye, so when
   movement is unwelcome it keeps its gold and simply stops. */
@media (prefers-reduced-motion: reduce) {
    .oc-premium-badge,
    .oc-premium-rule,
    .oc-premium-badge__glow,
    .oc-premium-badge__text {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .oc-premium-badge__shine { display: none; }
}