/**
 * WM form fields — searchable country / region combobox.
 *
 * WHY EVERYTHING CARRIES !important
 *
 * Same reason as wm-phone-field.css: WordPress core and most themes ship broad
 * element resets (`input {}`, `button {}`, `ul {}`, `li {}`) plus utility rules
 * that would otherwise win on source order or specificity and take this control
 * apart — a themed `button { background: … ; border: … }` alone is enough to
 * turn the clear button into a grey box. Rather than play specificity games
 * that break the next time a theme updates, every rule here is declared the
 * winner outright.
 *
 * WHAT IS DELIBERATELY NOT DECLARED HERE
 *
 * The visible input carries Elementor's own `elementor-field-textual` class, so
 * the form widget's Style tab owns its background, text colour, border,
 * typography and padding. This file does not declare those properties on
 * `.wm-cb__input` at all — forcing them would silently break the Style tab and
 * leave no way to restyle the field from the editor. They are still safe from
 * theme resets, because Elementor's generated per-element CSS easily outranks a
 * bare `input {}`. Everything structural on the input — width, the padding that
 * reserves room for the caret and clear button, cursor, overflow — is forced
 * here, because none of that is the Style tab's business.
 *
 * Colours for the parts Elementor knows nothing about (the dropdown panel) come
 * from custom properties, so a site can retheme without editing this file:
 *
 *   --wm-cb-bg, --wm-cb-text, --wm-cb-muted, --wm-cb-border,
 *   --wm-cb-hover, --wm-cb-accent, --wm-cb-radius, --wm-cb-shadow
 */

.wm-cb {
	position: relative !important;
	width:    100% !important;
}

/* -----------------------------------------------------------------------
   The native select: present and functional, just not visible.
   Not display:none — a hidden control cannot be focused, which would break
   the browser's own "please fill in this field" handling on a required one.
   ----------------------------------------------------------------------- */
.wm-cb .wm-cb__native {
	position:           absolute !important;
	top:                0 !important;
	left:               0 !important;
	width:              100% !important;
	height:             100% !important;
	opacity:            0 !important;
	pointer-events:     none !important;
	border:             0 !important;
	padding:            0 !important;
	margin:             0 !important;
	min-height:         0 !important;
	appearance:         none !important;
	-webkit-appearance: none !important;
}

/* A select that failed to enhance drops the class and styles itself normally. */
select.wm-combobox-select:not(.wm-cb__native) {
	width: 100% !important;
}

/* -----------------------------------------------------------------------
   The visible input.
   Appearance (background, color, border, font, padding) is intentionally
   left to Elementor's Style tab — see the file header.
   ----------------------------------------------------------------------- */
.wm-cb__input {
	width:         100% !important;
	box-sizing:    border-box !important;
	padding-right: 2.5em !important;
	cursor:        pointer !important;
	text-overflow: ellipsis !important;
	/* Stop iOS zooming the page when the field takes focus. */
	max-width:     100% !important;
}

