/**
 * Frontend styles for the Bundle Offer widget.
 *
 * Written to be theme-agnostic and RTL-aware: uses CSS logical
 * properties (margin-inline-*, text-align: start/end) wherever possible
 * so the layout mirrors correctly for Arabic/RTL storefronts without
 * duplicating rules, with explicit [dir="rtl"] overrides only where a
 * logical property alone isn't enough (e.g. flex row ordering, icon
 * placement). Renders consistently on WoodMart, Astra, Flatsome,
 * Blocksy, and unstyled themes alike. Stable class names below are
 * intentionally never changed without a major version bump.
 *
 * @package Bundle_Pricing_Variant_Selection
 */

.bpvs-bundle-offer {
	--bpvs-color-primary: var( --wd-brand-color, #2c2d33 );
	--bpvs-color-border: #e7e7ea;
	--bpvs-color-muted: #767a82;
	--bpvs-color-success: #1e9e5a;
	--bpvs-color-error: #d1373f;
	--bpvs-color-bg-subtle: #f7f7f9;
	--bpvs-radius: 14px;
	--bpvs-radius-sm: 10px;
	--bpvs-spacing: 1.25rem;
	--bpvs-shadow-soft: 0 2px 10px rgba( 20, 20, 30, 0.05 );
	--bpvs-shadow-lift: 0 10px 24px rgba( 20, 20, 30, 0.08 );

	box-sizing: border-box;
	display: block;
	margin: 2rem 0;
	padding: var( --bpvs-spacing );
	border: 1px solid var( --bpvs-color-border );
	border-radius: var( --bpvs-radius );
	background: #ffffff;
	box-shadow: var( --bpvs-shadow-soft );
	text-align: start;
}

.bpvs-bundle-offer *,
.bpvs-bundle-offer *::before,
.bpvs-bundle-offer *::after {
	box-sizing: border-box;
}

.bpvs-bundle-offer__title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	color: #1c1d21;
}

.bpvs-bundle-offer__intro {
	margin: 0 0 1.5rem;
	color: var( --bpvs-color-muted );
	font-size: 0.95rem;
	line-height: 1.7;
}

