/**
 * Checkout UI corrections — coupon rows + the PAD submit button.
 *
 * ── WHY THIS FILE EXISTS ────────────────────────────────────────────────────
 * The theme (lms) styles every text input `width:100%; display:block` and every
 * button `float:right` (wp-content/themes/lms/style.css). On a coupon row that
 * combination puts the Apply button on its own line BELOW a full-width input,
 * and — because the wrapper never cleared the float — the button hung ~48px past
 * its own parent's bottom edge.
 *
 * In the Apple Pay / Google Pay accordion that overhang landed inside
 * #asi-wallet-container, where Stripe's Express Checkout Element renders with
 * `position: relative !important`. A positioned element paints above a
 * non-positioned float, so the wallet iframe swallowed every click aimed at
 * Apply and buyers could not apply a coupon by mouse or touch at all (keyboard
 * Enter still worked, because that skips hit-testing — which is why the bug
 * survived code review). Making the row a flex container fixes the layout AND
 * the click target in one step: flex items ignore `float` entirely.
 *
 * ── CROSS-PLUGIN DEPENDENCY — READ BEFORE EDITING ───────────────────────────
 * Three of the four coupon rows are ours and carry `.lut-coupon-row`
 * (wallet-handler.php, pad-handler.php, afterpay-stripe-integration.php).
 *
 * The FOURTH — the card row — is generated by a THIRD-PARTY plugin we cannot
 * edit, so it is targeted by ID instead:
 *     s2member-pro/src/includes/templates/forms/stripe-checkout-form.php
 *     s2Member Pro version 241114
 * If s2Member Pro is updated and that template's markup changes (the wrapper id
 * `#s2member-pro-stripe-checkout-form-coupon-div`, or the
 * `<label><span>caption</span><br><input></label>` shape), the card row will
 * silently revert to the old stacked layout while the other three keep working.
 * That asymmetry is the tell — check the template above first.
 *
 * The card selector is deliberately scoped to the membership template's body
 * class so these rules can never leak onto other pages where s2Member renders a
 * checkout form.
 */

/* ── Coupon row ──────────────────────────────────────────────────────────────
 * Input absorbs the free space, Apply keeps its natural (readable) width, 8px
 * between them. Deliberately NOT a percentage split: at 390px a 20% button is
 * ~50px, too narrow for the word "Apply", while at 1440px it would be ~226px.
 * Natural width plus `flex:1 1 0` on the input works at every viewport with no
 * breakpoint. */
.lut-coupon-row,
.page-template-tpl-membership #s2member-pro-stripe-checkout-form-coupon-div {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Apply matches the input's height, so they align. */
    gap: 8px;
}

/* The caption and the input are both inside the <label>, separated by a <br>.
 * `display:contents` promotes them to flex items of the row without touching
 * the markup — required for the card row, which we cannot edit. Verified that
 * the label's `for` association survives this (input.labels stays 1), so the
 * accessible name is unchanged. */
.lut-coupon-row > label,
.page-template-tpl-membership #s2member-pro-stripe-checkout-form-coupon-div > label {
    display: contents;
}

/* Caption keeps its own full-width line above the field. */
.lut-coupon-row > label > span,
.page-template-tpl-membership #s2member-pro-stripe-checkout-form-coupon-div > label > span {
    flex: 0 0 100%;
}

/* The <br> did the line break before; flex-basis:100% above does it now. */
.lut-coupon-row > label > br,
.page-template-tpl-membership #s2member-pro-stripe-checkout-form-coupon-div > label > br {
    display: none;
}

/* `min-width:0` is load-bearing: a flex item's default `min-width:auto`
 * resolves to an input's intrinsic size, which would refuse to shrink on
 * narrow screens and push the button off the row. */
.lut-coupon-row input[type="text"],
.page-template-tpl-membership #s2member-pro-stripe-checkout-form-coupon-div input[type="text"] {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin: 0;
}

/* `flex:0 0 auto` sizes the button from its content. Note this cooperates with
 * `width:auto !important` from the theme's shortcodes.css rather than fighting
 * it: flex-basis:auto defers to width, which is already auto. Do NOT switch
 * this to a percentage — that !important would have to be overridden. */
.lut-coupon-row input[type="button"],
.page-template-tpl-membership #s2member-pro-stripe-checkout-form-coupon-div input[type="button"] {
    flex: 0 0 auto;
    float: none;
    margin: 0;
    height: auto;
}

