/**
 * Tiger Funnels — checkout templates. Mobile-first; scoped entirely under
 * .tgfun-checkout so themes and other checkouts are untouched.
 */

/**
 * The doubled class is deliberate, not a typo.
 *
 * Block themes ship `body .is-layout-constrained > :where(…) { max-width: none }`
 * (specificity 0,1,1), which out-ranks a single `.tgfun-checkout` (0,1,0) and
 * silently cancelled EVERY template's width — the "focus" and "minimal"
 * layouts rendered full-bleed and looked identical to the default checkout.
 * Verified live 2026-08-17 on Twenty Twenty-Five. Repeating the class lifts us
 * to 0,2,0 without resorting to !important, which a merchant's own CSS could
 * then never override.
 */
.tgfun-checkout.tgfun-checkout {
    max-width: var(--tgfun-max);
    margin-inline: auto;
}

.tgfun-checkout {
    --tgfun-max: 1080px;
    --tgfun-radius: 10px;
    --tgfun-border: #e5e7eb;
    --tgfun-bg-soft: #f9fafb;
    --tgfun-accent: #111827;
    max-width: var(--tgfun-max);
    margin-inline: auto;
    padding: 16px;
    box-sizing: border-box;
}
.tgfun-checkout *, .tgfun-checkout *::before, .tgfun-checkout *::after { box-sizing: inherit; }

.tgfun-checkout__heading {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 8px 0 24px;
}

/* Shared form polish (both templates) */
.tgfun-checkout .woocommerce form .form-row input.input-text,
.tgfun-checkout .woocommerce form .form-row textarea,
.tgfun-checkout .woocommerce form .form-row select {
    border: 1px solid var(--tgfun-border);
    border-radius: 8px;
    padding: 12px 14px;
    min-height: 46px; /* comfortable touch target */
    width: 100%;
    /* Mobile Safari zooms the whole viewport when a focused control is under
       16px and never zooms back out — on a checkout that is a conversion bug,
       not a cosmetic one. max() so a theme using a larger base still wins. */
    font-size: max(16px, 1em);
}
.tgfun-checkout .woocommerce form .form-row label { font-weight: 600; margin-bottom: 4px; }
.tgfun-checkout .woocommerce form .form-row { margin-bottom: 14px; }

.tgfun-checkout #order_review,
.tgfun-checkout .woocommerce-checkout-review-order {
    background: var(--tgfun-bg-soft);
    border: 1px solid var(--tgfun-border);
    border-radius: var(--tgfun-radius);
    padding: 20px;
}
.tgfun-checkout #place_order {
    /* Woo floats this right unconditionally and only its smallscreen sheet
       clears it; without this a theme that dequeues Woo's CSS gets a 100%-wide
       floated button beside the floated terms box. */
    float: none;
    width: 100%;
    padding: 16px;
    font-size: 1.05rem;
    border-radius: 8px;
}

/* --- Template: focus — single column, one job per screen --- */
.tgfun-checkout--focus { --tgfun-max: 640px; }
.tgfun-checkout--focus #customer_details .col-1,
.tgfun-checkout--focus #customer_details .col-2 {
    float: none;
    width: 100%;
}
.tgfun-checkout--focus #order_review { margin-top: 24px; }

/* --- Template: split — fields left, sticky summary right (desktop) --- */
.tgfun-checkout--split .woocommerce form.checkout {
    display: block;
}
@media (min-width: 900px) {
    .tgfun-checkout--split .woocommerce form.checkout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        gap: 32px;
        align-items: start;
    }
    .tgfun-checkout--split #customer_details { grid-column: 1; }
    .tgfun-checkout--split #order_review_heading,
    .tgfun-checkout--split #order_review {
        grid-column: 2;
    }
    .tgfun-checkout--split #order_review {
        position: sticky;
        top: 24px;
    }
}
/* Unfloating happens OUTSIDE the grid query on purpose. Woo floats col-1/col-2
   at 48% with no media query of its own; only `woocommerce-smallscreen.css`
   undoes it, and that sheet is dequeued by Storefront, Astra, Kadence and
   Blocksy among others. Inside the query there was also a real gap at
   769–899px — Woo's reset had stopped and our grid had not started, so an iPad
   in portrait got two 48% floats and no summary. */
.tgfun-checkout--split #customer_details .col-1,
.tgfun-checkout--split #customer_details .col-2 { float: none; width: 100%; }

/* --- Template: compact — paired fields, less scrolling --- */
.tgfun-checkout--compact { --tgfun-max: 900px; }
/* Same reasoning as --split: never depend on Woo's smallscreen sheet. */
.tgfun-checkout--compact #customer_details .col-1,
.tgfun-checkout--compact #customer_details .col-2 { float: none; width: 100%; }
@media (min-width: 700px) {
    /* Pair the short fields so the form stops being one long ribbon. */
    .tgfun-checkout--compact .woocommerce-billing-fields__field-wrapper,
    .tgfun-checkout--compact .woocommerce-shipping-fields__field-wrapper {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
    }
    .tgfun-checkout--compact .form-row-wide,
    .tgfun-checkout--compact #billing_address_1_field,
    .tgfun-checkout--compact #billing_address_2_field,
    .tgfun-checkout--compact #billing_email_field { grid-column: 1 / -1; }
}
.tgfun-checkout--compact .woocommerce form .form-row { margin-bottom: 10px; }
.tgfun-checkout--compact #order_review { margin-top: 18px; }

