/* Shared checkout (/checkout/, with /plans/checkout/ compatibility, /plans/confirmed/): the self-serve Care plan and hosting
   purchase that lerws.com's maintenance page links to. Since 2026-09-25 it wears the lerws.com
   shell rather than the boxed /pay/ look: full-bleed transparent header, the site's fluid gutter
   (clamp(20px, 3.4vw, 72px)), warm black #090401 with an ember glow, Matter throughout, 16px
   cards on 6% white and pill buttons. The values are copied from the rendered lerws.com pages,
   not imported, because the two properties keep separate stylesheets. The form inside is
   WooCommerce's own checkout markup, restyled here; this file owns only these routes. */

/* Reckless Neue: only the white coupon/referral modal title uses it now. */
@font-face {
    font-family: "Reckless Neue";
    src: url("../ler-secure-checkout-plugin/assets/fonts/RecklessNeue-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html:has(body.lerws-plan-page),
body.lerws-plan-page,
body.lerws-plan-page .lerws-core-shell,
body.lerws-plan-page .lerws-core-main,
body.lerws-plan-page .lerws-core-main-inner,
body.lerws-plan-page .lerws-core-route {
    background: #090401 !important;
    color: #f9f5f3;
}

/* Full bleed: the theme leaves the browser's default 8px body margin on these routes. */
body.lerws-plan-page {
    margin: 0;
}

.lerws-plan-shell {
    --ck-bg: #090401;
    --ck-surface: #181310;
    --ck-topbar: transparent;
    --ck-field: #221c19;
    --ck-border: rgba(255, 255, 255, 0.1);
    --ck-field-border: rgba(255, 255, 255, 0.22);
    --ck-text: #f9f5f3;
    --ck-muted: #b5aea9;
    --ck-faint: #8d8580;
    --ck-accent: #ff6a2a;
    --ck-accent-hover: #ff7d45;
    --ck-cta: #dd3d06;
    --ck-cta-hover: #f04d12;
    --ck-success: #22c55e;
    --ck-danger: #ef4444;
    --ck-gutter: clamp(20px, 3.4vw, 72px);
    --ck-max: 2200px;
    --ck-aside: clamp(360px, 30vw, 460px);
    --ck-radius: 16px;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 0 0 clamp(56px, 7vw, 112px);
    background: var(--ck-bg);
    color: var(--ck-text);
    font-family: Matter, Inter, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

/* lerws.com's ember glow behind the header and title */
.lerws-plan-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: min(900px, 100vh);
    background:
        radial-gradient(ellipse 60% 70% at 22% 0%, rgba(221, 61, 6, 0.2), rgba(221, 61, 6, 0) 70%),
        radial-gradient(ellipse 40% 50% at 80% 10%, rgba(91, 66, 49, 0.16), rgba(91, 66, 49, 0) 70%);
    pointer-events: none;
}

.lerws-plan-shell *,
.lerws-plan-shell *::before,
.lerws-plan-shell *::after {
    box-sizing: border-box;
}

/* ---- top bar: lerws.com's full-bleed header */
.lerws-plan-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--ck-max);
    min-height: 76px;
    margin: 0 auto;
    padding: 0 var(--ck-gutter);
    border: 0;
    border-radius: 0;
    background: var(--ck-topbar);
}

.lerws-plan-topbar__logo {
    display: inline-flex;
    align-items: center;
}

.lerws-plan-topbar__logo img {
    display: block;
    width: 54px;
    height: auto;
}

.lerws-plan-topbar__actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* lerws.com's EN / ES switch */
.lerws-plan-topbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ck-faint);
    font-size: 14px;
    line-height: 1;
}

.lerws-plan-topbar__lang [aria-current] {
    color: var(--ck-text);
    font-weight: 500;
}

.lerws-plan-topbar__lang a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--ck-muted);
    text-decoration: none;
}

.lerws-plan-topbar__lang a:hover,
.lerws-plan-topbar__lang a:focus-visible {
    color: var(--ck-text);
}

.lerws-plan-topbar__back {
    color: var(--ck-text);
    font-size: 15px;
    text-decoration: none;
}

.lerws-plan-topbar__back:hover,
.lerws-plan-topbar__back:focus-visible {
    color: var(--ck-accent);
}

.lerws-plan-topbar__help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 41px;
    padding: 10px 18px 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--ck-text);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.lerws-plan-topbar__help svg {
    width: 17px;
    height: 17px;
}

.lerws-plan-topbar__help:hover,
.lerws-plan-topbar__help:focus-visible {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.lerws-plan-shell a:focus-visible,
.lerws-plan-shell button:focus-visible {
    outline: 2px solid var(--ck-text);
    outline-offset: 3px;
}

/* ---- title and progress: a left-aligned headline with the steps on the same row */
.lerws-plan {
    max-width: var(--ck-max);
    margin: 0 auto;
    padding: 0 var(--ck-gutter);
}

.lerws-plan__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px 48px;
    margin: 0 0 clamp(28px, 3vw, 48px);
    padding: clamp(48px, 6vw, 104px) 0 clamp(22px, 2.2vw, 32px);
    border-bottom: 1px solid var(--ck-border);
}

.lerws-plan .lerws-plan__hero {
    margin: 0;
    color: var(--ck-text);
    font-family: inherit;
    font-size: clamp(44px, 5.6vw, 96px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-align: left;
}

.lerws-plan-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lerws-plan-steps__item {
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.lerws-plan-steps__item + .lerws-plan-steps__item::before {
    content: "";
    width: clamp(20px, 2.4vw, 40px);
    height: 1px;
    margin: 0 14px 0 5px;
    background: var(--ck-border);
}

.lerws-plan-steps__num {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--ck-border);
    border-radius: 50%;
    color: var(--ck-faint);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.lerws-plan-steps__num svg {
    width: 12px;
    height: 12px;
}

.lerws-plan-steps__item.is-done .lerws-plan-steps__num {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.12);
    color: var(--ck-text);
}

.lerws-plan-steps__item.is-current .lerws-plan-steps__num {
    border-color: var(--ck-cta);
    background: var(--ck-cta);
    color: #ffffff;
}

.lerws-plan-steps strong {
    color: var(--ck-faint);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
}

.lerws-plan-steps__item.is-done strong {
    color: var(--ck-muted);
}

.lerws-plan-steps__item.is-current strong {
    color: var(--ck-text);
}

/* ---- cards */
.lerws-plan-card,
.lerws-plan #customer_details,
.lerws-plan #order_review_heading,
.lerws-plan #order_review {
    border: 1px solid var(--ck-border);
    background: var(--ck-surface);
    color: var(--ck-text);
}

.lerws-plan-card {
    padding: clamp(22px, 2.2vw, 34px);
    border-radius: var(--ck-radius);
}

.lerws-plan-card--message {
    max-width: 760px;
    margin: 0;
    padding: clamp(24px, 2.6vw, 40px);
}

.lerws-plan-card__eyebrow {
    margin: 0 0 8px;
    color: var(--ck-muted);
    font-size: 11.2px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.45;
    text-transform: uppercase;
}

.lerws-plan-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}

.lerws-plan .lerws-plan-card__title,
.lerws-plan .woocommerce-billing-fields > h3,
.lerws-plan #order_review_heading {
    margin: 0;
    color: var(--ck-text);
    font-family: Matter, system-ui, sans-serif;
    font-size: clamp(24px, 2.1vw, 31px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.lerws-plan-card__price {
    margin: 0;
    color: var(--ck-muted);
    font-size: 15px;
    white-space: nowrap;
}

.lerws-plan-card__price span {
    color: var(--ck-accent);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.lerws-plan-card__sub {
    margin: 8px 0 0;
    color: var(--ck-text);
    font-size: 14px;
    line-height: 1.45;
}

/* A card's intro line needs air before the first field label. */
.lerws-plan #customer_details .lerws-plan-card__sub,
.lerws-plan .woocommerce-billing-fields .lerws-plan-card__sub {
    margin-bottom: 20px;
    color: var(--ck-muted);
}

.lerws-plan-card__sub--billing {
    margin: 4px 0 18px;
}


.lerws-plan-card__actions {
    margin: 22px 0 0;
}

.lerws-plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 15px 28px;
    border: 1px solid var(--ck-cta);
    border-radius: 999px;
    background: var(--ck-cta);
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.lerws-plan-button:hover {
    border-color: var(--ck-cta-hover);
    background: var(--ck-cta-hover);
    color: #ffffff;
}

/* ---- /plans/confirmed/: the checkout's two columns again. Status, next steps and actions sit
   on the page at left; the order summary is the card at right, where the checkout had it. */
.lerws-plan-done {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ck-aside);
    grid-template-areas:
        "head aside"
        "next aside"
        "actions aside"
        ". aside";
    grid-template-rows: auto auto auto 1fr;
    gap: 0 clamp(28px, 4vw, 96px);
    align-items: start;
}

.lerws-plan-done > * {
    min-width: 0;
}

.lerws-plan-done__head {
    grid-area: head;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

.lerws-plan-done__head .lerws-plan-card__title {
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.12;
}

.lerws-plan-done__head .lerws-plan-card__sub {
    margin-top: 8px;
    color: var(--ck-muted);
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.45;
}

.lerws-plan-done__badge {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ck-success) 16%, transparent);
    color: var(--ck-success);
}