/* The error / success message divs are the only direct <div> children of our
 * rows; give them their own full-width line. (The card row's response div is a
 * sibling outside the wrapper, so this correctly matches nothing there.) */
.lut-coupon-row > div {
    flex: 0 0 100%;
    margin: 0;
}

/* ── PAD submit button contrast ───────────────────────────────────────────────
 * `.dt-sc-button` (theme shortcodes.css) styles an OUTLINE button —
 * `color:#201C1D` on a transparent fill — but the element-level rule in
 * style.css fills `button` with #333. The two collide and the resting state was
 * #201C1D on #333: a contrast ratio of 1.33:1 against the 4.5:1 WCAG AA floor,
 * i.e. near-black text on a near-black fill.
 *
 * `.dt-sc-button:hover` sets #fff, so desktop users hover on the way to
 * clicking and never notice. Touch devices have no hover, so phone buyers only
 * ever saw the unreadable resting state — which is why this was reported as a
 * mobile-only bug when it was in fact present everywhere.
 *
 * Scoped to the id (specificity 1-0-0, which also outranks the :hover rule at
 * 0-2-0) so the theme's `.dt-sc-button` styling is untouched site-wide. This is
 * the only button in the checkout carrying that class; the other six already
 * render #fff on #333 at 12.63:1. */
#asi-pad-submit {
    color: #fff;
    border-color: #333;
}

/* ── Payment method tabs ─────────────────────────────────────────────────────
 * The strip rendered at the top of .payment-methods-wrapper
 * (themes/lms/framework/loops/membership-s2member.php, class branch).
 *
 * Every rule is scoped to .payment-methods-wrapper, which exists only on the
 * class checkout, so loading this file site-wide still cannot affect anything
 * else — same discipline as the coupon rules above.
 *
 * ── WHY EVERY PROPERTY IS RESET EXPLICITLY ──────────────────────────────────
 * The theme styles the BARE `button` element, not a class: style.css floats
 * buttons right and fills them #333. A tab that inherits that is a dark block
 * shoved to the right-hand edge, and because the fill and the theme's
 * `.dt-sc-button` text colour collide you get the same near-black-on-near-black
 * contrast failure documented for #asi-pad-submit above. So float, background,
 * colour, border, padding, margin, width and appearance are all set here rather
 * than left to inherit. Do not trim these back to "the ones that look needed" —
 * the ones that look needed are the ones the theme happens to set today.
 *
 * ── PILLS, NOT A CONNECTED TAB BAR ──────────────────────────────────────────
 * Deliberately NOT the theme's connected-tab treatment (a shared bottom border
 * that the active tab covers with a white segment, ul.dt-sc-tabs-frame). That
 * effect needs the active tab's border to align to the sub-pixel with the panel
 * below it, and it breaks as soon as a label wraps to two lines — which
 * "Pay Later — Afterpay or Klarna" does at several widths. Separate pills carry
 * the same meaning, survive wrapping, and need no alignment. */

.payment-methods-wrapper .lut-payment-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    /* Negative bottom margin pulls the strip down onto the panel's 2px top
     * border so the tabs sit ON the panel rather than floating above it. */
    margin: 0 0 -2px;
    padding: 0;
}

.payment-methods-wrapper .lut-payment-tabs > li {
    list-style: none;
    margin: 0;
    padding: 0;
    /* `flex:0 1 auto` keeps a tab at its label's natural width but lets it
     * shrink before the row overflows. min-width:0 is load-bearing for the
     * same reason it is on the coupon input above: a flex item's default
     * min-width:auto refuses to go below its intrinsic size. */
    flex: 0 1 auto;
    min-width: 0;
}

