/**
 * VO WOOCS Switcher Restyle
 *
 * Overrides the WOOCS selectron23 widget. !important is used throughout because
 * WOOCS writes inline styles onto .selectron23-container and .selectron23-option
 * at runtime; without it the plugin wins on specificity.
 */

:root {
	--vo-woocs-accent: #0D1B2A;
	--vo-woocs-muted: #64748B;
	--vo-woocs-surface: #ffffff;
	--vo-woocs-surface-hover: #F8FAFC;
	--vo-woocs-surface-active: #EEF2F6;
	--vo-woocs-border: #E5E9F0;
	--vo-woocs-radius: 14px;
	--vo-woocs-flag-size: 28px;
	--vo-woocs-trigger-size: 44px;
	--vo-woocs-panel-width: 320px;
	--vo-woocs-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--vo-woocs-ring: rgba(255, 255, 255, .25);

	/* Read by switcher.js to decide modal vs dropdown. The breakpoint is declared
	   ONCE, in the media query at the bottom of this file — JS must never carry a
	   second copy of it. */
	--vo-woocs-modal: 0;
}

/* ---------------------------------------------------------------
   Wrapper — strip the 500px fixed box WOOCS renders
   --------------------------------------------------------------- */

[data-woocs-sd] {
	width: auto !important;
	max-width: none !important;
	display: inline-block !important;
	overflow: visible !important;

	/* Hold the trigger's footprint from first paint. WOOCS only builds the widget
	   on window 'load' (js/sd/front.js), which on an image-heavy page is late, and
	   with the loader hidden below there would otherwise be nothing here until
	   then — so the header would visibly reflow when the flag appears. */
	min-width: var(--vo-woocs-trigger-size) !important;
	min-height: var(--vo-woocs-trigger-size) !important;
}

/* ---------------------------------------------------------------
   WOOCS loading spinner — the bouncing dots
   ---------------------------------------------------------------
   WOOCS renders <div class="woocs-lds-ellipsis"> inside the wrapper as a
   placeholder and discards it when it builds the real widget. We reserve the
   space above instead, so the dots are just noise in the header.

   Note this is the ONLY loader on this site. `.woocs_loader` and `.woocs-load`
   do not exist in this WOOCS build, and `.blockUI.blockOverlay` belongs to
   WooCommerce (cart/checkout AJAX feedback) — do not hide that one globally. */

.woocs-lds-ellipsis {
	display: none !important;
}

.selectron23 {
	width: var(--vo-woocs-trigger-size) !important;
	flex-basis: var(--vo-woocs-trigger-size) !important;
	height: var(--vo-woocs-trigger-size) !important;
	transform: none !important;
	position: relative !important;
	overflow: visible !important;
}

/* ---------------------------------------------------------------
   Trigger — persistent circular flag, injected by switcher.js
   --------------------------------------------------------------- */

.vo-woocs-trigger {
	width: var(--vo-woocs-trigger-size);
	height: var(--vo-woocs-trigger-size);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 999px;
	transition: background-color .15s ease;
}

.vo-woocs-trigger:hover {
	background: rgba(255, 255, 255, .08);
}

.vo-woocs-trigger:focus-visible {
	outline: 2px solid var(--vo-woocs-ring);
	outline-offset: 2px;
}

.vo-woocs-trigger img {
	width: var(--vo-woocs-flag-size);
	height: var(--vo-woocs-flag-size);
	border-radius: 50%;
	object-fit: cover;
	pointer-events: none;
	box-shadow: 0 0 0 1px var(--vo-woocs-ring);
	display: block;
}

/* Hidden until the flag src has resolved, to avoid a broken-image flash. */
.vo-woocs-trigger:not([data-ready="1"]) img {
	visibility: hidden;
}

/* ---------------------------------------------------------------
   Panel — desktop dropdown
   --------------------------------------------------------------- */

.selectron23-container {
	position: absolute !important;
	top: calc(var(--vo-woocs-trigger-size) + 8px) !important;
	right: 0 !important;
	left: auto !important;
	width: var(--vo-woocs-panel-width) !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: 420px !important;
	overflow-y: auto !important;
	background: var(--vo-woocs-surface) !important;
	border: 1px solid var(--vo-woocs-border) !important;
	border-radius: var(--vo-woocs-radius) !important;
	box-shadow: 0 16px 40px rgba(13, 27, 42, .28) !important;
	padding: 8px !important;
	z-index: 100001 !important;
	transition: none !important;
}

.selectron23-container:not([data-opened="1"]) {
	display: none !important;
}

/* WOOCS's own scroll pointer is meaningless in this layout. */
.selectron23-container span[data-pointer] {
	display: none !important;
}

/* ---------------------------------------------------------------
   Panel heading — real node injected by switcher.js (translatable)
   --------------------------------------------------------------- */

.vo-woocs-panel-head {
	display: block;
	position: sticky;
	top: -8px;
	background: var(--vo-woocs-surface);
	padding: 10px 10px 12px;
	margin: 0;
	font-family: var(--vo-woocs-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	color: var(--vo-woocs-accent);
	z-index: 1;
}

/* ---------------------------------------------------------------
   Rows
   --------------------------------------------------------------- */

.selectron23-option {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: auto !important;
	height: auto !important;
	margin: 0 0 2px !important;
	padding: 10px !important;
	border-radius: 10px !important;
	background: var(--vo-woocs-surface) !important;
	cursor: pointer;
}

.selectron23-option:hover {
	background: var(--vo-woocs-surface-hover) !important;
}

.selectron23-option[data-selected="1"] {
	background: var(--vo-woocs-surface-active) !important;
}

.selectron23-img {
	float: none !important;
	order: -1;
	margin: 0 !important;
	width: var(--vo-woocs-flag-size) !important;
	height: var(--vo-woocs-flag-size) !important;
	max-height: none !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex: 0 0 auto;
}

.selectron23-option-title {
	display: block !important;
	font-family: var(--vo-woocs-font) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	color: var(--vo-woocs-accent) !important;
}

.selectron23-option-text {
	display: block !important;
	font-family: var(--vo-woocs-font) !important;
	font-weight: 500 !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
	color: var(--vo-woocs-muted) !important;
}

/* ---------------------------------------------------------------
   Backdrop — created by JS, only visible at mobile widths
   --------------------------------------------------------------- */

#vo-woocs-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 100000;
}

/* ---------------------------------------------------------------
   Mobile — centered modal
   --------------------------------------------------------------- */

@media (max-width: 768px) {

	/* The single source of truth for "are we in modal mode". switcher.js reads
	   this off :root rather than duplicating the 768px value. */
	:root {
		--vo-woocs-modal: 1;
	}

	.selectron23-container[data-opened="1"] {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		transform: translate(-50%, -50%) !important;
		width: min(92vw, 420px) !important;
		max-height: min(80vh, 640px) !important;
		padding: 16px !important;
		border-radius: 18px !important;
	}

	.vo-woocs-panel-head {
		top: -16px;
		padding: 6px 10px 14px;
		font-size: 17px;
	}

	.selectron23-option {
		padding: 12px 10px !important;
	}

	#vo-woocs-backdrop {
		display: block;
	}

	body.vo-woocs-open {
		overflow: hidden;
	}
}

/* ---------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.vo-woocs-trigger {
		transition: none;
	}
}