.lerws-plan-done__badge--pending {
    background: color-mix(in srgb, var(--ck-accent) 16%, transparent);
    color: var(--ck-accent);
}

.lerws-plan-done__badge--problem {
    background: color-mix(in srgb, var(--ck-danger) 16%, transparent);
    color: var(--ck-danger);
}

.lerws-plan-done__aside {
    grid-area: aside;
    position: sticky;
    top: 24px;
}

.lerws-plan-done__summary {
    margin: 14px 0 0;
    padding: 0;
}

.lerws-plan-done__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--ck-border);
}

.lerws-plan-done__row dt {
    flex: none;
    color: var(--ck-muted);
    font-size: 14px;
}

.lerws-plan-done__row dd {
    min-width: 0;
    margin: 0;
    color: var(--ck-text);
    font-size: 14px;
    text-align: right;
    overflow-wrap: anywhere;
}

/* invoice tools inside the order summary card */
.lerws-plan-invoice {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--ck-border);
}

.lerws-plan .lerws-plan-invoice__title {
    margin: 0 0 12px;
    color: var(--ck-text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

.lerws-plan-invoice__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: transparent;
    color: var(--ck-text);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.lerws-plan-invoice__download:hover {
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
}

.lerws-plan-invoice__form {
    margin-top: 16px;
}

.lerws-plan-invoice__form label {
    display: block;
    margin: 0 0 6px;
    color: var(--ck-muted);
    font-size: 12.5px;
}

.lerws-plan-invoice__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.lerws-plan-invoice__row input {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--ck-field-border);
    border-radius: 10px;
    background: var(--ck-field);
    color: var(--ck-text);
    font: inherit;
    font-size: 14px;
}

.lerws-plan-invoice__row input:focus {
    border-color: var(--ck-text);
    outline: 2px solid color-mix(in srgb, var(--ck-text) 22%, transparent);
    outline-offset: 0;
}

.lerws-plan-invoice__send {
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--ck-text);
    border-radius: 999px;
    background: var(--ck-text);
    color: var(--ck-bg);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.lerws-plan-invoice__send:hover {
    background: #ffffff;
}

.lerws-plan-invoice button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.lerws-plan-invoice__status:empty {
    display: none;
}

.lerws-plan-invoice__status,
.lerws-plan-invoice__note {
    margin: 10px 0 0;
    color: var(--ck-muted);
    font-size: 13px;
    line-height: 1.45;
}

.lerws-plan-invoice__status.is-success {
    color: #86efac;
}

.lerws-plan-invoice__status.is-error {
    color: #fca5a5;
}

.lerws-plan-done__next {
    grid-area: next;
    margin-top: clamp(32px, 3.4vw, 52px);
}

.lerws-plan .lerws-plan-done__heading {
    margin: 0 0 6px;
    color: var(--ck-muted);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
}

.lerws-plan-done__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lerws-plan-done__steps li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ck-border);
}

.lerws-plan-done__step-num {
    color: color-mix(in srgb, var(--ck-text) 34%, transparent);
    font-size: 15px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.lerws-plan-done__steps strong {
    display: block;
    color: var(--ck-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
}

.lerws-plan-done__steps p {
    margin: 4px 0 0;
    color: var(--ck-muted);
    font-size: 15px;
    line-height: 1.5;
}

.lerws-plan-done__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin: clamp(28px, 3vw, 44px) 0 0;
}

.lerws-plan-done__link {
    color: var(--ck-text);
    font-size: 15px;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-underline-offset: 4px;
}

.lerws-plan-done__link:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 980px) {
    .lerws-plan-done {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "aside" "next" "actions";
        grid-template-rows: none;
    }

    .lerws-plan-done__aside {
        position: static;
        margin-top: 28px;
    }
}

@media (max-width: 640px) {
    .lerws-plan-done__head {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .lerws-plan-done__badge {
        width: 48px;
        height: 48px;
    }

    .lerws-plan-done__actions .lerws-plan-button {
        width: 100%;
    }

    .lerws-plan-done__actions {
        justify-content: center;
    }
}

.lerws-plan__note {
    margin: 22px 0 0;
    color: var(--ck-muted);
    font-size: 14px;
    text-align: left;
}

.lerws-plan__note a {
    color: var(--ck-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- WooCommerce checkout in two columns: plan + details left, summary + trust right */
.lerws-plan form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ck-aside);
    grid-template-rows: auto auto auto 1fr;
    gap: 0 clamp(20px, 2.4vw, 48px);
    align-items: start;
}

.lerws-plan form.woocommerce-checkout > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
}

.lerws-plan .lerws-plan-card--plan {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 16px;
}

.lerws-plan #customer_details {
    grid-column: 1;
    grid-row: 2 / span 3;
    align-self: stretch;
    padding: 22px 26px 8px;
    border-radius: var(--ck-radius);
}

.lerws-plan #customer_details .col-1,
.lerws-plan #customer_details .col-2 {
    float: none;
    width: 100%;
    max-width: none;
}

/* WooCommerce prints its own heading outside the review box; the card carries its title inside. */
.lerws-plan #order_review_heading {
    display: none;
}

.lerws-plan #order_review {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 24px;
    padding: 22px 26px 26px;
    border-radius: var(--ck-radius);
}

.lerws-plan .lerws-plan-summary__title {
    font-size: 28.5px;
}

.lerws-plan-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.lerws-plan-trust__card {
    min-width: 0;
    min-height: 70px;
    padding: 10px;
    border: 1px solid var(--ck-border);
    border-radius: 14px;
    background: var(--ck-surface);
    color: var(--ck-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.lerws-plan-trust__check {
    display: grid;
    place-items: center;
    width: 11px;
    height: 11px;
    margin-bottom: 7px;
    border-radius: 50%;
    background: var(--ck-success);
    color: #ffffff;
    font-family: Matter, sans-serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
}

/* notices above the form: returning customer, coupon */
.lerws-plan .woocommerce-form-login-toggle .woocommerce-info,
.lerws-plan .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 0 0 12px;
    padding: 14px 18px;
    border: 1px solid var(--ck-border);
    border-radius: 14px;
    background: var(--ck-surface);
    color: var(--ck-muted);
    font-size: 14px;
}

.lerws-plan .woocommerce-form-login-toggle .woocommerce-info::before,
.lerws-plan .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none;
}

.lerws-plan .woocommerce-form-coupon-toggle {
    margin-bottom: 16px;
}

.lerws-plan form.checkout_coupon,
.lerws-plan form.woocommerce-form-login {
    margin: 0 0 16px;
    padding: 18px;
    border: 1px solid var(--ck-border);
    border-radius: 14px;
    background: var(--ck-surface);
    color: var(--ck-text);
}

