/* Odex Forms — stili frontend.
   Scoped a .odex-form per non toccare le altre checkbox/radio del sito.
   I colori interattivi seguono il token --odex-primary della palette di pagina
   (Shift: neutra/warm) con fallback al blu Odex storico. */

/* Focus degli input testuali / textarea / select nativo: vira sul colore tema */
.odex-form input:not([type="checkbox"]):not([type="radio"]):focus,
.odex-form textarea:focus,
.odex-form select:focus {
    border-color: var(--odex-primary, #04A1FF);
}

/* Layout del checkbox group: opzioni in riga che vanno a capo */
.odex-form-checkgroup {
    display: flex;
    flex-flow: row wrap;
    gap: 12px 26px;
}

/* Checkbox e radio custom (stile Odex) */
.odex-form input[type="checkbox"],
.odex-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 2px solid #d1d5db;
    background-color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease;
}
.odex-form input[type="checkbox"] { border-radius: 6px; }
.odex-form input[type="radio"]    { border-radius: 50%; }

.odex-form input[type="checkbox"]:hover,
.odex-form input[type="radio"]:hover {
    border-color: var(--odex-primary, #04A1FF);
}

.odex-form input[type="checkbox"]:checked,
.odex-form input[type="radio"]:checked {
    background-color: var(--odex-primary, #04A1FF);
    border-color: var(--odex-primary, #04A1FF);
    background-repeat: no-repeat;
    background-position: center;
}
.odex-form input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 14px 14px;
}
.odex-form input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='white'/%3E%3C/svg%3E");
    background-size: 8px 8px;
}

.odex-form input[type="checkbox"]:focus-visible,
.odex-form input[type="radio"]:focus-visible {
    outline: 2px solid var(--odex-primary, #04A1FF);
    outline-offset: 2px;
}

/* ── Checkbox group: stile output "chips" ───────────── */
.odex-form-chips {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}
.odex-form .odex-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.2;
    color: inherit;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* L'input resta nel DOM (per submit) ma è nascosto: la chip È il controllo. */
.odex-form .odex-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    border: 0;
    pointer-events: none;
}
.odex-form .odex-chip:hover { border-color: var(--odex-primary, #04A1FF); }
.odex-form .odex-chip:has(input:checked) {
    background: var(--odex-primary, #04A1FF);
    border-color: var(--odex-primary, #04A1FF);
    color: #fff;
}
.odex-form .odex-chip:has(input:checked)::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.odex-form .odex-chip:has(input:focus-visible) {
    outline: 2px solid var(--odex-primary, #04A1FF);
    outline-offset: 2px;
}

/* ── Select custom (desktop; su mobile resta il select nativo) ──────── */
.odex-select { position: relative; }
.odex-select > select { display: none; }
.odex-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.3;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease;
}
.odex-select__trigger:hover,
.odex-select.open .odex-select__trigger { border-color: var(--odex-primary, #04A1FF); }
.odex-select__trigger:focus-visible { outline: 2px solid var(--odex-primary, #04A1FF); outline-offset: 2px; }
.odex-select__value.is-placeholder { color: #9ca3af; }
.odex-select__chev { flex-shrink: 0; color: #9ca3af; transition: transform .2s ease; }
.odex-select.open .odex-select__chev { transform: rotate(180deg); }
.odex-select__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .18);
    display: none;
}
.odex-select.open .odex-select__panel { display: block; }
.odex-select__opt {
    padding: 10px 14px;
    font-size: 14px;
    color: inherit;
    border-radius: 6px;
    cursor: pointer;
}
.odex-select__opt.is-active { background: #f1f5f9; }
.odex-select__opt[aria-selected="true"] { background: var(--odex-primary, #04A1FF); color: #fff; }
.odex-select__opt[aria-disabled="true"] { color: #9ca3af; cursor: default; }