.cko-flow__overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
}

/* Flow container loading state */
.cko-flow__container {
	min-height: 100px;
	position: relative;
	transition: opacity 0.3s ease, box-shadow 0.3s ease;
	width: 100%;
	box-sizing: border-box;
}

/* Ensure payment box shows/hides correctly in older WordPress */
.payment_method_wc_checkout_com_flow .payment_box.payment_method_wc_checkout_com_flow {
	display: none;
	padding: 0;
	margin: 0;
	clear: both;
	float: none;
	width: 100%;
	box-sizing: border-box;
}

.payment_method_wc_checkout_com_flow input[type="radio"]:checked ~ .payment_box.payment_method_wc_checkout_com_flow,
.payment_method_wc_checkout_com_flow input[type="radio"]:checked + label ~ .payment_box.payment_method_wc_checkout_com_flow,
.payment_method_wc_checkout_com_flow input[type="radio"]:checked + label + .payment_box.payment_method_wc_checkout_com_flow {
	display: block;
}

/* When saved cards exist, style Flow container as a simple bordered block */
body.cko-flow--has-saved-cards .payment_method_wc_checkout_com_flow .cko-flow__container {
	background: #ffffff;
	border: 1px solid #186aff;
	border-radius: 8px;
	padding: 20px;
	margin: 20px 0;
}

.cko-flow__container.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Skeleton loader for Flow component */
.cko-flow__skeleton {
	display: none;
	padding: 0;
	background: transparent;
	border-radius: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

.cko-flow__skeleton.show {
	display: block;
	opacity: 1;
}

.cko-flow__skeleton-line {
	height: 40px;
	background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	border-radius: 4px;
	margin-bottom: 15px;
	animation: shimmer 1.5s infinite;
}

.cko-flow__skeleton-line:last-child {
	margin-bottom: 0;
}

.cko-flow__skeleton-line--short {
	width: 60%;
}

@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
}

/* CRITICAL: For single Flow payment method pages, hide button immediately via CSS
   This prevents the flash before JavaScript executes */
body.cko-flow--method-single #place_order {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Show button when Flow is ready (single payment method) */
body.cko-flow--method-single.cko-flow--ready #place_order {
	opacity: 1;
	visibility: visible;
}

/* Hide button when Flow is selected from multiple payment methods */
body.cko-flow--method-selected:not(.cko-flow--method-single) #place_order {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Show button when Flow is ready (multiple payment methods) */
body.cko-flow--method-selected.cko-flow--ready #place_order {
	opacity: 1;
	visibility: visible;
}

/* Save to Account checkbox - initially hidden, shown by JS when card payment type is selected */
.cko-save-card-checkbox {
	display: none;
	transition: opacity 0.2s ease;
}

/* When card payment is selected, the checkbox will be shown by JS with display: block */
.cko-save-card-checkbox.wc-cko-flow-card-on {
	/* Additional styling when card is selected */
	opacity: 1;
}

/* Hide place order button when Flow is loading */
#place_order.cko-flow--loading {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}

#place_order.cko-flow--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid #ffffff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.8s linear infinite;
}

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

/* Smooth fade-in for Flow component */
.cko-flow__container > div {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.button-container {
	display: flex;
	height: 100%;
}

.wp-style-button {
	border: none;
	padding: 10px 3px;
	margin: 8px;
	cursor: pointer;
	transition: 0.2s ease-in-out;
}

.cko-flow__container .woocommerce-SavedPaymentMethods {
	margin-left: 1.5em !important;
}

.cko-flow__container .cko-save-card-checkbox {
	margin-left: 0.7em !important;
}

.cko-flow__container .cko-save-card-checkbox label[for="wc-wc_checkout_com_flow-new-payment-method"] {
    margin-left: 0.1em !important;
}

.cko-flow__container ul.woocommerce-SavedPaymentMethods:nth-of-type(1) li.woocommerce-SavedPaymentMethods-new {
    display: none !important;
}

.cko-flow__container ul.woocommerce-SavedPaymentMethods:nth-of-type(2) {
	padding-top: 0 !important;
}

/* Flow Accordion Style */
.cko-flow__accordion-container {
	margin: 20px 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.cko-flow__accordion {
	background: #ffffff;
	border: 1px solid #186aff;
	border-radius: 8px;
	overflow: hidden;
}

.cko-flow__accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	background: #ffffff;
	cursor: default;
}

.cko-flow__accordion-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.cko-flow__accordion-icon {
	width: 40px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cko-flow__accordion-icon svg {
	width: 40px;
	height: 24px;
}

.cko-flow__accordion-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cko-flow__accordion-label-text {
	font-size: 14px;
	font-weight: 500;
	color: #27292d;
	line-height: 1.4;
}

.cko-flow__accordion-label-subtext {
	font-size: 12px;
	color: #68686c;
	line-height: 1.3;
}

.cko-flow__accordion-panel {
	padding: 0 20px 16px 20px;
	animation: flowFadeIn 0.3s ease-in;
}

@keyframes flowFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Flow payment method label - Match Stripe's simplicity: minimal CSS, let WooCommerce handle defaults */
.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"] {
	/* Let WooCommerce handle default styling - only override if absolutely necessary */
	display: inline-block;
	vertical-align: middle;
}

/* Hide pseudo-elements/icons by default - let WooCommerce handle label styling */
.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"]::before,
.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"]::after {
	display: none;
}

