/*
 * Step 1 = #customer_details (billing + additional fields, untouched WooCommerce markup).
 * Step 2 = #order_review_heading + #order_review (order table, payment methods, place order).
 * Both steps already exist in the standard classic-checkout DOM; we only ever add/remove
 * classes on the <form class="checkout"> element and hide/reveal the step 2 elements ---
 * WooCommerce's own template, fragments, and totals math are never touched.
 *
 * Button look deliberately copies .cwoa-cookie-notice__btn's pill style byte-for-byte (see
 * class-cwoa-cookie-notice.php) instead of relying on ambient .button/.alt classes: on the real
 * account page this markup renders inside #cwoa-app, which has a broad
 * "#cwoa-app button:not(...)" reset that strips ANY <button> down to a plain link look unless
 * explicitly excluded \u2014 so these need their own self-contained, !important-guarded styling to
 * render consistently in every context the checkout can appear in.
 */
/*
 * display:none (the obvious choice here) breaks WooCommerce's own checkout.js: on page load it
 * auto-triggers a 'click' on the pre-selected gateway to open its payment_box, and jQuery's
 * :visible check that click handler relies on only looks at the display chain — an ancestor
 * with display:none makes jQuery treat the whole subtree as already "not visible" in a way that
 * leaves its own bookkeeping (wc_checkout_form.selectedPaymentMethod) out of sync for every
 * *later* real click, so switching gateways after Confirm stops opening their payment_box. Using
 * visibility:hidden + height:0 instead keeps display:block throughout (jQuery :visible ignores
 * visibility), so that init-time auto-click behaves exactly as it does on a normal /checkout/ or
 * order-pay page where this section is never hidden at all.
 */
form.checkout.cwoa-cf-ready #order_review_heading,
form.checkout.cwoa-cf-ready #order_review {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

form.checkout.cwoa-cf-ready.cwoa-cf-revealed #order_review_heading,
form.checkout.cwoa-cf-ready.cwoa-cf-revealed #order_review {
    height: auto;
    overflow: visible;
    visibility: visible;
    opacity: 0;
    transform: translateY(12px);
}

/* Same duration/easing tokens the catalog homepage uses for its candidate-dock/scheme reveals
   (--cwoa-reveal-duration / --cwoa-motion-ease, defined on #cwoa-app on the real account page) so
   this section appears with the same unhurried, consistent motion instead of a quick snap. The
   literal fallbacks match cwoa-app.css's values for contexts outside #cwoa-app (e.g. the plain
   /checkout/ page, which has no #cwoa-app wrapper at all). */
form.checkout.cwoa-cf-ready.cwoa-cf-revealed.cwoa-cf-in #order_review_heading,
form.checkout.cwoa-cf-ready.cwoa-cf-revealed.cwoa-cf-in #order_review {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--cwoa-reveal-duration, 0.95s) var(--cwoa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        transform var(--cwoa-reveal-duration, 0.95s) var(--cwoa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

form.checkout.cwoa-cf-ready.cwoa-cf-revealed.cwoa-cf-in #order_review {
    /* Slight stagger so the heading leads and the table/payment box follows, matching the
       layered feel of the homepage's own multi-element reveals. */
    transition-delay: 0.06s;
}

@media (prefers-reduced-motion: reduce) {
    form.checkout.cwoa-cf-ready.cwoa-cf-revealed #order_review_heading,
    form.checkout.cwoa-cf-ready.cwoa-cf-revealed #order_review {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.cwoa-cf-confirm-row {
    display: flex;
    flex-direction: column;
    /* Stretch (not flex-start) so the confirm button fills the same width as the billing
       fields above it — matches the look of a field like phone/email instead of a small
       hugging-content pill, per design feedback. */
    align-items: stretch;
    gap: 0.6rem;
    /* max-width is set inline by cwoa-checkout-flow.js, measured live from the actual billing
       fields column (which differs by page/layout — a fixed guess here was wrong on pages
       narrower or wider than the one it was tuned against). This is just a safe fallback for
       the brief instant before JS measures it. */
    max-width: 480px;
    margin: 1.5rem 0 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--cwoa-border, #d7dde5) 84%, transparent);
}

/* Confirmed state now shows a single full-width "Edit details" button in the same slot the
   "Confirm details" button occupied — no separate checkmark note, so the layout stays a plain
   single column (no row/wrap needed) and both buttons read as the same size/shape. */
.cwoa-cf-confirm-row.is-done {
    max-width: 480px;
}

/* While confirmed, the billing/additional-info fields are locked (pointer-events off, focus
   unreachable) so nothing can trigger WooCommerce's own updated_checkout recalculation behind
   the scenes — that recalculation was firing its own (non-themed) spinner and could hang,
   because our confirmed totals no longer expected the fields to change. "Edit details" is the
   only way back in. */
#customer_details.cwoa-cf-locked {
    pointer-events: none;
    opacity: 0.82;
    cursor: not-allowed;
}

