/* Let the hosted form use the payment panel's full width and natural height.
   The SDK keeps the iframe height in sync through CHECKOUT_RESIZE events. */
.paypercut-checkout__container {
	width: 100%;
	max-width: none;
	max-height: none;
	overflow: visible;
	padding: 0;
	box-sizing: border-box;
}

/* Inner mount point - SDK will resize iframe dynamically */
#paypercut-checkout-container,
.paypercut-checkout__mount {
	width: 100%;
	min-width: 0;
	position: relative;
}

.paypercut-elements-preview,
.paypercut-elements__mount {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: visible;
	box-sizing: border-box;
}

.paypercut-elements__stage {
	position: relative;
	width: 100%;
	min-height: 82px;
}

.paypercut-elements__mount {
	opacity: 1;
	transition: opacity 180ms ease-out;
}

.paypercut-elements__stage.is-loading .paypercut-elements__mount {
	opacity: 0;
}

.paypercut-elements-skeleton {
	position: absolute;
	inset: 0;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	min-height: 82px;
	pointer-events: none;
}

.paypercut-elements-skeleton__heading {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.paypercut-elements-skeleton__brands {
	display: flex;
	gap: 8px;
}

.paypercut-elements-skeleton__line {
	display: block;
	overflow: hidden;
	background-color: #eceff1;
	background-image: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.82) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-position: 200% 0;
	background-size: 200% 100%;
	animation: paypercut-elements-skeleton-shimmer 1.35s ease-in-out infinite;
}

.paypercut-elements-skeleton__label {
	width: min(150px, 32%);
	height: 14px;
	border-radius: 5px;
}

.paypercut-elements-skeleton__brand {
	width: 34px;
	height: 18px;
	border-radius: 5px;
}

.paypercut-elements-skeleton__field {
	position: relative;
	width: 100%;
	height: 50px;
	border-radius: 8px;
}

.paypercut-elements-skeleton__field > .paypercut-elements-skeleton__brands {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

@media (max-width: 480px) {
	.paypercut-elements__stage,
	.paypercut-elements-skeleton {
		min-height: 124px;
	}

	.paypercut-elements-skeleton__heading {
		margin-bottom: 18px;
	}

	.paypercut-elements-skeleton__label {
		height: 18px;
	}

	.paypercut-elements-skeleton__brand {
		width: 40px;
		height: 22px;
	}

	.paypercut-elements-skeleton__field {
		height: 64px;
		border-radius: 10px;
	}
}

.paypercut-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@keyframes paypercut-elements-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.paypercut-elements__mount {
		transition: none;
	}

	.paypercut-elements-skeleton__line {
		animation: none;
		background-image: none;
	}
}

.paypercut-elements__mount iframe {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	border: 0;
}

.paypercut-checkout__container iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

.paypercut-checkout__placeholder,
.paypercut-checkout__error,
.paypercut-checkout__status {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	padding: 24px;
	border-radius: 12px;
	background-color: #f5f5f5;
}

.paypercut-checkout__error {
	color: #c62828;
}

.paypercut-checkout__status.is-success {
	color: #116329;
	background-color: #edf7ee;
}

/* Card Element initialization failures are recoverable. Keep this notice
   compact and themeable; checkout/submission errors belong to Woo notices. */
.paypercut-elements__load-error {
	--paypercut-load-error-color: #8a1c13;
	--paypercut-load-error-border: #f1b8b2;
	--paypercut-load-error-background: #fff8f7;
	--paypercut-load-error-action: #1f2937;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--paypercut-load-error-border);
	border-radius: 8px;
	color: var(--paypercut-load-error-color);
	background: var(--paypercut-load-error-background);
}

.paypercut-elements__load-error-copy {
	min-width: 0;
}

.paypercut-elements__load-error-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.paypercut-elements__load-error-message {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.45;
}

.paypercut-elements__load-error-retry {
	flex: 0 0 auto;
	min-height: 36px;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--paypercut-load-error-action);
	border-radius: 6px;
	color: #fff;
	background: var(--paypercut-load-error-action);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.paypercut-elements__load-error-retry:hover {
	filter: brightness(1.12);
}

.paypercut-elements__load-error-retry:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.paypercut-elements__load-error {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.paypercut-elements__load-error-retry {
		width: 100%;
	}
}

