/* 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%;
	}
}

/* Classic checkout owns the outer payment row, radio, label and panel.
   Keep branding inside the gateway icon slot so custom checkout layouts can
   position their own controls without an extra grid column or reset. */
/* ── Payment-method brand icons ───────────────────────────────────────────── */
.paypercut-label-icons {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	float: none;
	box-sizing: border-box;
}

/* 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;
	align-items: center;
	justify-content: center;
	min-height: 22px;
	padding: 2px 7px;
	border: 1px solid #f0dfad;
	border-radius: 5px;
	background: #fff5d8;
	color: #5f4b16;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0;
	white-space: nowrap;
	box-sizing: border-box;
}

/* 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;
}

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

/* Brand defaults remain ordinary CSS so shop styles can customize them. */
.paypercut-card-brands img,
.wc_payment_method .paypercut-card-brands__icon,
.paypercut-blocks-label .paypercut-card-brands__icon {
	display: inline-block;
	height: 22px;
	width: auto;
	max-width: 43px;
	min-width: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	object-fit: contain;
	background: none;
}

/* 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;
	max-height: 28px;
	max-width: 50px;
}

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

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

/* 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;
	width: 100%;
	min-width: 0;
}

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

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

/* 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;
}

.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;
	flex-shrink: 0;
}

/* 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;
}

.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;
	}
}