.cwoa-cf-confirm-btn,
button.cwoa-cf-confirm-btn {
    display: flex !important;
    width: 100%;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    appearance: none !important;
    cursor: pointer !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--cwoa-accent, #2271b1) !important;
    border: 1px solid color-mix(in srgb, var(--cwoa-accent, #2271b1) 38%, #e4e7ec) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--cwoa-accent, #2271b1) 14%, #ffffff),
        color-mix(in srgb, #ffffff 94%, white)
    ) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.cwoa-cf-confirm-btn:hover:not(:disabled),
.cwoa-cf-confirm-btn:focus-visible {
    border-color: color-mix(in srgb, var(--cwoa-accent, #2271b1) 55%, #e4e7ec) !important;
    transform: translateY(-1px);
}

.cwoa-cf-confirm-btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.6;
    transform: none;
}

.cwoa-cf-confirm-btn__spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--cwoa-accent, #2271b1) 30%, transparent);
    border-top-color: var(--cwoa-accent, #2271b1);
    animation: cwoa-cf-spin 0.85s linear infinite;
    display: none;
}

.cwoa-cf-confirm-btn.is-checking .cwoa-cf-confirm-btn__spinner {
    display: inline-block;
}

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

@media (prefers-reduced-motion: reduce) {
    .cwoa-cf-confirm-btn__spinner {
        animation: none !important;
    }
}

/* Same rise-and-fade the homepage uses for candidate/scheme tiles (cwoa-motion-rise in
   cwoa-app.css), reused here so the confirmed-state note/link don't just snap into place. Plain
   @keyframes on freshly-inserted elements run automatically on first paint — no rAF juggling
   needed like the opacity/transform *transitions* above require. */
@keyframes cwoa-cf-rise {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    42% {
        opacity: 0.72;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.cwoa-cf-confirm-row.is-done .cwoa-cf-edit-btn {
    animation: cwoa-cf-rise var(--cwoa-reveal-duration, 0.95s) var(--cwoa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
    .cwoa-cf-confirm-row.is-done .cwoa-cf-edit-btn {
        animation: none !important;
    }
}

/*
 * Order-received ("thank you") page: same rise-and-fade as the rest of the flow, so the whole
 * confirm → pay → done sequence reads as one consistent motion instead of ending on an abrupt
 * static page. This is a fresh full page load (no SPA swap involved), so the plain @keyframes
 * animation just runs on first paint — no JS needed.
 */
body.woocommerce-order-received .woocommerce-order {
    animation: cwoa-cf-rise var(--cwoa-reveal-duration, 0.95s) var(--cwoa-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-order-received .woocommerce-order {
        animation: none !important;
    }
}

/* "Edit details" reuses .cwoa-cf-confirm-btn's exact pill shape/size/color — same theme-accent
   look as "Confirm details", per design feedback (no separate neutral treatment). */

.cwoa-cf-error {
    color: #b32d2e;
    font-size: 0.9rem;
    margin: 0;
}

/*
 * Payment methods redesign: WooCommerce's default markup is a bare radio + label per <li>, which
 * reads as a tiny dot with no clear clickable area. Since the <label for="..."> is already a
 * sibling of its <input> (not a wrapper), clicking anywhere the label covers already toggles the
 * radio natively — we only need to (a) visually hide the dot itself (kept in the DOM, still
 * focusable/keyboard-operable, not display:none) and (b) turn the whole <li> into a full-width,
 * hoverable/selectable row so the label's clickable area visually fills it.
 */
ul.wc_payment_methods.payment_methods.methods {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--cwoa-border, #d7dde5) 90%, transparent);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:hover {
    border-color: color-mix(in srgb, var(--cwoa-accent, #2271b1) 45%, var(--cwoa-border, #d7dde5));
    background: color-mix(in srgb, var(--cwoa-accent, #2271b1) 5%, #fff);
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:has(input.input-radio:checked) {
    border-color: var(--cwoa-accent, #2271b1);
    background: color-mix(in srgb, var(--cwoa-accent, #2271b1) 7%, #fff);
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:has(input.input-radio:focus-visible) {
    border-color: var(--cwoa-accent, #2271b1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cwoa-accent, #2271b1) 30%, transparent);
}

/* The radio itself stays in the DOM (native keyboard/screen-reader semantics), just visually
   collapsed — opacity:0 + 1px box rather than display:none, so it keeps receiving focus. */
ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method input.input-radio {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.7rem;
    width: 100%;
    margin: 0;
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 600;
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > label img {
    margin-left: auto;
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method .payment_box {
    margin: 0;
    padding: 0 18px 16px;
    border: none;
    background: transparent;
    font-size: 0.92rem;
    color: var(--cwoa-text-muted, #5b6472);
}

ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method .payment_box::before {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method {
        transition: none;
    }
}

.woocommerce-terms-and-conditions-wrapper {
    display: block;
    margin-bottom: 1rem;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
    padding: 0 1.25rem;
    text-align: center;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text p {
    margin: 0 auto;
    max-width: 42rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--cwoa-text-muted, #5b6472);
}