/**
 * Fortium Conversion Kit — premium bundle selector.
 *
 * All rules are scoped under .ftm-bundles. Design tokens are CSS variables on the root
 * element, so a theme can re-brand the component by overriding them without touching this
 * file, e.g.  .ftm-bundles { --ftm-accent: #0a7c3f; }
 *
 * @package Fortium\Conversion_Kit
 */

.ftm-bundles {
	--ftm-accent: #d90429;
	--ftm-accent-deep: #a80320;
	--ftm-gold: #b58900;
	--ftm-ink: #141414;
	--ftm-faint: #8c8c8c;
	--ftm-hair: rgba(20, 20, 20, 0.14);
	--ftm-hair-accent: rgba(217, 4, 41, 0.30);
	--ftm-surface-sel: #fff6f6;
	--ftm-radius: 12px;
	--ftm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ftm-flag-bg: #ffd700;
	--ftm-font-display: 'Sofia Sans Condensed', 'Instrument Sans', system-ui, sans-serif;

	/* Neutralise Barn2's flex/gap/margin on the kept root element (specificity: 2 classes). */
	display: block;
	margin: 0 0 16px;
}

.ftm-bundles__heading {
	font-size: 1.05rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 12px;
}

.ftm-prows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ---- Card ------------------------------------------------------------------ */

/* .ftm-prow shares the element with Barn2's required .wdm-bundle-single.
   Neutralise Barn2's border/background on that element here. */
.ftm-bundles .wdm-bundle-single.ftm-prow {
	position: relative;
	border: 1.5px solid var(--ftm-hair);
	border-radius: var(--ftm-radius);
	background: transparent;
	transition: border-color 0.16s var(--ftm-ease), background 0.16s var(--ftm-ease), box-shadow 0.16s var(--ftm-ease);
}

.ftm-bundles .wdm-bundle-single.ftm-prow.is-featured {
	border-color: var(--ftm-hair-accent);
}

.ftm-bundles .wdm-bundle-single.ftm-prow:hover {
	border-color: var(--ftm-hair-accent);
}

/* Selected state: JS-driven .is-selected fallback + pure-CSS :has(). The selectors are
   intentionally raised above Barn2's `.wdm-bundle-single:has(input:checked)` (0,0,3,1)
   so our accent styling wins without !important. */
.ftm-bundles .wdm-bundle-single.ftm-prow.is-selected,
.ftm-bundles .wdm-bundle-single.ftm-prow:has(.wdm-bundle-radio:checked) {
	border-color: var(--ftm-accent);
	background: var(--ftm-surface-sel);
	box-shadow: 0 6px 22px rgba(217, 4, 41, 0.14);
}

/* Reset Barn2's `.wdm-bundle-single > label` rule and lay out our own. */
.ftm-bundles .ftm-prow__label {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 15px;
	margin: 0;
	cursor: pointer;
}

/* ---- Real radio (visually hidden, still focusable) ------------------------- */

.ftm-prow__radio-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Custom radio ---------------------------------------------------------- */

.ftm-prow__radio {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--ftm-hair);
	transition: border-color 0.16s var(--ftm-ease), background 0.16s var(--ftm-ease);
}

.ftm-prow__radio-input:checked ~ .ftm-prow__radio {
	border-color: var(--ftm-accent);
	background: radial-gradient(closest-side, var(--ftm-accent) 55%, transparent 58%);
}

.ftm-prow__radio-input:focus-visible ~ .ftm-prow__radio {
	box-shadow: 0 0 0 3px var(--ftm-hair-accent);
}

/* ---- Info ------------------------------------------------------------------ */

.ftm-prow__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ftm-prow__name {
	font-family: var(--ftm-font-display);
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ftm-ink);
}

.ftm-prow__sub {
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--ftm-faint);
}

.ftm-prow__sub .ftm-save {
	color: var(--ftm-gold);
	font-weight: 600;
}

/* ---- Price ----------------------------------------------------------------- */

.ftm-prow__price {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	line-height: 1.1;
}

/* Struck "was" price intentionally keeps the theme font (no --ftm-font-display here). */
.ftm-prow__price .ftm-price__anchor {
	font-size: 0.78rem;
	color: var(--ftm-faint);
	text-decoration: line-through;
}

.ftm-prow__price .ftm-price__now {
	font-family: var(--ftm-font-display);
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1;
	color: var(--ftm-ink);
}

.ftm-prow__price .ftm-price__day {
	font-family: var(--ftm-font-display);
	margin-top: 2px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ftm-accent);
}

/* wc_price() markup should sit inline and inherit our sizing. */
.ftm-prow__price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* Hidden Barn2 AJAX price source (read by our JS to mirror the live price). */
.ftm-bundles .ftm-price__source {
	display: none;
}

/* ---- Popular flag ---------------------------------------------------------- */

