/* ==========================================================================
   Checkout popup v2  (CHECKOUT_FORM_VERSION=v2)
   Paired with shop/templates/shop/includes/_checkout_form_v2.html.

   Loaded on every page (the overlay lives in footer.html), so EVERY rule is
   scoped under .checkout-form--v2. That matters: .quantity, .qty-input,
   .increment-btn, .decrement-btn, .offerBtn, .addedBtn, .remove-item and
   .pay-button are shared with the sidecart, the standalone /checkout page,
   thank-you and both product templates — unscoped rules here would restyle
   all of them.

   Colors derive from --brand-action, which base.html injects from
   BRANDING.action_color, so a rebrand needs no change in this file.
   ========================================================================== */

.checkout-form--v2 {
    /* Local token set, aliased off the global brand tokens the same way
       korpaplus.css scopes --kp-*. */
    --cov2-accent: var(--brand-action, #32cd32);
    --cov2-accent-ink: #fff;
    --cov2-tint: color-mix(in srgb, var(--cov2-accent) 10%, #fff);
    --cov2-tint-line: color-mix(in srgb, var(--cov2-accent) 28%, #fff);
    --cov2-ring: color-mix(in srgb, var(--cov2-accent) 35%, transparent);
    --cov2-shadow: color-mix(in srgb, var(--cov2-accent) 22%, transparent);

    --cov2-ink: #111827;
    --cov2-body: #4b5563;
    /* Secondary copy (was #6b7280) — deliberately near-black so the free-shipping
       note, review subtitle, reassurance chips, bundle subtitle and fee blurb read
       as real content rather than disabled text. */
    --cov2-muted: #1a1a1a;
    /* Grey reserved for chrome only: icons and input placeholders. */
    --cov2-faint: #9ca3af;
    --cov2-line: #e5e7eb;
    --cov2-line-soft: #f1f2f4;
    --cov2-surface: #f9fafb;

    /* Figma: rounded-2xl card, rounded-xl blocks. */
    --cov2-r-lg: 16px;
    --cov2-r: 12px;
    --cov2-r-sm: 10px;
    /* Figma: blocks sit at mx-4 (16px); the header and the cart rows are the
       two sections that bleed wider, at px-5 (20px). */
    --cov2-pad: 16px;
    --cov2-pad-lg: 20px;
}

/* Older browsers without color-mix() fall back to flat neutrals rather than
   an unresolved (transparent) value. */
@supports not (color: color-mix(in srgb, red 10%, white)) {
    .checkout-form--v2 {
        --cov2-tint: #f6faf6;
        --cov2-tint-line: #dceadc;
        --cov2-ring: rgba(0, 0, 0, .18);
        --cov2-shadow: rgba(0, 0, 0, .18);
    }
}

/* --- Centering ------------------------------------------------------------
   The host (#checkout_form_overlay / #buynow_form_overlay) is a fixed,
   full-viewport, scrollable backdrop whose `display` is written inline by
   jQuery .show()/.toggle() — so a stylesheet can never make IT a flex
   container. Instead the <section> fills the backdrop and does the centering,
   and .cov2-panel is the actual card.

   The legacy `.checkout-form` rules (main.css:3527 width/background/padding +
   left:50% + translateX(-50%), and main.css:4441 position:relative) all still
   match this element and must be neutralized here, or the panel is pushed a
   further 50% to the right and ends up pinned to the viewport edge. */

.checkout-form.checkout-form--v2 {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    min-height: 100%;
    margin: 0;
    padding: 32px var(--cov2-pad);
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    color: var(--cov2-ink);
    font-size: 14px;
    line-height: 1.45;
}

/* Both axes at once, and — unlike `align-items:center` — a panel taller than
   the viewport stays flush to the top instead of overflowing off-screen where
   the backdrop cannot scroll to it. */
.checkout-form--v2 .cov2-panel {
    margin: auto;
    width: 480px;
    max-width: 100%;
    background: #fff;
    border-radius: var(--cov2-r-lg);
    box-shadow: 0 1px 3px rgba(17, 24, 39, .08), 0 18px 44px rgba(17, 24, 39, .18);
    overflow: hidden;
}

/* The card is focused on open; the modal appearing is the visual cue, and every
   control inside keeps its own ring. */
.checkout-form--v2 .cov2-panel:focus,
.checkout-form--v2 .cov2-panel:focus-visible {
    outline: none;
}

/* main.css:3524 sets overflow-x:scroll on the backdrop, which reserves a
   permanent horizontal scrollbar. v2 never overflows horizontally. */
.checkout-form-overlay:has(.checkout-form--v2) {
    overflow: auto;
}

.checkout-form--v2,
.checkout-form--v2 *,
.checkout-form--v2 *::before,
.checkout-form--v2 *::after {
    box-sizing: border-box;
}

/* :where() keeps this reset at zero specificity for its arguments, so the
   single-class .cov2-* rules below still win. A plain
   `.checkout-form--v2 ul` would be (0,1,1) and silently beat `.cov2-fees`. */
.checkout-form--v2 :where(p, ul, ol, li, h2) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout-form--v2 a {
    color: inherit;
    text-decoration: none;
}

.checkout-form--v2 a:hover {
    text-decoration: underline;
}

/* Scoped + !important on the size box on purpose: main.css:3622
   `.checkout-form label { width: 25% }` (100% under its mobile query) is
   (0,1,1) and outranks a bare `.cov2-sr-only`. A full-width absolutely
   positioned label escapes the panel's overflow:hidden — nothing inside the
   panel is positioned, so its containing block is the overlay — and widens the
   overlay's scrollWidth, i.e. horizontal scroll on mobile. */
.checkout-form--v2 .cov2-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Staff-authored strings (product titles, offer and fee copy) can contain a
   token longer than the column. `anywhere` rather than `break-word` because
   only `anywhere` also shrinks the min-content contribution — without that the
   flex/grid ancestors still get forced wider than the panel and the overlay
   gains a horizontal scrollbar.

   Deliberately NOT inherited from the panel: `anywhere` lets every descendant
   shrink to 1ch, which makes short generated strings ("4.8 (312 рецензии)")
   break mid-word for no reason. */
.checkout-form--v2 :is(.cov2-line-title,
                       .cov2-offer-title,
                       .cov2-offer-text,
                       .cov2-accordion-title,
                       .cov2-accordion-sub,
                       .cov2-fee-title,
                       .cov2-fee-sub,
                       .cov2-sum-row > span:first-child) {
    overflow-wrap: anywhere;
}

/* One visible focus treatment for every interactive element in the panel. */
.checkout-form--v2 :focus-visible {
    outline: 2px solid var(--cov2-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- Header --------------------------------------------------------------- */

/* Figma: px-5 pt-5 pb-3, gap-2 */
.cov2-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px var(--cov2-pad-lg) 12px;
}

.cov2-logo {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    margin-right: auto;
}

.cov2-secure {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--cov2-faint);
    text-align: right;
}

.cov2-secure-ic {
    flex: none;
}

.cov2-secure-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.cov2-secure-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #374151;
}

/* .cov2-secure stays --cov2-faint for its lock icon; the text child opts out. */
.cov2-secure-sub {
    font-size: 10px;
    color: var(--cov2-muted);
}

/* main.css:3592 pins .checkout-close to the panel corner with position:absolute
   for the legacy layout; v2 keeps it in the header flex row. */
.checkout-form--v2 .cov2-close {
    position: static;
}

.cov2-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 8px; /* Figma: ml-2 */
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--cov2-faint);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.cov2-close:hover {
    background: var(--cov2-line-soft);
    color: var(--cov2-ink);
}

/* --- Step indicator ------------------------------------------------------- */

/* Figma: gap-3 pb-3 px-6, then a full-width 1px rule carrying a centered
   96x2 accent bar under the active step. */
.cov2-steps {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 0 24px 12px;
    border-bottom: 1px solid var(--cov2-line-soft);
}

.cov2-steps::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 96px;
    height: 2px;
    background: var(--cov2-accent);
    transform: translateX(-50%);
}