/* --- Template: boxed — numbered cards per step --- */
.tgfun-checkout--boxed { --tgfun-max: 760px; counter-reset: tgfun-step; }
.tgfun-checkout--boxed #customer_details .col-1,
.tgfun-checkout--boxed #customer_details .col-2,
.tgfun-checkout--boxed #order_review_heading,
.tgfun-checkout--boxed #order_review {
    background: var(--tgfun-bg-soft);
    border: 1px solid var(--tgfun-border);
    border-radius: var(--tgfun-radius);
    padding: 18px 20px;
    float: none; width: 100%;
    margin: 0 0 16px;
}
.tgfun-checkout--boxed h3,
.tgfun-checkout--boxed #order_review_heading {
    display: flex; align-items: center; gap: 10px;
    margin-top: 0; font-size: 1.05rem;
}
.tgfun-checkout--boxed h3::before,
.tgfun-checkout--boxed #order_review_heading::before {
    counter-increment: tgfun-step;
    content: counter(tgfun-step);
    display: inline-grid; place-items: center;
    width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 50%;
    background: var(--tgfun-accent); color: #fff;
    font-size: .8rem; font-weight: 700;
}
.tgfun-checkout--boxed #order_review { padding-top: 4px; }

/* --- Template: minimal — borderless, underlined inputs --- */
.tgfun-checkout--minimal { --tgfun-max: 620px; }
.tgfun-checkout--minimal #customer_details .col-1,
.tgfun-checkout--minimal #customer_details .col-2 { float: none; width: 100%; }
.tgfun-checkout--minimal .woocommerce form .form-row input.input-text,
.tgfun-checkout--minimal .woocommerce form .form-row textarea,
.tgfun-checkout--minimal .woocommerce form .form-row select {
    border: 0; border-bottom: 1px solid var(--tgfun-border);
    border-radius: 0; padding-inline: 0;
    /* Transparent inputs must inherit the surrounding text colour. Themes
       style inputs for a WHITE field background, so on a dark theme the
       typed text stayed dark-on-dark and was effectively invisible — seen
       live 2026-08-17. text-fill-color covers WebKit, which otherwise keeps
       its own input colour. */
    background: transparent;
    color: inherit;
    -webkit-text-fill-color: currentColor;
}
.tgfun-checkout--minimal .woocommerce form .form-row input.input-text::placeholder,
.tgfun-checkout--minimal .woocommerce form .form-row textarea::placeholder { color: inherit; opacity: .5; }
/* A select's dropdown list is painted by the OS, so it needs a real surface
   colour rather than transparency to stay legible in both themes. */
.tgfun-checkout--minimal .woocommerce form .form-row select { color-scheme: light dark; }
.tgfun-checkout--minimal .woocommerce form .form-row input.input-text:focus,
.tgfun-checkout--minimal .woocommerce form .form-row select:focus {
    outline: none; border-bottom-color: var(--tgfun-accent); border-bottom-width: 2px;
}
.tgfun-checkout--minimal .woocommerce form .form-row label {
    font-weight: 500; font-size: .85rem; opacity: .75; letter-spacing: .01em;
}
.tgfun-checkout--minimal #order_review { background: transparent; border: 0; padding: 0; border-top: 1px solid var(--tgfun-border); padding-top: 18px; }
.tgfun-checkout--minimal .woocommerce form .form-row { margin-bottom: 20px; }

/* --- Template: express — summary and payment first --- */
.tgfun-checkout--express { --tgfun-max: 720px; }
.tgfun-checkout--express .woocommerce form.checkout { display: flex; flex-direction: column; }
/* Flip the reading order without touching the DOM: shoppers who already know
   what they are buying reach payment without scrolling past the address form. */
.tgfun-checkout--express #order_review_heading { order: 1; margin-top: 0; }
.tgfun-checkout--express #order_review { order: 2; margin-bottom: 22px; }
.tgfun-checkout--express #customer_details { order: 3; }
.tgfun-checkout--express .woocommerce-form-coupon-toggle { order: 0; }
.tgfun-checkout--express #customer_details .col-1,
.tgfun-checkout--express #customer_details .col-2 { float: none; width: 100%; }

