/**
 * Country Selector — Premium Elementor Pro Form Enhancement
 *
 * HTML structure produced by country-selector.js:
 *
 * <div class="cs-wrapper">
 *   <!-- original <select> sits here, hidden -->
 *   <button class="cs-trigger" type="button" role="combobox">
 *     <span class="cs-trigger__flag">
 *       <span class="fi fi-gb"></span>          ← flag-icons class
 *     </span>
 *     <span class="cs-trigger__label">United Kingdom</span>
 *     <svg class="cs-trigger__arrow">...</svg>
 *   </button>
 *   <div class="cs-dropdown" role="dialog" aria-label="Country">
 *     <div class="cs-search">
 *       <svg class="cs-search__icon">...</svg>
 *       <input class="cs-search__input" type="text" autocomplete="off" />
 *     </div>
 *     <div class="cs-list" role="listbox">
 *       <div class="cs-group">
 *         <p class="cs-group__label">Suggested</p>
 *         <div class="cs-option [cs-option--selected] [cs-option--highlighted]"
 *              role="option" data-code="GB">
 *           <span class="cs-option__flag"><span class="fi fi-gb"></span></span>
 *           <span class="cs-option__name">United Kingdom</span>
 *         </div>
 *         ...
 *       </div>
 *       <hr class="cs-divider" />
 *       <div class="cs-group">
 *         <p class="cs-group__label">All countries</p>
 *         <!-- 249 .cs-option elements -->
 *       </div>
 *     </div>
 *     <p class="cs-empty" hidden>No countries found</p>
 *   </div>
 * </div>
 */

/* ── CSS Custom Properties ───────────────────────────────────────────────── */
/* Override these in your theme or Elementor custom CSS panel.                */