.cov2-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

/* Chevron separators, drawn rather than marked up so they stay out of the a11y
   tree and out of the reading order. */
.cov2-step + .cov2-step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -12px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #d1d5db;
    border-right: 2px solid #d1d5db;
    transform: translateX(-50%) rotate(45deg);
}

.cov2-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--cov2-line);
    border-radius: 50%;
    color: var(--cov2-faint);
    font-size: 14px;
    font-weight: 700;
}

.cov2-step-label {
    font-size: 10px;
    color: var(--cov2-muted);
}

.cov2-step.is-done .cov2-step-dot {
    border-color: #d1d5db;
    color: #9ca3af;
}

.cov2-step.is-current .cov2-step-dot {
    background: var(--cov2-accent);
    border-color: var(--cov2-accent);
    color: var(--cov2-accent-ink);
    box-shadow: 0 4px 10px var(--cov2-shadow);
}

.cov2-step.is-current .cov2-step-label {
    color: var(--cov2-accent);
    font-weight: 600;
}

/* --- Cart lines ----------------------------------------------------------- */

.cov2-lines:not(:empty) {
    padding: 0 var(--cov2-pad-lg);
}

.cov2-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--cov2-line-soft);
}

.cov2-line:last-child {
    border-bottom: 0;
}

.cov2-line-media {
    position: relative;
    flex: none;
}

