/**
 * Rahkar PrestaShop Discounts — storefront.
 *
 * Self-contained so it looks right on any theme. Colours are custom
 * properties: a theme can restyle everything by setting them, for example
 * --rkpsd-accent to its brand green.
 *
 * @author    Rahkarnet <https://rahkarnet.com>
 * @copyright Rahkarnet
 */

:root {
	--rkpsd-accent: #12805c;
	--rkpsd-accent-ink: #ffffff;
	--rkpsd-soft: #f0faf5;
	--rkpsd-border: #9fd8bf;
	--rkpsd-text: inherit;
	--rkpsd-muted: #5f6b66;
	--rkpsd-radius: 10px;
}

/* ---- the pill, shared by the product notice and the gateway badge ---- */

.rkpsd-pill,
.rkpsd-pay-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--rkpsd-accent);
	color: var(--rkpsd-accent-ink);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/* ---- product page ---------------------------------------------------- */

.rkpsd-offers {
	display: grid;
	gap: 8px;
	margin: 12px 0;
}

.rkpsd-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 10px 14px;
	border: 1px dashed var(--rkpsd-border);
	border-radius: var(--rkpsd-radius);
	background: var(--rkpsd-soft);
	color: var(--rkpsd-text);
	font-size: 0.92em;
	line-height: 1.7;
}

.rkpsd-offer__minimum {
	color: var(--rkpsd-muted);
	font-size: 0.92em;
}

/* ---- checkout -------------------------------------------------------- */

.rkpsd-pay-badge {
	margin-inline-start: 8px;
	vertical-align: middle;
	background: var(--rkpsd-soft);
	color: var(--rkpsd-accent);
	border: 1px solid var(--rkpsd-border);
	font-size: 0.75em;
}

#js-checkout-summary.rkpsd-busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s;
}