/**
 * Bulk Order Discount – reference-style black & golden theme
 * Loaded only on competition product pages when tiers are configured.
 */

/* Hide default Zap quantity UI when our block is present */
.cart:has(.bod-select-tickets) .zap-competition-qty,
.cart:has(.bod-select-tickets) .zap-competition-range-wrap-outer {
	display: none !important;
}

/* Ensure Select Tickets widget spans full width in flex layouts (e.g. zapct-add-to-cart-wrapper) */
.cart .bod-select-tickets {
	flex: 0 0 100%;
	min-width: 0;
}

/* Wrapper – full width of add-to-cart area */
.bod-select-tickets {
	--bod-bg: #0d0d0d;
	--bod-surface: #1a1a1a;
	--bod-border: #2a2a2a;
	--bod-gold: #c9a227;
	--bod-gold-light: #e5c84a;
	--bod-gold-gradient: linear-gradient(135deg, #8b6914 0%, #c9a227 50%, #a8841e 100%);
	--bod-text: #ffffff;
	--bod-text-muted: #b0b0b0;
	--bod-radius: 8px;
	--bod-radius-sm: 6px;
	width: 100%;
	max-width: 100%;
	background: var(--bod-bg);
	color: var(--bod-text);
	padding: 1.5rem;
	border-radius: var(--bod-radius);
	margin-bottom: 1rem;
	box-sizing: border-box;
}

.bod-title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--bod-text);
}

/* Quick-select buttons – equal width, fill 100% of row */
.bod-quick-select {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	width: 100%;
}

.bod-qty-btn {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0.5rem;
	background: var(--bod-surface);
	border: 1px solid var(--bod-border);
	border-radius: var(--bod-radius-sm);
	color: var(--bod-text);
	font-size: 1.05rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	box-sizing: border-box;
}

.bod-qty-btn:hover {
	border-color: var(--bod-gold);
	background: rgba(201, 162, 39, 0.1);
}

.bod-qty-btn.bod-active {
	border-color: var(--bod-gold);
	background: rgba(201, 162, 39, 0.15);
	color: var(--bod-gold-light);
}

.bod-discount-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--bod-gold);
	color: var(--bod-bg);
	font-size: 0.65rem;
	font-weight: 700;
	padding: 0.15rem 0.4rem;
	border-radius: 10px;
	white-space: nowrap;
}

/* Slider */
.bod-slider-wrap {
	position: relative;
	margin-bottom: 0.5rem;
	padding-top: 1.5rem;
	width: 100%;
}

.bod-slider-value {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #3a3528 0%, #2a2518 50%, #252019 100%);
	border: 1px solid rgba(180, 140, 80, 0.5);
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: #e5c84a;
	min-width: 3rem;
	text-align: center;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Slider track – 3D groove (darker gradient, inset look) */
.bod-range-track {
	position: relative;
	width: 100%;
	height: 26px;
	background: linear-gradient(180deg, #2a2520 0%, #1a1612 50%, #252019 100%);
	border: 1px solid rgba(100, 80, 50, 0.5);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	touch-action: none;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Slider fill – 3D gradient to match button (lighter top, darker bottom) */
.bod-range-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(180deg, #a67c52 0%, #8b6914 50%, #6b4f0f 100%);
	border-radius: 999px 0 0 999px;
	pointer-events: none;
	transition: width 0.1s ease;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Slider thumb – 3D gradient sphere to match button */
.bod-thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	background: linear-gradient(180deg, #c9a227 0%, #8b6914 40%, #6b4f0f 100%);
	border: 1px solid rgba(200, 160, 80, 0.7);
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--bod-bg), 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	cursor: grab;
	z-index: 2;
	transition: left 0.05s ease;
}

.bod-thumb:active {
	cursor: grabbing;
	box-shadow: 0 0 0 2px var(--bod-bg), 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bod-range-track:focus {
	outline: none;
}

.bod-range-track:focus-visible .bod-thumb {
	box-shadow: 0 0 0 2px var(--bod-bg), 0 0 0 4px var(--bod-gold);
}

/* Fill track up to thumb (optional enhancement via JS or duplicate track) */
.bod-slider-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 0.35rem;
	width: 100%;
	font-size: 0.75rem;
	color: var(--bod-text-muted);
}

.bod-max-tickets {
	margin: 0.75rem 0 1rem;
	font-size: 1.05rem;
	color: var(--bod-text-muted);
	text-align: center;
}

/* Add to cart wrapper – room for overlapping saving pill */
.bod-add-to-cart-wrap {
	position: relative;
	width: 100%;
	margin-top: 1rem;
	padding-bottom: 1.5rem;
}

/* Add to cart button – brown gradient, pill shape, white + price accent (screenshot style) */
.cart:has(.bod-select-tickets) .single_add_to_cart_button {
	width: 100%;
	padding: 1.25rem 1.5rem;
	min-height: 3.25rem;
	background: linear-gradient(180deg, #a67c52 0%, #8b6914 50%, #6b4f0f 100%) !important;
	border: 1px solid rgba(180, 140, 80, 0.6) !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-size: 1.2rem;
	font-weight: 600;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
}

.cart:has(.bod-select-tickets) .single_add_to_cart_button .bod-btn-price {
	color: #e5c84a;
	font-weight: 700;
}

.cart:has(.bod-select-tickets) .single_add_to_cart_button:hover {
	opacity: 0.95;
	filter: brightness(1.08);
}

/* Saving pill – centered on button bottom border (half above, half below) */
.bod-add-to-cart-wrap .bod-saving-wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	margin: 0;
	min-height: 0;
	pointer-events: none;
}

.bod-saving {
	display: inline-block;
	background: #f0c14b;
	color: #1a1a1a;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0.45rem 1rem;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
}