.wm-cb__input::placeholder {
	color:   var( --wm-cb-muted, #8996a3 ) !important;
	opacity: 1 !important;
}

/* Typing turns it into a text field rather than a picker. */
.wm-cb.is-open .wm-cb__input {
	cursor: text !important;
}

/* -----------------------------------------------------------------------
   Caret
   ----------------------------------------------------------------------- */
.wm-cb__caret {
	position:          absolute !important;
	top:               50% !important;
	right:             0.9em !important;
	width:             0.7em !important;
	height:            0.45em !important;
	margin-top:        -0.2em !important;
	pointer-events:    none !important;
	background:        var( --wm-cb-muted, #6d7882 ) !important;
	transition:        transform 0.15s ease !important;
	/* A chevron drawn with a clip-path: no image request, no icon font, and
	   it inherits colour from the property above. */
	-webkit-clip-path: polygon( 0 0, 50% 100%, 100% 0, 88% 0, 50% 72%, 12% 0 ) !important;
	clip-path:         polygon( 0 0, 50% 100%, 100% 0, 88% 0, 50% 72%, 12% 0 ) !important;
}

.wm-cb.is-open .wm-cb__caret {
	transform: rotate( 180deg ) !important;
}

/* -----------------------------------------------------------------------
   Selection check
   -----------------------------------------------------------------------
   Confirms a country is chosen. Decorative and non-interactive: clearing is
   done by emptying the box and leaving the field. Drawn as two borders on a
   rotated box — the classic CSS tick — so there is no icon font, no image
   request, and it takes its colour from a custom property.
   ----------------------------------------------------------------------- */
.wm-cb__check {
	position:       absolute !important;
	top:            50% !important;
	right:          2.1em !important;
	display:        none !important;
	width:          0.72em !important;
	height:         0.4em !important;
	margin-top:     -0.32em !important;
	border:         0 !important;
	border-left:    2px solid var( --wm-cb-check, #2e7d32 ) !important;
	border-bottom:  2px solid var( --wm-cb-check, #2e7d32 ) !important;
	border-radius:  1px !important;
	background:     transparent !important;
	transform:      rotate( -45deg ) !important;
	pointer-events: none !important;
	box-shadow:     none !important;
}

.wm-cb.has-value .wm-cb__check {
	display: block !important;
}

/* Leave room for the check as well as the caret, only when it is showing. */
.wm-cb.has-value .wm-cb__input {
	padding-right: 3.5em !important;
}

/* -----------------------------------------------------------------------
   Dropdown panel
   ----------------------------------------------------------------------- */
.wm-cb__panel {
	position:      absolute !important;
	z-index:       100 !important;
	top:           calc( 100% + 0.4em ) !important;
	left:          0 !important;
	right:         0 !important;
	bottom:        auto !important;
	max-height:    320px !important; /* keep in sync with PANEL_MAX in wm-form-fields.js */
	overflow-y:    auto !important;
	overflow-x:    hidden !important;
	background:    var( --wm-cb-bg, #fff ) !important;
	border:        1px solid var( --wm-cb-border, #e3e8ee ) !important;
	border-radius: var( --wm-cb-radius, 8px ) !important;
	box-shadow:    var( --wm-cb-shadow, 0 8px 28px rgba( 16, 32, 48, 0.12 ) ) !important;
	/* Momentum scrolling inside the panel on iOS. */
	-webkit-overflow-scrolling: touch !important;
}

/* Flipped above the field when there is no room below. */
.wm-cb.is-above .wm-cb__panel {
	top:    auto !important;
	bottom: calc( 100% + 0.4em ) !important;
}

/* The hidden attribute must beat any theme rule that sets display on divs. */
.wm-cb__panel[hidden] {
	display: none !important;
}

.wm-cb__list {
	margin:      0 !important;
	padding:     0.35em 0 !important;
	list-style:  none !important;
	background:  transparent !important;
	border:      0 !important;
}

/* -----------------------------------------------------------------------
   Group heading — "FREQUENTLY CHOSEN"
   ----------------------------------------------------------------------- */
.wm-cb__list .wm-cb__group {
	display:        block !important;
	margin:         0 !important;
	padding:        0.85em 1.1em 0.35em !important;
	font-size:      0.7em !important;
	font-weight:    700 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	color:          var( --wm-cb-muted, #8996a3 ) !important;
	background:     transparent !important;
	pointer-events: none !important;
	list-style:     none !important;
}

.wm-cb__list .wm-cb__group:first-child {
	padding-top: 0.35em !important;
}

/* -----------------------------------------------------------------------
   Options
   ----------------------------------------------------------------------- */
.wm-cb__list .wm-cb__option {
	display:     flex !important;
	align-items: center !important;
	margin:      0 !important;
	padding:     0.7em 1.1em !important;
	/* ~44px minimum touch target. */
	min-height:  2.75em !important;
	color:       var( --wm-cb-text, #1f2933 ) !important;
	background:  transparent !important;
	cursor:      pointer !important;
	line-height: 1.3 !important;
	list-style:  none !important;
	text-align:  left !important;
}

.wm-cb__list .wm-cb__option.is-active,
.wm-cb__list .wm-cb__option:hover {
	background: var( --wm-cb-hover, #f2f6fa ) !important;
}

.wm-cb__list .wm-cb__option.is-selected {
	font-weight: 600 !important;
	color:       var( --wm-cb-accent, #0b6aa2 ) !important;
}

.wm-cb__list .wm-cb__empty {
	display:    block !important;
	margin:     0 !important;
	padding:    0.85em 1.1em !important;
	color:      var( --wm-cb-muted, #8996a3 ) !important;
	background: transparent !important;
	list-style: none !important;
}

/* -----------------------------------------------------------------------
   Region field
   -----------------------------------------------------------------------
   Hidden because the chosen country has no states. The hidden attribute
   does the work; this guards against themes that set display on field
   groups and would otherwise override it.
   ----------------------------------------------------------------------- */
.elementor-field-group.wm-region-hidden,
.elementor-field-group[hidden].elementor-field-type-wm_region {
	display: none !important;
}

/* -----------------------------------------------------------------------
   Reduced motion
   ----------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.wm-cb__caret {
		transition: none !important;
	}
}

/* -----------------------------------------------------------------------
   Multi-select (Operation Type)
   -----------------------------------------------------------------------
   The same combobox, with the panel staying open while entries are ticked.
   A tick marks each chosen row, so several selections read at a glance
   rather than only being visible in the closed field.
   ----------------------------------------------------------------------- */
.wm-operation-wrapper {
	position: relative !important;
	width:    100% !important;
}

/* Several labels joined together can outrun the field; keep it one line. */
.wm-cb__input {
	white-space: nowrap !important;
}

/* Room for the tick on every row of a multi-select, so labels line up
   whether or not they are chosen. */
.wm-cb--multi .wm-cb__option {
	position:     relative !important;
	padding-left: 2.5em !important;
}

.wm-cb--multi .wm-cb__option::before {
	content:       '' !important;
	position:      absolute !important;
	left:          1.1em !important;
	top:           50% !important;
	width:         0.62em !important;
	height:        0.34em !important;
	margin-top:    -0.28em !important;
	border:        0 !important;
	border-left:   2px solid var( --wm-cb-check, #2e7d32 ) !important;
	border-bottom: 2px solid var( --wm-cb-check, #2e7d32 ) !important;
	transform:     rotate( -45deg ) !important;
	opacity:       0 !important;
}

.wm-cb--multi .wm-cb__option.is-selected::before {
	opacity: 1 !important;
}

/* A chosen row is stated by its tick; no need to recolour the text too. */
.wm-cb--multi .wm-cb__option.is-selected {
	color:       var( --wm-cb-text, #1f2933 ) !important;
	font-weight: 500 !important;
}

/* The native multi-select, when the script has not enhanced it. */
select.wm-operation-select:not(.wm-cb__native) {
	width:      100% !important;
	min-height: 8em !important;
}

/* -----------------------------------------------------------------------
   Clear button — multi-selects only
   -----------------------------------------------------------------------
   A single-select is emptied by choosing something else, and shows a tick
   instead. Several choices need a way out that is not "click each one off",
   so the multi-select gets an X beside the caret.
   ----------------------------------------------------------------------- */
.wm-cb__clear {
	position:      absolute !important;
	top:           50% !important;
	/* Clear of the caret: that sits at 0.9em and is 0.7em wide, so anything
	   centred nearer than this overlaps it. */
	right:         2.4em !important;
	display:       none !important;
	width:         1.4em !important;
	height:        1.4em !important;
	min-height:    0 !important;
	min-width:     0 !important;
	margin:        -0.7em 0 0 0 !important;
	padding:       0 !important;
	border:        0 !important;
	border-radius: 50% !important;
	background:    transparent !important;
	color:         var( --wm-cb-muted, #6d7882 ) !important;
	cursor:        pointer !important;
	box-shadow:    none !important;
	line-height:   1 !important;
	text-shadow:   none !important;
	transform:     none !important;
}

.wm-cb--multi.has-value .wm-cb__clear {
	display: block !important;
}

/* The tick would sit under the X; the X is the useful control here.
 *
 * Every class in the selector is needed. `.wm-cb.has-value .wm-cb__check`
 * above is three classes deep, and !important on both sides means the cascade
 * falls through to specificity -- a shorter selector here loses and the two
 * icons stack on top of each other. */
.wm-cb.wm-cb--multi.has-value .wm-cb__check,
.wm-cb.wm-cb--multi .wm-cb__check {
	display: none !important;
}

/* Room for the X as well as the caret. */
.wm-cb.wm-cb--multi.has-value .wm-cb__input {
	padding-right: 3.8em !important;
}

.wm-cb__clear::before,
.wm-cb__clear::after {
	content:       '' !important;
	position:      absolute !important;
	top:           50% !important;
	left:          50% !important;
	width:         0.72em !important;
	height:        1.5px !important;
	margin:        -0.75px 0 0 -0.36em !important;
	background:    currentColor !important;
	border-radius: 1px !important;
}

.wm-cb__clear::before { transform: rotate( 45deg ) !important; }
.wm-cb__clear::after  { transform: rotate( -45deg ) !important; }

.wm-cb__clear:hover,
.wm-cb__clear:focus-visible {
	background: var( --wm-cb-hover, #f2f6fa ) !important;
	color:      var( --wm-cb-text, #1f2933 ) !important;
}

.wm-cb__clear:focus-visible {
	outline:        2px solid var( --wm-cb-accent, #0b6aa2 ) !important;
	outline-offset: 1px !important;
}