/*
 * Demo20 Cart / primary Checkout content loader.
 *
 * Demo20 owns the header, menu, footer, search, newsletter, cookie notice,
 * cursor, scroll-to-top control and color switcher. WordPress enqueues the
 * generated Demo19 content stylesheet after this font loader as a separately
 * versioned dependency, so replacing that generated file always changes its
 * public cache key. Every donor selector is contained inside the
 * `.jay-demo19-transaction-surface` emitted by page.php, except for the
 * explicit SelectWoo and WooPay international-phone portal bridges below.
 * SelectWoo appends Cart/Checkout dropdowns and WooPay appends Checkout phone
 * controls directly to body, outside the bounded content surface.
 */

/*
 * Shared Cart / Checkout SelectWoo portal bridge. The direct-child owner is
 * intentional: it reaches only an expanded transaction dropdown appended
 * to body and cannot affect Shop, My Account or nested site controls.
 */
body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open,
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open {
  --d20-checkout-select2-panel: #fff;
  --d20-checkout-select2-field: rgb(136 136 137 / 10%);
  --d20-checkout-select2-text: rgb(40 40 40 / 85%);
  --d20-checkout-select2-muted: #747477;
  --d20-checkout-select2-line: rgb(40 40 40 / 14%);
  --d20-checkout-select2-focus: #3e5759;
  --wc-form-color-background: var(--d20-checkout-select2-panel);
  --wc-form-color-text: var(--d20-checkout-select2-text);
  color: var(--d20-checkout-select2-text);
  font-family: "Demo20 Inter", sans-serif;
}

body.woocommerce-checkout.demo33-demo20-commerce.dark-scheme
  > .select2-container.select2-container--default.select2-container--open,