/* ── Payment method label row ─────────────────────────────────────────────── */
/* Many themes override <label> with display:block or add float/margin.
   !important on every layout property keeps our flex layout intact. */
.payment_method_paypercut_payments label[for="payment_method_paypercut_payments"] {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100% !important;
	gap: 2px 6px !important;
	float: none !important;
	text-align: left !important;
	box-sizing: border-box !important;
}

/* Classic themes often give gateway labels width: 100%, which pushes Woo's
   radio onto a line of its own. Keep the control and label together while the
   secure card Element retains a full-width row underneath. */
li.wc_payment_method.payment_method_paypercut_payments {
	display: grid !important;
	grid-template-columns: max-content minmax(0, 1fr) !important;
	align-items: center !important;
	column-gap: 0.8em !important;
}

li.wc_payment_method.payment_method_paypercut_payments > input.input-radio {
	grid-column: 1 !important;
	grid-row: 1 !important;
	margin: 0 !important;
}

li.wc_payment_method.payment_method_paypercut_payments
	> label[for="payment_method_paypercut_payments"] {
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-width: 0 !important;
	margin: 0 !important;
}

li.wc_payment_method.payment_method_paypercut_payments
	> .payment_box.payment_method_paypercut_payments {
	grid-column: 1 / -1 !important;
	grid-row: 2 !important;
	width: 100% !important;
}

/* ── Payment-method brand icons ───────────────────────────────────────────── */
.paypercut-label-icons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	float: none !important;
	box-sizing: border-box !important;
}

/* Public environment indicator. Keep this separate from gateway branding so
   wallet/card marks remain unmodified and the badge can sit beside the title. */
.paypercut-test-mode-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 22px !important;
	padding: 2px 7px !important;
	border: 1px solid #f0dfad !important;
	border-radius: 5px !important;
	background: #fff5d8 !important;
	color: #5f4b16 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 16px !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

/* The environment badge describes the active checkout choice. Keep it out of
   unselected labels in both WooCommerce Blocks and the classic checkout. */
.wc-block-components-radio-control__option
	> .wc-block-components-radio-control__input:not(:checked)
	+ .wc-block-components-radio-control__option-layout
	.paypercut-test-mode-badge,
.wc_payment_method
	> input.input-radio:not(:checked)
	+ label
	.paypercut-test-mode-badge {
	display: none !important;
}

/* ── Brand icons row ──────────────────────────────────────────────────────── */
.paypercut-card-brands {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	float: none !important;
	list-style: none !important;
}

/* Themes commonly do img { max-width:100%; height:auto; border-radius:Xpx }
   which breaks our fixed-size card icons — override all of it. */
.paypercut-card-brands img,
.paypercut-card-brands__icon {
	display: inline-block !important;
	height: 22px !important;
	width: auto !important;
	max-width: 43px !important;
	min-width: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	margin: 0 !important;
	vertical-align: middle !important;
	object-fit: contain !important;
	background: none !important;
}

/* Card badges use a taller, near-square canvas than wallet wordmarks. Give
   them their own visual size so all payment marks read at the same weight. */
.paypercut-card-brands .paypercut-card-brands__icon--card {
	height: 28px !important;
	max-height: 28px !important;
	max-width: 50px !important;
}

/* ── Blocks checkout label ────────────────────────────────────────────────── */
.paypercut-blocks-label {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	min-width: 0 !important;
	gap: 8px 12px !important;
	float: none !important;
	box-sizing: border-box !important;
}

.paypercut-blocks-label__title {
	display: inline-flex !important;
	align-items: center !important;
	min-width: 0 !important;
	gap: 6px !important;
}

/* Woo's label-group is content-sized unless a gateway's label explicitly
   claims the row. Give Paypercut the same full-width label slot used by
   methods such as BLIK and Przelewy24 so the brand marks can sit at the
   trailing edge without absolute positioning. */
.wc-block-components-radio-control__label-group:has(.paypercut-blocks-label),
.wc-block-components-radio-control__label:has(.paypercut-blocks-label) {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-width: 0 !important;
}

.paypercut-blocks-label .paypercut-label-icons {
	flex: 0 0 auto !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	width: auto !important;
	margin: 0 !important;
	margin-inline-start: auto !important;
	gap: 6px 10px !important;
}