.lerws-plan .woocommerce-info a,
.lerws-plan .woocommerce-privacy-policy-text a,
.lerws-plan .woocommerce-terms-and-conditions-wrapper a {
    color: var(--ck-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lerws-plan .woocommerce-error,
.lerws-plan .woocommerce-message {
    margin: 0 0 16px;
    padding: 14px 18px;
    border: 1px solid color-mix(in srgb, var(--ck-danger) 45%, var(--ck-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--ck-danger) 10%, var(--ck-surface));
    color: var(--ck-text);
    list-style: none;
}

.lerws-plan .woocommerce-message {
    border-color: color-mix(in srgb, var(--ck-success) 45%, var(--ck-border));
    background: color-mix(in srgb, var(--ck-success) 10%, var(--ck-surface));
}

.lerws-plan .woocommerce-error::before,
.lerws-plan .woocommerce-message::before {
    display: none;
}

/* fields */
.lerws-plan .woocommerce-billing-fields__field-wrapper,
.lerws-plan .woocommerce-account-fields .create-account {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

.lerws-plan .form-row,
.lerws-plan form .form-row.form-row-first,
.lerws-plan form .form-row.form-row-last,
.lerws-plan form .form-row.form-row-wide {
    float: none;
    width: auto;
    margin: 0 0 14px;
    padding: 0;
    grid-column: 1 / -1;
}

.lerws-plan form .form-row.form-row-first {
    grid-column: 1;
}

.lerws-plan form .form-row.form-row-last {
    grid-column: 2;
}

.lerws-plan .form-row label {
    display: block;
    margin: 0 0 6px;
    color: var(--ck-muted);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.45;
}

.lerws-plan .form-row .required {
    color: var(--ck-accent);
    text-decoration: none;
}

.lerws-plan .form-row .optional {
    color: var(--ck-faint);
}

.lerws-plan .form-row .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

.lerws-plan .form-row input.input-text,
.lerws-plan .form-row textarea,
.lerws-plan .form-row select,
.lerws-plan form.checkout_coupon input.input-text,
.lerws-plan form.woocommerce-form-login input.input-text,
.lerws-plan .select2-container .select2-selection--single {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--ck-field-border);
    border-radius: 10px;
    background: var(--ck-field);
    color: var(--ck-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}

.lerws-plan .form-row input.input-text::placeholder {
    color: var(--ck-faint);
}

.lerws-plan .select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0;
    color: var(--ck-text);
    line-height: 20px;
}

.lerws-plan .select2-container .select2-selection--single .select2-selection__arrow {
    top: 8px;
    right: 8px;
}

.lerws-plan .select2-container .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--ck-muted);
}

.lerws-plan .form-row input.input-text:focus,
.lerws-plan .form-row select:focus,
.lerws-plan .select2-container--focus .select2-selection--single,
.lerws-plan .select2-container--open .select2-selection--single {
    border-color: var(--ck-text);
    outline: 2px solid color-mix(in srgb, var(--ck-text) 22%, transparent);
    outline-offset: 0;
}

/* select2's dropdown is appended to <body>, outside .lerws-plan */
body.lerws-plan-page .select2-dropdown {
    border-color: #66645e;
    background: #202020;
    color: #f5f5f3;
}

body.lerws-plan-page .select2-search--dropdown .select2-search__field {
    border-color: #66645e;
    background: #151515;
    color: #f5f5f3;
}

body.lerws-plan-page .select2-results__option--highlighted[aria-selected],
body.lerws-plan-page .select2-results__option--highlighted[data-selected] {
    background: #ff6a2a;
    color: #ffffff;
}

body.lerws-plan-page .select2-results__option[aria-selected="true"],
body.lerws-plan-page .select2-results__option[data-selected="true"] {
    background: #30302e;
    color: #f5f5f3;
}

/* order summary */
.lerws-plan table.shop_table {
    width: 100%;
    margin: 12px 0 18px;
    border: 0;
    border-radius: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.lerws-plan .shop_table th,
.lerws-plan .shop_table td {
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--ck-border);
    background: none;
    color: var(--ck-text);
    text-align: left;
    vertical-align: top;
    font-weight: 400;
}

.lerws-plan .shop_table td:last-child,
.lerws-plan .shop_table th:last-child {
    text-align: right;
}

.lerws-plan .shop_table thead th {
    border-top: 0;
    color: var(--ck-muted);
    font-size: 11.2px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lerws-plan .shop_table .cart_item td.product-name,
.lerws-plan .shop_table .cart_item td.product-total {
    color: var(--ck-accent);
    font-weight: 500;
}

.lerws-plan .shop_table .cart_item .product-quantity,
.lerws-plan .shop_table .cart_item .subscription-details,
.lerws-plan .shop_table .cart_item small {
    color: var(--ck-muted);
    font-weight: 400;
}

.lerws-plan .shop_table .cart-subtotal th,
.lerws-plan .shop_table .recurring-total th {
    color: var(--ck-muted);
}

.lerws-plan .shop_table .order-total th,
.lerws-plan .shop_table .order-total td {
    font-size: 16px;
    font-weight: 600;
}

.lerws-plan .shop_table .recurring-totals th {
    padding-top: 20px;
    color: var(--ck-muted);
    font-size: 11.2px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lerws-plan .shop_table .first-payment-date small,
.lerws-plan .shop_table small {
    color: var(--ck-muted);
    font-size: 12.5px;
}

/* payment */
.lerws-plan #payment {
    border-radius: 0;
    background: none;
    color: var(--ck-text);
}

.lerws-plan #payment ul.payment_methods {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    list-style: none;
}

.lerws-plan #payment ul.payment_methods li {
    margin: 0 0 10px;
    padding: 14px 16px;
    border: 1px solid var(--ck-border);
    border-radius: 12px;
    background: var(--ck-field);
    color: var(--ck-text);
}

.lerws-plan #payment ul.payment_methods li label {
    color: var(--ck-text);
    font-weight: 500;
}

.lerws-plan #payment div.payment_box {
    margin: 12px 0 0;
    padding: 12px 0 0;
    background: none;
    color: var(--ck-muted);
    font-size: 13px;
}

.lerws-plan #payment div.payment_box::before {
    display: none;
}

.lerws-plan #payment .woocommerce-notice,
.lerws-plan #payment ul.payment_methods li.woocommerce-notice {
    border-color: var(--ck-border);
    background: var(--ck-field);
    color: var(--ck-muted);
}

.lerws-plan #payment div.form-row {
    padding: 0;
}

.lerws-plan .woocommerce-privacy-policy-text,
.lerws-plan .woocommerce-terms-and-conditions-wrapper {
    color: var(--ck-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.lerws-plan .woocommerce-privacy-policy-text p {
    margin: 0 0 10px;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper .form-row {
    margin: 10px 0 0;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper label.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--ck-muted);
    font-size: 13px;
    font-weight: 400;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.lerws-plan .woocommerce-account-fields input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--ck-accent);
}

.lerws-plan #place_order {
    float: none;
    width: 100%;
    min-height: 54px;
    margin-top: 12px;
    padding: 16px 28px;
    border: 1px solid var(--ck-cta);
    border-radius: 999px;
    background: var(--ck-cta);
    box-shadow: none;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.lerws-plan #place_order:hover {
    border-color: var(--ck-cta-hover);
    background: var(--ck-cta-hover);
}

.lerws-plan #place_order:focus-visible {
    outline: 2px solid var(--ck-text);
    outline-offset: 3px;
}

.lerws-plan .blockUI.blockOverlay {
    background: rgba(9, 9, 9, 0.6) !important;
}

/* ---- responsive */
@media (max-width: 980px) {
    .lerws-plan form.woocommerce-checkout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }

    .lerws-plan .lerws-plan-card--plan,
    .lerws-plan #customer_details,
    .lerws-plan #order_review {
        grid-column: 1;
        grid-row: auto;
    }

    .lerws-plan #order_review {
        position: static;
    }

    .lerws-plan #customer_details {
        margin-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .lerws-plan-topbar {
        min-height: 64px;
    }

    .lerws-plan-topbar__back {
        display: none;
    }

    .lerws-plan-topbar__help span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .lerws-plan__head {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding-top: 32px;
    }

    .lerws-plan .lerws-plan__hero {
        font-size: 44px;
    }

    /* Phones show every step number but only the current step's label. */
    .lerws-plan-steps__item:not(.is-current) strong {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .lerws-plan-steps__item + .lerws-plan-steps__item::before {
        width: 16px;
        margin: 0 8px 0 0;
    }

    .lerws-plan-steps__item.is-current + .lerws-plan-steps__item::before {
        margin-left: 8px;
    }

    .lerws-plan-card,
    .lerws-plan #customer_details {
        padding-inline: 18px;
    }

    .lerws-plan #order_review {
        padding-inline: 18px;
    }

    .lerws-plan .lerws-plan-card__title,
    .lerws-plan .woocommerce-billing-fields > h3,
    .lerws-plan .lerws-plan-summary__title {
        font-size: 24px;
    }

    .lerws-plan .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    .lerws-plan form .form-row.form-row-first,
    .lerws-plan form .form-row.form-row-last {
        grid-column: 1;
    }

    .lerws-plan-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Inside the summary card the four trust cards sit two by two, check mark inline, so no word breaks. */
