/**
 * Tap checkout payment-method presentation.
 *
 * This stylesheet owns the payment-method accordion (single rounded container,
 * flat divider-separated rows, circular radios — overriding the theme's
 * separate-card row shells per the approved Figma design), the selection-gated
 * .payment_box re-opening for Tap gateways, capability-based row hiding, and the
 * plugin's mount/iframe/error/brand-chip internals. WooCommerce owns radio
 * selection and box toggling; Tap's Card SDK owns the cross-origin iframe.
 */
.bg-tap-card-title {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bg-tap-card-brands {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: 24px;
	vertical-align: middle;
}

#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap .bg-tap-card-brands img,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_applepay .bg-tap-card-brands img,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_googlepay .bg-tap-card-brands img,
.bg-tap-blocks-card-label .bg-tap-card-brands img {
	display: block;
	flex: 0 0 35px;
	width: 35px !important;
	max-width: none !important;
	height: 24px !important;
	max-height: 24px;
}

.bg-tap-blocks-card-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 20px;
}

.bg-tap-blocks-card-label-text {
	min-width: 0;
}

#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap > .payment_box {
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 16px 0 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}

/* Wallet boxes hold no visible content once the button relocates to the CTA slot —
 * zero padding so a selected wallet row keeps its unselected height. */
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_applepay > .payment_box,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_googlepay > .payment_box {
	box-sizing: border-box;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}

#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap > .payment_box::before,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_applepay > .payment_box::before,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_googlepay > .payment_box::before {
	display: none !important;
}

/* The checkout theme hides every gateway's .payment_box unconditionally
 * (display: none !important) — Tap's card iframe and wallet buttons render
 * inside that box, so it must reopen for the selected Tap method. The #payment
 * ID outranks the theme's class-only selector among !important rules. */
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap > input.input-radio:checked ~ .payment_box,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_applepay > input.input-radio:checked ~ .payment_box,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_googlepay > input.input-radio:checked ~ .payment_box {
	/* height/overflow locks neutralize jQuery slideUp/slideDown (inline styles lose to
	 * stylesheet !important): the box opens binary and whole, never squash-animated by
	 * core or third-party checkout scripts after fragment swaps. */
	display: block !important;
	height: auto !important;
	overflow: visible !important;
}

/* Gateway rows the plugin has ruled out client-side (e.g. Apple Pay without
 * ApplePaySession). Must out-rank the theme's !important row styling. */
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.bg-tap-unavailable {
	display: none !important;
}

#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap #bg-tap-card-mount {
	width: 100%;
}

#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap #bg-tap-card-mount > div {
	max-width: none !important;
}

#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap #tap-card-iframe {
	display: block;
	width: 100%;
}

#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap #bg-tap-card-errors,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_applepay #bg-tap-apple-pay-errors,
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap_googlepay #bg-tap-google-pay-errors {
	margin: 20px 0 0;
	padding: 16px 20px;
	color: #ffd8d8;
	background: #481f2a;
	border: 1px solid #ad5267;
	border-radius: 12px;
}

/* ADR-010 presentation: while a wallet gateway with a rendered branded button is
 * selected, that button occupies the place-order slot and Complete Purchase hides.
 * Card (bg_tap) always keeps the normal Complete Purchase button. */
body.bg-tap-applepay-cta form.checkout #place_order,
body.bg-tap-googlepay-cta form.checkout #place_order {
	display: none !important;
}

form.checkout .place-order #bg-tap-apple-pay-button,
form.checkout .place-order #bg-tap-google-pay-button {
	width: 100%;
	margin: 0 0 12px;
}

/* Wallet buttons in the place-order slot mirror Complete Purchase's geometry
 * (full width, ~64px pill). Fill/label/logo stay vendor-mandated — Apple's
 * element is closed shadow DOM and both brands forbid re-skinning. */
form.checkout .place-order apple-pay-button {
	--apple-pay-button-width: 100% !important;
	--apple-pay-button-height: 64px !important;
	--apple-pay-button-border-radius: 99px !important;
}

form.checkout .place-order #bg-tap-google-pay-button button,
form.checkout .place-order #bg-tap-google-pay-button .gpay-button {
	height: 64px !important;
	border-radius: 99px !important;
}

