/* ==========================================================================
   Kadopich — instalment card («خرید اقساطی»): TorobPay + SnappPay.

   The gateways print their own markup and we keep it (TorobPay's variation
   AJAX re-injects the same classes, so anything we styled here still applies
   after a swatch change). What this file does is make the two providers ONE
   component: identical row shell, identical logo tile, identical type — the
   only thing allowed to differ between them is the brand mark itself.

   Everything is scoped under `.kp-bnpl`, which puts every rule at (0,2,0) or
   better against the plugins' own (0,1,0) selectors — including the inline
   `<style>` TorobPay adds from its admin settings, which lands in the footer
   AFTER this file. That is why there is not one `!important` below.

   Loaded only on single-product pages, and only when a gateway is active.
   ========================================================================== */

.kp-bnpl {
	margin: 0;
	padding: 16px;
	background: var(--kpp-surface);
	border: 1px solid var(--kpp-line);
	border-radius: var(--kpp-r-sm);
	box-shadow: var(--kpp-sh);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --- Header --------------------------------------------------------------
   Says once, quietly, what the rows used to repeat twice each. The note is
   pushed to the far edge on a wide summary and wraps to its own line when the
   column gets narrow. */
.kp-bnpl__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
}
.kp-bnpl__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--kpp-soft, #faf6f4);
	color: var(--kpp-ink-2);
}
.kp-bnpl__ico svg { display: block; }
.kp-bnpl__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--kpp-ink);
	line-height: 1.6;
}
.kp-bnpl__note {
	margin-inline-start: auto;
	font-size: 11.5px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--kpp-muted, #8a807b);
}

.kp-bnpl__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* TorobPay wraps its widget in an AJAX container. It stays a real element —
   the plugin fades it during a variation swap and `display: contents` would
   drop that opacity — it just must not add spacing of its own. */
.kp-bnpl #torobpay-variation-widget-container { margin: 0; padding: 0; }

/* --- The row shell — one definition, both providers --------------------- */
.kp-bnpl .torobpay-widget,
.kp-bnpl .snapppay-widget {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	box-sizing: border-box;
	background: var(--kpp-soft, #faf6f4);
	border: 1px solid transparent;
	border-radius: var(--kpp-r-xs, 12px);
	box-shadow: none;
	transform: none;
	/* The gateways make the whole box a button that fires add-to-cart. Inside
	   an information card sitting under the real buy button that is a trap, so
	   bnpl.js swallows the click and the cursor stops advertising one. */
	cursor: default;
	user-select: auto;
	transition: background .15s var(--kp-ease, ease), border-color .15s var(--kp-ease, ease);
}
.kp-bnpl .torobpay-widget:hover,
.kp-bnpl .snapppay-widget:hover,
.kp-bnpl .torobpay-widget:active,
.kp-bnpl .snapppay-widget:active {
	background: var(--kpp-surface);
	border-color: var(--kpp-line);
	box-shadow: none;
	transform: none;
}

/* --- Logo tiles ----------------------------------------------------------
   SnappPay ships a filled blue square, TorobPay a green clover on transparent
   at 60px. Same footprint, same radius, and a tint behind the clover so the
   two marks carry equal weight instead of one floating and one boxed. */
.kp-bnpl .torobpay-widget-media,
.kp-bnpl .snapppay-widget-image {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	box-sizing: border-box;
}
.kp-bnpl .torobpay-widget-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: #f1fbe8;
	overflow: hidden;
}
.kp-bnpl .torobpay-widget-image {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: contain;
	display: block;
}
.kp-bnpl .snapppay-widget-image {
	display: block;
	object-fit: cover;
	box-shadow: inset 0 0 0 1px rgba(28, 24, 21, .06);
}

/* The shimmer only exists on the TorobPay tile. One of two identical rows
   glinting reads as a rendering fault, not as polish. */
.kp-bnpl .torobpay-widget-media.torobpay-logo-light-sweep::after { display: none; }
.kp-bnpl .torobpay-widget-image[class*="torobpay-logo-"] { animation: none; }

/* --- Copy ----------------------------------------------------------------
   `font-family: inherit` is what actually drops SnappPay's remote IRANSans and
   puts both rows on Vazirmatn. */
.kp-bnpl .torobpay-widget-content,
.kp-bnpl .snapppay-widget-content {
	flex: 1;
	min-width: 0;
	color: var(--kpp-ink);
}
.kp-bnpl .torobpay-widget-title,
.kp-bnpl .snapppay-widget-title {
	margin: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0;
	color: var(--kpp-ink);
}

/* Both providers print the same «۴ قسط ماهانه. بدون سود، چک و ضامن.» line, so
   on a two-row card it appeared twice. It is now the card's header note. */
.kp-bnpl .torobpay-widget-description,
.kp-bnpl .snapppay-widget-description { display: none; }

/* The instalment figure is the one number people compare — give it the weight
   and let the currency recede, the same way the main price does. */
.kp-bnpl .woocommerce-Price-amount {
	font-weight: 800;
	color: var(--kpp-ink);
	white-space: nowrap;
}
.kp-bnpl .woocommerce-Price-currencySymbol {
	font-size: .9em;
	font-weight: 500;
	color: var(--kpp-muted, #8a807b);
	margin-inline-start: 2px;
}

/* TorobPay's "shake to hint" outline can no longer be triggered from here
   (the click never reaches its handler), but kill the fallback anyway. */
.kp-bnpl .torobpay-widget-highlight {
	animation: none;
	outline: none;
}

@media (max-width: 480px) {
	.kp-bnpl { padding: 14px; gap: 10px; }
	.kp-bnpl .torobpay-widget,
	.kp-bnpl .snapppay-widget { padding: 9px 10px; gap: 9px; }
	.kp-bnpl .torobpay-widget-media,
	.kp-bnpl .snapppay-widget-image { width: 34px; height: 34px; }
	.kp-bnpl .torobpay-widget-title,
	.kp-bnpl .snapppay-widget-title { font-size: 12.5px; }
	.kp-bnpl__note { margin-inline-start: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.kp-bnpl .torobpay-widget,
	.kp-bnpl .snapppay-widget { transition: none; }
	.kp-bnpl .torobpay-widget-media.torobpay-logo-light-sweep::after { animation: none; }
}