.lerws-plan #order_review .lerws-plan-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lerws-plan #order_review .lerws-plan-trust__card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.15;
    overflow-wrap: normal;
}

.lerws-plan #order_review .lerws-plan-trust__check {
    flex: 0 0 auto;
    margin: 0;
}

/* ---- Monthly / Yearly toggle in the plan card (replaces the old text link) */
.lerws-plan-billing {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: min(100%, 420px);
    margin-top: 16px;
    padding: 4px;
    border: 1px solid var(--ck-border);
    border-radius: 12px;
    background: var(--ck-bg);
}

.lerws-plan-billing__option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 52px;
    padding: 8px 14px;
    border-radius: 9px;
    color: var(--ck-muted);
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.lerws-plan-billing__option:hover {
    background: var(--ck-field);
    color: var(--ck-text);
}

.lerws-plan-billing__option.is-active {
    background: var(--ck-text);
    color: var(--ck-bg);
    cursor: default;
}

.lerws-plan-billing__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.lerws-plan-billing__meta {
    font-size: 12.5px;
    line-height: 1.2;
    opacity: 0.8;
}

.lerws-plan-billing__meta--save {
    color: var(--ck-accent);
    opacity: 1;
}

.lerws-plan-billing__option.is-active .lerws-plan-billing__meta--save {
    color: #c2410c;
}

/* ---- country / state dropdowns: select2 draws its own box and list, in its own font */
body.lerws-plan-page .select2-container,
body.lerws-plan-page .select2-container .select2-selection__rendered,
body.lerws-plan-page .select2-dropdown,
body.lerws-plan-page .select2-search__field,
body.lerws-plan-page .select2-results__option {
    font-family: Matter, Inter, system-ui, -apple-system, sans-serif !important;
    font-size: 14px;
    letter-spacing: normal;
}

.lerws-plan .select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: auto;
}

.lerws-plan .select2-container .select2-selection--single .select2-selection__rendered {
    flex: 1;
    padding-right: 22px;
}

.lerws-plan .select2-container .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 10px;
    height: 20px;
    transform: translateY(-50%);
}

body.lerws-plan-page .select2-dropdown {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

body.lerws-plan-page .select2-search--dropdown {
    padding: 8px;
}

body.lerws-plan-page .select2-search--dropdown .select2-search__field {
    padding: 8px 10px;
    border-radius: 8px;
}

body.lerws-plan-page .select2-results__option {
    padding: 8px 12px;
    line-height: 1.35;
}

/* ---- Place order: disabled until the form is complete */
.lerws-plan #place_order:disabled,
.lerws-plan #place_order[aria-disabled="true"] {
    background: #3a2a22;
    box-shadow: none;
    color: rgba(245, 245, 243, 0.55);
    cursor: not-allowed;
    opacity: 1;
}

.lerws-plan .lerws-plan-order-hint {
    margin: 10px 0 0;
    color: var(--ck-muted);
    font-size: 12.5px;
    text-align: center;
}

/* ---- terms: a bordered row with a custom checkbox instead of the bare browser one */
.lerws-plan .woocommerce-terms-and-conditions-wrapper .form-row {
    margin: 14px 0 0;
    padding: 0;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper label.checkbox {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--ck-border);
    border-radius: 12px;
    background: var(--ck-field);
    color: var(--ck-text);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper label.checkbox:hover {
    border-color: var(--ck-field-border);
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper label.checkbox:has(input:checked) {
    border-color: color-mix(in srgb, var(--ck-accent) 60%, var(--ck-border));
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--ck-field-border);
    border-radius: 6px;
    background: var(--ck-surface) no-repeat center / 12px 12px;
    cursor: pointer;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked {
    border-color: var(--ck-accent);
    background-color: var(--ck-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ck-text);
    outline-offset: 2px;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--ck-text);
    font-weight: 500;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper .required {
    display: none;
}

/* ---- Stripe card form (WooCommerce Stripe, Payment Element) */
.lerws-plan #payment ul.payment_methods li.payment_method_stripe > label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.lerws-plan #payment ul.payment_methods li.payment_method_stripe > label img,
.lerws-plan #payment ul.payment_methods li.payment_method_stripe > label svg {
    max-height: 22px;
    border-radius: 4px;
}

/* The card fields sit in a <fieldset> that still carries the browser's grooved border and padding. */
.lerws-plan #payment fieldset.wc-upe-form,
.lerws-plan #payment fieldset.wc-payment-form {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.lerws-plan #payment div.payment_box {
    padding: 14px 0 0;
}

.lerws-plan #payment .wc-stripe-upe-element {
    min-height: 40px;
}

/* Staging and test mode only: Stripe's "use card 4242..." note. */
.lerws-plan #payment .testmode-info {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px dashed var(--ck-border);
    border-radius: 10px;
    color: var(--ck-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.lerws-plan #payment .testmode-info a {
    color: var(--ck-text);
}

.lerws-plan #payment .wc-stripe-copy-test-number {
    padding: 1px 6px;
    border: 1px solid var(--ck-border);
    border-radius: 6px;
    background: var(--ck-surface);
    color: var(--ck-text);
    font: inherit;
    cursor: copy;
}

/* Stripe's express buttons (Google Pay, Apple Pay, Link) are injected straight into the checkout
   form, where they would land as loose grid items. The card form below offers Link as well. */
.lerws-plan #wc-stripe-express-checkout-element,
.lerws-plan #wc-stripe-express-checkout-button-separator,
.lerws-plan #wc-stripe-payment-request-wrapper,
.lerws-plan #wc-stripe-payment-request-button-separator {
    display: none !important;
}

/* WooCommerce puts "&nbsp;<abbr class=required>" after the terms text; as a grid item that stray
   text opened an empty second row. Zero the label's own font so only the real text shows. */
.lerws-plan .woocommerce-terms-and-conditions-wrapper label.checkbox {
    font-size: 0;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 13.5px;
    line-height: 1.45;
}

/* The gateway's generic card icon is a white tile; the card form already shows the brand logos. */
.lerws-plan #payment ul.payment_methods li.payment_method_stripe > label img {
    display: none;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper label.checkbox {
    display: flex;
    align-items: flex-start;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper label.checkbox input[type="checkbox"] {
    flex: 0 0 20px;
}

.lerws-plan .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
    flex: 1 1 auto;
}

/* =====================================================================================
   Round 3 (Ed, 2026-09-24): type, payment column, shorter billing, Saved-cards style rows.
   ===================================================================================== */

/* The secure checkout (/pay/) loads exactly two Matter files, light as 400 and regular as 500,
   so its 600-700 headings render from the regular file. The portal theme ships heavier Matter
   files that made this page look bolder; this family name reproduces /pay/'s set exactly. */
@font-face {
    font-family: "LER Checkout Matter";
    src: url("./matter-light.woff2") format("woff2"), url("./matter-light.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LER Checkout Matter";
    src: url("./matter-regular.woff2") format("woff2"), url("./matter-regular.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.lerws-plan-shell,
.lerws-plan .lerws-plan-card__title,
.lerws-plan .woocommerce-billing-fields > h3,
.lerws-plan .lerws-plan-summary__title,
.lerws-plan-trust__check,
.lerws-plan .form-row input.input-text,
.lerws-plan .form-row select,
.lerws-plan #place_order {
    font-family: "LER Checkout Matter", Inter, system-ui, -apple-system, sans-serif;
}

body.lerws-plan-page .select2-container,
body.lerws-plan-page .select2-container .select2-selection__rendered,
body.lerws-plan-page .select2-dropdown,
body.lerws-plan-page .select2-search__field,
body.lerws-plan-page .select2-results__option {
    font-family: "LER Checkout Matter", Inter, system-ui, -apple-system, sans-serif !important;
}

/* /pay/ sizes: labels 12.48, body 14, summary labels 14.08, lines 13.44/500, total 18/600 */
.lerws-plan .form-row label {
    font-size: 12.48px;
}

.lerws-plan .shop_table th,
.lerws-plan .shop_table td {
    font-size: 14.08px;
}

.lerws-plan .shop_table .cart_item td.product-name,
.lerws-plan .shop_table .cart_item td.product-total {
    font-size: 13.44px;
    font-weight: 500;
}

.lerws-plan .shop_table .order-total th,
.lerws-plan .shop_table .order-total td {
    font-size: 18px;
    font-weight: 600;
}

/* ---- columns: plan, billing, payment on the left; the summary card on the right */
.lerws-plan form.woocommerce-checkout {
    grid-template-rows: auto auto auto 1fr;
}

.lerws-plan #customer_details {
    grid-row: 2;
    align-self: start;
    margin-bottom: 16px;
    padding-bottom: 12px;
}

.lerws-plan .lerws-plan-card--payment {
    grid-column: 1;
    grid-row: 3;
}

.lerws-plan #order_review {
    grid-row: 1 / span 4;
}

