/*
 * Music CAPTCHA – Foglio di stile predefinito
 * Versione: 2.0.0
 *
 * Per personalizzare: Impostazioni → Music CAPTCHA → CSS personalizzato
 * oppure carica il file music-captcha-custom.css nel tuo tema e accoda quello.
 *
 * Variabili CSS disponibili per override rapido:
 * --mc-bg, --mc-border, --mc-radius, --mc-label-color,
 * --mc-option-hover, --mc-accent, --mc-error
 */

/* ── Variabili tema ──────────────────────────────────────────────────── */
:root {
/*    --mc-bg:           #f9fafb;
    --mc-border:       #d1d5db;
    --mc-label-color:  #111827;
    --mc-accent:       #2563eb; 
*/   
    --mc-radius:       8px;
    --mc-padding:      14px 18px;
    --mc-font-size:    0.95rem;
    --mc-option-hover: #e5e7eb;
    --mc-error:        #b91c1c;
    --mc-gap:          8px;
    --mc-bg:           #1e293b;
    --mc-border:       #334155;
    --mc-label-color:  #f1f5f9;
    --mc-option-hover: #334155;
    --mc-accent:       #38bdf8;
}

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.music-captcha-wrap {
    margin:        16px 0;
    padding:       var(--mc-padding);
    border:        1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    background:    var(--mc-bg);
    font-size:     var(--mc-font-size);
    line-height:   1.5;
}

/* ── Quesito ─────────────────────────────────────────────────────────── */
.music-captcha-label {
    margin:      0 0 10px;
    font-weight: 600;
    color:       var(--mc-label-color);
}

/* ── Opzioni ─────────────────────────────────────────────────────────── */
.music-captcha-options {
    display:        flex;
    flex-direction: column;
    gap:            var(--mc-gap);
}

.music-captcha-option {
    display:       flex;
    align-items:   center;
    gap:           8px;
    cursor:        pointer;
    padding:       6px 10px;
    border-radius: 6px;
    transition:    background 0.15s ease;
    user-select:   none;
}

.music-captcha-option:hover {
    background: var(--mc-option-hover);
}

.music-captcha-option input[type="radio"] {
    accent-color: var(--mc-accent);
    width:        16px;
    height:       16px;
    flex-shrink:  0;
}

.music-captcha-option input[type="radio"]:focus-visible {
    outline:        2px solid var(--mc-accent);
    outline-offset: 2px;
}

/* ── Messaggio di errore ─────────────────────────────────────────────── */
.music-captcha-error {
    color:       var(--mc-error);
    font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .music-captcha-wrap {
        padding: 12px 14px;
    }
    .music-captcha-option {
        padding: 8px 10px;   /* target touch più ampio */
    }
}


/* ════════════════════════════════════════════════════════════════════════
   ESEMPI DI OVERRIDE — incolla quello che ti serve nel campo
   "CSS personalizzato" dell'admin o nel file del tuo tema.
   ════════════════════════════════════════════════════════════════════════

   ── Tema scuro ────────────────────────────────────────────────────────
   :root {
       --mc-bg:           #1e293b;
       --mc-border:       #334155;
       --mc-label-color:  #f1f5f9;
       --mc-option-hover: #334155;
       --mc-accent:       #38bdf8;
   }

   ── Stile minimalista (solo bordo inferiore) ──────────────────────────
   .music-captcha-wrap {
       background:    transparent;
       border:        none;
       border-bottom: 2px solid var(--mc-border);
       border-radius: 0;
       padding:       12px 0;
   }

   ── Opzioni come bottoni pill ─────────────────────────────────────────
   .music-captcha-options {
       flex-direction: row;
       flex-wrap:      wrap;
   }
   .music-captcha-option {
       border:        1px solid var(--mc-border);
       border-radius: 999px;
       padding:       6px 14px;
   }
   .music-captcha-option:has(input:checked) {
       background:    var(--mc-accent);
       border-color:  var(--mc-accent);
       color:         #fff;
   }

   ════════════════════════════════════════════════════════════════════════ */