/**
 * Woo Bundle Offers — frontend styles.
 *
 * All selectors are prefixed with .wbo- to avoid collisions with theme styles.
 * Intentionally minimal: structure and spacing only. Colors use WC variables
 * where available, with plain fallbacks for themes that don't set them.
 *
 * Visual style custom properties are set per-product via wp_add_inline_style()
 * scoped to .wbo-bundle-offers[data-product-id="X"]. CSS var() fallbacks below
 * preserve the original appearance when no per-offer styles are saved.
 */

/* ---- Container ----------------------------------------------------------- */

.wbo-bundle-offers {
	margin: 1.5em 0;
	padding: 1em 1.25em;
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.wbo-bundle-offers__title {
	margin: 0 0 0.75em;
	font-weight: 600;
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --wbo-title-color, #555555 );
}

/* ---- Tier list ----------------------------------------------------------- */

.wbo-tiers {
	display: flex;
	flex-direction: column;
	gap: var( --wbo-tier-gap, 8px );
}

/* ---- Individual tier card ------------------------------------------------ */

.wbo-tier {
	position: relative; /* anchor for absolute-positioned badge */
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	background: var( --wbo-card-bg, #ffffff );
	border: 2px solid var( --wbo-border-color, #dddddd );
	border-radius: var( --wbo-radius, 4px );
	cursor: pointer;
	/* Smooth border-color transition when selected */
	transition: border-color 0.15s ease, background 0.15s ease;
}

/* Extra top padding when a badge is present so content clears the badge */
.wbo-tier:has( .wbo-tier__badge ) {
	padding-top: 20px;
}

.wbo-tier:hover {
	border-color: var( --wbo-border-color-hover, #aaaaaa );
}

/*
 * Selected state.
 * We use both the JS-toggled class and the CSS :has() selector as a
 * progressive enhancement — :has() handles the state without JS in
 * modern browsers; the class is the fallback for older ones.
 */
.wbo-tier--selected,
.wbo-tier:has( .wbo-tier__radio:checked ) {
	border-color: var( --wp--preset--color--primary, #7f54b3 );
	background: var( --wbo-card-bg-selected, #faf7ff );
}

/* ---- Radio input --------------------------------------------------------- */

.wbo-tier__radio {
	/* Align with first line of body text */
	margin-top: 3px;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: var( --wp--preset--color--primary, #7f54b3 );
}

/* ---- Tier body — row: info left, pricing right --------------------------- */

.wbo-tier__body {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 1;
	min-width: 0; /* Prevent overflow in narrow columns */
}

/* Left column: qty + label */
.wbo-tier__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* Right column: unit price + total price stacked */
.wbo-tier__pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex-shrink: 0;
	text-align: right;
}

/* ---- Badge — pinned to the top border of the card ----------------------- */

.wbo-tier__badge {
	position: absolute;
	top: 0;
	left: 14px;
	transform: translateY( -50% );
	padding: 2px 8px;
	background: var( --wbo-badge-bg, var( --wp--preset--color--primary, #7f54b3 ) );
	color: var( --wbo-badge-color, #ffffff );
	font-size: 11px;
	font-weight: 600;
	border-radius: 2px;
	line-height: 1.4;
	white-space: nowrap;
}

/*
 * Ribbon fold effect — small triangular "tabs" under each badge corner
 * make it look like the badge is woven into the border.
 * rgba( 0, 0, 0, 0.35 ) works with any badge background color.
 */
.wbo-tier__badge::before,
.wbo-tier__badge::after {
	content: '';
	position: absolute;
	bottom: -4px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: rgba( 0, 0, 0, 0.35 ) transparent transparent transparent;
}

.wbo-tier__badge::before {
	left: -4px;
	border-width: 4px 4px 0 0;
}

.wbo-tier__badge::after {
	right: -4px;
	border-width: 4px 0 0 4px;
}

/* ---- Quantity line ------------------------------------------------------- */

.wbo-tier__qty {
	font-weight: var( --wbo-tier-title-weight, 700 );
	font-size: var( --wbo-tier-title-size, 0.95em );
	color: var( --wbo-tier-title-color, inherit );
	line-height: 1.3;
}

/* ---- Label line ---------------------------------------------------------- */

.wbo-tier__label {
	font-size: var( --wbo-tier-subtitle-size, 0.875em );
	font-weight: var( --wbo-tier-subtitle-weight, 400 );
	color: var( --wbo-tier-subtitle-color, #555555 );
	line-height: 1.4;
}

/* ---- Price lines (unit + total, each in their own row) ------------------ */

.wbo-tier__price-line {
	font-size: var( --wbo-price-size, 0.875em );
	font-weight: var( --wbo-price-weight, 400 );
	color: var( --wbo-price-color, #333333 );
	line-height: 1.4;
	white-space: nowrap;
}

/* wc_price() wraps amounts in <span class="woocommerce-Price-amount"> */
.wbo-tier__price-line .woocommerce-Price-amount,
.wbo-tier__price-unit,
.wbo-tier__price-total {
	font-weight: 600;
}

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

@media ( max-width: 480px ) {
	.wbo-bundle-offers {
		padding: 0.75em 1em;
	}

	.wbo-tier {
		padding: 8px 10px;
	}

	.wbo-tier:has( .wbo-tier__badge ) {
		padding-top: 18px;
	}
}