/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS — Forms
   Form fields con label + icona + stati validazione + select/radio
   Compatibile con `row > col > form-group` Bootstrap:
   il wrapper Bootstrap resta esterno, liquid-glass stila l'interno.
   Carica DOPO bootstrap-bridge.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Field base ─────────────────────────────────────────────── */
.form-field { margin-bottom: 18px; }
.form-field label {
	display: block; font-size: 12px; font-weight: 600;
	color: var(--ink-2); margin-bottom: 7px; letter-spacing: .1px;
}
.form-field label .required,
.required { color: var(--red); margin-left: 2px; font-weight: 700; }

/* ─── Validation states (no !important, higher specificity) ──── */
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea,
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus { border-color: var(--red); background: rgba(236,98,126,.04); }
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(236,98,126,.12); }
.form-field.has-error .field-wrapper svg.field-icon { stroke: var(--red); }

.form-field.has-success input,
.form-field.has-success select,
.form-field.has-success textarea,
.form-field.has-success input:focus,
.form-field.has-success select:focus,
.form-field.has-success textarea:focus { border-color: var(--green); background: rgba(0,168,94,.04); }
.form-field.has-success input:focus,
.form-field.has-success select:focus,
.form-field.has-success textarea:focus { box-shadow: 0 0 0 3px rgba(0,168,94,.12); }
.form-field.has-success .field-wrapper svg.field-icon { stroke: var(--green); }

/* ─── Field messages (help/error/success) ────────────────────── */
.form-field-msg { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 11.5px; line-height: 1.4; }
.form-field-msg svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 1px; }
.form-field-help { color: var(--ink-4); }
.form-field-error { color: var(--red); font-weight: 600; }
.form-field-success { color: var(--green); font-weight: 600; }

/* ─── Field wrapper + input con icona ────────────────────────── */
.field-wrapper { position: relative; }
.field-wrapper svg.field-icon {
	position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
	width: 15px; height: 15px;
	stroke: var(--ink-4); fill: none; stroke-width: 1.8;
	stroke-linecap: round; stroke-linejoin: round;
	pointer-events: none; transition: stroke .13s;
}
.field-wrapper:focus-within svg.field-icon { stroke: var(--teal); }

/* ─── Input / textarea ───────────────────────────────────────── */
.form-field input,
.form-field textarea {
	width: 100%;
	padding: 11px 14px 11px 40px;
	font-family: var(--ff);
	font-size: 13.5px; font-weight: 400;
	color: var(--ink);
	background: var(--field-bg);
	border: 1.5px solid rgba(0,130,144,.12);
	border-radius: 10px;
	outline: none;
	transition: border-color .13s, background .13s, box-shadow .13s;
}
.form-field textarea { padding-left: 14px; resize: vertical; min-height: 90px; font-family: var(--ff); }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-4); }
.form-field input:focus,
.form-field textarea:focus { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,130,144,.1); }
/* Quando il campo non ha .field-wrapper con icona: input flush left */
.form-field > input,
.form-field > textarea { padding-left: 14px; }

/* Numeric: rimuovi spinner nativi */
.form-field input[type="number"] { -moz-appearance: textfield; }
.form-field input[type="number"]::-webkit-outer-spin-button,
.form-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ─── Eye toggle (mostra/nascondi password) ──────────────────── */
.eye-toggle {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	background: none; border: none; cursor: pointer; padding: 4px;
	color: var(--ink-4); transition: color .12s;
}
.eye-toggle:hover { color: var(--teal); }
.eye-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.form-field input[type="password"] { padding-right: 42px; }

/* ─── Checkbox / remember inline ─────────────────────────────── */
.form-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--ink-3); margin: 0; }
.form-remember input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

/* ─── Radio / Checkbox grouped ───────────────────────────────── */
.form-radio-group { display: flex; flex-direction: column; gap: 10px; }
.form-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--ink-3); }
.form-radio input[type="radio"],
.form-radio input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.form-radio-inline { display: flex; gap: 18px; }
.form-radio-inline .form-radio { flex-direction: row; }

/* ─── Select (custom chevron via data-URI SVG) ───────────────── */
.form-field select,
.form-select {
	width: 100%;
	padding: 11px 36px 11px 14px;
	font-family: var(--ff);
	font-size: 13.5px; font-weight: 400;
	color: var(--ink);
	background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397b0b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center;
	border: 1.5px solid rgba(0,130,144,.12);
	border-radius: 10px;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color .13s, background-color .13s, box-shadow .13s;
}
.form-field select:focus,
.form-select:focus { background-color: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,130,144,.1); }
.form-select-icon { padding-left: 40px; }