.lerws-plan .lerws-plan-card--payment #payment {
    margin-top: 4px;
}

/* ---- shorter billing card: a 6-column grid, halves span 3, city / state / ZIP span 2 */
.lerws-plan .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 12px;
}

.lerws-plan form .form-row.lerws-plan-col-half {
    grid-column: span 3 !important;
}

.lerws-plan form .form-row.lerws-plan-col-third {
    grid-column: span 2 !important;
}

/* Address line 2 has only a screen-reader label; line it up with line 1's input. */
.lerws-plan form #billing_address_2_field {
    padding-top: 24px;
}

.lerws-plan form .form-row {
    margin-bottom: 12px;
}

/* ---- Returning customer / Coupon rows, like /pay/'s "Saved cards" panel, side by side */
.lerws-plan__form > .woocommerce {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.lerws-plan__form > .woocommerce > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.lerws-plan__form > .woocommerce > .woocommerce-form-login-toggle,
.lerws-plan__form > .woocommerce > .woocommerce-form-coupon-toggle {
    grid-column: auto;
    margin-bottom: 16px;
}

.lerws-plan__form > .woocommerce:not(:has(> .woocommerce-form-login-toggle)) > .woocommerce-form-coupon-toggle {
    grid-column: 1 / -1;
}

.lerws-plan .woocommerce-form-login-toggle .woocommerce-info,
.lerws-plan .woocommerce-form-coupon-toggle .woocommerce-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    height: 100%;
    margin: 0;
    padding: 14px 14px 14px 18px;
    border: 1px solid var(--ck-border);
    border-radius: 14px;
    background: var(--ck-surface);
}

.lerws-plan-row__eyebrow {
    grid-column: 1;
    grid-row: 1;
    color: var(--ck-muted);
    font-size: 11.2px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.45;
    text-transform: uppercase;
}

.lerws-plan-row__title {
    grid-column: 1;
    grid-row: 2;
    color: var(--ck-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.lerws-plan .woocommerce-form-login-toggle .woocommerce-info a,
.lerws-plan .woocommerce-form-coupon-toggle .woocommerce-info a {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--ck-text);
    color: var(--ck-bg);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.lerws-plan .woocommerce-form-login-toggle .woocommerce-info a:hover,
.lerws-plan .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    background: #ffffff;
}

.lerws-plan form.woocommerce-form-login,
.lerws-plan form.checkout_coupon {
    margin-top: 0;
}

@media (max-width: 980px) {
    .lerws-plan #customer_details,
    .lerws-plan .lerws-plan-card--payment,
    .lerws-plan #order_review {
        grid-row: auto;
    }

    .lerws-plan .lerws-plan-card--payment {
        margin-bottom: 16px;
    }
}

@media (max-width: 640px) {
    .lerws-plan__form > .woocommerce {
        grid-template-columns: minmax(0, 1fr);
    }

    .lerws-plan__form > .woocommerce > .woocommerce-form-login-toggle,
    .lerws-plan__form > .woocommerce > .woocommerce-form-coupon-toggle {
        grid-column: 1 / -1;
        margin-bottom: 12px;
    }

    .lerws-plan form .form-row.lerws-plan-col-half,
    .lerws-plan form .form-row.lerws-plan-col-third {
        grid-column: 1 / -1 !important;
    }

    .lerws-plan form #billing_address_2_field {
        padding-top: 0;
    }
}

/* /pay/ never fakes a bold: with only the 400 and 500 files, its 650-700 headings render from the
   500 file as-is. Without this, the browser thickened them artificially. */
.lerws-plan-shell,
body.lerws-plan-page .select2-dropdown {
    font-synthesis: none;
}

.lerws-plan .shop_table .recurring-total th {
    color: var(--ck-muted);
    font-size: 14.08px;
    font-weight: 400;
}

.lerws-plan .shop_table .recurring-total td {
    font-size: 16px;
}

/* The spacer is only needed when WooCommerce hides line 2's label (it shows it on this store). */
.lerws-plan form #billing_address_2_field {
    padding-top: 0;
}

.lerws-plan form #billing_address_2_field:has(> label.screen-reader-text) {
    padding-top: 24px;
}

/* The label rule above shows line 2's label (WooCommerce marks it screen-reader-text), so both
   address inputs already line up; no spacer. */
.lerws-plan form #billing_address_2_field,
.lerws-plan form #billing_address_2_field:has(> label.screen-reader-text) {
    padding-top: 0;
}

/* ---- right column: one sticky block, summary card + trust cards below it (as on /pay/) */
.lerws-plan .lerws-plan-aside {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 24px;
    display: grid;
    gap: 14px;
    align-self: start;
    min-width: 0;
}

.lerws-plan .lerws-plan-aside #order_review {
    position: static;
    grid-column: auto;
    grid-row: auto;
}

.lerws-plan .lerws-plan-aside .lerws-plan-trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}

.lerws-plan .lerws-plan-aside .lerws-plan-trust__card {
    display: block;
    min-height: 70px;
    padding: 10px;
    font-size: 12.48px;
    line-height: 1.08;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.lerws-plan .lerws-plan-aside .lerws-plan-trust__check {
    margin: 0 0 7px;
}

@media (max-width: 980px) {
    .lerws-plan .lerws-plan-aside {
        grid-column: 1;
        grid-row: auto;
        position: static;
    }
}


@media (max-width: 640px) {
    .lerws-plan .lerws-plan-aside .lerws-plan-trust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---- reCAPTCHA notice above the trust cards (as on /pay/); Google's floating badge is hidden,
   which its terms allow when this notice is shown. */
.lerws-plan .lerws-plan-recaptcha {
    margin: 0;
    padding: 0 6px;
    color: var(--ck-muted);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.lerws-plan .lerws-plan-recaptcha a {
    color: var(--ck-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.lerws-plan-page .grecaptcha-badge {
    visibility: hidden !important;
}

/* ---- Sign In popup: the secure checkout's dialog (checkout-redesign.css), dark backdrop */
.ler-checkout-login {
    width: min(94vw, 480px);
    height: min(88vh, 760px);
    margin: auto;
    padding: 2.6rem 0 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.ler-checkout-login::backdrop {
    background: rgba(9, 9, 9, 0.72);
    backdrop-filter: blur(4px);
}

.ler-checkout-login__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    visibility: hidden;
    opacity: 0;
    transition: opacity 220ms ease;
}

.ler-checkout-login__frame.is-ready {
    visibility: visible;
    opacity: 1;
}

.ler-checkout-login.is-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: lerws-plan-login-spin 700ms linear infinite;
}

@keyframes lerws-plan-login-spin {
    to {
        transform: rotate(360deg);
    }
}

.ler-checkout-login__close {
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(23, 21, 22, 0.65);
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.ler-checkout-login__close:hover,
.ler-checkout-login__close:focus-visible {
    border-color: #ffffff;
    background: rgba(23, 21, 22, 0.9);
}

/* ---- coupon form: code field and an "Apply coupon" pill on one row */
.lerws-plan form.checkout_coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}

.lerws-plan form.checkout_coupon > p:not(.form-row) {
    flex: 1 1 100%;
    margin: 0;
    color: var(--ck-muted);
    font-size: 14px;
}

.lerws-plan form.checkout_coupon .form-row {
    margin: 0;
}

.lerws-plan form.checkout_coupon .form-row-first {
    flex: 1 1 220px;
}

.lerws-plan form.checkout_coupon .form-row-last {
    flex: 0 0 auto;
}

.lerws-plan form.checkout_coupon input.input-text {
    width: 100%;
}

.lerws-plan form.checkout_coupon button[name="apply_coupon"],
.lerws-plan form.checkout_coupon .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ck-text);
    color: var(--ck-bg);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.lerws-plan form.checkout_coupon button[name="apply_coupon"]:hover,
.lerws-plan form.checkout_coupon .button:hover {
    background: #ffffff;
}

.lerws-plan form.checkout_coupon button[name="apply_coupon"]:focus-visible {
    outline: 2px solid var(--ck-text);
    outline-offset: 3px;
}

.lerws-plan form.checkout_coupon .clear {
    display: none;
}

/* =====================================================================================
   Round 4 (Ed, 2026-09-24): no plan card; Customer information + Billing address cards on
   the left (from templates/plan-checkout/form-billing.php), then Payment details. The
   Monthly / Yearly toggle now sits in the order summary.
   ===================================================================================== */
.lerws-plan form.woocommerce-checkout {
    grid-template-rows: auto auto 1fr;
}

/* #customer_details is now only a holder for the two cards. */
.lerws-plan #customer_details {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.lerws-plan #customer_details .woocommerce-billing-fields {
    display: grid;
    gap: 16px;
}

.lerws-plan .lerws-plan-card--customer .lerws-plan-card__title,
.lerws-plan .lerws-plan-card--address .lerws-plan-card__title {
    margin: 0;
}

.lerws-plan .lerws-plan-card--customer,
.lerws-plan .lerws-plan-card--address {
    padding-bottom: 12px;
}

.lerws-plan .lerws-plan-card--payment {
    grid-row: 2;
}

.lerws-plan .lerws-plan-aside {
    grid-row: 1 / span 3;
}

.lerws-plan .lerws-plan-fields,
.lerws-plan .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 12px;
}

.lerws-plan .lerws-plan-fields .form-row-wide {
    grid-column: 1 / -1;
}

/* Summary card: the Monthly / Yearly toggle spans the card under its subtitle. */
.lerws-plan #order_review .lerws-plan-billing {
    display: grid;
    width: 100%;
    margin: 16px 0 4px;
}

