/**
 * WKWP Wallet — block-checkout styles.
 *
 * Companion stylesheet to assets/js/wkwp-block-checkout.js. The body classes
 * are toggled by that script so all visibility logic lives here, not in JS.
 *
 * Banners are mounted ONCE and toggled via class — never removed from the
 * DOM. This is what eliminates the previous flicker bug that was caused by
 * mount/unmount churn during WC blocks re-renders.
 */

/* Right-panel partial-pay component visibility:
     - Hide when the wallet balance already covers the full cart total
       (partial-pay would just be a confusing alias for the full-payment
       radio in that case).
     - Hide on every non-wallet payment method so the OTP / fee flow can't
       fire while the customer is paying via Direct Bank / COD / Check.
     - Visible only on the wkwc_wallet radio with a real shortfall — the
       canonical partial-pay context. */
body.wkwp-balance-covers .wkwc-wallet-block-components__content,
body.wkwp-balance-covers .wc-block-components-wkwc-wallet,
body:not(.wkwp-pm-wkwc_wallet) .wkwc-wallet-block-components__content,
body:not(.wkwp-pm-wkwc_wallet) .wc-block-components-wkwc-wallet {
	display: none !important;
}

/* "Partial Payment from Wallet" caption above the optional checkbox. */
.wkwp-partial-caption {
	font-size: 12px;
	font-weight: 600;
	color: #1f2937;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 6px;
	padding-left: 24px;
}

/* Indent the partial-pay component (caption + checkbox + OTP rows) so it
   aligns with the totals block on the block-checkout right panel rather
   than hugging the card edge. Submodule's stylesheet already sets
   `padding: 0 16px` on `.wkwc-wallet-block-components__content`; this
   bumps the leading edge a little further so the column visually nests
   under the order summary. */
.wc-block-components-totals-wrapper .wkwc-wallet-block-components__content,
.wc-block-components-totals-wrapper .wc-block-components-wkwc-wallet,
.wp-block-woocommerce-checkout .wkwc-wallet-block-components__content,
.wp-block-woocommerce-checkout .wc-block-components-wkwc-wallet {
	padding-left: 24px;
}

/* ------------------------------------------------------------------
   Banner visibility — single source of truth.

   Bridge JS mounts each banner once and never removes it. Default state
   is hidden (display:none); the matching body class flips it to visible.
   This contract eliminates flicker because no DOM mutation happens when
   state moves — only a class toggle.
   ------------------------------------------------------------------ */

.wkwp-bnpl-checkout-banner,
.wkwp-wallet-promo,
.wkwp-cashback-offer {
	display: none;
}

body.wkwp-bnpl-eligible .wkwp-bnpl-checkout-banner {
	display: block;
}

body.wkwp-pm-wkwc_wallet .wkwp-wallet-promo {
	display: block;
}

body.wkwp-cashback-eligible .wkwp-cashback-offer {
	display: block;
}

/* Banner styling — match the inline styles emitted by PHP (legacy markup)
   so a page that mounts both server- and client-rendered variants looks
   the same regardless of which one wins the race. */
.wkwp-bnpl-checkout-banner {
	margin: 0 0 16px;
	padding: 14px 18px;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-left: 4px solid #d97706;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #78350f;
}

.wkwp-wallet-promo {
	background: #f0fff4;
	border: 1px solid #27ae60;
	color: #27ae60;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 8px;
	font-weight: 600;
	text-align: center;
	clear: both;
}

.wkwp-cashback-offer {
	background: #eff6ff;
	border: 1px solid #3b82f6;
	border-left: 4px solid #1d4ed8;
	color: #1e3a8a;
	padding: 14px 18px;
	margin: 0 0 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/* ------------------------------------------------------------------
   Wallet OTP gate widget — covers full-wallet + BNPL flows that the
   submodule's partial-pay UI does not. Mounted directly above the
   Place Order button so the customer cannot miss it.
   ------------------------------------------------------------------ */
.wkwp-wallet-otp-gate {
	margin: 0 0 16px;
	padding: 16px 18px;
	background: #fff7ed;
	border: 1px solid #fdba74;
	border-left: 4px solid #ea580c;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #7c2d12;
}

.wkwp-wallet-otp-gate .wkwp-otp-title {
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 4px;
}

.wkwp-wallet-otp-gate .wkwp-otp-intro {
	margin: 0 0 12px;
	font-weight: 500;
}

.wkwp-wallet-otp-gate .wkwp-otp-status {
	min-height: 18px;
	margin: 0 0 10px;
	font-weight: 600;
	font-size: 13px;
}

.wkwp-wallet-otp-gate .wkwp-otp-status.is-error {
	color: #b91c1c;
}

.wkwp-wallet-otp-gate .wkwp-otp-status.is-success {
	color: #15803d;
}

.wkwp-wallet-otp-gate .wkwp-otp-status.is-pending {
	color: #92400e;
	font-style: italic;
}

.wkwp-wallet-otp-gate .wkwp-otp-btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #ea580c;
	border-radius: 6px;
	background: #ea580c;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.wkwp-wallet-otp-gate .wkwp-otp-btn:hover {
	background: #c2410c;
	border-color: #c2410c;
}

.wkwp-wallet-otp-gate .wkwp-otp-input-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	align-items: center;
}

.wkwp-wallet-otp-gate .wkwp-otp-input {
	flex: 1 1 140px;
	padding: 8px 12px;
	border: 1px solid #d4d4d8;
	border-radius: 6px;
	font-size: 16px;
	letter-spacing: 4px;
	font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* Disable Place Order button visually while OTP gate is active. The
   server-side gate is the source of truth — this is a UX hint. */
body.wkwp-wallet-otp-required .wc-block-components-checkout-place-order-button {
	opacity: 0.55;
	pointer-events: none;
}

body.wkwp-wallet-otp-verified .wkwp-wallet-otp-gate {
	display: none;
}