/* Loading skeletons: shimmer primitives from the vendored placeholder-loading
 * library (assets/vendor, MIT); nodes are plugin-created (checkout-core
 * `skeleton()`). These overrides strip its light-theme chrome for this dark
 * checkout. */
.ph-item.bg-tap-skeleton {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.ph-item.bg-tap-skeleton > * {
	margin: 0;
	padding: 0;
}

.ph-item.bg-tap-skeleton .ph-row {
	margin: 0;
}

.ph-item.bg-tap-skeleton .ph-row div {
	margin: 0;
	background-color: rgba( 255, 255, 255, 0.08 );
}

.ph-item.bg-tap-skeleton::before {
	background: linear-gradient( 90deg, rgba( 255, 255, 255, 0 ) 46%, rgba( 255, 255, 255, 0.12 ) 50%, rgba( 255, 255, 255, 0 ) 54% ) 50% 50%;
}

/* One bar matching the Tap iframe's measured ~64px footprint — no layout shift
 * at reveal. */
.ph-item.bg-tap-skeleton-card .ph-row div {
	height: 64px;
	border-radius: 12px;
}

.ph-item.bg-tap-skeleton-cta .ph-row div {
	height: 64px;
	border-radius: 99px;
}

/* Height-collapsed, not display:none — the mount must stay laid out for the SDK
 * to keep initializing behind the skeleton. */
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap #bg-tap-card-mount.bg-tap-card-pending {
	height: 0 !important;
	overflow: hidden !important;
}

/* Placeholder CTA while Apple Pay's button cannot render yet (ADR-010 amendment,
 * docs/ARCHITECTURE.md §9). */
form.checkout .place-order #bg-tap-apple-pay-placeholder {
	width: 100%;
	margin: 0 0 12px;
}

#bg-tap-apple-pay-placeholder.bg-tap-cta-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	padding: 0 24px;
	color: rgba( 255, 255, 255, 0.65 );
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px dashed rgba( 255, 255, 255, 0.25 );
	border-radius: 99px;
	text-align: center;
	cursor: pointer;
}

/* Holds the pill footprint between render() and the SDK injecting its button. */
form.checkout .place-order #bg-tap-apple-pay-button:empty {
	height: 64px;
	background: rgba( 255, 255, 255, 0.08 );
	border-radius: 99px;
}
/* Payment-method accordion: one rounded container, flat divider-separated rows,
 * selected gateway's panel expanding inside it. Overrides the theme's
 * separate-card row shells (see file header). */

.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods {
	display: block !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
}

.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 20px !important;
	display: block !important;
}

/* Re-declared to out-rank the flattened-row display rule above — an equal-
 * specificity tie would resurrect capability-hidden rows via source order. */
.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.bg-tap-unavailable {
	display: none !important;
}

.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method + li.wc_payment_method {
	border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Only the selected row carries the raised tint. */
.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method:has(input:checked) {
	background: rgba(255, 255, 255, 0.02) !important;
	border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Theme's accepted-brands strip, retired: rows carry their own chips. */
.order-summary-payment .payment-card-logos {
	display: none !important;
}

/* Circular radio indicator (theme draws a rounded-square checkbox). */
.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > label::before {
	width: 24px !important;
	height: 24px !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	border-radius: 50% !important;
	background: transparent !important;
}

.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > input.input-radio:checked + label::before {
	border-color: #27a6ef !important;
	background-color: #27a6ef !important;
	background-image: none !important;
	box-shadow: inset 0 0 0 3px #071627 !important;
}

.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > label {
	padding-left: 38px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #fff !important;
	min-height: 24px;
}

.woocommerce-checkout #payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method > label .bg-tap-card-brands {
	flex: 0 0 auto;
	width: auto;
	margin-left: auto;
}

/* Selected card row's panel: edge-to-edge inside the container on a recessed
 * ground. */
#payment > ul.wc_payment_methods.payment_methods.methods > li.wc_payment_method.payment_method_bg_tap > input.input-radio:checked ~ .payment_box {
	margin: 20px -20px -20px !important;
	padding: 20px 20px 20px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
	background: rgba(2, 8, 15, 0.35) !important;
	border-radius: 0 !important;
	/* auto, not the base rule's 100%: with the -20px bleed margins a 100% width
	 * stops 40px short of the right edge. */
	width: auto !important;
}