.cov2-line-img {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid var(--cov2-tint-line);
    border-radius: var(--cov2-r);
    background: var(--cov2-tint);
}

.cov2-line-qty {
    position: absolute;
    top: -6px;
    left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--cov2-accent);
    color: var(--cov2-accent-ink);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.cov2-line-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cov2-line-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cov2-ink);
}

.cov2-line-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.cov2-stars {
    display: inline-flex;
    gap: 1px;
    line-height: 0;
}

.cov2-star {
    fill: #e5e7eb;
}

.cov2-star.is-on {
    fill: var(--cov2-accent);
}

.cov2-line-rating-text {
    font-size: 11px;
    color: var(--cov2-muted);
}

/* Compact stepper — scoped so the sidecart / product-page stepper is untouched. */
.checkout-form--v2 .quantity.cov2-qty {
    display: inline-flex;
    align-items: center;
    margin: 8px 0 0;
    border: 1px solid var(--cov2-line);
    border-radius: 8px;
    overflow: hidden;
}

.checkout-form--v2 .cov2-qty .decrement-btn,
.checkout-form--v2 .cov2-qty .increment-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--cov2-surface);
    border: 0;
    border-radius: 0;
    color: var(--cov2-body);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.checkout-form--v2 .cov2-qty .decrement-btn:hover,
.checkout-form--v2 .cov2-qty .increment-btn:hover {
    background: var(--cov2-line-soft);
    color: var(--cov2-ink);
}

.checkout-form--v2 .cov2-qty .qty-input {
    width: 32px;
    height: 26px;
    padding: 0;
    background: #fff;
    border: 0;
    border-left: 1px solid var(--cov2-line);
    border-right: 1px solid var(--cov2-line);
    border-radius: 0;
    color: var(--cov2-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

.cov2-line-end {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cov2-line-total {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* .remove-item is global (it paints red); re-skin only inside the v2 panel. */
.checkout-form--v2 .cov2-line-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    position: static;
    background: none;
    border: 0;
    border-radius: 50%;
    color: #d1d5db;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.checkout-form--v2 .cov2-line-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

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

.cov2-summary {
    margin: 12px var(--cov2-pad) 0;
    border: 1px solid var(--cov2-line);
    border-radius: var(--cov2-r);
    overflow: hidden;
}

.cov2-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--cov2-line-soft);
    color: var(--cov2-body);
}

.cov2-sum-val {
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
}

.cov2-sum-free {
    color: var(--cov2-accent);
    font-weight: 700;
}

.cov2-sum-total {
    align-items: flex-start;
    padding: 12px 16px;
}

.cov2-total-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--cov2-ink);
}

.cov2-total-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.cov2-total-num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cov2-accent);
}

.cov2-vat {
    font-size: 11px;
    color: var(--cov2-muted);
}

.cov2-eta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--cov2-tint);
    color: var(--cov2-body);
    border-bottom: 1px solid var(--cov2-line-soft);
}

.cov2-eta-ic {
    flex: none;
    color: var(--cov2-accent);
}

/* One inline run so the label and the date wrap together instead of the date
   being pushed onto its own flex line. */
.cov2-eta-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cov2-eta-val {
    color: var(--cov2-accent);
    font-weight: 600;
}

/* .free-shipping-note is shared with the sidecart — scope the override. */
.checkout-form--v2 .cov2-freeship-note {
    margin: 0;
    padding: 9px 16px;
    background: var(--cov2-surface);
    color: var(--cov2-muted);
    font-size: 11px;
    text-align: center;
}

/* --- Trust badges --------------------------------------------------------- */

.cov2-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 12px var(--cov2-pad) 0;
    border: 1px solid var(--cov2-line-soft);
    border-radius: var(--cov2-r);
    overflow: hidden;
}

.cov2-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    color: #374151;
}

.cov2-trust-item + .cov2-trust-item {
    border-left: 1px solid var(--cov2-line-soft);
}

.cov2-trust-item svg {
    color: var(--cov2-accent);
}

/* --- Aggregate rating ----------------------------------------------------- */

.cov2-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px var(--cov2-pad) 0;
    padding: 12px 16px;
    background: var(--cov2-surface);
    border-radius: var(--cov2-r);
}

.cov2-avatars {
    display: flex;
    flex: none;
}