.paypercut-blocks-label .paypercut-card-brands {
	padding-top: 0 !important;
}

/* Keep checkout layout adjustments inside the Paypercut option. These
   WooCommerce classes are shared by every gateway, including Stripe. */
.wc-block-components-radio-control-accordion-option:has(.paypercut-blocks-label)
	.wc-block-components-radio-control-accordion-content {
	padding: 0 16px 16px;
}

/* Pin the radio button to the top when the label has multiple rows.
   Without this, Blocks centers the radio vertically against the full label
   height, making it appear next to the brand icons instead of the title. */
.wc-block-components-radio-control__option:has(.paypercut-blocks-label),
.wc-block-components-radio-control__option-layout:has(.paypercut-blocks-label) {
	align-items: flex-start !important;
}

.wc-block-components-radio-control__option:has(.paypercut-blocks-label) input[type="radio"],
.wc-block-components-radio-control__option-layout:has(.paypercut-blocks-label) input[type="radio"] {
	margin-top: 3px !important;
	flex-shrink: 0 !important;
}

/* ── Payment method list item reset ──────────────────────────────────────── */
li.wc_payment_method.payment_method_paypercut_payments {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

li.wc_payment_method.payment_method_paypercut_payments::before {
	display: none !important;
}

/* Validation error styles */
.paypercut-field-error {
	border-color: #c62828 !important;
	box-shadow: 0 0 0 1px #c62828 !important;
	animation: paypercut-field-shake 0.3s ease-in-out;
}

@keyframes paypercut-field-shake {
	0%, 100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5px);
	}
	75% {
		transform: translateX(5px);
	}
}

.paypercut-field-validation-error {
	margin-bottom: 1em;
}

.payment_method_paypercut_payments .payment_box > p {
	padding: 10px;
}

.paypercut-checkout-modal[hidden] {
	display: none;
}

.paypercut-checkout-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.paypercut-checkout-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.58);
}

.paypercut-checkout-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(520px, 100%);
	max-height: min(760px, 92vh);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: #f3f3f3;
	box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.paypercut-checkout-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}

.paypercut-checkout-modal__header h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}

.paypercut-checkout-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #111827;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.paypercut-checkout-modal__close:hover,
.paypercut-checkout-modal__close:focus {
	background: #f3f4f6;
}

.paypercut-checkout-modal.is-processing .paypercut-checkout-modal__close:hover,
.paypercut-checkout-modal.is-processing .paypercut-checkout-modal__close:focus {
	background: #fef3c7;
	color: #92400e;
}

.paypercut-checkout-modal__processing {
	margin: 0;
	padding: 12px 20px;
	border-bottom: 1px solid #fde68a;
	background: #fffbeb;
	color: #92400e;
	font-size: 14px;
	line-height: 1.45;
}

.paypercut-checkout-modal__body {
	overflow: auto;
	padding: 0;
}

.paypercut-checkout-modal__body .paypercut-checkout__container {
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 20px;
}

.paypercut-checkout-modal__launcher {
	margin: 12px 0;
}

body.paypercut-checkout-modal-open {
	overflow: hidden;
}

/* ── Woo Blocks Express Checkout adapter ─────────────────────────────────── */
.wc-block-components-express-payment__event-buttons >
	li.paypercut-express-wallet-unavailable {
	display: none;
}

.wc-block-components-express-payment__event-buttons[data-paypercut-express-layout] {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 12px;
	width: 100%;
}

.wc-block-components-express-payment:has(
		.wc-block-components-express-payment__event-buttons[data-paypercut-express-layout]
	) {
	container-type: inline-size;
	container-name: paypercut-blocks-express-placement;
}

