/* Outer container with constraints */
.paypercut-checkout__container {
	max-width: 450px;
	max-height: 600px;
	overflow: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	margin: 0 auto;
	padding: 20px;
}

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

.paypercut-checkout__container iframe {
	width: 100%;
	border: 0;
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

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

.paypercut-checkout__error {
	color: #c62828;
}

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

/* ── Icons wrapper (brands + powered-by stacked) ──────────────────────────── */
.paypercut-label-icons {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	width: 100% !important;
	margin: 2px 0 0 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	float: none !important;
	box-sizing: border-box !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: 10px 0 0 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;
}

/* ── Powered by row ───────────────────────────────────────────────────────── */
.paypercut-powered-by {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 5px !important;
	margin: 10px 0 0 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	text-decoration: none !important;
	float: none !important;
}

.paypercut-powered-by__text {
	font-size: 12px !important;
	line-height: 1 !important;
	color: #666 !important;
	font-weight: normal !important;
	margin: 0 !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.paypercut-powered-by__logo {
	display: inline-block !important;
	height: 20px !important;
	width: auto !important;
	max-width: none !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;
}

/* ── Blocks checkout label ────────────────────────────────────────────────── */
.paypercut-blocks-label {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	gap: 6px !important;
	float: none !important;
	box-sizing: border-box !important;
}

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

.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: #fff;
	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;
}