/* --- Express payment buttons (Apple Pay, Google Pay, PayPal, Link…) --------
 *
 * These are rendered by the GATEWAY, not by us: every one of them hooks
 * `woocommerce_before_checkout_form`, which fires inside the Woo shortcode we
 * wrap, so the markup arrives on its own. Our job is to not break it — the
 * templates that reorder the form with flex `order:` would otherwise leave the
 * express buttons stranded below the address fields, which is precisely where
 * an express button is useless.
 *
 * Selectors cover the containers the common gateways actually emit. An unknown
 * gateway simply falls through and renders where Woo put it, which is still
 * correct — nothing here hides anything.
 */
.tgfun-checkout .wc-stripe-payment-request-wrapper,
.tgfun-checkout #wc-stripe-payment-request-wrapper,
.tgfun-checkout #wc-stripe-express-checkout-element,
.tgfun-checkout #wcpay-payment-request-wrapper,
.tgfun-checkout #wcpay-express-checkout-element,
.tgfun-checkout .wc-block-components-express-payment,
.tgfun-checkout .ppcp-button-container,
.tgfun-checkout #wc-square-digital-wallet,
.tgfun-checkout .tgfun-express {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 18px;
}

/* The separator gateways print between express and the normal form. */
.tgfun-checkout .wc-stripe-payment-request-button-separator,
.tgfun-checkout #wc-stripe-express-checkout-button-separator,
.tgfun-checkout .wc-block-components-express-payment-continue-rule {
    margin: 0 0 18px;
    text-align: center;
}

/* The split template lays the form out as a two-column GRID, so an express
   container becomes a grid item and gets stuck in one column — a half-width
   Apple Pay button beside the address fields (seen live 2026-08-18). It has to
   span the full width and sit above both columns. */
@media (min-width: 900px) {
    .tgfun-checkout--split .woocommerce form.checkout > .wc-stripe-payment-request-wrapper,
    .tgfun-checkout--split .woocommerce form.checkout > #wc-stripe-payment-request-wrapper,
    .tgfun-checkout--split .woocommerce form.checkout > #wc-stripe-express-checkout-element,
    .tgfun-checkout--split .woocommerce form.checkout > #wcpay-payment-request-wrapper,
    .tgfun-checkout--split .woocommerce form.checkout > #wcpay-express-checkout-element,
    .tgfun-checkout--split .woocommerce form.checkout > .ppcp-button-container,
    .tgfun-checkout--split .woocommerce form.checkout > #wc-square-digital-wallet,
    .tgfun-checkout--split .woocommerce form.checkout > .wc-stripe-payment-request-button-separator,
    .tgfun-checkout--split .woocommerce form.checkout > #wc-stripe-express-checkout-button-separator {
        grid-column: 1 / -1;
        order: -1;
    }
}

/* Templates that use flex ordering must pull express to the very top, ahead of
   the summary and the fields. Without this the express template — the one whose
   whole purpose is paying fast — showed the buttons last. */
.tgfun-checkout--express .woocommerce form.checkout > .wc-stripe-payment-request-wrapper,
.tgfun-checkout--express .woocommerce form.checkout > #wc-stripe-express-checkout-element,
.tgfun-checkout--express .woocommerce form.checkout > #wcpay-express-checkout-element,
.tgfun-checkout--express .woocommerce form.checkout > .ppcp-button-container {
    order: -1;
}

/* Never let a template's own rules collapse a gateway button: they are usually
   absolutely-sized iframes and a max-width on a parent can crop them. */
.tgfun-checkout .wc-stripe-payment-request-wrapper iframe,
.tgfun-checkout #wc-stripe-express-checkout-element iframe,
.tgfun-checkout #wcpay-express-checkout-element iframe {
    max-width: 100% !important;
}

/* --- Custom checkout fields: choice groups and headings ------------------ */
.tgfun-cf__grouplabel { display: block; font-weight: 600; margin-bottom: 6px; }
.tgfun-cf__choices { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tgfun-cf__choice { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.tgfun-cf__heading { margin-top: 22px; }
.tgfun-cf__headingtext { display: block; font-weight: 700; font-size: 1.02rem; }
.tgfun-cf__headingnote { display: block; opacity: .75; font-size: .9em; margin-top: 2px; }

/* --- Phone: undo WooCommerce's unconditional field floats -----------------
   Woo floats .form-row-first/.form-row-last at 47% with NO media query, and its
   smallscreen sheet only unfloats those on the lost-password form — not on the
   checkout. So First name / Last name sat side by side at ~168px on a 390px
   screen in every one of our templates. Every template is single column below
   700px anyway, so this is safe for all six. */
@media (max-width: 700px) {
    .tgfun-checkout .woocommerce form .form-row-first,
    .tgfun-checkout .woocommerce form .form-row-last {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

/* --- Phone: reclaim nested padding ---------------------------------------
   The bump card sits inside #order_review (20px) inside .tgfun-checkout (16px)
   inside the theme's own padding. At 390px that left roughly 200px for the card
   interior. */
@media (max-width: 400px) {
    .tgfun-checkout { padding: 12px; }
    .tgfun-checkout #order_review,
    .tgfun-checkout .woocommerce-checkout-review-order { padding: 12px; }
}