.ftm-prow__flag {
	position: absolute;
	top: -10px;
	right: 14px;
	padding: 3px 10px;
	border-radius: 5px;
	background: var(--ftm-flag-bg);
	color: #121212;
	font-family: var(--ftm-font-display);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- Variable-product selectors (Barn2 injects these at runtime) ----------- */

.ftm-bundles .wdm-bundle-variation-selectors-container {
	margin-top: 0;
	padding: 12px 15px 15px;
	border-top: 1px solid var(--ftm-hair);
}

.ftm-bundles .wdm-bundle-variation-item {
	border-bottom-color: var(--ftm-hair);
}

.ftm-bundles .wdm-bundle-variation-number {
	background-color: var(--ftm-accent);
}

.ftm-bundles .wdm-item-attribute-select {
	width: 100%;
	max-width: 320px;
	padding: 8px 10px;
	border: 1.5px solid var(--ftm-hair);
	border-radius: 8px;
	background: #fff;
	font-size: 0.9rem;
}

.ftm-bundles .wdm-item-attribute-select:focus {
	border-color: var(--ftm-accent);
	outline: none;
}

/* ---- Auto-replenishment toggle ---------------------------------------------- */

.ftm-sub {
	margin-top: 12px;
}

/* Real checkbox: visually hidden, still focusable (state drives styling via :checked). */
.ftm-sub__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ftm-sub__box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	margin: 0;
	border: 1px solid var(--ftm-hair);
	border-radius: var(--ftm-radius);
	background: #fafafa;
	cursor: pointer;
	transition: border-color 0.16s var(--ftm-ease), background 0.16s var(--ftm-ease), box-shadow 0.16s var(--ftm-ease);
}

.ftm-sub__box:hover {
	border-color: var(--ftm-hair-accent);
}

.ftm-sub__input:checked ~ .ftm-sub__box {
	border-color: var(--ftm-hair-accent);
	background: linear-gradient(135deg, #fff0f1, #fff7f7);
	box-shadow: 0 6px 22px rgba(217, 4, 41, 0.1);
}

.ftm-sub__input:focus-visible ~ .ftm-sub__box {
	box-shadow: 0 0 0 3px var(--ftm-hair-accent);
}

/* Switch */
.ftm-sub__switch {
	flex: none;
	position: relative;
	width: 38px;
	height: 22px;
	margin-top: 1px;
	border-radius: 22px;
	border: 1px solid var(--ftm-hair);
	background: #ececec;
	transition: background 0.18s var(--ftm-ease), border-color 0.18s var(--ftm-ease);
}

.ftm-sub__switch::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 20, 20, 0.25);
	transition: transform 0.18s var(--ftm-ease);
}

.ftm-sub__input:checked ~ .ftm-sub__box .ftm-sub__switch {
	background: var(--ftm-accent);
	border-color: var(--ftm-accent);
}

.ftm-sub__input:checked ~ .ftm-sub__box .ftm-sub__switch::after {
	transform: translateX(15px);
}

/* Copy */
.ftm-sub__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ftm-sub__title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--ftm-font-display);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ftm-ink);
}

.ftm-sub__off {
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--ftm-flag-bg);
	color: #121212;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.ftm-sub__benefits {
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--ftm-faint);
}

.ftm-sub__benefits b {
	color: var(--ftm-accent);
}

/* Replenishment bullet points ("hoy recibís… / primera reposición… / después… / pausás…"). */
.ftm-sub__points {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
}

.ftm-sub__point {
	position: relative;
	padding-left: 16px;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--ftm-faint);
}

.ftm-sub__point::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--ftm-gold);
	font-weight: 800;
}

.ftm-sub__point b {
	color: var(--ftm-ink);
	font-weight: 700;
}

.ftm-sub__point .ftm-sub__eta {
	color: var(--ftm-accent);
}

/* ---- Replenishment program summary (cart/checkout totals rows) --------------
   Rendered inside the totals table, outside the .ftm-bundles scope: literal colors. */

.ftm-replenish-totals__price .ftm-replenish-totals__schedule {
	margin-left: 0.35em;
	font-size: 0.85em;
	opacity: 0.75;
}

.ftm-replenish-totals__date strong {
	white-space: nowrap;
}

.ftm-replenish-totals__note td small {
	color: #8c8c8c;
	font-size: 0.82em;
	line-height: 1.4;
}

/* Backstop: hide APFS's native plan options where the Fortium UI takes over
   (primary suppression happens in PHP via wcsatt_show_* filters). */
.product:has(.ftm-bundles) .wcsatt-options-wrapper,
.product:has(.ftm-bundles) .wcsatt-options-prompt-wrapper {
	display: none;
}

/* ---- Responsive ------------------------------------------------------------ */

@media (max-width: 480px) {
	.ftm-bundles .ftm-prow__label {
		gap: 10px;
		padding: 13px 12px;
	}

	.ftm-prow__name {
		font-size: 1.05rem;
	}

	.ftm-prow__price .ftm-price__now {
		font-size: 1.3rem;
	}
}