@media (max-width: 980px) {
    .lerws-plan #customer_details,
    .lerws-plan .lerws-plan-card--payment,
    .lerws-plan .lerws-plan-aside {
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    .lerws-plan .lerws-plan-fields .form-row {
        grid-column: 1 / -1 !important;
    }
}

.lerws-plan [data-plan-save-profile][hidden] {
    display: none;
}

.lerws-plan-billing-review {
    color: var(--ck-muted);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* WooCommerce's password strength meter and hint, under "Create a password". */
.lerws-plan .woocommerce-password-strength {
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    background: var(--ck-field);
    color: var(--ck-muted);
    font-size: 12.48px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

.lerws-plan .woocommerce-password-strength:empty {
    display: none;
}

.lerws-plan .woocommerce-password-strength.short,
.lerws-plan .woocommerce-password-strength.bad {
    border-color: color-mix(in srgb, var(--ck-danger) 50%, var(--ck-border));
    color: #fca5a5;
}

.lerws-plan .woocommerce-password-strength.good {
    border-color: color-mix(in srgb, #f59e0b 50%, var(--ck-border));
    color: #fcd34d;
}

.lerws-plan .woocommerce-password-strength.strong {
    border-color: color-mix(in srgb, var(--ck-success) 50%, var(--ck-border));
    color: #86efac;
}

.lerws-plan .woocommerce-password-hint {
    display: block;
    margin-top: 6px;
    color: var(--ck-muted);
    font-size: 12.48px;
    line-height: 1.45;
}

/* WooCommerce's show / hide password button: an eye inside the field instead of a loose pill. */
.lerws-plan .password-input {
    position: relative;
    display: block;
}

.lerws-plan .password-input input.input-text {
    padding-right: 44px;
}

.lerws-plan .password-input .show-password-input {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2b2ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
    transform: translateY(-50%);
    cursor: pointer;
}

.lerws-plan .password-input .show-password-input::after {
    display: none;
}

.lerws-plan .password-input .show-password-input.display-password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

.lerws-plan .password-input .show-password-input:focus-visible {
    outline: 2px solid var(--ck-text);
    outline-offset: 1px;
}

/* ---- Place order in the order summary card (moved there by plan-checkout.js) */
.lerws-plan form.lerws-plan-js .lerws-plan-card--payment .place-order {
    display: none;
}

.lerws-plan #order_review > .place-order {
    display: block;
    margin: 18px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--ck-border);
}

.lerws-plan #order_review > .place-order .woocommerce-terms-and-conditions-wrapper .form-row {
    margin-top: 12px;
}

.lerws-plan #order_review > .place-order #place_order {
    margin-top: 14px;
}

/* The payment card now ends with the card form. */
.lerws-plan .lerws-plan-card--payment #payment ul.payment_methods {
    margin-bottom: 4px;
}

/* =====================================================================================
   Referral card next to the coupon card (Ed, 2026-09-24). Three cards across when the
   Returning customer card shows, two when the visitor is signed in.
   ===================================================================================== */
.lerws-plan__form > .woocommerce {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lerws-plan__form > .woocommerce:not(:has(> .woocommerce-form-login-toggle)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lerws-plan__form > .woocommerce:not(:has(> .woocommerce-form-login-toggle)) > .woocommerce-form-coupon-toggle {
    grid-column: auto;
}

.lerws-plan__form > .woocommerce > .woocommerce-form-referral-toggle {
    grid-column: auto;
    margin-bottom: 16px;
}

.lerws-plan .woocommerce-form-referral-toggle .woocommerce-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 16px;
    height: 100%;
    margin: 0;
    padding: 14px 14px 14px 18px;
    border: 1px solid var(--ck-border);
    border-radius: 14px;
    background: var(--ck-surface);
}

.lerws-plan .woocommerce-form-referral-toggle .woocommerce-info::before {
    display: none;
}

.lerws-plan .woocommerce-form-referral-toggle .woocommerce-info a {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--ck-text);
    color: var(--ck-bg);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.lerws-plan .woocommerce-form-referral-toggle .woocommerce-info a:hover {
    background: #ffffff;
}

.lerws-plan .woocommerce-form-referral-toggle a[data-plan-referral-remove] {
    background: transparent;
    border: 1px solid var(--ck-border);
    color: var(--ck-text);
}

.lerws-plan .woocommerce-form-referral-toggle a[data-plan-referral-remove]:hover {
    background: var(--ck-field);
}

.lerws-plan-row__code {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid color-mix(in srgb, var(--ck-accent) 55%, var(--ck-border));
    border-radius: 999px;
    color: var(--ck-accent);
    font-size: 12.48px;
    font-weight: 500;
    letter-spacing: 0.06em;
    vertical-align: 1px;
}

/* The row's three cards are narrower now; long titles wrap instead of pushing the button. */
.lerws-plan .lerws-plan-row__title {
    overflow-wrap: anywhere;
}

/* Referral code field, full width under the row (like the coupon form). */
.lerws-plan-referral-form {
    grid-column: 1 / -1;
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 1px solid var(--ck-border);
    border-radius: 14px;
    background: var(--ck-surface);
}

.lerws-plan-referral-form[hidden] {
    display: none;
}

.lerws-plan-referral-form__lead {
    margin: 0 0 12px;
    color: var(--ck-muted);
    font-size: 14px;
    line-height: 1.45;
}

.lerws-plan-referral-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lerws-plan-referral-form__row input.input-text {
    flex: 1 1 220px;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--ck-field-border);
    border-radius: 10px;
    background: var(--ck-field);
    color: var(--ck-text);
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lerws-plan-referral-form__row input.input-text::placeholder {
    color: var(--ck-faint);
    letter-spacing: normal;
    text-transform: none;
}

.lerws-plan-referral-form__row input.input-text:focus {
    border-color: var(--ck-text);
    outline: 2px solid color-mix(in srgb, var(--ck-text) 22%, transparent);
}

.lerws-plan-referral-form__apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ck-text);
    color: var(--ck-bg);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.lerws-plan-referral-form__apply:hover {
    background: #ffffff;
}

.lerws-plan-referral-form__apply:disabled {
    opacity: 0.6;
    cursor: progress;
}

.lerws-plan-referral-form__error {
    margin: 10px 0 0;
    color: #fca5a5;
    font-size: 13px;
}

.lerws-plan-referral-form__error[hidden] {
    display: none;
}

