/**
 * Contact Form 7 addon fields — Multi-select dropdown styles.
 *
 * Scoped under .cf7af-multiselect-wrap. Themeable via CSS custom properties.
 */

.cf7af-multiselect-wrap {
	--cf7af-accent: #2563eb;
	--cf7af-border: #c7ccd1;
	--cf7af-bg: #ffffff;
	--cf7af-muted: #6b7280;
	--cf7af-disabled: #b6bcc4;
	--cf7af-hover: #f1f5f9;
	--cf7af-radius: 6px;
	display: block;
	position: relative;
}

/* Hide the native control once JS has enhanced the field, but keep it in the
   DOM (off-screen) so the values still submit. Without JS it stays visible. */
.cf7af-multiselect-wrap.cf7af-enhanced .cf7af-multiselect-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.cf7af-ms {
	position: relative;
}

/* --- Toggle button ------------------------------------------------------ */

.cf7af-ms-toggle {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 100%;
	min-height: 2.6em;
	padding: 0.45em 0.7em;
	background: var(--cf7af-bg);
	border: 1px solid var(--cf7af-border);
	border-radius: var(--cf7af-radius);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cf7af-ms-open .cf7af-ms-toggle,
.cf7af-ms-toggle:focus-visible {
	border-color: var(--cf7af-accent);
	outline: none;
	box-shadow: 0 0 0 2px color-mix( in srgb, var(--cf7af-accent) 30%, transparent );
}

.cf7af-ms-label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cf7af-ms-label.cf7af-ms-placeholder {
	color: var(--cf7af-muted);
}

.cf7af-ms-caret {
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid var(--cf7af-muted);
	border-bottom: 2px solid var(--cf7af-muted);
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
	margin-bottom: 0.2em;
}

.cf7af-ms-open .cf7af-ms-caret {
	transform: rotate( -135deg );
	margin-bottom: -0.2em;
}

/* --- Dropdown panel ----------------------------------------------------- */

.cf7af-ms-panel {
	position: absolute;
	z-index: 50;
	left: 0;
	right: 0;
	top: calc( 100% + 4px );
	max-height: 16em;
	overflow-y: auto;
	background: var(--cf7af-bg);
	border: 1px solid var(--cf7af-border);
	border-radius: var(--cf7af-radius);
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
}

.cf7af-ms-note {
	position: sticky;
	top: 0;
	padding: 0.45em 0.8em;
	background: var(--cf7af-hover);
	border-bottom: 1px solid var(--cf7af-border);
	font-size: 0.82em;
	color: var(--cf7af-muted);
}

.cf7af-ms-note-max {
	color: var(--cf7af-accent);
	font-weight: 600;
}

.cf7af-ms-option {
	display: flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 0.8em;
	cursor: pointer;
	margin: 0;
}

.cf7af-ms-option:hover {
	background: var(--cf7af-hover);
}

.cf7af-ms-option input {
	margin: 0;
	flex: 0 0 auto;
}

.cf7af-ms-option.cf7af-ms-disabled {
	color: var(--cf7af-disabled);
	cursor: not-allowed;
}

.cf7af-ms-option.cf7af-ms-disabled:hover {
	background: transparent;
}

/* Reflect CF7's invalid state on the toggle. */
.cf7af-multiselect-native.wpcf7-not-valid + .cf7af-ms .cf7af-ms-toggle,
.wpcf7-not-valid .cf7af-ms-toggle {
	border-color: #dc2626;
}