/**
 * Native & Select2 dropdowns — dark text on white list items;
 * highlighted / selected option: white on dark.
 */

:root {
	--inr-dd-bg: #ffffff;
	--inr-dd-text: #1a1218;
	--inr-dd-border: rgba(26, 18, 24, 0.14);
	--inr-dd-active-bg: #1a1218;
	--inr-dd-active-text: #ffffff;
	--inr-dd-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1218' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Closed select — white field, dark label text */
select,
.woocommerce select,
.shop-sort-wrap select,
.shop-advanced-filters select,
.variations select,
.inr-option-select,
.woocommerce-checkout select,
.woocommerce-account select {
	background-color: var(--inr-dd-bg) !important;
	color: var(--inr-dd-text) !important;
	border-color: var(--inr-dd-border) !important;
	color-scheme: light;
}

select:not([multiple]) {
	-webkit-appearance: none !important;
	appearance: none !important;
	padding-right: 2.25rem !important;
	background-image: var(--inr-dd-chevron) !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 12px !important;
}

select:focus,
.woocommerce select:focus,
.shop-sort-wrap select:focus,
.shop-advanced-filters select:focus {
	outline: none !important;
	border-color: rgba(26, 18, 24, 0.35) !important;
	box-shadow: 0 0 0 3px rgba(26, 18, 24, 0.08) !important;
}

/* Open list — default row */
select option,
select optgroup {
	background-color: var(--inr-dd-bg);
	color: var(--inr-dd-text);
}

/* Selected value in list / keyboard focus / hover (browser-dependent) */
select option:checked,
select option:focus,
select option:hover,
select option:active {
	background-color: var(--inr-dd-active-bg) !important;
	color: var(--inr-dd-active-text) !important;
}

/* Firefox: highlight while navigating list */
select option:checked:focus {
	background-color: var(--inr-dd-active-bg) !important;
	color: var(--inr-dd-active-text) !important;
}

/* Checkout delivery time — keep clock + chevron on white field */
.inr-delivery-time-field--clock select {
	background-color: var(--inr-dd-bg) !important;
	color: var(--inr-dd-text) !important;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231a1218' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"),
		var(--inr-dd-chevron) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: 0.85rem center, right 0.85rem center !important;
	background-size: 18px, 12px !important;
	padding-left: 2.75rem !important;
}

/* WooCommerce Select2 (country / state on checkout) */
.select2-container--default .select2-selection--single {
	background-color: var(--inr-dd-bg) !important;
	border-color: var(--inr-dd-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--inr-dd-text) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--inr-dd-text) !important;
}

.select2-dropdown,
.select2-container--default .select2-results > .select2-results__options {
	background-color: var(--inr-dd-bg) !important;
	border-color: var(--inr-dd-border) !important;
}

.select2-container--default .select2-results__option {
	color: var(--inr-dd-text) !important;
	background-color: var(--inr-dd-bg) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--inr-dd-active-bg) !important;
	color: var(--inr-dd-active-text) !important;
}

.select2-container--default .select2-results__option[aria-selected='true'] {
	background-color: var(--inr-dd-active-bg) !important;
	color: var(--inr-dd-active-text) !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
	border-color: rgba(26, 18, 24, 0.35) !important;
}

.select2-search--dropdown .select2-search__field {
	background-color: var(--inr-dd-bg) !important;
	color: var(--inr-dd-text) !important;
	border-color: var(--inr-dd-border) !important;
}