.bpvs-bundle-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.bpvs-step {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bpvs-step__legend {
	display: block;
	width: 100%;
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #1c1d21;
}

.bpvs-step.is-hidden,
[hidden].bpvs-step {
	display: none !important;
}

.bpvs-step.is-visible {
	display: block;
	animation: bpvs-fade-in 0.28s cubic-bezier( 0.22, 1, 0.36, 1 );
}

@keyframes bpvs-fade-in {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* -----------------------------------------------------------------
   Quantity step — premium tier cards
   ----------------------------------------------------------------- */

.bpvs-quantity-options {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 1rem;
}

.bpvs-quantity-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 1.1rem 1.15rem;
	border: 2px solid var( --bpvs-color-border );
	border-radius: var( --bpvs-radius-sm );
	background: #ffffff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.bpvs-quantity-option:hover {
	border-color: var( --bpvs-color-primary );
	box-shadow: var( --bpvs-shadow-lift );
	transform: translateY( -2px );
}

.bpvs-quantity-option input[type='radio'] {
	position: absolute;
	inset-block-start: 1.1rem;
	inset-inline-end: 1.15rem;
	margin: 0;
	width: 18px;
	height: 18px;
	accent-color: var( --bpvs-color-primary );
}

/* Selected highlight (native CSS :has(), no JS required). */
.bpvs-quantity-option:has( input[type='radio']:checked ) {
	border-color: var( --bpvs-color-primary );
	background: var( --bpvs-color-bg-subtle );
	box-shadow: var( --bpvs-shadow-lift );
}

.bpvs-quantity-option:has( input[type='radio']:checked ) .bpvs-quantity-option__label {
	font-weight: 800;
}

.bpvs-quantity-option__label {
	font-size: 1rem;
	font-weight: 700;
	padding-inline-end: 1.75rem;
	color: #1c1d21;
}

.bpvs-quantity-option__price {
	font-size: 1.35rem;
	font-weight: 800;
	color: var( --bpvs-color-primary );
	letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------
   Item step
   ----------------------------------------------------------------- */

.bpvs-item__body {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.1rem;
	border: 1px solid var( --bpvs-color-border );
	border-radius: var( --bpvs-radius-sm );
	background: var( --bpvs-color-bg-subtle );
}

.bpvs-item__selectors {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 220px;
}

.bpvs-attribute-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.bpvs-attribute-field__label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var( --bpvs-color-muted );
}

.bpvs-attribute-field__select {
	width: 100%;
	max-width: 340px;
	padding: 0.65rem 0.8rem;
	border: 1px solid var( --bpvs-color-border );
	border-radius: var( --bpvs-radius-sm );
	background-color: #ffffff;
	font-size: 0.95rem;
	line-height: 1.5;
	appearance: auto;
	text-align: start;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bpvs-attribute-field__select:hover {
	border-color: var( --bpvs-color-primary );
}

.bpvs-attribute-field__select:disabled {
	background-color: #eeeef0;
	color: var( --bpvs-color-muted );
	cursor: not-allowed;
}

.bpvs-attribute-field__select:focus-visible {
	outline: 2px solid var( --bpvs-color-primary );
	outline-offset: 1px;
	box-shadow: var( --bpvs-shadow-soft );
}

.bpvs-item__preview {
	flex: 0 0 128px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
}

.bpvs-item__image {
	width: 104px;
	height: 104px;
	border-radius: var( --bpvs-radius-sm );
	overflow: hidden;
	border: 1px solid var( --bpvs-color-border );
	background: #ffffff;
}

.bpvs-item__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bpvs-item__status {
	font-size: 0.8rem;
	font-weight: 700;
	min-height: 1.2em;
}

.bpvs-item__status-text {
	display: inline-block;
}

.bpvs-item__status-text.bpvs-status--in-stock {
	color: var( --bpvs-color-success );
}

.bpvs-item__status-text.bpvs-status--out-of-stock {
	color: var( --bpvs-color-error );
}

.bpvs-item__status-text.bpvs-status--on-backorder {
	color: #b8860b;
}

.bpvs-item__status-text.bpvs-status--loading {
	color: var( --bpvs-color-muted );
}

/* -----------------------------------------------------------------
   Summary
   ----------------------------------------------------------------- */

.bpvs-summary {
	padding-block-start: 1.1rem;
	border-block-start: 1px solid var( --bpvs-color-border );
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bpvs-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.bpvs-summary__row--total .bpvs-summary__label {
	font-size: 1.05rem;
	font-weight: 700;
}

.bpvs-summary__value {
	font-size: 1.6rem;
	font-weight: 800;
	color: var( --bpvs-color-primary );
	letter-spacing: -0.01em;
}

.bpvs-summary__message {
	font-size: 0.85rem;
	line-height: 1.7;
}

.bpvs-summary__message--hint {
	color: var( --bpvs-color-muted );
}

.bpvs-summary__message--error {
	color: var( --bpvs-color-error );
	font-weight: 700;
}

.bpvs-summary__message.is-hidden,
[hidden].bpvs-summary__message {
	display: none !important;
}

/* -----------------------------------------------------------------
   Add to cart button — styled to match WoodMart's primary button
   language (bold, rounded, full-width on mobile, clear hover/press
   states), with a green success checkmark state after a successful
   add-to-cart response.
   ----------------------------------------------------------------- */

.bpvs-add-to-cart-button {
	position: relative;
	align-self: flex-start;
	min-width: 240px;
	padding: 1rem 2rem;
	font-size: 1rem;
	font-weight: 700;
	border: 0;
	border-radius: var( --bpvs-radius-sm );
	background: var( --bpvs-color-primary );
	color: #ffffff;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.1s ease, background-color 0.2s ease;
}

.bpvs-add-to-cart-button:hover:not(:disabled) {
	filter: brightness( 0.9 );
}

.bpvs-add-to-cart-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.bpvs-add-to-cart-button:not(:disabled):active {
	transform: translateY( 1px );
}

.bpvs-add-to-cart-button.is-loading {
	position: relative;
	color: transparent !important;
}

.bpvs-add-to-cart-button.is-loading::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 1.1em;
	height: 1.1em;
	margin-block-start: -0.55em;
	margin-inline-start: -0.55em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	color: #ffffff;
	animation: bpvs-spin 0.6s linear infinite;
}

@keyframes bpvs-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Price note replacing the suppressed default price */

.bpvs-price-note {
	display: inline-block;
	font-size: 0.9rem;
	font-style: italic;
	color: var( --bpvs-color-muted );
}

/* -----------------------------------------------------------------
   Cart / order presentation
   ----------------------------------------------------------------- */

.bpvs-cart-item-tier,
.bpvs-order-item-tier {
	font-weight: 400;
	font-size: 0.85em;
	color: var( --bpvs-color-muted );
}

.bpvs-locked-quantity {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	font-weight: 700;
}

.bpvs-order-bundle-breakdown__list {
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.bpvs-order-bundle-breakdown__item {
	margin: 0.15rem 0;
}

/* -----------------------------------------------------------------
   RTL-specific adjustments beyond what logical properties cover.
   The wrapper's own `dir` attribute (set server-side via is_rtl() in
   templates/single-product/bundle-offer.php) drives these rules, so
   the widget renders correctly regardless of the surrounding theme's
   own text direction handling.
   ----------------------------------------------------------------- */

[dir='rtl'].bpvs-bundle-offer,
[dir='rtl'] .bpvs-bundle-offer {
	text-align: right;
}

[dir='rtl'] .bpvs-quantity-option,
[dir='rtl'] .bpvs-item__selectors,
[dir='rtl'] .bpvs-attribute-field,
[dir='rtl'] .bpvs-attribute-field__select {
	text-align: right;
}

[dir='rtl'] .bpvs-add-to-cart-button {
	align-self: flex-end;
}

[dir='rtl'] .bpvs-item__preview {
	align-items: center;
}

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

@media ( max-width: 600px ) {
	.bpvs-bundle-offer {
		padding: 1rem;
		border-radius: var( --bpvs-radius-sm );
	}

	.bpvs-quantity-options {
		grid-template-columns: 1fr;
	}

	.bpvs-item__body {
		flex-direction: column;
		align-items: stretch;
		padding: 0.9rem;
	}

	.bpvs-item__preview {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.85rem;
	}

	.bpvs-item__image {
		width: 72px;
		height: 72px;
	}

	.bpvs-add-to-cart-button,
	[dir='rtl'] .bpvs-add-to-cart-button {
		align-self: stretch;
		width: 100%;
	}

	.bpvs-summary__value {
		font-size: 1.35rem;
	}
}