/**
 * INTINKO Select2 theme
 * Shared look for every Select2 dropdown on the site
 * (phone country codes, partner form, booking form, etc.)
 *
 * Load after select2.min.css.
 * Layout widths can still be overridden in page CSS.
 */

/* ---------- Closed single select (the visible box) ---------- */
.select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid var(--border, #C1ECDC);
	border-radius: 10px;
	background: var(--white, #fff);
	display: flex;
	align-items: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-left: 14px;
	padding-right: 30px;
	font-family: var(--font-body, "Sen", sans-serif);
	font-size: 15px;
	color: var(--text-dark, #111);
	line-height: 46px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #888;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
	width: 24px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: #666 transparent transparent transparent;
	border-width: 6px 5px 0 5px;
	margin-left: -5px;
	margin-top: -2px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--primary, #09B36F) transparent;
	border-width: 0 5px 6px 5px;
	margin-top: -3px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--primary, #09B36F);
	box-shadow: 0 0 0 3px rgba(9, 179, 111, 0.15);
}

/* ---------- Dropdown panel ---------- */
.select2-dropdown {
	border: 1px solid var(--border, #C1ECDC);
	border-radius: 10px;
	overflow: hidden;
	background: var(--white, #fff);
	font-family: var(--font-body, "Sen", sans-serif);
	box-shadow: 0 12px 28px rgba(15, 36, 48, 0.12);
	z-index: 1200;
}

/* Phone dial-code trigger is narrow; keep the open list readable */
.select2-container--open .select2-dropdown {
	min-width: 300px !important;
}

.select2-container--default .select2-results > .select2-results__options {
	max-height: 260px;
}

.select2-container--default .select2-results__option {
	padding: 10px 14px;
	font-family: var(--font-body, "Sen", sans-serif);
	font-size: 14px;
	color: #333;
	line-height: 1.35;
	overflow-wrap: normal;
	word-break: normal;
}

.select2-container--default .select2-results__option--disabled {
	color: #999;
}

/* Hover / keyboard highlight */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--primary-light, #E2F6EE);
	color: #111;
}

/* Currently selected option in the list */
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: rgba(9, 179, 111, 0.12);
	color: #111;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable[aria-selected="true"] {
	background: var(--primary, #09B36F);
	color: #fff;
}

/* ---------- Search box inside dropdown ---------- */
.select2-container--default .select2-search--dropdown {
	padding: 10px;
	background: var(--primary-light, #E2F6EE);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--border, #C1ECDC) !important;
	border-radius: 8px !important;
	padding: 9px 12px !important;
	font-family: var(--font-body, "Sen", sans-serif) !important;
	font-size: 14px !important;
	color: #111 !important;
	outline: none !important;
	box-sizing: border-box !important;
	background: var(--white, #fff) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--primary, #09B36F) !important;
	box-shadow: 0 0 0 3px rgba(9, 179, 111, 0.15);
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
	color: #888;
}

.select2-results__message {
	font-family: var(--font-body, "Sen", sans-serif);
	font-size: 14px;
	color: #666;
	padding: 12px 14px;
}

/* ---------- Country / dial-code option layout (phone selects) ---------- */
.booking-country-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.booking-country-option-name {
	color: inherit;
	min-width: 0;
	flex: 1 1 auto;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.booking-country-option-code {
	color: var(--primary, #09B36F);
	font-weight: 600;
	white-space: nowrap;
	flex: 0 0 auto;
}

/* Hover / keyboard highlight: keep dial code readable on green */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .booking-country-option-name,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable .booking-country-option-code {
	color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] .booking-country-option-code {
	color: var(--primary, #09B36F);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable[aria-selected="true"] .booking-country-option-code {
	color: #fff;
}

/* ---------- Multiple select (if used later) ---------- */
.select2-container--default .select2-selection--multiple {
	min-height: 48px;
	border: 1px solid var(--border, #C1ECDC);
	border-radius: 10px;
	background: var(--white, #fff);
	font-family: var(--font-body, "Sen", sans-serif);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--primary, #09B36F);
	box-shadow: 0 0 0 3px rgba(9, 179, 111, 0.15);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--primary-light, #E2F6EE);
	border: 1px solid var(--border, #C1ECDC);
	border-radius: 8px;
	color: #111;
	font-family: var(--font-body, "Sen", sans-serif);
	padding: 4px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: var(--primary, #09B36F);
	margin-right: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #067a4c;
}