.wc-block-components-express-payment__event-buttons[data-paypercut-express-layout="row"] {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

.wc-block-components-express-payment__event-buttons[data-paypercut-express-layout="column"] {
	grid-template-columns: minmax(0, 1fr);
}

@container paypercut-blocks-express-placement (max-width: 451px) {
	.wc-block-components-express-payment__event-buttons[data-paypercut-express-layout="row"] {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}
}

.paypercut-wallet-payment-method-unavailable {
	display: none !important;
}

.paypercut-wallet--payment_method {
	width: 100%;
	padding-top: 12px;
}

.paypercut-wallet-prepared-payment-method {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 58px;
	padding: 10px 14px;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
	box-sizing: border-box;
}

.paypercut-wallet-prepared-payment-method__icon {
	display: block;
	width: auto;
	height: 28px;
	max-width: 52px;
	margin: 0;
	object-fit: contain;
}

.paypercut-wallet-prepared-payment-method__description {
	min-width: 0;
	font-size: inherit;
	line-height: 1.4;
}

.paypercut-wallet-prepared-payment-method__cancel {
	min-height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.paypercut-wallet-prepared-payment-method__cancel:hover,
.paypercut-wallet-prepared-payment-method__cancel:focus-visible {
	text-decoration: underline;
}

/* ── Product and classic-cart Express Checkout placements ───────────────── */
.paypercut-express-placement {
	clear: both;
	width: 100%;
	margin: 20px 0;
	container-type: inline-size;
	container-name: paypercut-express-placement;
}

.paypercut-express-placement:not(.has-available-wallet)[aria-busy="false"] {
	display: none;
}

.paypercut-express-placement__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 12px;
	width: 100%;
}

.paypercut-express-placement[data-paypercut-express-layout="row"]
	.paypercut-express-placement__grid {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

.paypercut-express-placement[data-paypercut-express-layout="column"]
	.paypercut-express-placement__grid {
	grid-template-columns: minmax(0, 1fr);
}

@container paypercut-express-placement (max-width: 451px) {
	.paypercut-express-placement[data-paypercut-express-layout="row"]
		.paypercut-express-placement__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}
}

.paypercut-express-placement:not(.has-available-wallet)[aria-busy="true"]
	.paypercut-express-placement__grid::before {
	content: "";
	display: block;
	min-height: 48px;
	border-radius: 4px;
	background: linear-gradient(90deg, #edf1f3 25%, #f8fafb 50%, #edf1f3 75%);
	background-size: 240% 100%;
	animation: paypercut-elements-skeleton-shimmer 1.35s ease-in-out infinite;
}

.paypercut-express-placement__item,
.paypercut-express-placement__item .paypercut-express-checkout__mount {
	width: 100%;
	min-width: 0;
	min-height: 48px;
}

.paypercut-express-placement__error {
	margin: 12px 0 0;
	padding: 10px 12px;
	border: 1px solid #cc1818;
	border-radius: 4px;
	background: #fff0f0;
	color: #8a2424;
}

.paypercut-express-placement--product {
	max-width: 100%;
}

.paypercut-mini-cart-express,
.paypercut-express-placement--mini_cart {
	width: 100%;
	min-width: 0;
}

.paypercut-mini-cart-express {
	flex: 0 0 100%;
	grid-column: 1 / -1;
}

.wc-block-mini-cart__footer-actions:has(> .paypercut-mini-cart-express) {
	flex-wrap: wrap;
}

.paypercut-express-placement--mini_cart {
	margin: 0 0 12px;
}

.paypercut-express-placement--mini_cart .paypercut-express-placement__grid {
	grid-template-columns: 1fr;
}

.paypercut-express-checkout {
	position: relative;
	width: 100%;
	min-height: 48px;
}

.paypercut-express-checkout__mount {
	width: 100%;
}

.paypercut-express-checkout[aria-busy="true"] .paypercut-express-checkout__mount {
	visibility: hidden;
}

.paypercut-express-checkout__skeleton {
	position: absolute;
	inset: 0;
	display: block;
}

.paypercut-express-checkout__skeleton > span:not(.paypercut-visually-hidden) {
	display: block;
	min-height: 48px;
	border-radius: 8px;
	background: linear-gradient(90deg, #edf1f3 25%, #f8fafb 50%, #edf1f3 75%);
	background-size: 240% 100%;
	animation: paypercut-elements-skeleton-shimmer 1.35s ease-in-out infinite;
}

.paypercut-express-checkout__error {
	margin: 0;
	padding: 12px 14px;
	border: 1px solid #cc1818;
	border-radius: 4px;
	background: #fff0f0;
	color: #8a2424;
}

@media (max-width: 540px) {
	.paypercut-express-checkout[aria-busy="true"] {
		min-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.paypercut-express-placement:not(.has-available-wallet)[aria-busy="true"]
		.paypercut-express-placement__grid::before,
	.paypercut-express-checkout__skeleton > span:not(.paypercut-visually-hidden) {
		animation: none;
	}
}