/* The discount line in the order summary. */
.lerws-plan .shop_table .fee th,
.lerws-plan .shop_table .fee td {
    color: #86efac;
}

@media (max-width: 1100px) {
    .lerws-plan__form > .woocommerce {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lerws-plan__form > .woocommerce > .woocommerce-form-login-toggle {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .lerws-plan__form > .woocommerce,
    .lerws-plan__form > .woocommerce:not(:has(> .woocommerce-form-login-toggle)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .lerws-plan__form > .woocommerce > .woocommerce-form-referral-toggle,
    .lerws-plan__form > .woocommerce > .woocommerce-form-coupon-toggle {
        grid-column: 1 / -1;
        margin-bottom: 12px;
    }
}

/* WooCommerce prints a second, empty notices wrapper between the coupon and referral cards;
   empty, it must not take a grid row. */
.lerws-plan__form > .woocommerce > .woocommerce-notices-wrapper:empty {
    display: none;
}

/* Visually hidden labels (the theme does not style WordPress's .screen-reader-text here). */
.lerws-plan-shell .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* ...except address line 2, whose label is shown so both address inputs line up. */
.lerws-plan-shell #billing_address_2_field label.screen-reader-text {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0 0 6px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* Row order, independent of the markup order: the three cards always share the top row; an
   opened coupon or referral field (and any notice) goes full width under them, then the form.
   Without this, opening the coupon field pushed the referral card onto its own row. */
.lerws-plan__form > .woocommerce > .woocommerce-notices-wrapper {
    order: 0;
}

.lerws-plan__form > .woocommerce > .woocommerce-form-login-toggle,
.lerws-plan__form > .woocommerce > .woocommerce-form-coupon-toggle,
.lerws-plan__form > .woocommerce > .woocommerce-form-referral-toggle {
    order: 1;
}

.lerws-plan__form > .woocommerce > form.woocommerce-form-login,
.lerws-plan__form > .woocommerce > form.checkout_coupon,
.lerws-plan__form > .woocommerce > .lerws-plan-referral-form,
.lerws-plan__form > .woocommerce > dialog {
    order: 2;
}

.lerws-plan__form > .woocommerce > form.woocommerce-checkout {
    order: 3;
}

/* An opened field sits flush under the row it came from. */
.lerws-plan__form > .woocommerce > form.checkout_coupon,
.lerws-plan__form > .woocommerce > .lerws-plan-referral-form {
    margin-top: 0;
    margin-bottom: 16px;
}

/* =====================================================================================
   Coupon and Referral popups (Ed, 2026-09-24): the same dialog as the Sign In popup (dimmed,
   blurred backdrop, round close button above the card) with a white card in the login page's
   style. The in-page coupon form and referral panel are no longer shown.
   ===================================================================================== */
.lerws-plan-modal {
    width: min(94vw, 460px);
    max-height: 88vh;
    margin: auto;
    padding: 2.6rem 0 0;
    border: 0;
    background: transparent;
    overflow: visible;
    color: #211919;
}

.lerws-plan-modal::backdrop {
    background: rgba(9, 9, 9, 0.72);
    backdrop-filter: blur(4px);
}

.lerws-plan-modal__close {
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: rgba(23, 21, 22, 0.65);
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.lerws-plan-modal__close:hover,
.lerws-plan-modal__close:focus-visible {
    border-color: #ffffff;
    background: rgba(23, 21, 22, 0.9);
}

.lerws-plan-modal__card {
    padding: 32px 28px 28px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.55);
}

.lerws-plan-shell .lerws-plan-modal__title {
    margin: 0;
    color: #211919;
    font-family: "Reckless Neue", Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: center;
}

.lerws-plan-modal__lead {
    margin: 10px 0 22px;
    color: #5f5050;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.lerws-plan-shell .lerws-plan-modal__label {
    position: static !important;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 8px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: #211919;
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
}

.lerws-plan-modal__input,
.lerws-plan-modal .lerws-plan-modal__form input.input-text {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #cbb8b3;
    border-radius: 10px;
    background: #ffffff;
    color: #211919;
    font: inherit;
    font-size: 15px;
    box-shadow: none;
}

.lerws-plan-modal__input--code,
.lerws-plan-modal .lerws-plan-modal__form input#coupon_code {
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lerws-plan-modal__input::placeholder,
.lerws-plan-modal .lerws-plan-modal__form input.input-text::placeholder {
    color: #9a8a87;
    letter-spacing: normal;
    text-transform: none;
}

.lerws-plan-modal__input:focus,
.lerws-plan-modal .lerws-plan-modal__form input.input-text:focus {
    border-color: #6d332d;
    outline: 3px solid rgba(109, 51, 45, 0.18);
    outline-offset: 0;
}

.lerws-plan-modal__submit,
.lerws-plan-modal .lerws-plan-modal__form button[name="apply_coupon"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background: #1c1819;
    box-shadow: 0 10px 22px rgba(33, 27, 28, 0.16);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.lerws-plan-modal__submit:hover,
.lerws-plan-modal .lerws-plan-modal__form button[name="apply_coupon"]:hover {
    background: #363132;
}

.lerws-plan-modal__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.lerws-plan-modal__error,
.lerws-plan-modal .coupon-error-notice,
.lerws-plan-modal .woocommerce-error {
    margin: 10px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: #9d302b;
    font-size: 13px;
    list-style: none;
}

.lerws-plan-modal__error[hidden] {
    display: none;
}

.lerws-plan-modal .woocommerce-error::before {
    display: none;
}

/* WooCommerce's coupon form inside the popup: stack the field and button, drop its own lead. */
.lerws-plan-modal .lerws-plan-modal__form {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.lerws-plan-modal .lerws-plan-modal__form > p:not(.form-row) {
    display: none;
}

.lerws-plan-modal .lerws-plan-modal__form .form-row {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.lerws-plan-modal .lerws-plan-modal__form .clear {
    display: none;
}

/* Popup title and text read from the left edge, in line with the field and button. */
.lerws-plan-shell .lerws-plan-modal__title,
.lerws-plan-modal__lead {
    text-align: left;
}

/* Existing orders use the same checkout shell and tokens as plan purchases.
   The existing payment component retains its token, billing and gateway logic. */
.lerws-unified-order {
    --ler-checkout-canvas: var(--ck-bg);
    --ler-checkout-surface: var(--ck-surface);
    --ler-checkout-surface-soft: var(--ck-field);
    --ler-checkout-border: var(--ck-border);
    --ler-checkout-border-strong: var(--ck-field-border);
    --ler-checkout-text: var(--ck-text);
    --ler-checkout-muted: var(--ck-muted);
    --ler-checkout-accent: var(--ck-accent);
    --ler-checkout-accent-dark: var(--ck-accent);
    --ler-checkout-success: var(--ck-success);
}
.lerws-unified-order #ler-checkout-root {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    color: var(--ck-text);
}
.lerws-unified-order #ler-checkout-root .lerws-checkout-app-shell {
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
}
.lerws-unified-order #ler-checkout-root .lerws-checkout-grid {
    grid-template-columns: minmax(0, 1fr) var(--ck-aside) !important;
    gap: clamp(22px, 3vw, 48px) !important;
    max-width: none !important;
    margin: 0 !important;
}
.lerws-unified-order #ler-checkout-root .lerws-summary-column {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0;
}
.lerws-unified-order #ler-checkout-root .ler-checkout-payment-stack {
    grid-column: 1 !important;
    grid-row: 1 !important;
}
.lerws-unified-order #ler-checkout-root .lerws-invoice-card,
.lerws-unified-order #ler-checkout-root .ler-checkout-billing-card,
.lerws-unified-order #ler-checkout-root .ler-checkout-payment-card,
.lerws-unified-order #ler-checkout-root .lerws-order-details-card {
    padding: clamp(22px, 2.2vw, 34px) !important;
    border-radius: var(--ck-radius) !important;
    border: 1px solid var(--ck-border) !important;
    background: var(--ck-surface) !important;
    color: var(--ck-text) !important;
    box-shadow: none !important;
}
.lerws-unified-order #ler-checkout-root h2,
.lerws-unified-order #ler-checkout-root h3 {
    font-family: inherit !important;
    color: var(--ck-text) !important;
    font-size: clamp(24px, 2.1vw, 31px) !important;
    font-weight: 400 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
}
.lerws-unified-order #ler-checkout-root .lerws-account-field { grid-column: auto !important; }
.lerws-unified-order #ler-checkout-root .lerws-account-contact-copy,
.lerws-unified-order #ler-checkout-root .lerws-account-consents { grid-column: 1 / -1 !important; }
.lerws-unified-order #ler-checkout-root.lerws-checkout-step-2 .lerws-account-details-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
.lerws-unified-order #ler-checkout-root.lerws-checkout-step-2 .lerws-customer-only-field {
    display: block !important;
}
.lerws-unified-order #ler-checkout-root .ler-checkout-billing-card > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}
.lerws-unified-order #ler-checkout-root .ler-checkout-billing-card > div[style*="grid-template-columns"] > div {
    grid-column: auto !important;
    grid-row: auto !important;
}
.lerws-unified-order #ler-checkout-root input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.lerws-unified-order #ler-checkout-root select {
    min-height: 48px !important;
    border-radius: 8px !important;
    border-color: var(--ck-field-border) !important;
    background: var(--ck-field) !important;
    color: var(--ck-text) !important;
    font: inherit !important;
}
.lerws-unified-order #ler-checkout-root .lerws-summary-primary-action,
.lerws-unified-order #ler-checkout-root .stripecheckoutbutton {
    min-height: 48px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: var(--ck-cta) !important;
    color: #fff !important;
    font-family: inherit !important;
}
.lerws-unified-order #ler-checkout-root .lerws-summary-primary-action:hover,
.lerws-unified-order #ler-checkout-root .stripecheckoutbutton:hover {
    background: var(--ck-cta-hover) !important;
}
.lerws-unified-order #ler-checkout-root [hidden] { display: none !important; }
.lerws-unified-order:has(#ler-checkout-root.lerws-checkout-confirmation) .lerws-plan__head {
    display: none !important;
}
/* The actual gateway success screen uses nested legacy wrappers. Give those
   wrappers the same Matter typography, warm surfaces and actions as checkout. */
