/* PayU Card Recurring – checkout / order-pay / CVV / thank-you styles (classic + Blocks share class names). */

.payu-card-rec {
	font-size: 15px;
	line-height: 1.5;
	color: #1f1f1f;
}

.payu-card-rec__description {
	margin: 0 0 12px;
}

.payu-card-rec__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 12px;
	margin: 4px 0 0;
}

.payu-card-rec__field {
	box-sizing: border-box;
}

.payu-card-rec__field {
	margin: 0 0 12px !important;
	padding: 0;
	float: none !important;
	width: auto;
}

.payu-card-rec__field--number {
	flex: 1 0 100%;
}

.payu-card-rec__field--date,
.payu-card-rec__field--cvv {
	flex: 1 0 calc(50% - 12px);
	min-width: 120px;
}

.payu-card-rec__field label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: #374151;
}

.payu-card-rec__field label abbr.required {
	border: 0;
	text-decoration: none;
	color: #dc2626;
}

/* PayU Secure Form iframe host.
   The iframe is cross-origin, so its inner typography comes from the SDK
   `style` option (assets/js/classic-checkout.js) and only the box is styled
   here. Both have to agree on the height or the digits sit off-centre. */
.payu-card-rec .payu-card-rec__frame {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #d5d9e0;
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	overflow: hidden;
	line-height: 1;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.payu-card-rec .payu-card-rec__frame iframe {
	display: block;
	width: 100% !important;
	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px;
	border: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	vertical-align: middle;
	line-height: 22px;
}

.payu-card-rec .payu-card-rec__frame.payu-secure-form-focus {
	border-color: #111827;
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.payu-card-rec .payu-card-rec__frame.payu-secure-form-invalid:not(.payu-secure-form-focus) {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.payu-card-rec__validation-error,
.payu-card-rec__technical-error {
	display: none;
	margin: 4px 0 0;
	color: #b91c1c;
	font-size: 13px;
	line-height: 1.4;
}

.payu-card-rec__technical-error {
	margin: 0 0 10px;
	padding: 8px 10px;
	border: 1px solid #fecaca;
	border-radius: 8px;
	background: #fef2f2;
}

.payu-card-rec__legal {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6b7280;
}

.payu-card-rec__summary {
	margin: 4px 0 8px;
	font-size: 14px;
}

/* Saved cards list (WooCommerce core markup). */
.payment_method_payu_card_recurring .woocommerce-SavedPaymentMethods {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.payment_method_payu_card_recurring .woocommerce-SavedPaymentMethods li {
	margin: 0 0 6px;
}

/* Card / wallet logos next to the payment method title */
.wc_payment_method.payment_method_payu_card_recurring > label img,
.wc_payment_method.payment_method_payu_googlepay_recurring > label img,
.wc_payment_method.payment_method_payu_applepay_recurring > label img,
.payu-card-rec__label img {
	max-height: 24px;
	width: auto;
	object-fit: contain;
}

/*
 * Google Pay / Apple Pay marks already include their official outline.
 * Checkout themes (FunnelKit) add border/radius/background on payment-method
 * <img>, which draws a second, non-compliant frame around the mark.
 */
.wc_payment_method.payment_method_payu_googlepay_recurring > label img,
.wc_payment_method.payment_method_payu_applepay_recurring > label img,
body .wfacp_main_form.woocommerce #payment ul.payment_methods li.payment_method_payu_googlepay_recurring label img,
body .wfacp_main_form.woocommerce #payment ul.payment_methods li.payment_method_payu_applepay_recurring label img {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* ---------- Blocks ---------- */
.payu-card-rec--blocks .payu-card-rec__field {
	margin-bottom: 12px !important;
}

/* ---------- CVV page ---------- */
.payu-card-rec-cvv {
	max-width: 480px;
	margin: 40px auto;
	padding: 0 16px;
}

.payu-card-rec-cvv__card {
	padding: 28px 28px 24px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.payu-card-rec-cvv__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
}

.payu-card-rec-cvv__title {
	margin: 4px 0 12px;
	font-size: 1.4rem;
}

.payu-card-rec-cvv__lead {
	margin: 0 0 16px;
	color: #374151;
}

.payu-card-rec-cvv__details {
	margin: 0 0 18px;
	padding: 0;
}

.payu-card-rec-cvv__details > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid #f3f4f6;
}

.payu-card-rec-cvv__details dt {
	font-weight: 500;
	color: #6b7280;
}

.payu-card-rec-cvv__details dd {
	margin: 0;
	font-weight: 600;
}

.payu-card-rec--cvv-only .payu-card-rec__field--cvv {
	flex: 1 0 100%;
	max-width: 200px;
}

.payu-card-rec-cvv__submit {
	width: 100%;
	margin-top: 8px;
}

.payu-card-rec-cvv__status {
	margin: 8px 0;
	color: #065f46;
}

.payu-card-rec-cvv__back {
	margin: 14px 0 0;
	text-align: center;
	font-size: 13px;
}

/* ---------- Thank-you status ---------- */
.payu-card-rec-status {
	margin: 0 0 28px;
}

.payu-card-rec-status__card {
	padding: 24px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fff;
	text-align: center;
}

.payu-card-rec-status__title {
	margin: 12px 0 8px;
	font-size: 1.3rem;
}

.payu-card-rec-status__lead,
.payu-card-rec-status__failed-msg {
	margin: 0 0 12px;
	color: #374151;
}

.payu-card-rec-status__spinner {
	width: 36px;
	height: 36px;
	margin: 0 auto;
	border: 3px solid #e5e7eb;
	border-top-color: #111827;
	border-radius: 50%;
	animation: payu-card-rec-spin 0.9s linear infinite;
}

.payu-card-rec-status__icon--error {
	width: 44px;
	height: 44px;
	margin: 0 auto;
	line-height: 44px;
	font-size: 28px;
	font-weight: 700;
	color: #fff;
	background: #b91c1c;
	border-radius: 50%;
}

.payu-card-rec-status__btn {
	margin: 6px 4px 0;
}

.payu-card-rec-status__btn--secondary {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
}

@keyframes payu-card-rec-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Google Pay / Apple Pay (separate payment methods) ---------- */
.payu-card-rec--wallet {
	padding: 2px 0 0;
}

.payu-card-rec__wallet {
	width: 100%;
	min-width: 240px;
	min-height: 48px;
	margin: 0 0 10px;
}

.payu-card-rec__wallet[hidden] {
	display: none;
}

/* The wallet button replaces "Place order", so it looks unavailable whenever
   the checkout would refuse the order. Google's and Apple's buttons take no
   disabled state of their own, hence dimming plus a shield over the top. */
.payu-card-rec__wallet-wrap {
	position: relative;
}

.payu-card-rec-place-order[data-payu-blocked="1"] .payu-card-rec__wallet {
	opacity: 0.45;
	filter: grayscale( 1 );
}

.payu-card-rec__wallet-shield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: not-allowed;
}

.payu-card-rec__wallet-shield[hidden] {
	display: none;
}

.payu-card-rec__wallet--google > button,
.payu-card-rec__wallet--google .gpay-card-info-container,
.payu-card-rec__wallet--google .gpay-button-fill {
	width: 100% !important;
	min-height: 48px;
	border-radius: 10px !important;
}

.payu-card-rec__apple-pay-button {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: #000;
	color: #fff;
	cursor: pointer;
}

@supports (-webkit-appearance: -apple-pay-button) {
	.payu-card-rec__apple-pay-button {
		background: transparent;
		-webkit-appearance: -apple-pay-button;
		-apple-pay-button-type: buy;
		-apple-pay-button-style: black;
	}
}

apple-pay-button {
	--apple-pay-button-width: 100%;
	--apple-pay-button-height: 48px;
	--apple-pay-button-border-radius: 10px;
	display: block;
	width: 100%;
	height: 48px;
}

.payu-card-rec__wallet-hint {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1.5;
	color: #6b7280;
}

/* Official Google Pay / Apple Pay button takes the place of #place_order. */
#place_order[data-payu-place-order-hidden="1"],
button#place_order[data-payu-place-order-hidden="1"],
button[name="woocommerce_checkout_place_order"][data-payu-place-order-hidden="1"],
html body.payu-card-rec--wallet-cta #place_order[data-payu-place-order-hidden="1"],
html body.payu-card-rec--wallet-cta #wfacp-e-form #place_order[data-payu-place-order-hidden="1"],
html body.payu-card-rec--wallet-cta #wfacp-e-form #payment #place_order[data-payu-place-order-hidden="1"] {
	display: none !important;
}

.payu-card-rec-place-order {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	margin: 0;
}

.payu-card-rec-place-order[hidden] {
	display: none !important;
}

.payu-card-rec-place-order .payu-card-rec__wallet {
	margin: 0;
	min-height: 52px;
}

.payu-card-rec-place-order .payu-card-rec__technical-error {
	margin: 0 0 8px;
}

/* Payment methods the browser cannot offer are hidden by wallets.js; keep them
   out of the flow until it has decided, so the list does not jump. */
.woocommerce-checkout .wc_payment_method.payment_method_payu_googlepay_recurring,
.woocommerce-checkout .wc_payment_method.payment_method_payu_applepay_recurring {
	transition: opacity 120ms ease;
}

.payu-card-rec__wallet-selected {
	display: none;
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid #d1fae5;
	border-radius: 8px;
	background: #ecfdf5;
	color: #065f46;
	font-size: 14px;
}

.payu-card-rec__wallet-change {
	margin-left: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: #065f46;
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

/* ---------- Processing overlay (after wallet authorisation) ---------- */
.payu-card-rec-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
}

.payu-card-rec-overlay[hidden] {
	display: none;
}

.payu-card-rec-overlay__box {
	padding: 28px 32px;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
	text-align: center;
	color: #111827;
	font-size: 15px;
}

.payu-card-rec-overlay__box p {
	margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
 * 3D Secure challenge modal (PayU authentication page in an iframe).
 * Sizes follow PayU's own guidance: 600x520 on desktop, full screen on phones.
 * -------------------------------------------------------------------------- */

.payu-card-rec--3ds-open {
	overflow: hidden;
}

.payu-card-rec-3ds {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba( 15, 18, 25, 0.55 );
}

.payu-card-rec-3ds__shell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 600px;
	max-width: 100%;
	height: 520px;
	max-height: 100%;
	overflow: hidden;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba( 15, 18, 25, 0.28 );
}

.payu-card-rec-3ds__frame {
	width: 100%;
	height: 100%;
	border: 0;
}

.payu-card-rec-3ds__busy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px;
	text-align: center;
}

