/**
 * GF: checkbox renderizzate come menu a tendina multi-selezione.
 *
 * I selettori sul markup di Gravity Forms sono prefissati con .hs-msd per stare
 * sopra al theme framework di GF, che stila .gfield_checkbox e .gchoice con la
 * stessa specificita'.
 *
 * Spec: docs/superpowers/specs/2026-07-29-gf-multiselect-dropdown-design.md
 */

/*
 * box-sizing esplicito: senza, min-height e padding si sommano e il controllo
 * cresce a seconda del reset del tema che lo ospita.
 */
.hs-msd-wrap,
.hs-msd-wrap *,
.hs-msd-wrap *::before,
.hs-msd-wrap *::after {
	box-sizing: border-box;
}

/*
 * I valori di default replicano la <select> del template Landing V2
 * (css/landing/landing-v2.css: .lp-v2-wrapper .gform_wrapper select), cosi' il
 * controllo chiuso e' indistinguibile dagli altri campi del form. Un template
 * con controlli diversi ridefinisce queste variabili su .hs-msd-wrap invece di
 * riscrivere le regole.
 */
.hs-msd-wrap {
	--hs-msd-bg: #fff;
	--hs-msd-color: #333;
	--hs-msd-border: 2px solid #d9d9d9;
	--hs-msd-border-color-focus: #06b4be;
	--hs-msd-radius: 6px;
	--hs-msd-height: 52px;
	--hs-msd-padding-y: 8px;
	--hs-msd-padding-x: 14px;
	--hs-msd-padding-right: 36px;
	--hs-msd-font-size: 16px;
	--hs-msd-font-weight: 300;

	position: relative;
}

/* ── Controllo chiuso ───────────────────────────────────────────── */

.hs-msd-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	min-height: var( --hs-msd-height );
	padding: var( --hs-msd-padding-y ) var( --hs-msd-padding-right ) var( --hs-msd-padding-y ) var( --hs-msd-padding-x );
	border: var( --hs-msd-border );
	border-radius: var( --hs-msd-radius );
	background: var( --hs-msd-bg );
	color: var( --hs-msd-color );
	font-size: var( --hs-msd-font-size );
	font-weight: var( --hs-msd-font-weight );
	cursor: pointer;
}

.hs-msd-header:focus-within {
	border-color: var( --hs-msd-border-color-focus );
}

/*
 * Reset difensivo dei nostri due button.
 *
 * Il componente vive dentro .gform_wrapper, dove il tema e il theme framework di
 * GF stilano i button in modo aggressivo (background pieno, bordi arrotondati,
 * padding, gradienti, spesso con !important). Senza questo reset il toggle, che
 * copre tutta l'area dell'header, si dipinge come un bottone di submit.
 * Qui !important e' l'unico modo affidabile: la specificita' delle regole
 * ospiti non e' nota a priori.
 */
.hs-msd-wrap .hs-msd-toggle,
.hs-msd-wrap .hs-msd-tag-remove {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	font: inherit !important;
	letter-spacing: normal !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	appearance: none;
}

/*
 * Il toggle e' un button vero che copre tutta l'area dell'header. I tag ci
 * stanno sopra: i button annidati non sarebbero HTML valido.
 */
.hs-msd-wrap .hs-msd-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	color: inherit !important;
	cursor: pointer;
}

.hs-msd-toggle:focus {
	outline: none;
}

.hs-msd-tags,
.hs-msd-placeholder {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.hs-msd-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.hs-msd-tags:empty {
	display: none;
}

/*
 * Come nella <select> nativa, il segnaposto usa lo stesso colore dei valori.
 */
.hs-msd-placeholder {
	color: var( --hs-msd-color );
}

/*
 * Stessa freccia della <select> del tema: identico SVG, stessa posizione.
 */
.hs-msd-arrow {
	position: absolute;
	top: 50%;
	right: var( --hs-msd-padding-x );
	z-index: 1;
	width: 12px;
	height: 8px;
	margin-top: -4px;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	transition: transform 0.15s ease;
	pointer-events: none;
}

.hs-msd-open .hs-msd-arrow {
	transform: rotate( 180deg );
}

/* ── Etichette delle opzioni selezionate ────────────────────────── */

.hs-msd-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
	padding: 0.125rem 0.125rem 0.125rem 0.5rem;
	border-radius: calc( var( --hs-msd-radius ) - 2px );
	background: #eef1f5;
	font-size: 0.875em;
	line-height: 1.6;
}

.hs-msd-wrap .hs-msd-tag-remove {
	display: flex !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.125rem !important;
	height: 1.125rem !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0.125rem !important;
	color: #5b6670 !important;
	font-size: 1.125rem !important;
	cursor: pointer;
	pointer-events: auto;
}

.hs-msd-wrap .hs-msd-tag-remove:hover,
.hs-msd-wrap .hs-msd-tag-remove:focus-visible {
	background: #d9dee6 !important;
	color: #1a1d21 !important;
}

/* ── Pannello ───────────────────────────────────────────────────── */

.hs-msd-panel {
	position: absolute;
	z-index: 20;
	top: calc( 100% + 0.25rem );
	right: 0;
	left: 0;
	max-height: 16rem;
	overflow-y: auto;
	padding: 0.25rem;
	border: var( --hs-msd-border );
	border-radius: var( --hs-msd-radius );
	background: var( --hs-msd-bg );
	color: var( --hs-msd-color );
	font-size: var( --hs-msd-font-size );
	font-weight: var( --hs-msd-font-weight );
	box-shadow: 0 0.5rem 1rem rgba( 0, 0, 0, 0.12 );
}

.hs-msd-panel[hidden] {
	display: none;
}

.hs-msd .hs-msd-panel .gfield_checkbox {
	display: block;
	margin: 0;
	padding: 0;
}

.hs-msd .hs-msd-panel .gchoice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0.625rem;
	border-radius: 0.1875rem;
}

.hs-msd .hs-msd-panel .gchoice:hover {
	background: #f2f5f9;
}

.hs-msd .hs-msd-panel .gchoice:focus-within {
	background: #e8eefc;
}

.hs-msd .hs-msd-panel .gchoice input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
}

.hs-msd .hs-msd-panel .gchoice label {
	flex: 1 1 auto;
	margin: 0;
	cursor: pointer;
}

/* Bottone "Select All" nativo di GF, che vive dentro .gfield_checkbox. */
.hs-msd .hs-msd-panel .gfield_choice_all_toggle {
	margin: 0.25rem 0.625rem 0.375rem;
}

@media ( prefers-reduced-motion: reduce ) {

	.hs-msd-arrow {
		transition: none;
	}
}