/**
 * NSS Healthcare Center Field — Estils
 *
 * El <select> rep les classes estàndard d'Elementor (elementor-field,
 * elementor-field-textual, elementor-size-X) i Tom Select les copia al
 * wrapper visible. Per això les regles CSS que l'usuari defineix a
 * Elementor (background, border, border-radius, tipografia, etc.)
 * s'apliquen automàticament al wrapper.
 *
 * El paper d'aquest fitxer és:
 *   1. Fer el .ts-control transparent (sense fons/borda/padding propi)
 *      perquè els estils del wrapper es vegin a través.
 *   2. Donar estil al desplegable, que viu fora del wrapper.
 */

/* ── Wrapper (hereta .elementor-field del <select>) ────────────────────── */

.nss-healthcare-center-ts-wrapper {
	--nss-healthcare-center-bg: var( --e-global-color-04f68c3, #eeeeee );
	--nss-healthcare-center-text: var( --e-global-color-5bc2721, #878787 );
	--nss-healthcare-center-border: var( --e-global-color-04f68c3, #eeeeee );
	--nss-healthcare-center-muted: var( --e-global-color-5bc2721, #878787 );
	--nss-healthcare-center-accent: var( --e-global-color-accent, #1e49d5 );
	width: 100%;
	box-sizing: border-box;
	display: block;
	position: relative;
	background: var( --nss-healthcare-center-bg );
	border: 0;
	border-radius: 10px;
	color: var( --nss-healthcare-center-text );
	transition: box-shadow 0.15s ease;
	--ts-pr-caret: 2.75rem;
}

.nss-healthcare-center-ts-wrapper.elementor-field,
.nss-healthcare-center-ts-wrapper.elementor-field-textual,
.nss-healthcare-center-ts-wrapper.elementor-field-textual.elementor-size-xs,
.nss-healthcare-center-ts-wrapper.elementor-field-textual.elementor-size-sm,
.nss-healthcare-center-ts-wrapper.elementor-field-textual.elementor-size-md,
.nss-healthcare-center-ts-wrapper.elementor-field-textual.elementor-size-lg,
.nss-healthcare-center-ts-wrapper.elementor-field-textual.elementor-size-xl {
	padding: 0 !important;
	min-height: 0 !important;
}

.nss-healthcare-center-ts-wrapper::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 16px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var( --nss-healthcare-center-muted );
	transform: translateY( -50% );
	transform-origin: center;
	pointer-events: none;
	transition: transform 0.15s ease, border-top-color 0.15s ease;
}

.nss-healthcare-center-ts-wrapper.dropdown-active::after,
.nss-healthcare-center-ts-wrapper.focus::after {
	transform: translateY( -50% ) rotate( 180deg );
	border-top-color: var( --nss-healthcare-center-accent );
}

/* ── Control visible: completament transparent per heretar el wrapper ──── */

.nss-healthcare-center-ts-wrapper .ts-control {
	background: transparent !important;
	border: none !important;
	border-radius: inherit;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: flex;
	align-items: center;
	padding: 5px 34px 5px 14px !important;
	box-shadow: none !important;
	width: 100%;
	min-height: 40px;
	box-sizing: border-box;
	cursor: pointer;
}

.nss-healthcare-center-ts-wrapper.focus .ts-control,
.nss-healthcare-center-ts-wrapper .ts-control:focus,
.nss-healthcare-center-ts-wrapper.focus.ts-wrapper .ts-control {
	border: none !important;
	box-shadow: none !important;
	outline: none;
}

.nss-healthcare-center-ts-wrapper.focus,
.nss-healthcare-center-ts-wrapper.dropdown-active {
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
}

.nss-healthcare-center-ts-wrapper .ts-control .item {
	color: inherit;
	font: inherit;
	display: flex;
	align-items: center;
	line-height: 1.4;
	width: 100%;
}

.nss-healthcare-center-ts-wrapper .ts-control > input {
	color: inherit;
	font: inherit;
	background: transparent;
	display: flex !important;
	align-items: center;
	line-height: 1.4 !important;
	min-width: 0 !important;
	width: 100% !important;
}

.nss-healthcare-center-ts-wrapper .ts-control input::placeholder {
	color: var( --nss-healthcare-center-muted );
	opacity: 1;
}

.nss-healthcare-center-ts-wrapper .items-placeholder {
	color: var( --nss-healthcare-center-muted ) !important;
	opacity: 1 !important;
}

/* ── Desplegable (manté la seva identitat visual) ──────────────────────── */

.nss-healthcare-center-ts-wrapper .ts-dropdown {
	font-family: inherit;
	font-size: 0.95em;
	background-color: var( --nss-healthcare-center-bg );
	color: var( --nss-healthcare-center-text );
	border: 1px solid var( --nss-healthcare-center-border );
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba( 4, 4, 4, 0.12 );
	max-height: 320px;
	overflow-y: auto;
	z-index: 9999;
}

/* ── Input de cerca dins del desplegable (plugin dropdown_input) ───────── */

.nss-healthcare-center-ts-wrapper .ts-dropdown .dropdown-input-wrap {
	padding: 8px;
	background: color-mix( in srgb, var( --nss-healthcare-center-bg ) 88%, var( --nss-healthcare-center-border ) );
	border-bottom: 1px solid var( --nss-healthcare-center-border );
	position: sticky;
	top: 0;
	z-index: 2;
}

.nss-healthcare-center-ts-wrapper .ts-dropdown .dropdown-input {
	width: 100%;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 0.95em;
	color: var( --nss-healthcare-center-text );
	background: var( --nss-healthcare-center-bg );
	border: 1px solid var( --nss-healthcare-center-border );
	border-radius: 10px;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nss-healthcare-center-ts-wrapper .ts-dropdown .dropdown-input:focus {
	border-color: var( --nss-healthcare-center-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --nss-healthcare-center-accent ) 15%, transparent );
}

.nss-healthcare-center-ts-wrapper .ts-dropdown .dropdown-input::placeholder {
	color: var( --nss-healthcare-center-muted );
}

.nss-healthcare-center-ts-wrapper .ts-dropdown .option {
	padding: 8px 12px;
	cursor: pointer;
	line-height: 1.4;
	font-size: 0.9em;
	color: var( --nss-healthcare-center-text );
}

.nss-healthcare-center-ts-wrapper .ts-dropdown .option:hover,
.nss-healthcare-center-ts-wrapper .ts-dropdown .option.active {
	background-color: color-mix( in srgb, var( --nss-healthcare-center-accent ) 10%, var( --nss-healthcare-center-bg ) );
	color: var( --nss-healthcare-center-accent );
}

.nss-healthcare-center-ts-wrapper .ts-dropdown .option.selected {
	background-color: var( --nss-healthcare-center-accent );
	color: var( --nss-healthcare-center-bg );
	font-weight: 500;
}

.nss-healthcare-center-ts-wrapper .ts-dropdown .no-results {
	padding: 10px 12px;
	color: var( --nss-healthcare-center-muted );
	font-style: italic;
	font-size: 0.9em;
}

.nss-healthcare-center-ts-wrapper .ts-dropdown-content {
	max-height: 220px;
	overflow-y: auto;
}

/* ── Spinner de càrrega ────────────────────────────────────────────────── */

.nss-healthcare-center-ts-wrapper.loading .ts-control::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid color-mix( in srgb, var( --nss-healthcare-center-muted ) 40%, transparent );
	border-top-color: var( --nss-healthcare-center-accent );
	border-radius: 50%;
	animation: nss-spin 0.7s linear infinite;
	margin-left: 8px;
	vertical-align: middle;
}

@keyframes nss-spin {
	to { transform: rotate( 360deg ); }
}

/* ── Mòbil: evita zoom automàtic a iOS ─────────────────────────────────── */

@media ( max-width: 767px ) {
	.nss-healthcare-center-ts-wrapper .ts-dropdown {
		max-height: 180px;
		font-size: 16px;
	}

	.nss-healthcare-center-ts-wrapper .ts-control,
	.nss-healthcare-center-ts-wrapper .ts-control > input {
		font-size: 16px;
	}
}