:root {
	--cs-bg:               #ffffff;
	--cs-bg-hover:         #f9fafb;
	--cs-bg-selected:      #eff6ff;
	--cs-bg-search:        #f9fafb;

	--cs-border:           #d1d5db;
	--cs-border-focus:     #6366f1;
	--cs-border-radius:    8px;
	--cs-border-radius-sm: 6px;

	--cs-text:             #111827;
	--cs-text-muted:       #6b7280;
	--cs-text-placeholder: #9ca3af;
	--cs-text-selected:    #1d4ed8;
	--cs-text-label:       #6b7280;

	--cs-shadow:
		0 1px 3px 0   rgb(0 0 0 / 0.06),
		0 4px 12px -2px rgb(0 0 0 / 0.10);
	--cs-shadow-focus:
		0 0 0 3px rgb(99 102 241 / 0.18);

	--cs-flag-size:        20px;
	--cs-flag-radius:      2px;
	--cs-dropdown-max-h:   308px;
	--cs-dropdown-z:       9999;

	--cs-transition-dur:   150ms;
	--cs-transition-ease:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.cs-wrapper {
	position:   relative;
	width:      100%;
	font-family: inherit;
}

/* Hide the original Elementor <select> — keep it in the DOM for form submission. */
.cs-wrapper > select {
	position: absolute !important;
	width:    1px !important;
	height:   1px !important;
	padding:  0 !important;
	margin:   -1px !important;
	overflow: hidden !important;
	clip:     rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border:   0 !important;
	opacity:  0 !important;
	pointer-events: none !important;
}

/* ── Trigger button ──────────────────────────────────────────────────────── */

.cs-trigger {
	display:         flex;
	align-items:     center;
	gap:             10px;
	width:           100%;
	padding:         10px 14px;
	background:      var(--cs-bg);
	border:          1px solid var(--cs-border);
	border-radius:   var(--cs-border-radius);
	color:           var(--cs-text);
	font-size:       inherit;
	font-family:     inherit;
	line-height:     1.5;
	text-align:      left;
	cursor:          pointer;
	box-sizing:      border-box;
	transition:
		border-color var(--cs-transition-dur),
		box-shadow   var(--cs-transition-dur);
	-webkit-appearance: none;
	appearance:      none;
}

.cs-trigger:hover {
	border-color: var(--cs-border-focus);
}

.cs-trigger:focus-visible {
	outline:      none;
	border-color: var(--cs-border-focus);
	box-shadow:   var(--cs-shadow-focus);
}

.cs-trigger--open {
	border-color: var(--cs-border-focus);
	box-shadow:   var(--cs-shadow-focus);
}

/* ── Trigger internals ───────────────────────────────────────────────────── */

.cs-trigger__flag {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
	width:       var(--cs-flag-size);
	height:      var(--cs-flag-size);
	overflow:    hidden;
	border-radius: var(--cs-flag-radius);
}

.cs-trigger__flag .fi {
	width:       var(--cs-flag-size);
	height:      var(--cs-flag-size);
	border-radius: var(--cs-flag-radius);
	background-size: cover;
	flex-shrink: 0;
}

.cs-trigger__flag--empty {
	background:  var(--cs-bg-hover);
	border:      1px solid var(--cs-border);
	border-radius: var(--cs-flag-radius);
}

.cs-trigger__label {
	flex:        1;
	overflow:    hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size:   0.9375rem; /* 15px */
	color:       var(--cs-text);
}

.cs-trigger__label--placeholder {
	color: var(--cs-text-placeholder);
}

.cs-trigger__arrow {
	flex-shrink:  0;
	color:        var(--cs-text-muted);
	width:        16px;
	height:       16px;
	transition:   transform var(--cs-transition-dur) var(--cs-transition-ease);
}

.cs-trigger--open .cs-trigger__arrow {
	transform: rotate(180deg);
}

/* ── Dropdown panel ──────────────────────────────────────────────────────── */

.cs-dropdown {
	position:      absolute;
	top:           calc(100% + 6px);
	left:          0;
	right:         0;
	z-index:       var(--cs-dropdown-z);
	background:    var(--cs-bg);
	border:        1px solid var(--cs-border);
	border-radius: var(--cs-border-radius);
	box-shadow:    var(--cs-shadow);
	overflow:      hidden;

	/* Animation: hidden state */
	opacity:       0;
	transform:     translateY(-6px) scale(0.98);
	visibility:    hidden;
	transform-origin: top center;
	transition:
		opacity    var(--cs-transition-dur) var(--cs-transition-ease),
		transform  var(--cs-transition-dur) var(--cs-transition-ease),
		visibility var(--cs-transition-dur);
}

.cs-dropdown--open {
	opacity:    1;
	transform:  translateY(0) scale(1);
	visibility: visible;
}

/* ── Search bar ──────────────────────────────────────────────────────────── */

.cs-search {
	position:     sticky;
	top:          0;
	display:      flex;
	align-items:  center;
	gap:          8px;
	padding:      10px 12px;
	background:   var(--cs-bg);
	border-bottom: 1px solid var(--cs-border);
	z-index:      1;
}

.cs-search__icon {
	flex-shrink: 0;
	width:       16px;
	height:      16px;
	color:       var(--cs-text-muted);
	pointer-events: none;
}

.cs-search__input {
	flex:         1;
	min-width:    0;
	padding:      0;
	background:   transparent;
	border:       none;
	outline:      none;
	font-size:    0.875rem;
	font-family:  inherit;
	color:        var(--cs-text);
	line-height:  1.5;
	-webkit-appearance: none;
	appearance:   none;
}

.cs-search__input::placeholder {
	color: var(--cs-text-placeholder);
}

/* ── Country list ────────────────────────────────────────────────────────── */

.cs-list {
	max-height:   var(--cs-dropdown-max-h);
	overflow-y:   auto;
	overflow-x:   hidden;
	overscroll-behavior: contain;

	/* Custom scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--cs-border) transparent;
}

.cs-list::-webkit-scrollbar        { width: 4px; }
.cs-list::-webkit-scrollbar-track  { background: transparent; }
.cs-list::-webkit-scrollbar-thumb  { background: var(--cs-border); border-radius: 99px; }

/* ── Group ───────────────────────────────────────────────────────────────── */

.cs-group {
	padding: 4px 0;
}

.cs-group__label {
	margin:      0;
	padding:     6px 14px 4px;
	font-size:   0.6875rem; /* 11px */
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:       var(--cs-text-label);
	user-select: none;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.cs-divider {
	margin:     4px 0;
	border:     none;
	border-top: 1px solid var(--cs-border);
}

/* ── Country option ──────────────────────────────────────────────────────── */

.cs-option {
	display:      flex;
	align-items:  center;
	gap:          10px;
	padding:      9px 14px;
	cursor:       pointer;
	user-select:  none;
	transition:   background var(--cs-transition-dur);
	border-radius: 0;
	list-style:   none;
}

.cs-option:hover,
.cs-option--highlighted {
	background: var(--cs-bg-hover);
}

.cs-option--selected {
	background:     var(--cs-bg-selected);
	color:          var(--cs-text-selected);
	font-weight:    500;
}

.cs-option--selected .cs-option__name {
	color: var(--cs-text-selected);
}

.cs-option--hidden {
	display: none;
}

/* ── Option internals ────────────────────────────────────────────────────── */

.cs-option__flag {
	display:       flex;
	align-items:   center;
	flex-shrink:   0;
	width:         var(--cs-flag-size);
	height:        var(--cs-flag-size);
	overflow:      hidden;
	border-radius: var(--cs-flag-radius);
}

.cs-option__flag .fi {
	width:         var(--cs-flag-size);
	height:        var(--cs-flag-size);
	border-radius: var(--cs-flag-radius);
	background-size: cover;
	flex-shrink:   0;
}

.cs-option__name {
	flex:          1;
	font-size:     0.9375rem;
	color:         var(--cs-text);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.cs-empty {
	margin:      0;
	padding:     20px 14px;
	text-align:  center;
	font-size:   0.875rem;
	color:       var(--cs-text-muted);
}

/* ── Elementor form integration ──────────────────────────────────────────── */

/* Ensure the wrapper fills the Elementor field column. */
.elementor-field-type-select .cs-wrapper {
	display: block;
}

/* Match Elementor's rounded input style if the theme uses it. */
.e-form__fields-type--outlined .cs-trigger {
	border-radius: var(--cs-border-radius);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	:root {
		--cs-dropdown-max-h: 240px;
	}

	.cs-trigger {
		padding: 10px 12px;
	}

	.cs-option {
		padding: 10px 12px;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cs-dropdown,
	.cs-trigger,
	.cs-trigger__arrow,
	.cs-option {
		transition: none !important;
	}
}

/* ── High contrast / forced colors ──────────────────────────────────────── */

@media (forced-colors: active) {
	.cs-trigger,
	.cs-dropdown {
		border: 2px solid ButtonText;
	}

	.cs-option--highlighted {
		outline: 2px solid Highlight;
	}
}