@charset "UTF-8";
/* =====================================================================
   ElbaMyLove CMS · Componenti form condivisi (login + gestionale)
   REGOLA DI PROGETTO: i checkbox vanno SEMPRE resi come switch on/off.
   Due formati: piccolo (default/standalone) e grande (.form-switch-lg)
   quando lo switch sta in linea con altri elementi del form.
   Markup tipo:
     <div class="form-check form-switch form-switch-lg">
       <input class="form-check-input" type="checkbox" role="switch" id="x">
       <label class="form-check-label" for="x">Etichetta</label>
     </div>
   ===================================================================== */

:root{
    --eml-sea:#9b1c42;
    --eml-sea-deep:#2a1020;
}

/* Switch custom, indipendente da Bootstrap: disegno io track + knob.
   Tutto in em -> i formati si scalano cambiando solo font-size. */
.form-switch{ display:inline-flex; align-items:center; gap:.5em; padding-left:0; min-height:auto; }

.form-switch .form-check-input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    flex:0 0 auto;
    float:none;
    margin:0;
    width:2.4em;
    height:1.3em;
    border:0;
    border-radius:1em;
    background-color:#c3cfd6;                 /* track OFF */
    background-repeat:no-repeat;
    background-position:.18em center;          /* knob a sinistra (OFF) */
    background-size:.94em .94em;               /* diametro knob */
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='8' fill='%23ffffff'/%3e%3c/svg%3e");
    box-shadow:inset 0 1px 2px rgba(0,0,0,.14);
    cursor:pointer;
    transition:background-color .2s ease, background-position .2s ease;
    vertical-align:middle;
}
.form-switch .form-check-input:checked{
    background-color:var(--eml-sea);           /* track ON */
    background-position:calc(100% - .18em) center;  /* knob a destra (ON) */
}
.form-switch .form-check-input:focus-visible{
    outline:0;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.14), 0 0 0 .2rem rgba(155,28,66,.30);
}
.form-switch .form-check-label{
    cursor:pointer;
    user-select:none;
    line-height:1.3em;
    margin:0;
}

/* ---- Formato PICCOLO (default standalone) ---- */
.form-switch-sm .form-check-input{ font-size:1rem; }
.form-switch-sm .form-check-label{ font-size:.92rem; }

/* ---- Formato GRANDE (in linea con altri campi form) ---- */
.form-switch-lg .form-check-input{ font-size:1.5rem; }
.form-switch-lg .form-check-label{ font-size:1rem; }