.payment-methods-wrapper .lut-tab {
    display: block;
    width: auto;
    height: auto;
    float: none;
    margin: 0;
    padding: 10px 18px;
    border: 2px solid #201c1d;
    /* Square bottom corners so the tab reads as continuous with the panel. */
    border-radius: 5px 5px 0 0;
    background: none;
    background-color: transparent;
    color: #303030;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* #333 on #fff is 12.63:1, the same pairing the theme uses for its own active
 * states (.pagination .active-page, .dt-sc-button.filled) — so the active tab
 * reads as native, and passes AA rather than repeating the PAD button's 1.33:1. */
.payment-methods-wrapper .lut-tab.is-active,
.payment-methods-wrapper .lut-tab:hover,
.payment-methods-wrapper .lut-tab:focus {
    background-color: #333;
    border-color: #333;
    color: #fff;
}

/* Keyboard users need to see focus even when the tab is already active, where
 * the hover/active rule above would otherwise make focus invisible. */
.payment-methods-wrapper .lut-tab:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

/* Icons inherit the tab's colour rather than carrying the per-gateway colours
 * the accordions used (.pro-payments ... i.fa-cc-stripe etc). Four differently
 * coloured icons in one row read as four unrelated controls; inheriting makes
 * the strip read as one set, and keeps the icon legible on the filled state. */
.payment-methods-wrapper .lut-tab .fa {
    margin-right: 8px;
    color: inherit;
}

/* Desktop shows the full wording; the short set is revealed at the theme's own
 * breakpoint below. Both are in the markup so switching costs no JavaScript. */
.payment-methods-wrapper .lut-tab-short {
    display: none;
}

@media only screen and (max-width: 767px) {

    /* 767px is the theme's existing breakpoint (responsive.css), where it also
     * stacks its own tabs full width. Four payment labels cannot share a row on
     * a 390px screen, so they stack rather than scroll horizontally — a
     * horizontal scroller hides options, and hiding a payment method from a
     * buyer who wants it costs a sale. */
    .payment-methods-wrapper .lut-payment-tabs {
        display: block;
        margin-bottom: 20px;
    }

    .payment-methods-wrapper .lut-payment-tabs > li {
        display: block;
        margin-bottom: 8px;
    }

    .payment-methods-wrapper .lut-tab {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
    }

    .payment-methods-wrapper .lut-tab-full {
        display: none;
    }

    .payment-methods-wrapper .lut-tab-short {
        display: inline;
    }
}

/* ── Tab panels ──────────────────────────────────────────────────────────────
 * The panels are still the accordion's .dt-sc-toggle-content divs, and the
 * theme draws them to sit UNDERNEATH a header: `border-top:0` with
 * `border-radius:0 0 3px 3px`, because the h5 supplied the top edge and the top
 * two corners. With the headers commented out that leaves every panel visibly
 * open at the top, so both are restored here.
 *
 * Scoped to [data-method] so this only reaches the four payment panels and not
 * the theme's toggles elsewhere. */
.payment-methods-wrapper .dt-sc-toggle-content[data-method] {
    border-top: 2px solid #201c1d;
    border-radius: 3px;
}

/* The theme gives every toggle frame `margin-bottom:10px` to space stacked
 * accordions apart. Only one panel is ever open here, so that gap just pushes
 * the panel away from the tabs sitting on it.
 *
 * Scoped to the wrapper on purpose — `.dt-sc-toggle-frame { margin: 0 }` alone
 * would strip that spacing from every toggle on the site, and this stylesheet
 * loads site-wide. Same rule as the rest of the file: nothing here may reach a
 * page that has no payment methods on it. */
.payment-methods-wrapper .dt-sc-toggle-frame {
    margin: 0;
}

/* ── Panel transition ────────────────────────────────────────────────────────
 * The accordion animated with jQuery's slideToggle(). The tabs set `display`
 * directly, which is instant, and `display` cannot be transitioned in CSS — so
 * the animation has to be reintroduced deliberately.
 *
 * Opacity, NOT max-height. A max-height transition needs a fixed target value
 * to animate toward, and the card panel is s2Member's whole registration +
 * billing + card form, whose height changes with validation errors and coupon
 * responses. Guess low and it clips a live payment form; guess high and the
 * animation finishes visibly before the panel does. Opacity has no such number.
 * It also avoids leaving a collapsed-but-present panel's fields in the tab
 * order, which would let keyboard users tab through invisible payment forms.
 *
 * NOTE the direction of the default. Opacity is 1 unless the script explicitly
 * adds .is-entering for one frame. Defaulting to 0 here would mean a failure to
 * load this script leaves every panel invisible — including the card panel that
 * deliberately ships without display:none precisely so it survives that. */
.payment-methods-wrapper .dt-sc-toggle-content[data-method] {
    transition: opacity 160ms ease;
}

.payment-methods-wrapper .dt-sc-toggle-content[data-method].is-entering {
    opacity: 0;
}

/* Respect a reduced-motion preference — this is a payment form, not decoration. */
@media (prefers-reduced-motion: reduce) {
    .payment-methods-wrapper .dt-sc-toggle-content[data-method] {
        transition: none;
    }
}