/* Support for enhanced label markup (when JS adds title/subtitle) */
.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"] .cko-flow__payment-method-text {
	display: block;
}

.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"] .cko-flow__payment-method-title {
	display: block;
	line-height: 1.4;
}

.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"] .cko-flow__payment-method-subtitle {
	display: block;
	font-size: 0.9em;
	margin-top: 2px;
	line-height: 1.3;
	opacity: 0.7;
}

/* Old WC/theme compatibility: minimal alignment like Stripe - just ensure radio/label align */
.woocommerce-checkout #payment .payment_methods li.payment_method_wc_checkout_com_flow > input[type="radio"] {
	vertical-align: middle;
	margin-right: 0.5em;
}

.woocommerce-checkout #payment .payment_methods li.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"] {
	vertical-align: middle;
}

/* Avoid layout shift before JS styles the save-card label */
.cko-flow__save-card-label-text {
	display: inline-block;
}

.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"] .cko-flow__payment-method-title {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.4;
}

.payment_method_wc_checkout_com_flow > label[for="payment_method_wc_checkout_com_flow"] .cko-flow__payment-method-subtitle {
	font-size: 13px;
	color: #666;
	margin-top: 2px;
	line-height: 1.3;
}

/* Saved Cards Accordion Style - Matches Flow Style */
.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-container {
	margin: 20px 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	min-height: 50px !important;
}

body[data-saved-payment-order="saved_cards_first"] .payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-container {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	min-height: 50px !important;
}

body[data-saved-payment-order="new_payment_first"] .payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-container {
	display: none !important;
}

body[data-saved-payment-order="new_payment_first"].cko-flow--ready .payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-container {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	min-height: 50px !important;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion {
	background: #ffffff;
	border: 1px solid #186aff;
	border-radius: 8px;
	overflow: visible !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: #ffffff;
	cursor: pointer;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-left {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.cko-flow__saved-cards-icon {
	width: 40px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cko-flow__saved-cards-icon svg {
	width: 40px;
	height: 24px;
}

.cko-flow__saved-cards-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cko-flow__saved-cards-label-text {
	font-size: 14px;
	font-weight: 500;
	color: #27292d;
	line-height: 1.4;
}

.cko-flow__saved-cards-label-subtext {
	font-size: 12px;
	color: #68686c;
	line-height: 1.3;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel {
	padding: 0 16px 12px 16px;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: transparent !important;
	border: none !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods-new,
.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li.woocommerce-SavedPaymentMethods-new,
.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods-tokenBase,
.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li.woocommerce-SavedPaymentMethods-tokenBase,
.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel input[value="new"],
.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel li:has(input[value="new"]) {
	display: none !important;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li {
	padding: 10px 12px;
	margin: 6px 0 !important;
	background: #ffffff;
	border: 1px solid #e9ebeb;
	border-radius: 4px;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li:hover {
	border-color: #186aff;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li input[type="radio"] {
	margin-right: 10px;
	accent-color: #186aff;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	color: #27292d;
	margin: 0;
	width: 100%;
	font-weight: 400;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li label::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 20px;
	margin-right: 10px;
	background: url('data:image/svg+xml,<svg width="32" height="20" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="31" height="19" rx="2.5" stroke="%2368686c" fill="none"/><path d="M4 5h24M4 9h8" stroke="%2368686c" stroke-width="1.5" stroke-linecap="round"/></svg>') center/contain no-repeat;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li input[type="radio"]:checked + label {
	font-weight: 500;
	color: #186aff;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li input[type="radio"]:checked + label::before {
	background: url('data:image/svg+xml,<svg width="32" height="20" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="31" height="19" rx="2.5" stroke="%23186aff" fill="none"/><path d="M4 5h24M4 9h8" stroke="%23186aff" stroke-width="1.5" stroke-linecap="round"/></svg>') center/contain no-repeat;
}

.payment_method_wc_checkout_com_flow .cko-flow__saved-cards-accordion-panel .woocommerce-SavedPaymentMethods li:has(input[type="radio"]:checked) {
	background: #f0f6ff;
	border-color: #186aff;
	border-width: 1px;
}

/* Apple Pay first-tap fix: while ckoApplePayPreCreate is in flight (background
   AJAX to validate + create the WooCommerce order), overlay a spinner on the
   Flow payment component and block pointer events on the Apple Pay button.
   This prevents the user from tapping Apple Pay before the order exists,
   which is what causes "[PaymentMethod]: Unexpected failure
   [payment_method_attempt_failed]" on iOS — Apple Pay's native sheet must
   begin synchronously from the user gesture, so any AJAX inside handleClick
   blows the timing window. */
body.cko-applepay-preparing #flow-container,
body.cko-applepay-preparing .payment_method_wc_checkout_com_flow {
	position: relative;
	pointer-events: none;
	opacity: 0.55;
	transition: opacity 0.15s ease-in-out;
}

body.cko-applepay-preparing #flow-container::after,
body.cko-applepay-preparing .payment_method_wc_checkout_com_flow::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid rgba(24, 106, 255, 0.25);
	border-top-color: #186aff;
	border-radius: 50%;
	animation: cko-applepay-preparing-spin 0.8s linear infinite;
	z-index: 100;
	pointer-events: none;
}

@keyframes cko-applepay-preparing-spin {
	to { transform: rotate(360deg); }
}