body.woocommerce-cart.demo33-demo20-commerce.dark-scheme
  > .select2-container.select2-container--default.select2-container--open {
  --d20-checkout-select2-panel: color-mix(in srgb, #1e1e1e 95%, white);
  --d20-checkout-select2-field: #1e1e1e;
  --d20-checkout-select2-text: rgb(255 255 255 / 78%);
  --d20-checkout-select2-muted: rgb(255 255 255 / 55%);
  --d20-checkout-select2-line: rgb(255 255 255 / 14%);
  color-scheme: dark;
}

/* mode-head can establish the root state before body exists. Keep the detached
 * SelectWoo portal dark during that first-paint window as well. */
:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open,
:root[data-theme="dark"] body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open {
  --d20-checkout-select2-panel: color-mix(in srgb, #1e1e1e 95%, white);
  --d20-checkout-select2-field: #1e1e1e;
  --d20-checkout-select2-text: rgb(255 255 255 / 78%);
  --d20-checkout-select2-muted: rgb(255 255 255 / 55%);
  --d20-checkout-select2-line: rgb(255 255 255 / 14%);
  color-scheme: dark;
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-dropdown,
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-dropdown {
  overflow: hidden;
  border: 1px solid var(--d20-checkout-select2-line);
  border-radius: 14px;
  background-color: var(--d20-checkout-select2-panel);
  color: var(--d20-checkout-select2-text);
  box-shadow: 0 20px 32px -8px rgb(17 16 19 / 18%), 0 0 1px rgb(17 16 19 / 8%);
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown,
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown {
  padding: 16px;
  background-color: var(--d20-checkout-select2-panel);
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown
  .select2-search__field,
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown
  .select2-search__field {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--d20-checkout-select2-line);
  border-radius: 8px;
  outline: 0;
  background-color: var(--d20-checkout-select2-field);
  color: var(--d20-checkout-select2-text);
  caret-color: var(--d20-accent);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown
  .select2-search__field::placeholder,
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown
  .select2-search__field::placeholder {
  color: var(--d20-checkout-select2-muted);
  opacity: 1;
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown
  .select2-search__field:focus,
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-search--dropdown
  .select2-search__field:focus {
  border-color: var(--d20-checkout-select2-focus);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d20-checkout-select2-focus) 24%, transparent);
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option,
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option {
  padding: 10px 16px;
  background-color: var(--d20-checkout-select2-panel);
  color: var(--d20-checkout-select2-text);
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option[aria-selected="true"],
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option[aria-selected="true"],
body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option[data-selected="true"],
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option[data-selected="true"] {
  background-color: var(--d20-checkout-select2-field);
  color: var(--d20-checkout-select2-text);
}

body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option--highlighted[aria-selected],
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option--highlighted[data-selected],
body.woocommerce-cart.demo33-demo20-commerce
  > .select2-container.select2-container--default.select2-container--open
  .select2-results__option--highlighted[data-selected] {
  background-color: var(--d20-accent);
  color: #fff;
}

/*
 * WooPayments appends the international-phone country picker directly to
 * body. Re-declare the frozen Demo19 dark tokens at that actual portal owner;
 * layout, positioning, width and scrolling remain wholly plugin-owned.
 */
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container {
  --jay-d19-commerce-ink: var(--clb-color-white-dark-mode, #efebe0);
  --jay-d19-commerce-text: var(--clb-text-dark-mode-color, rgb(255 255 255 / 78%));
  --jay-d19-commerce-muted: rgb(255 255 255 / 55%);
  --jay-d19-commerce-line: rgb(255 255 255 / 14%);
  --jay-d19-checkout-shell: color-mix(in srgb, var(--clb-color-fill-dark-mode, #1e1e1e) 88%, #fff 12%);
  --jay-d19-checkout-shadow: 0 24px 64px -38px rgb(0 0 0 / 78%);
  color-scheme: dark;
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list {
  border-color: var(--jay-d19-commerce-line);
  background-color: var(--jay-d19-checkout-shell);
  color: var(--jay-d19-commerce-text);
  box-shadow: var(--jay-d19-checkout-shadow);
  scrollbar-color: var(--jay-d19-commerce-muted) var(--jay-d19-checkout-shell);
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country {
  background-color: var(--jay-d19-checkout-shell);
  color: var(--jay-d19-commerce-text);
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country.iti__highlight,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country:hover,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country:focus {
  background-color: rgb(255 255 255 / 8%);
  color: var(--jay-d19-commerce-ink);
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country.iti__active,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country[aria-selected="true"] {
  background-color: rgb(255 255 255 / 8%);
  color: var(--jay-d19-commerce-ink);
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country
  .iti__country-name {
  color: inherit;
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country
  .iti__dial-code {
  color: var(--jay-d19-commerce-muted);
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country.iti__active
  .iti__dial-code,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__country[aria-selected="true"]
  .iti__dial-code {
  color: var(--jay-d19-commerce-ink);
}

body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  > .iti.iti--container
  > .iti__country-list
  > .iti__divider {
  border-bottom-color: var(--jay-d19-commerce-line);
}

/*
 * The generated Demo19 cascade is loaded after this bridge and historically
 * keyed its dark palette only from body.dark-scheme. Re-own the same bounded
 * tokens with both accepted state markers so Checkout never renders dark
 * controls with a light text palette during initial mode synchronization.
 */
:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface {
  --clb-color-white: var(--clb-color-white-dark-mode, #efebe0);
  --clb-color-black: var(--clb-color-white-dark-mode, #efebe0);
  --clb-color-black-light: rgb(255 255 255 / 75%);
  --clb-text-color: rgb(255 255 255 / 78%);
  --clb-color-neutral: rgb(255 255 255 / 55%);
  --clb-color-grey: rgb(255 255 255 / 55%);
  --clb-text-color-grey: rgb(255 255 255 / 55%);
  --clb-color-grey-light: rgb(255 255 255 / 32%);
  --clb-text-color-grey-light: rgb(255 255 255 / 58%);
  --clb-color-placeholder: rgb(255 255 255 / 62%);
  --clb-color-overlay: var(--clb-color-fill-dark-mode, #1e1e1e);
  --clb-title-color: var(--clb-color-white-dark-mode, #efebe0);
  --jay-d19-commerce-ink: var(--clb-color-white-dark-mode, #efebe0);
  --jay-d19-commerce-text: rgb(255 255 255 / 78%);
  --jay-d19-commerce-muted: rgb(255 255 255 / 62%);
  --jay-d19-commerce-line: rgb(255 255 255 / 14%);
  --jay-d19-commerce-panel: color-mix(in srgb, var(--clb-color-fill-dark-mode, #1e1e1e) 88%, #fff 12%);
  --jay-d19-commerce-soft: var(--clb-color-fill-dark-mode, #1e1e1e);
  --jay-d19-checkout-canvas: #111013;
  --jay-d19-checkout-shell: var(--jay-d19-commerce-panel);
  --jay-d19-checkout-shell-soft: #242326;
  --jay-d19-checkout-shadow: 0 24px 64px -38px rgb(0 0 0 / 78%);
  color: var(--jay-d19-commerce-text);
  color-scheme: dark;
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #customer_details
  .form-row
  :where(input.input-text, textarea)::placeholder,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #customer_details
  .form-row
  :where(input.input-text, textarea)::placeholder,
:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  input.phone-input.input-text[type="tel"][name="woopay_user_phone_field[no-country-code]"]::placeholder,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  input.phone-input.input-text[type="tel"][name="woopay_user_phone_field[no-country-code]"]::placeholder {
  color: var(--jay-d19-commerce-muted);
  opacity: 1;
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #customer_details
  .form-row
  :where(input.input-text, textarea),
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #customer_details
  .form-row
  :where(input.input-text, textarea) {
  color: var(--jay-d19-commerce-text);
  caret-color: var(--jay-d19-commerce-ink);
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  :where(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper, .woopay-save-new-user-container),
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  :where(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper, .woopay-save-new-user-container) {
  color: var(--jay-d19-commerce-muted);
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  :where(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper, .woopay-save-new-user-container)
  a,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  :where(.woocommerce-privacy-policy-text, .woocommerce-terms-and-conditions-wrapper, .woopay-save-new-user-container)
  a {
  color: var(--jay-d19-commerce-ink);
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.wc_payment_method
  > :where(label, .payment_box),
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.wc_payment_method
  > :where(label, .payment_box) {
  color: var(--jay-d19-commerce-text);
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li:is(
    .payment_method_woocommerce_payments_affirm,
    .payment_method_woocommerce_payments_afterpay_clearpay,
    .payment_method_woocommerce_payments_klarna
  )
  > label
  > img,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li:is(
    .payment_method_woocommerce_payments_affirm,
    .payment_method_woocommerce_payments_afterpay_clearpay,
    .payment_method_woocommerce_payments_klarna
  )
  > label
  > img {
  opacity: 1;
  filter: none;
}

/*
 * WooPayments Card presentation. The gateway still owns payment methods,
 * validation and submission; this exact classic-Checkout branch only gives
 * its selected Card row one coherent header/body rhythm. The optional test
 * helper is presentation-only and is hidden without disabling test mode.
 */
body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.wc_payment_method.payment_method_woocommerce_payments {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--jay-d19-commerce-line);
  border-radius: 18px;
  background-color: var(--jay-d19-commerce-soft);
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > input.input-radio {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 18px;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > label {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 18px 18px 18px 48px;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  cursor: pointer;
  color: var(--jay-d19-commerce-text);
  font-size: 15px;
  font-weight: 650;
  line-height: 24px;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > label
  .payment-methods--logos {
  float: none;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

/* The provider gives the +N badge its own light-scheme text color, so it does
 * not inherit the Card label's dark palette. Keep brand artwork unchanged and
 * theme only the badge, its native trigger states and the supported-card popup. */
:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .payment-methods--logos-count,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .payment-methods--logos-count {
  background-color: var(--jay-d19-commerce-panel);
  color: var(--jay-d19-commerce-ink);
  box-shadow: 0 0 0 1px var(--jay-d19-commerce-line);
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .payment-methods--logos
  > [role="button"]:is(:hover, :focus-visible, [aria-expanded="true"])
  .payment-methods--logos-count,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .payment-methods--logos
  > [role="button"]:is(:hover, :focus-visible, [aria-expanded="true"])
  .payment-methods--logos-count {
  background-color: color-mix(in srgb, var(--jay-d19-commerce-panel) 88%, #fff 12%);
  color: var(--jay-d19-commerce-ink);
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .payment-methods--logos
  > [role="button"]:focus-visible,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .payment-methods--logos
  > [role="button"]:focus-visible {
  outline: 2px solid var(--jay-d19-commerce-ink);
  outline-offset: 3px;
}

:root[data-theme="dark"] body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .logo-popover.payment-methods--logos-popover,
body.dark-scheme.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  #payment
  li.payment_method_woocommerce_payments
  > label
  .logo-popover.payment-methods--logos-popover {
  border-color: var(--jay-d19-commerce-line);
  background-color: var(--jay-d19-commerce-panel);
  color: var(--jay-d19-commerce-ink);
  box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > .payment_box.payment_method_woocommerce_payments {
  box-sizing: border-box;
  margin: 0;
  padding: 20px 18px 18px;
  border-top: 1px solid var(--jay-d19-commerce-line);
  background-color: var(--jay-d19-commerce-panel);
  color: var(--jay-d19-commerce-text);
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > .payment_box.payment_method_woocommerce_payments
  > .wcpay-upe-form[data-payment-method-type="card"]
  > p.testmode-info {
  display: none;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > .payment_box.payment_method_woocommerce_payments
  .wcpay-upe-form[data-payment-method-type="card"] {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > .payment_box.payment_method_woocommerce_payments
  .wcpay-upe-form[data-payment-method-type="card"]
  fieldset {
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  border: 0;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.payment_method_woocommerce_payments
  > .payment_box.payment_method_woocommerce_payments
  .wcpay-upe-form[data-payment-method-type="card"]
  .wcpay-upe-element {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

/*
 * WooPayments' alternative methods render an inline label beside the native
 * radio, so the generic flex gap never applies. Match the accepted 14px title
 * rhythm without changing the compact row, the right-floated provider logo,
 * or WooCommerce's selection lifecycle.
 */
body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li:is(
    .payment_method_woocommerce_payments_affirm,
    .payment_method_woocommerce_payments_afterpay_clearpay,
    .payment_method_woocommerce_payments_klarna
  )
  > input.input-radio {
  margin-inline-end: 9.375px;
}

/*
 * Native offline gateways do not provide the flex label wrapper used by the
 * richer WooPayments rows. Keep only BACS and COD on the same disciplined
 * header/body geometry so the inherited global block label cannot split the
 * radio and title onto separate lines.
 */
body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li.wc_payment_method:is(.payment_method_bacs, .payment_method_cod) {
  position: relative;
  overflow: hidden;
  padding: 0;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li:is(.payment_method_bacs, .payment_method_cod)
  > input.input-radio {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 18px;
  margin: 0;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li:is(.payment_method_bacs, .payment_method_cod)
  > label {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 18px 18px 18px 48px;
  align-items: center;
  cursor: pointer;
  line-height: 24px;
}

body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
  .jay-demo19-transaction-surface
  .woo-sidebar
  #payment
  > .wc_payment_methods
  > li:is(.payment_method_bacs, .payment_method_cod)
  > .payment_box {
  box-sizing: border-box;
  margin: 0;
  padding: 18px;
  border-top: 1px solid var(--jay-d19-commerce-line);
}

@media (max-width: 575px) {
  body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
    .jay-demo19-transaction-surface
    .woo-sidebar
    #payment
    > .wc_payment_methods
    > li.payment_method_woocommerce_payments
    > input.input-radio {
    top: 20px;
    left: 14px;
  }

  body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
    .jay-demo19-transaction-surface
    .woo-sidebar
    #payment
    > .wc_payment_methods
    > li.payment_method_woocommerce_payments
    > label {
    min-height: 56px;
    padding: 16px 14px 16px 42px;
  }

  body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
    .jay-demo19-transaction-surface
    .woo-sidebar
    #payment
    > .wc_payment_methods
    > li.payment_method_woocommerce_payments
    > .payment_box.payment_method_woocommerce_payments {
    padding: 18px 14px 16px;
  }

  body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
    .jay-demo19-transaction-surface
    .woo-sidebar
    #payment
    > .wc_payment_methods
    > li:is(.payment_method_bacs, .payment_method_cod)
    > input.input-radio {
    top: 20px;
    left: 14px;
  }

  body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
    .jay-demo19-transaction-surface
    .woo-sidebar
    #payment
    > .wc_payment_methods
    > li:is(.payment_method_bacs, .payment_method_cod)
    > label {
    min-height: 56px;
    padding: 16px 14px 16px 42px;
  }

  body.woocommerce-checkout.demo33-demo20-commerce.jay-demo19-transaction-content
    .jay-demo19-transaction-surface
    .woo-sidebar
    #payment
    > .wc_payment_methods
    > li:is(.payment_method_bacs, .payment_method_cod)
    > .payment_box {
    padding: 16px 14px;
  }
}