/*
 * Contact picker (footer): shortcode [mc-contact-picker] (contact-picker.php).
 * Closed: the area name in SemiBold with a chevron 16px after it, the e-mail and the phone 11px below (Figma).
 * Open: black list with a white border.
 * The theme sets its own select styles (and only has select2 base rules for the "default" theme), hence the
 * !important on the native select and the base rules for the "mc" select2 theme below.
 */

.mc-contact-picker {
	position: relative;
	font: 400 15px/1.22 var(--mc-font);
	color: var(--mc-white);
}

.mc-contact-picker a {
	color: var(--mc-white);
	text-decoration: none;
}

.mc-contact-picker a:hover {
	text-decoration: underline;
}

.mc-contact-picker__area {
	margin: 0 0 11px;
	line-height: 1.22;
}

.mc-contact-picker__lines {
	margin: 0;
}

/* ------------------------------------------------------------------ native select (before select2, or without it) */

.mc-contact-picker .mc-contact-picker__select {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3E%3Cpath fill='%23fff' d='M10.101 0 11 .892 6.1 5.753a.85.85 0 0 1-1.198 0L0 .892.899 0 5.5 4.563z'/%3E%3C/svg%3E") no-repeat right 1px center / 11px 6px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--mc-white) !important;
	font: 600 15px/1.22 var(--mc-font) !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 27px 0 0 !important;
	cursor: pointer;
	width: auto;
	max-width: 100%;
	field-sizing: content;
}

.mc-contact-picker .mc-contact-picker__select option {
	color: var(--mc-black);
	background: var(--mc-white);
}

.mc-contact-picker .mc-contact-picker__select:focus-visible {
	outline: 1px solid var(--mc-white);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ select2, theme "mc" */

.mc-contact-picker .select2-container--mc {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: auto !important;
	margin: 0;
}

.mc-contact-picker .select2-container--mc .select2-selection--single {
	display: block;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
	outline: 0;
}

.mc-contact-picker .select2-container--mc .select2-selection--single:focus-visible {
	outline: 1px solid var(--mc-white);
	outline-offset: 3px;
}

.mc-contact-picker .select2-container--mc .select2-selection__rendered {
	display: block;
	padding: 0 27px 0 0;
	color: var(--mc-white);
	font: 600 15px/1.22 var(--mc-font);
	white-space: nowrap;
}

.mc-contact-picker .select2-container--mc .select2-selection__arrow {
	position: absolute;
	top: 50%;
	right: 1px;
	width: 11px;
	height: 6px;
	margin-top: -3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 6'%3E%3Cpath fill='%23fff' d='M10.101 0 11 .892 6.1 5.753a.85.85 0 0 1-1.198 0L0 .892.899 0 5.5 4.563z'/%3E%3C/svg%3E") no-repeat center / 11px 6px;
	transition: transform .2s;
}

.mc-contact-picker .select2-container--mc .select2-selection__arrow b {
	display: none;
}

.mc-contact-picker .select2-container--mc.select2-container--open .select2-selection__arrow {
	transform: rotate(180deg);
}

.mc-contact-picker .select2-container--mc .select2-dropdown {
	display: block;
	position: absolute;
	left: 0;
	box-sizing: border-box;
	min-width: 230px;
	background: var(--mc-black);
	border: 1px solid var(--mc-white);
	border-radius: 0;
	z-index: 40;
}

.mc-contact-picker .select2-container--mc .select2-dropdown--below {
	margin-top: 10px;
}

.mc-contact-picker .select2-container--mc .select2-dropdown--above {
	margin-top: -10px;
}

.mc-contact-picker .select2-container--mc .select2-search--hide {
	display: none !important;
}

.mc-contact-picker .select2-container--mc .select2-results {
	display: block;
}

.mc-contact-picker .select2-container--mc .select2-results__options {
	display: block;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	max-height: none;
	overflow: visible;
}

.mc-contact-picker .select2-container--mc .select2-results__option {
	display: block;
	margin: 0;
	padding: 9px 16px;
	color: var(--mc-white);
	font: 400 15px/1.22 var(--mc-font);
	cursor: pointer;
}

.mc-contact-picker .select2-container--mc .select2-results__option[aria-selected=true],
.mc-contact-picker .select2-container--mc .select2-results__option--selected {
	font-weight: 600;
}

.mc-contact-picker .select2-container--mc .select2-results__option--highlighted,
.mc-contact-picker .select2-container--mc .select2-results__option--highlighted[aria-selected] {
	background: var(--mc-white);
	color: var(--mc-black);
}