/*
 * WeblabsUI Checkout module — shared select2 skin.
 *
 * Replaces the native select2 look (used by WooCommerce's country/state
 * dropdowns) with one consistent style across all shops, in both light and
 * dark presentation. Themes that already use `[data-theme="dark"]` on the
 * root element (e.g. MotoForge) pick the dark variant up automatically;
 * otherwise `prefers-color-scheme` is the fallback signal.
 *
 * Tokens are exposed as `--weblabsui-select-*` custom properties so a theme
 * can override any of them without touching this file.
 */

:root {
	--weblabsui-select-bg: #ffffff;
	--weblabsui-select-text: #1a1a1a;
	--weblabsui-select-border: #d8d8d8;
	--weblabsui-select-border-hover: #b3b3b3;
	--weblabsui-select-accent: #012f2c;
	--weblabsui-select-dropdown-bg: #ffffff;
	--weblabsui-select-dropdown-hover-bg: #f2f2f2;
	--weblabsui-select-placeholder: #8a8a8a;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--weblabsui-select-bg: #1c1c1c;
		--weblabsui-select-text: #f2f2f2;
		--weblabsui-select-border: #3a3a3a;
		--weblabsui-select-border-hover: #555555;
		--weblabsui-select-accent: #4ade80;
		--weblabsui-select-dropdown-bg: #242424;
		--weblabsui-select-dropdown-hover-bg: #333333;
		--weblabsui-select-placeholder: #999999;
	}
}

:root[data-theme="dark"] {
	--weblabsui-select-bg: #1c1c1c;
	--weblabsui-select-text: #f2f2f2;
	--weblabsui-select-border: #3a3a3a;
	--weblabsui-select-border-hover: #555555;
	--weblabsui-select-accent: #4ade80;
	--weblabsui-select-dropdown-bg: #242424;
	--weblabsui-select-dropdown-hover-bg: #333333;
	--weblabsui-select-placeholder: #999999;
}

.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	height: 48px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	background: var(--weblabsui-select-bg);
	color: var(--weblabsui-select-text);
	border: 1px solid var(--weblabsui-select-border);
	border-radius: 6px;
	transition: border-color 0.15s ease;
}

.woocommerce .select2-container .select2-selection--single:hover,
.woocommerce-page .select2-container .select2-selection--single:hover {
	border-color: var(--weblabsui-select-border-hover);
}

.woocommerce .select2-container--open .select2-selection--single,
.woocommerce-page .select2-container--open .select2-selection--single {
	border-color: var(--weblabsui-select-accent);
	box-shadow: 0 0 0 1px var(--weblabsui-select-accent);
}

.woocommerce .select2-selection__rendered,
.woocommerce-page .select2-selection__rendered {
	color: var(--weblabsui-select-text) !important;
	padding: 0 !important;
	line-height: normal !important;
}

.woocommerce .select2-selection__placeholder,
.woocommerce-page .select2-selection__placeholder {
	color: var(--weblabsui-select-placeholder) !important;
}

.woocommerce .select2-selection__arrow,
.woocommerce-page .select2-selection__arrow {
	height: 46px !important;
}

.select2-dropdown {
	background: var(--weblabsui-select-dropdown-bg);
	color: var(--weblabsui-select-text);
	border-color: var(--weblabsui-select-border);
}

.select2-search--dropdown .select2-search__field {
	background: var(--weblabsui-select-bg);
	color: var(--weblabsui-select-text);
	border-color: var(--weblabsui-select-border);
}

.select2-results__option {
	color: var(--weblabsui-select-text);
}

.select2-results__option--highlighted[aria-selected] {
	background: var(--weblabsui-select-dropdown-hover-bg) !important;
	color: var(--weblabsui-select-text) !important;
}

.select2-results__option[aria-selected="true"] {
	background: var(--weblabsui-select-accent) !important;
	color: #ffffff !important;
}

/* ── Clear-cart button (Checkout module: checkout.empty_cart_button) ── */

.weblabsui-clear-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	margin: 0 8px;
	background: transparent;
	color: var(--weblabsui-select-text);
	border: 1px solid var(--weblabsui-select-border);
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.weblabsui-clear-cart-btn:hover {
	border-color: var(--weblabsui-select-border-hover);
}

.weblabsui-clear-cart-btn:disabled {
	opacity: 0.6;
	cursor: default;
}