/**
 * Kert RMA Validator — CSS
 * v1.3.4
 */

/* ── Messaggi feedback inline — con sfondo colorato ─────────── */
.kert-rma-msg {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 4px;
    min-height: 0;
    /* nascosto di default finché non ha contenuto */
}

.kert-rma-msg:empty {
    display: none;
    padding: 0;
}

/* ✓ Successo — sfondo verde */
.kert-rma-msg--ok {
    color: #1b5e20;
    background-color: #e8f5e9;
    border: 1px solid #a5d6a7;
}

/* ✗ Errore — sfondo rosso */
.kert-rma-msg--error {
    color: #b71c1c;
    background-color: #ffebee;
    border: 1px solid #ef9a9a;
}

/* ⏳ Loading — sfondo grigio neutro */
.kert-rma-msg--loading {
    color: #424242;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    font-weight: 400;
    font-style: italic;
}

/* ── Bottone aiuto "?" accanto al campo ─────────────────────── */
.kert-rma-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    border-radius: 50%;
    border: 2px solid #bbb;
    background: #fff;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.kert-rma-help:hover,
.kert-rma-help:focus {
    background: #c8a700;
    border-color: #c8a700;
    color: #fff;
    outline: none;
}

/* ── Tooltip / popup etichetta ───────────────────────────────── */
.kert-rma-tooltip {
    display: none;
    position: absolute;
    z-index: 99999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    padding: 12px;
    max-width: 320px;
    width: max-content;
}
.kert-rma-tooltip--visible {
    display: block;
}
.kert-rma-tooltip img {
    width: 100%;
    max-width: 296px;
    height: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid #eee;
}
.kert-rma-tooltip__caption {
    margin: 8px 0 0;
    font-size: 12px;
    color: #555;
    text-align: center;
    line-height: 1.4;
}

/* ── Riga seriale ────────────────────────────────────────────── */
.kmd-row-seriale {
    transition: opacity 0.2s ease;
}

/* ── Limiti età prodotto (v1.4.7) ───────────────────────────── */

/* Avviso sotto il selettore "tipo di servizio richiesto".
   Giallo = limitazione parziale (oltre 2 anni: solo RMA). */
.kert-rma-eta-avviso {
    background: #fff8e1;
    border-left: 4px solid #f0a500;
    color: #6b4e00;
    padding: 10px 14px;
    margin: 6px 0 14px;
    font-size: 14px;
    line-height: 1.45;
    border-radius: 3px;
}

/* Rosso = blocco totale (oltre 10 anni: nessun servizio). */
.kert-rma-eta-avviso--blocco {
    background: #ffebee;
    border-left-color: #c62828;
    color: #8a1c1c;
    font-weight: 500;
}

/* Opzione radio visibile ma NON selezionabile (opzione A rafforzata).
   Resta a schermo, grigia, così l'utente capisce che il servizio esiste
   ma non è applicabile al suo prodotto — il perché è nel box di avviso. */
.kert-rma-opzione-disabilitata {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(1);
}
/* pointer-events:none è la barriera più solida: il click sul pallino non
   raggiunge proprio il radio. La label resta selezionabile come testo, ma
   il guard JS in capture intercetta comunque i click che la attraversano. */
.kert-rma-opzione-disabilitata input {
    pointer-events: none;
    cursor: not-allowed;
}
.kert-rma-opzione-disabilitata .wpcf7-list-item-label {
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}