.cov2-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    background: var(--cov2-tint);
    border: 2px solid #fff;
    border-radius: 50%;
    color: var(--cov2-accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
}

/* Photo over the initials: if pravatar is blocked or slow the circle still
   reads as a person rather than an empty hole. */
.cov2-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cov2-avatar + .cov2-avatar {
    margin-left: -8px;
}

.cov2-rating-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cov2-rating-title {
    font-size: 14px;
    font-weight: 700;
}

.cov2-rating-sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--cov2-muted);
}

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

.cov2-fields {
    padding: 16px var(--cov2-pad) 0;
}

.cov2-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cov2-ink);
}

.cov2-section-head svg {
    color: var(--cov2-accent);
}

.cov2-field {
    display: flex;
    align-items: stretch;
    margin-bottom: 8px;
    border: 1px solid var(--cov2-line);
    border-radius: var(--cov2-r);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

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

.cov2-field-ic {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    background: var(--cov2-surface);
    border-right: 1px solid var(--cov2-line);
}

.cov2-field-ic img {
    width: 18px;
    height: 18px;
    opacity: .65;
}

.checkout-form--v2 .cov2-field input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--cov2-ink);
    font-size: 14px;
    font-family: inherit;
}

.checkout-form--v2 .cov2-field input:focus {
    outline: none;
}

.checkout-form--v2 .cov2-field input::placeholder {
    color: var(--cov2-faint);
}

/* Native validation feedback, only after the shopper has actually tried. */
.checkout-form--v2 .cov2-form.was-validated .cov2-field:has(input:invalid) {
    border-color: #dc2626;
}

.checkout-form--v2 .cov2-error {
    margin: 4px var(--cov2-pad) 0;
    padding: 10px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--cov2-r-sm);
    color: #b91c1c;
    font-size: 13px;
    font-weight: 500;
}

.checkout-form--v2 .cov2-error[hidden] {
    display: none;
}

/* --- Primary CTA ---------------------------------------------------------- */

.cov2-cta-block {
    padding: 0 var(--cov2-pad);
    margin-top: 14px;
}

.cov2-cta-block--bottom {
    margin-top: 12px;
}

.checkout-form--v2 .cov2-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    background: var(--cov2-accent);
    border: 0;
    border-radius: var(--cov2-r);
    color: var(--cov2-accent-ink);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 8px 18px var(--cov2-shadow);
    transition: filter .15s, box-shadow .15s, transform .08s;
}

/* main.css gives .checkout_form_payBtn a scale(1.05) hover inside
   @media (min-width: 767px); a full-bleed button must not grow. */
.checkout-form--v2 .cov2-cta:hover,
.checkout-form--v2 .cov2-cta:focus {
    transform: none;
    filter: brightness(.95);
    background-color: var(--cov2-accent);
}

.checkout-form--v2 .cov2-cta:active {
    transform: scale(.995);
}

.checkout-form--v2 .cov2-cta[disabled] {
    opacity: .6;
    cursor: progress;
    box-shadow: none;
}

.cov2-reassure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 10px;
}

.cov2-reassure li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--cov2-muted);
}

.cov2-reassure svg {
    color: var(--cov2-accent);
    flex: none;
}

/* --- Bundle accordion ----------------------------------------------------- */

.cov2-accordion {
    margin: 12px var(--cov2-pad) 0;
    border: 1px solid var(--cov2-line-soft);
    border-radius: var(--cov2-r);
    overflow: hidden;
}

.cov2-accordion-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}

.cov2-accordion-head:hover {
    background: var(--cov2-surface);
}

.cov2-accordion-ic {
    flex: none;
    color: var(--cov2-accent);
}

.cov2-accordion-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cov2-accordion-title {
    font-size: 14px;
    font-weight: 700;
}

.cov2-accordion-sub {
    font-size: 11px;
    color: var(--cov2-muted);
}

.cov2-accordion-chevron {
    flex: none;
    color: var(--cov2-faint);
    transition: transform .2s;
}

.cov2-accordion-head[aria-expanded="true"] .cov2-accordion-chevron {
    transform: rotate(180deg);
}

.cov2-accordion-panel {
    border-top: 1px solid var(--cov2-line-soft);
}

.cov2-accordion-panel[hidden] {
    display: none;
}

.cov2-offer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.cov2-offer + .cov2-offer {
    border-top: 1px solid var(--cov2-line-soft);
}

.cov2-offer-img {
    flex: none;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--cov2-r-sm);
    background: var(--cov2-surface);
}

