/* ============================================================
   Two-Step Checkout — One Column (Template 5)

   A single-column variant of the two-step checkout: the order summary sits
   at the TOP as a collapsible bar (OPEN by default), and the two step cards
   stack beneath it. The step engine (indicator, Continue/Back, validation,
   register-AJAX, pane show/hide) is SHARED with Template 4 via the
   .scp-checkout-two-step marker class that scp-checkout.js keys off — this
   file owns only the ONE-COLUMN layout and the collapsible summary bar.

   EVERYTHING here is scoped to .scp-checkout-template-5, so Templates 1-4 are
   never affected. Loaded on BOTH the front end and the block editor (via
   enqueue_block_assets) so the editor preview mirrors the front end.

   Brand accent uses the checkout's own primary colour var so merchant
   branding is respected; the reference indigo is only the fallback.
   ============================================================ */
.scp-checkout-template-5 {
    --t5-ink: #1a1a2e;
    --t5-muted: #6b7280;
    --t5-line: #e5e7eb;
    /* Card background is merchant-configurable (Checkout editor → Card background);
       the render callback emits --scp-checkout-card-bg-color, default #ffffff. */
    --t5-card: var(--scp-checkout-card-bg-color, #ffffff);
    --t5-brand: var(--scp-checkout-primary-bg-color, #4f46e5);
    --t5-brand-text: var(--scp-checkout-primary-text-color, #ffffff);
    --t5-brand-soft: #eef2ff;
    --t5-brand-soft: color-mix(in srgb, var(--t5-brand) 12%, #fff);
    --t5-green: #16a34a;
    --t5-green-soft: #ecfdf5;
    --t5-radius: 14px;

    color: var(--t5-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

/* The single column is narrow and centred; no wrapper "card" (the step panes
   and the summary bar carry their own borders + subtle shadow). */
.scp-checkout-template-5 #scp-checkout {
    background: transparent;
    padding: 0;
}
.scp-checkout-template-5 .scp-container {
    max-width: 600px;
    margin: 0 auto;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
}

/* Anti-FOUC: hide the checkout until scp-checkout.js has injected the step chrome,
   wrapped the panels and built the collapsible summary bar (it then removes
   .scp-two-step-init). The animation reveals after 2s even if the JS never runs. */
.scp-checkout-template-5.scp-two-step-init { opacity: 0; animation: scpTwoStepReveal .01s linear 2s forwards; }
@keyframes scpTwoStepReveal { to { opacity: 1; } }

/* ---------- Step indicator (shared look with Template 4) ---------- */
.scp-checkout-template-5 .scp-step-indicator {
    display: flex; align-items: flex-start; justify-content: center;
    max-width: 400px; margin: 0 auto 26px;
}
.scp-checkout-template-5 .scp-step-node {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    width: 120px; text-align: center;
    background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
}
.scp-checkout-template-5 .scp-step-dot {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    background: #fff; border: 2px solid var(--t5-line); color: var(--t5-muted);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06); transition: .25s;
}
.scp-checkout-template-5 .scp-step-name {
    font-size: 13px; font-weight: 700; color: var(--t5-muted); transition: .25s;
}
.scp-checkout-template-5 .scp-step-node.is-active .scp-step-dot {
    background: var(--t5-brand); border-color: var(--t5-brand); color: var(--t5-brand-text);
    box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
}
.scp-checkout-template-5 .scp-step-node.is-active .scp-step-name { color: var(--t5-ink); }
.scp-checkout-template-5 .scp-step-node.is-done .scp-step-dot {
    background: var(--t5-green); border-color: var(--t5-green); color: #fff;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .3);
}
.scp-checkout-template-5 .scp-step-node.is-done .scp-step-name { color: var(--t5-ink); }
.scp-checkout-template-5 .scp-step-line {
    flex: 1; max-width: 110px; height: 3px; border-radius: 3px;
    background: var(--t5-line); margin: 19px 6px 0; transition: .25s;
}
.scp-checkout-template-5 .scp-step-line.is-done { background: var(--t5-green); }

/* ---------- Step-2 greeting banner ----------
   Full-width message shown below the step indicator once the buyer reaches step 2
   (Payment). Injected by scp-checkout.js (and the editor extension) just above the
   column; [name] is filled from the first-name field. First line is the heading,
   the rest is sub-text. Merchant-configurable + toggleable via the block's Two-Step
   settings. Hidden on step 1 by the .scp-on-step-1 rule below. */
.scp-checkout-template-5 .scp-step2-greeting {
    background: #f8fafc;
    border: 1px solid var(--t5-line);
    border-radius: 12px;
    padding: 16px 18px;
    margin: 0 0 20px;
}
.scp-checkout-template-5 .scp-step2-greeting-title {
    font-size: 15px; font-weight: 700; color: var(--t5-ink); margin: 0; line-height: 1.35;
}
.scp-checkout-template-5 .scp-step2-greeting-sub {
    font-size: 13px; color: var(--t5-muted); margin: 4px 0 0; line-height: 1.5;
}
.scp-checkout-template-5.scp-on-step-1 .scp-step2-greeting { display: none; }

/* ---------- Single column ----------
   The seed layout is a one-column wp:columns; collapse the flex row to a block
   stack so the summary bar and the step cards flow top-to-bottom. Scoped to the
   template, so nothing else is touched. */
.scp-checkout-template-5 .wp-block-columns { display: block; margin: 0; }
.scp-checkout-template-5 .scp-left-part-checkout {
    width: 100% !important; flex-basis: 100% !important; min-width: 0; padding: 0;
}

/* ---------- Cards (step panes + summary bar) ---------- */
.scp-checkout-template-5 .scp-step-pane-1,
.scp-checkout-template-5 .scp-step-pane-2,
.scp-checkout-template-5 .scp-summary-top {
    background: var(--t5-card);
    border: 1px solid var(--t5-line);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    border-radius: var(--t5-radius);
    margin-bottom: 16px;
}
.scp-checkout-template-5 .scp-step-pane-1,
.scp-checkout-template-5 .scp-step-pane-2 { padding: 24px; }
/* The summary bar owns its own padding via the bar header + body. */
.scp-checkout-template-5 .scp-summary-top { padding: 0; overflow: hidden; }

.scp-checkout-template-5 .scp-ref-panel-head {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 800; margin-bottom: 16px; color: var(--t5-ink);
}
.scp-checkout-template-5 .scp-ref-ico {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--t5-brand-soft); color: var(--t5-brand);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.scp-checkout-template-5 .scp-ref-ico svg { width: 16px; height: 16px; }

/* ---------- Collapsible order-summary bar (top of page) ----------
   scp-checkout.js prepends .scp-osum-bar and wraps the summary blocks in
   .scp-osum-body on the FRONT END (static DOM, safe to wrap). Open by default. */
.scp-checkout-template-5 .scp-osum-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; cursor: pointer; user-select: none;
}
.scp-checkout-template-5 .scp-osum-title {
    display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--t5-ink);
}
.scp-checkout-template-5 .scp-osum-chev {
    color: var(--t5-muted); font-size: 12px; transition: transform .25s; display: inline-block;
}
.scp-checkout-template-5 .scp-summary-top.is-open .scp-osum-chev { transform: rotate(180deg); }
.scp-checkout-template-5 .scp-osum-total { font-weight: 800; font-size: 15px; color: var(--t5-ink); white-space: nowrap; }
.scp-checkout-template-5 .scp-osum-body {
    display: none; padding: 16px 18px 18px; border-top: 1px solid var(--t5-line);
    /* Kill WordPress' default block-gap (~19px) between the bar and the body — it
       added a stray margin under the "Order summary" divider (and extra height
       when collapsed). The 16px padding-top above is the intended inset. */
    margin-top: 0;
}
.scp-checkout-template-5 .scp-summary-top.is-open .scp-osum-body { display: block; }
/* Legacy fallback: a pre-osum-body checkout in the editor has no .scp-osum-body
   wrapper, so inset the raw summary blocks. Newer checkouts ship the wrapper in
   the block markup (so editor and front end match) and it carries its own padding. */
.scp-checkout-template-5.scp-editor-preview .scp-summary-top:not(:has(.scp-osum-body)) > :not(.scp-osum-bar) {
    padding-left: 18px; padding-right: 18px;
}
.scp-checkout-template-5.scp-editor-preview .scp-summary-top:not(:has(.scp-osum-body)) > :last-child { padding-bottom: 18px; }

/* ---------- Section headings & step-1 heading/sub ---------- */
.scp-checkout-template-5 .scp-step-pane-1 .scp-checkout-section-heading {
    font-size: 17px; font-weight: 700; margin: 0 0 2px; color: var(--t5-ink);
}
.scp-checkout-template-5 .scp-ref-sub {
    color: var(--t5-muted); font-size: 13px; margin: 0 0 18px;
}
/* Contact info: e-mail before the name row, matching the mockup order. */
.scp-checkout-template-5 .scp-step-pane-1 { display: flex; flex-direction: column; }
.scp-checkout-template-5 .scp-step-pane-1 > .scp-checkout-section-heading { order: 0; }
.scp-checkout-template-5 .scp-step-pane-1 > .scp-ref-sub { order: 1; }
.scp-checkout-template-5 .scp-step-pane-1 > .scp-form-field { order: 2; }
.scp-checkout-template-5 .scp-step-pane-1 > .scp-form-scp-form-fields--2 { order: 3; }
.scp-checkout-template-5 .scp-step-pane-1 > .scp-step-continue { order: 4; }
.scp-checkout-template-5 .scp-step-pane-1 > .scp-ref-trust { order: 5; }

/* Billing/shipping section headings inside step 2 — a top border separates the
   billing section from the payment section within the step-2 card. */
.scp-checkout-template-5 .scp-step-pane-2 .scp-checkout-section-heading {
    font-size: 14px; font-weight: 800; margin: 22px 0 16px; padding-top: 22px;
    border-top: 1px solid var(--t5-line); color: var(--t5-ink);
    display: flex; align-items: center; gap: 9px;
}
.scp-checkout-template-5 .scp-step-pane-2 .scp-checkout-section-heading::before {
    content: "\1F4CD"; /* 📍 */
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: var(--t5-brand-soft); color: var(--t5-brand);
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.scp-checkout-template-5 .scp-form-shipping .scp-checkout-section-heading::before { content: "\1F69A"; /* 🚚 */ }

/* ---------- Form fields ---------- */
.scp-checkout-template-5 .scp-form-field { display: block; margin-bottom: 16px; }
.scp-checkout-template-5 .scp-form-field__label {
    display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--t5-ink);
}
.scp-checkout-template-5 .scp-form-field__input {
    width: 100%; padding: 12px 13px;
    border: 1px solid var(--t5-line); border-radius: 10px;
    font-size: 14px; color: var(--t5-ink); background: #fff;
    font-family: inherit; transition: border-color .15s, box-shadow .15s; outline: none;
}
.scp-checkout-template-5 .scp-form-field__input:focus {
    border-color: var(--t5-brand);
    box-shadow: 0 0 0 3px var(--t5-brand-soft);
}
.scp-checkout-template-5 .scp-form-field__input::placeholder { color: #9ca3af; }
.scp-checkout-template-5 .scp-form-scp-form-fields--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scp-checkout-template-5 .scp-form-scp-form-fields--3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.scp-checkout-template-5 .scp-form-scp-form-fields--2 .scp-form-field,
.scp-checkout-template-5 .scp-form-scp-form-fields--3 .scp-form-field { margin-bottom: 16px; }

/* Reference has no shipping toggle / section — hide it (billing used as shipping). */
.scp-checkout-template-5 .scp-form-shipping,
.scp-checkout-template-5 .scp-checkbox-shipping { display: none; }

/* ---------- Payment method: side-by-side tabs (reference .pay-tabs) ---------- */
.scp-checkout-template-5 .scp-payment-form { margin: 0; }
.scp-checkout-template-5 .scp-payment-form .scp-divider { display: none; } /* header comes from the injected panel head */
.scp-checkout-template-5 .scp-payment-method-container {
    display: flex; flex-direction: row; gap: 8px; margin-bottom: 16px;
}
.scp-checkout-template-5 .scp-payment-option { position: relative; margin: 0; flex: 1; }
.scp-checkout-template-5 .scp-payment-radio { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scp-checkout-template-5 .scp-payment-button {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid var(--t5-line); border-radius: 10px; padding: 11px;
    text-align: center; cursor: pointer; background: #fff;
    transition: border-color .15s, background .15s, color .15s;
}
.scp-checkout-template-5 .scp-payment-radio:checked + .scp-payment-button {
    border-color: var(--t5-brand); background: var(--t5-brand-soft);
}
.scp-checkout-template-5 .scp-payment-icon { display: flex; }
.scp-checkout-template-5 .scp-payment-icon svg { width: 18px; height: 18px; stroke: var(--t5-muted); }
.scp-checkout-template-5 .scp-payment-radio:checked + .scp-payment-button .scp-payment-icon svg { stroke: var(--t5-brand); }
.scp-checkout-template-5 .scp-payment-label { font-size: 13px; font-weight: 600; color: var(--t5-muted); }
.scp-checkout-template-5 .scp-payment-radio:checked + .scp-payment-button .scp-payment-label { color: var(--t5-brand); }
.scp-checkout-template-5 .scp-payment-description { display: none; }
.scp-checkout-template-5 .scp-payment-gateway-form { margin-top: 14px; }
/* Stripe Payment Element mount: it renders its OWN self-contained, bordered
   field UI, so we must NOT add another wrapper border/padding — that produced a
   redundant "box inside box". Kept flush; the panel around it is the only frame. */
.scp-checkout-template-5 #card-element {
    padding: 0; border: none; border-radius: 0; background: transparent;
}

/* ---------- Step 2: ONE parent card, payment + billing as plain sections ------
   The one-column template uses a single parent box (the step-2 card) that holds
   BOTH the payment section and the billing section, separated by a divider — no
   inner bordered boxes (which read as "box inside a box"). scp-checkout.js still
   wraps each into .scp-step2-panel, but here those wrappers are made transparent
   pass-throughs; the divider sits on the billing wrapper. */
.scp-checkout-template-5 .scp-step2-panel {
    border: none; border-radius: 0; padding: 0; background: transparent; box-shadow: none; margin: 0;
}
.scp-checkout-template-5 .scp-bill-panel {
    border-top: 1px solid var(--t5-line); padding-top: 22px; margin-top: 22px;
}
/* Billing is OFF by default in this template (collect_billing_details:false), so
   the billing block renders nothing. Hide the empty .scp-bill-panel (no "Billing
   Address" heading) so no stray divider/spacing shows. Turning billing back on
   brings the heading — and the panel — back. */
.scp-checkout-template-5 .scp-bill-panel:not(:has(.scp-checkout-section-heading)) { display: none; }
/* The billing heading sits at the top of its section — no extra divider on it
   (the section already has the top border above). */
.scp-checkout-template-5 .scp-bill-panel .scp-checkout-section-heading {
    border-top: none; padding-top: 0; margin-top: 0; margin-bottom: 16px;
}
/* The block leaves a spacer between payment and billing; the divider replaces it. */
.scp-checkout-template-5 .scp-step-pane-2 .scp-spacing-div { display: none; }

/* ---------- Buttons ---------- */
.scp-checkout-template-5 .scp-step-continue,
.scp-checkout-template-5 .scp-checkout-pay-now-btn .scp-submit-button {
    width: 100%; padding: 14px; border: none; border-radius: 11px;
    font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--t5-brand); color: var(--t5-brand-text);
    transition: filter .15s; margin-top: 4px;
}
.scp-checkout-template-5 .scp-step-continue { margin-top: 8px; }
.scp-checkout-template-5 .scp-step-continue:hover,
.scp-checkout-template-5 .scp-checkout-pay-now-btn .scp-submit-button:hover { filter: brightness(.92); }
/* Back link (ghost). */
.scp-checkout-template-5 .scp-step-back {
    display: inline-flex; align-items: center; gap: 6px; margin: 8px auto 0;
    background: none; border: none; cursor: pointer;
    color: var(--t5-muted); font-weight: 600; font-size: 14px; font-family: inherit; padding: 10px;
    width: 100%; justify-content: center;
}
.scp-checkout-template-5 .scp-step-back::before { content: "\2190"; }
.scp-checkout-template-5 .scp-step-back:hover { color: var(--t5-ink); }
.scp-checkout-template-5 .scp-checkout-pay-now-btn { margin-top: 4px; }

/* ---------- Trust rows / guarantee (injected) ---------- */
.scp-checkout-template-5 .scp-ref-trust {
    display: flex; gap: 14px; justify-content: center; margin-top: 16px;
    color: var(--t5-muted); font-size: 12px; flex-wrap: wrap;
}
.scp-checkout-template-5 .scp-ref-trust span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
/* Size the inline-SVG trust icons — without this they render at their intrinsic
   (huge) size and shove the labels into a narrow, wrapping column. Mirrors T4. */
.scp-checkout-template-5 .scp-ref-trust svg { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
.scp-checkout-template-5 .scp-ref-trust svg.scp-trust-ok { color: var(--t5-green); }
.scp-checkout-template-5 .scp-ref-guarantee {
    font-size: 12px; color: var(--t5-muted); text-align: center; margin-top: 14px; line-height: 1.5;
}

/* ---------- Order summary internals (inside the collapsible body) ----------
   Selectors include .scp-order-summary-v2-container to outrank the base
   #scp-checkout summary rules in smart-creator-press-public.css, which loads
   after this file and would otherwise keep the single-line flex layout. */
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container { margin: 0; }
/* Hide the inner "Cart Summary" heading — the collapsible bar is the heading.
   !important is required because the markup carries an inline style="display:flex". */
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-checkout-summary-head { display: none !important; }
/* Product row — the product image is HIDDEN for this template, so the row is a
   simple two-column line: title (left) + price (right) on line 1, renewal/trial
   terms tight on line 2. Minimal row-gap, no wasted spacing. */
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-item {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: baseline;
    padding-bottom: 14px; border-bottom: 1px solid var(--t5-line); margin-bottom: 14px;
}
/* Hide the product thumbnail/image for this template. */
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-item > div:first-child { display: none; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-details { grid-column: 1; grid-row: 1; min-width: 0; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-title { font-weight: 700; font-size: 14px; color: var(--t5-ink); line-height: 1.3; margin: 0; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-order-summary-v2-subtitle { display: none; }
/* Unwrap the price column so amount + terms become grid items. */
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-order-item-price { display: contents; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-order-item-total-price,
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .slc-pp-v2-price {
    grid-column: 2; grid-row: 1; align-self: baseline; text-align: right; font-size: 14px; font-weight: 700; color: var(--t5-ink); white-space: nowrap; margin: 0;
}
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-order-item-price-type {
    grid-column: 1 / span 2; grid-row: 2; text-align: left; font-size: 12px; font-weight: 500; color: var(--t5-muted); white-space: normal; line-height: 1.35; margin: 0;
}
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-change-price-plan { grid-column: 1 / span 2; grid-row: 3; margin-top: 2px; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-container .scp-checkout-change-price-plan a { font-size: 12px; font-weight: 600; color: var(--t5-brand); }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-summary > div {
    display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: var(--t5-ink);
}
/* Coupon — flatten the nested .scp-coupen-field (wrapper div + input both share
   the class) so it is a single bordered field, not a box inside a box. */
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-checkout-coupen-code-wrapper {
    border: none; padding: 0; background: transparent; margin: 12px 0 0;
}
/* No border/box for this template — just the field + an "Apply" text link. */
.scp-checkout-template-5 #scp-checkout-cart-summary div.scp-coupen-field {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: none; border-radius: 0; box-shadow: none; padding: 0; background: transparent; margin: 0;
}
.scp-checkout-template-5 #scp-checkout-cart-summary input.scp-coupen-field {
    flex: 1 1 auto; min-width: 0; width: auto;
    border: none; border-radius: 0; box-shadow: none; outline: none;
    padding: 6px 0; margin: 0; background: transparent;
    font-size: 13px; font-family: inherit; color: var(--t5-ink); text-align: left;
}
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-coupen-btb {
    flex-shrink: 0; padding: 6px 0; background: none;
    color: var(--t5-brand); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-coupen-error-msg { font-size: 12px; color: #df1b41; margin-top: 6px; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 18px; font-weight: 800; color: var(--t5-ink);
    padding-top: 14px; border-top: 1px solid var(--t5-line); margin-top: 6px;
}
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-order-summary-v2-total .scp-total-right { font-size: 18px; font-weight: 800; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-checkout-currency-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px;
}
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-checkout-currency-row label { font-size: 12.5px; color: var(--t5-muted); margin: 0; }
.scp-checkout-template-5 #scp-checkout-cart-summary .scp-checkout-currency-select {
    padding: 8px 10px; border: 1px solid var(--t5-line); border-radius: 8px; font-size: 13px; background: #fff; width: auto;
}

/* ---------- Pricing plans (same design language) ---------- */
/* Pricing plans always stack one card per row (never multi-column), on both the
   front end and the editor preview. */
.scp-checkout-template-5 .scp-inline-plans,
.scp-checkout-template-5 .scp-inline-plans--2col,
.scp-checkout-template-5 .scp-inline-plans--1col { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0 4px; }
.scp-checkout-template-5 .scp-inline-plan {
    display: flex; align-items: flex-start; gap: 9px;
    border: 1px solid var(--t5-line); border-radius: 10px; padding: 12px;
    cursor: pointer; background: var(--t5-card); transition: border-color .15s, background .15s; margin: 0;
}
.scp-checkout-template-5 .scp-inline-plan.selected { border-color: var(--t5-brand); background: var(--t5-brand-soft); }
.scp-checkout-template-5 .scp-inline-plan-radio { width: 16px; height: 16px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--t5-brand); }
.scp-checkout-template-5 .scp-inline-plan-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scp-checkout-template-5 .scp-inline-plan-title { font-size: 13px; font-weight: 700; color: var(--t5-ink); line-height: 1.3; }
.scp-checkout-template-5 .scp-inline-plan-meta { font-size: 12px; font-weight: 500; color: var(--t5-muted); line-height: 1.4; }
.scp-checkout-template-5 .scp-plan-radio-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.scp-checkout-template-5 .scp-plan-radio-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t5-ink); }
.scp-checkout-template-5 .scp-plan-radio-row input { accent-color: var(--t5-brand); }

/* ---------- Order bump ----------
   No wrapper "box": the order bump's own template box (.scp-order-bump-template-2)
   is the standalone box, so the green .scp-checkout-order-bump-wrap box is stripped
   to a transparent pass-through (no box-inside-a-box). #scp-checkout beats the base
   rule `#scp-checkout .scp-checkout-order-bump-wrap { margin-top:30px; margin-bottom:0 }`. */
.scp-checkout-template-5 .scp-checkout-order-bump-wrap:empty { display: none; }
.scp-checkout-template-5 #scp-checkout .scp-checkout-order-bump-wrap {
    background: transparent; border: none; border-radius: 0; padding: 0; margin: 0;
}
.scp-checkout-template-5 #scp-checkout .scp-checkout-order-bump-wrap .scp-order-bump-template-2 {
    margin-top: 0; margin-bottom: 16px;
}
.scp-checkout-template-5 .scp-bump-checkbox { accent-color: var(--t5-green); width: 18px; height: 18px; }

/* ---------- Step panes: show only the current step ----------
   Non-current pane kept laid out (never display:none) so the Stripe card iframe
   retains real dimensions and mounts correctly. */
.scp-checkout-template-5 .scp-step-pane { position: relative; }
.scp-checkout-template-5.scp-on-step-1 .scp-step-pane-2,
.scp-checkout-template-5.scp-on-step-2 .scp-step-pane-1 {
    position: absolute; top: 0; left: 0; width: 100%;
    visibility: hidden; pointer-events: none; opacity: 0; z-index: -1;
}
.scp-checkout-template-5.scp-on-step-1 .scp-step-pane-1,
.scp-checkout-template-5.scp-on-step-2 .scp-step-pane-2 { animation: scpT5StepFade .25s ease; }
@keyframes scpT5StepFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.scp-checkout-template-5 .scp-step-continue.scp-loader-active { opacity: .8; }

/* ---------- "Show Order Summary in Step 1?" = No ----------
   The summary bar defaults to shown on both steps (open). When the merchant
   turns the setting off, the top bar is hidden in step 1 and appears in step 2. */
.scp-checkout-template-5.scp-summary-step1-no.scp-on-step-1 .scp-summary-top { display: none; }

/* ---------- Editor preview niceties ---------- */
.scp-editor-preview .scp-step-continue,
.scp-editor-preview .scp-step-back,
.scp-editor-preview .scp-step2-greeting-title,
.scp-editor-preview .scp-step2-greeting-sub { cursor: text; }
.scp-editor-preview .scp-step-continue:focus,
.scp-editor-preview .scp-step-back:focus,
.scp-editor-preview .scp-step2-greeting-title:focus,
.scp-editor-preview .scp-step2-greeting-sub:focus { outline: 2px dashed rgba(0, 0, 0, .28); outline-offset: 2px; }
/* Empty sub-text line stays clickable to edit in the preview. */
.scp-editor-preview .scp-step2-greeting-sub:empty::before { content: ""; display: inline-block; min-height: 1em; }

/* ---------- Specificity overrides (must include #scp-checkout to beat base) ---------- */
.scp-checkout-template-5 #scp-checkout .scp-payment-button {
    padding: 10px 12px; border: 1px solid var(--t5-line); border-radius: 10px; width: 100%;
    background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: none; backdrop-filter: none; transform: none; overflow: visible; min-height: 0;
    transition: border-color .15s, background .15s;
}
.scp-checkout-template-5 #scp-checkout .scp-payment-button::before { display: none; }
.scp-checkout-template-5 #scp-checkout .scp-payment-radio:checked + .scp-payment-button {
    border: 1px solid var(--t5-brand); outline: none; background: var(--t5-brand-soft); transform: none; box-shadow: none;
}
.scp-checkout-template-5 #scp-checkout .scp-payment-icon {
    width: auto; height: auto; margin: 0; background: none; border-radius: 0; box-shadow: none;
}
.scp-checkout-template-5 #scp-checkout .scp-payment-icon svg { width: 18px; height: 18px; }
.scp-checkout-template-5 #scp-checkout .scp-payment-content { flex-grow: 0; }
.scp-checkout-template-5 #scp-checkout .scp-form-field__input {
    height: auto; line-height: 1.4; padding: 11px 13px;
    border: 1px solid var(--t5-line); border-radius: 10px; background: #fff; box-shadow: none;
}
.scp-checkout-template-5 #scp-checkout .scp-form-field__input:hover,
.scp-checkout-template-5 #scp-checkout .scp-form-field__input:focus { outline: none; }
.scp-checkout-template-5 #scp-checkout .scp-form-field__input:focus {
    border-color: var(--t5-brand); box-shadow: 0 0 0 3px var(--t5-brand-soft);
}
.scp-checkout-template-5 #scp-checkout select.scp-form-field__input { min-height: 44px; padding-right: 30px; }

/* Section headings: base forces h3.scp-checkout-section-heading to 21px, making
   "Billing Address" bigger than the "Payment method" head. Match them. */
.scp-checkout-template-5 #scp-checkout .scp-step-pane-1 h3.scp-checkout-section-heading { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.scp-checkout-template-5 #scp-checkout .scp-step-pane-2 h3.scp-checkout-section-heading { font-size: 14px; font-weight: 800; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .scp-checkout-template-5 #scp-checkout { padding: 16px; }
    .scp-checkout-template-5 .scp-step-node { width: auto; min-width: 96px; }
    .scp-checkout-template-5 .scp-form-scp-form-fields--3 { grid-template-columns: 1fr 1fr; }
}