/* The flex display above outranks the UA rule for [hidden], so say it here. */
.payu-card-rec-3ds__busy[hidden],
.payu-card-rec-3ds__close[hidden],
.payu-card-rec-3ds__frame[hidden] {
	display: none;
}

.payu-card-rec-3ds__spinner {
	width: 34px;
	height: 34px;
	border: 3px solid #e3e6ec;
	border-top-color: #1f1f1f;
	border-radius: 50%;
	animation: payu-card-rec-3ds-spin 0.9s linear infinite;
}

.payu-card-rec-3ds__waiting {
	margin: 0;
	color: #4b5161;
	font-size: 15px;
}

.payu-card-rec-3ds__close {
	position: absolute;
	top: 6px;
	right: 10px;
	z-index: 1;
	padding: 0 6px;
	border: 0;
	background: transparent;
	color: #6b7280;
	font-size: 26px;
	line-height: 1.2;
	cursor: pointer;
}

.payu-card-rec-3ds__close:hover {
	color: #1f1f1f;
}

@keyframes payu-card-rec-3ds-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( max-width: 640px ) {
	.payu-card-rec-3ds {
		padding: 0;
	}

	.payu-card-rec-3ds__shell {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.payu-card-rec-3ds__spinner {
		animation-duration: 3s;
	}
}