.cov2-offer-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cov2-offer-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.cov2-offer-prices {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.checkout-form--v2 .cov2-offer-old {
    color: var(--cov2-muted);
    font-size: 11px;
    text-decoration: line-through;
}

.checkout-form--v2 .cov2-offer-new {
    color: var(--cov2-accent);
    font-size: 13px;
    font-weight: 700;
}

.checkout-form--v2 .cov2-offer-text {
    margin-top: 2px;
    color: var(--cov2-muted);
    font-size: 10px;
}

/* .offerBtn / .addedBtn are global; keep the override inside the panel. */
.checkout-form--v2 .cov2-offer-btn {
    flex: none;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--cov2-accent);
    border-radius: 999px;
    color: var(--cov2-accent);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.checkout-form--v2 .cov2-offer-btn:hover {
    background: var(--cov2-accent);
    color: var(--cov2-accent-ink);
}

.checkout-form--v2 .cov2-offer-btn.addedBtn {
    background: var(--cov2-accent);
    border-color: var(--cov2-accent);
    color: var(--cov2-accent-ink);
    cursor: default;
}

/* --- Fee switches --------------------------------------------------------- */

.cov2-fees {
    margin: 8px var(--cov2-pad) 0;
}

.cov2-fees li + li {
    margin-top: 8px;
}

.checkout-form--v2 .cov2-fee {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--cov2-line);
    border-radius: var(--cov2-r);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.checkout-form--v2 .cov2-fee:hover {
    border-color: var(--cov2-tint-line);
    background: var(--cov2-surface);
}

/* main.css:3865 forces the checked fee border to --brand-primary with
   !important for the legacy dashed-box look; match the weight to win. */
.checkout-form--v2 .cov2-fee.checked {
    border-color: var(--cov2-accent) !important;
    background: var(--cov2-tint);
}

.checkout-form--v2 .cov2-fee.is_free {
    cursor: default;
}

.cov2-fee-ic {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-size: 18px;
    line-height: 1;
    color: var(--cov2-accent);
}

.cov2-fee-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cov2-fee-titlerow {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.checkout-form--v2 .cov2-fee-title {
    color: var(--cov2-ink);
    font-size: 14px;
    font-weight: 700;
}

.cov2-fee-pill {
    padding: 2px 8px;
    background: #e7f7e8;
    border-radius: 999px;
    color: #15803d;
    font-size: 10px;
    font-weight: 600;
}

.cov2-fee-sub {
    font-size: 11px;
    color: var(--cov2-muted);
}

.cov2-fee-end {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
}

.checkout-form--v2 .cov2-fee-price {
    color: var(--cov2-body);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.cov2-switch {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    background: #e5e7eb;
    border-radius: 999px;
    transition: background-color .18s;
}

.cov2-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .18s;
}

.checkout-form--v2 .cov2-fee.checked .cov2-switch {
    background: var(--cov2-accent);
}

.checkout-form--v2 .cov2-fee.checked .cov2-switch-knob {
    transform: translateX(22px);
}

.checkout-form--v2 .cov2-fee.is_free .cov2-switch {
    opacity: .5;
}

/* --- Footer reassurance --------------------------------------------------- */

.cov2-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 32px;
    margin: 12px var(--cov2-pad) 20px;
}

.cov2-foot-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cov2-faint);
}

.cov2-foot-item > span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.cov2-foot-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--cov2-muted);
}

/* .cov2-foot-item stays --cov2-faint for its lock/truck icons; text opts out. */
.cov2-foot-sub {
    font-size: 9px;
    color: var(--cov2-muted);
}

/* --- Small screens -------------------------------------------------------- */

@media (max-width: 520px) {
    .checkout-form.checkout-form--v2 {
        --cov2-pad: 12px;
        --cov2-pad-lg: 14px;
        padding: 12px 8px;
    }

    .cov2-logo {
        height: 26px;
        max-width: 104px;
    }

    .cov2-secure-sub {
        display: none;
    }

    .cov2-line-img {
        width: 64px;
        height: 64px;
    }

    .cov2-trust-item {
        padding: 12px 4px;
        font-size: 8px;
    }

    .cov2-total-num {
        font-size: 20px;
    }

    .checkout-form--v2 .cov2-cta {
        font-size: 16px;
        padding: 14px;
    }

    .cov2-foot {
        gap: 10px 18px;
    }
}

@media (max-width: 360px) {
    .cov2-steps {
        gap: 10px;
    }

    .cov2-step-dot {
        width: 30px;
        height: 30px;
    }

    .cov2-step + .cov2-step::before {
        top: 12px;
        left: -10px;
    }

    .cov2-offer {
        flex-wrap: wrap;
    }

    .checkout-form--v2 .cov2-offer-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-form--v2 * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}