.lerws-unified-order:has(#ler-checkout-root.lerws-checkout-confirmation) .lerws-checkout-credit-panel,
.lerws-unified-order:has(#ler-checkout-root.lerws-checkout-confirmation) .ler-checkout-auth-hint {
    display: none !important;
}
.lerws-unified-order #ler-checkout-root.lerws-checkout-confirmation {
    max-width: 760px !important;
    margin: clamp(32px, 5vw, 72px) auto 0 !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-shell,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-main {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-intro {
    margin-bottom: 32px !important;
    text-align: left !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-intro > div:first-child {
    margin: 0 0 24px !important;
    background: var(--ck-cta) !important;
    box-shadow: none !important;
}
.lerws-unified-order #ler-checkout-root.lerws-checkout-confirmation h1 {
    font-family: inherit !important;
    font-size: clamp(44px, 5.6vw, 96px) !important;
    font-weight: 400 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    color: var(--ck-text) !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-intro > p,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-label,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel__description,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel__status.is-pending {
    color: var(--ck-muted) !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-order-card,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel {
    padding: clamp(22px, 2.2vw, 34px) !important;
    border: 1px solid var(--ck-border) !important;
    border-radius: var(--ck-radius) !important;
    background: var(--ck-surface) !important;
    box-shadow: none !important;
    color: var(--ck-text) !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-order-card * {
    border-color: var(--ck-border) !important;
    color: inherit !important;
    overflow-wrap: anywhere;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-order-card .lerws-confirmation-label {
    color: var(--ck-muted) !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-order-card div:has(> svg) {
    background: var(--ck-field) !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-actions {
    display: flex !important;
    gap: 12px !important;
    margin: 0 0 24px !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-actions button,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel__button {
    min-height: 48px !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.lerws-unified-order #ler-checkout-root button.lerws-confirmation-primary,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel__button {
    border: 1px solid var(--ck-cta) !important;
    background: var(--ck-cta) !important;
    color: #fff !important;
}
.lerws-unified-order #ler-checkout-root button.lerws-confirmation-primary:hover,
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel__button:hover {
    border-color: var(--ck-cta-hover) !important;
    background: var(--ck-cta-hover) !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel__field label {
    color: var(--ck-text) !important;
}
.lerws-unified-order #ler-checkout-root .lerws-confirmation-email-notice {
    display: none !important; /* Invoice email is already in the order summary. */
}
@media (max-width: 600px) {
    .lerws-unified-order #ler-checkout-root .lerws-confirmation-actions {
        flex-direction: column !important;
    }
    .lerws-unified-order #ler-checkout-root .lerws-confirmation-order-card > div[style*="grid-template-columns"],
    .lerws-unified-order #ler-checkout-root .lerws-confirmation-email-panel__form {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* Recovery owns its heading; inherit the shared palette instead of the old light canvas. */
.lerws-unified-order #ler-checkout-root.lerws-checkout-expired {
    --ck-bg: inherit;
    --ck-surface: inherit;
    --ck-panel: var(--ck-field);
    --ck-border: inherit;
    --ck-border-strong: var(--ck-field-border);
    --ck-text: inherit;
    --ck-muted: inherit;
    --ck-muted-2: var(--ck-faint);
    --ck-brand: var(--ck-cta);
    --ck-brand-strong: var(--ck-cta-hover);
    --ck-on-brand: #fff;
    --ler-checkout-canvas: inherit;
    --ler-checkout-surface: inherit;
    --ler-checkout-surface-soft: inherit;
    --ler-checkout-border: inherit;
    --ler-checkout-border-strong: inherit;
    --ler-checkout-text: inherit;
    --ler-checkout-muted: inherit;
    --ler-checkout-accent: inherit;
    --ler-checkout-accent-dark: inherit;
}
.lerws-unified-order .ler-checkout-auth-hint,
.lerws-unified-order .lerws-checkout-credit-panel,
.lerws-unified-order .ler-checkout-sync-panel {
    margin-bottom: 24px;
    border-radius: var(--ck-radius);
    border: 1px solid var(--ck-border);
    background: var(--ck-surface);
    box-shadow: none;
    color: var(--ck-text);
}
.lerws-unified-order .lerws-checkout-credit-panel {
    padding: clamp(22px, 2.2vw, 34px);
}
.lerws-unified-order .lerws-checkout-credit-panel__top,
.lerws-unified-order .lerws-checkout-credit-panel__meta,
.lerws-unified-order .lerws-checkout-credit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.lerws-unified-order .lerws-checkout-credit-panel__eyebrow {
    color: var(--ck-muted);
}
.lerws-unified-order .lerws-checkout-credit-panel__value {
    margin: 8px 0;
    font-size: clamp(24px, 2.1vw, 31px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.025em;
}
.lerws-unified-order .lerws-checkout-credit-panel p {
    margin: 0;
    color: var(--ck-muted);
}
.lerws-unified-order .lerws-checkout-credit-panel__meta:empty {
    display: none;
}
.lerws-unified-order .lerws-checkout-credit-panel__meta:not(:empty) {
    justify-content: flex-start;
    margin-top: 12px;
}
.lerws-unified-order .lerws-checkout-credit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--ck-cta);
    border-radius: 999px;
    background: var(--ck-cta);
    color: var(--ck-text);
    font: inherit;
    text-decoration: none;
}
.lerws-unified-order .lerws-checkout-credit-btn--secondary {
    border-color: var(--ck-field-border);
    background: transparent;
}
.lerws-unified-order .lerws-checkout-credit-btn:hover {
    border-color: var(--ck-text);
}
.lerws-unified-order .lerws-checkout-credit-btn:focus-visible {
    outline: 2px solid var(--ck-accent);
    outline-offset: 3px;
}
.lerws-unified-order #ler-checkout-progress {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
@media (max-width: 980px) {
    .lerws-unified-order #ler-checkout-root .lerws-checkout-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .lerws-unified-order #ler-checkout-root .lerws-summary-column,
    .lerws-unified-order #ler-checkout-root .ler-checkout-payment-stack {
        grid-column: 1 !important;
        grid-row: auto !important;
        position: static !important;
    }
    .lerws-unified-order #ler-checkout-root .ler-checkout-payment-stack { order: 1; }
    .lerws-unified-order #ler-checkout-root .lerws-summary-column { order: 2; }
}
@media (max-width: 640px) {
    .lerws-unified-order #ler-checkout-root.lerws-checkout-step-2 .lerws-account-details-fields,
    .lerws-unified-order #ler-checkout-root .ler-checkout-billing-card > div[style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}