/**
 * Avvisami Frontend Styles
 * Versione: 1.0.1 - Include stili per modale e overlay JS
 */

/* ===============================
   PULSANTE AVVISAMI (GENERATO DA JS O PHP)
   =============================== */

.avvisami-button-container {
    margin: 20px 0; /* Aggiunge spazio sopra e sotto */
    text-align: left; /* Allinea il pulsante a sinistra */
}

.avvisami-button {
    display: inline-flex; /* Allinea icona e testo */
    align-items: center; /* Centra verticalmente icona e testo */
    padding: 12px 24px;
    background: linear-gradient(135deg, #BF548F 0%, #D9A7C2 100%); /* Colori tema iaiabag/glowup */
    color: #ffffff !important; /* Testo bianco, !important per sovrascrivere stili tema */
    text-decoration: none !important; /* Rimuove sottolineatura */
    border: none;
    border-radius: 50px; /* Bordi arrotondati */
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(191, 84, 143, 0.3); /* Ombra leggera basata sul colore */
    line-height: 1; /* Assicura altezza corretta */
    text-shadow: none; /* Rimuove ombre testo tema */
}

.avvisami-button:hover,
.avvisami-button:focus {
    background: linear-gradient(135deg, #D9A7C2 0%, #BF548F 100%); /* Inverte gradiente */
    color: #ffffff !important;
    transform: translateY(-2px); /* Effetto sollevamento */
    box-shadow: 0 6px 20px rgba(191, 84, 143, 0.4);
    outline: none; /* Rimuove bordo focus standard */
}

.avvisami-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(191, 84, 143, 0.3);
}

/* Stili per l'icona */
.avvisami-button-icon {
    margin-right: 8px; /* Spazio tra icona e testo */
    font-size: 1.2em; /* Rende l'icona leggermente più grande */
    line-height: 1;
    color: #ffffff !important; /* Forza bianco */
}

/* Stili per il testo */
.avvisami-button-text {
    line-height: 1;
     color: #ffffff !important; /* Forza bianco */
}

/* ===============================
   MODALE AVVISAMI E OVERLAY (GESTITI DA JS)
   =============================== */

/* Overlay dinamico aggiunto da JS */
.avvisami-modal-overlay-js {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important; /* Sfondo più scuro */
    z-index: 999998 !important; /* z-index molto alto */
    opacity: 0; /* Inizia trasparente */
    visibility: hidden; /* Inizia nascosto */
    transition: opacity 0.3s ease, visibility 0.3s ease !important; /* Transizione fluida */
}

/* Stato attivo per l'overlay (quando la modale è aperta) */
.avvisami-modal-overlay-js.active {
    opacity: 1 !important;
    visibility: visible !important;
}


/* Modale principale */
#avvisami-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9); /* Inizia leggermente rimpicciolita */
    background: #ffffff !important;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    max-width: 480px;
    width: 90%;
    z-index: 999999 !important; /* z-index PIÙ ALTO dell'overlay */
    opacity: 0; /* Inizia trasparente */
    visibility: hidden; /* Inizia nascosta */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important; /* Transizione fluida */
    overflow: hidden; /* Evita barre di scorrimento strane durante l'animazione */
    display: block !important; /* Sovrascrive display:none inline aggiunto da alcuni temi */
}

/* Stato attivo per la modale (quando è aperta) */
#avvisami-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important; /* Scala alla dimensione normale */
}


/* Stili interni della modale (header, body, ecc.) */
#avvisami-modal .avvisami-modal-content {
   max-height: 80vh; /* Limita altezza e abilita scroll se necessario */
   overflow-y: auto;
}

#avvisami-modal .avvisami-modal-header {
    background: #f1f1f1; /* Sfondo leggero per l'header */
    padding: 15px 20px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    border-radius: 8px 8px 0 0;
}

#avvisami-modal .avvisami-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

#avvisami-modal .avvisami-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 5px;
}
#avvisami-modal .avvisami-modal-close:hover {
    color: #333;
}


#avvisami-modal .avvisami-modal-body {
    padding: 20px 25px 30px 25px; /* Più padding nel corpo */
}

#avvisami-modal .avvisami-modal-body p { /* Stile per il paragrafo introduttivo */
    margin-bottom: 20px;
    color: #555;
    font-size: 15px;
}

#avvisami-modal .avvisami-form-group {
    margin-bottom: 15px;
}
#avvisami-modal label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
     color: #555;
     font-size: 14px; /* Dimensione etichetta */
}
#avvisami-modal input[type="email"] {
     width: 100%;
     padding: 12px; /* Più padding */
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box; /* Importante per padding corretto */
     font-size: 16px;
}
#avvisami-modal input[type="email"]:focus {
    border-color: #BF548F; /* Colore focus */
    box-shadow: 0 0 0 2px rgba(191, 84, 143, 0.2);
    outline: none;
}

 #avvisami-modal label.avvisami-checkbox-label {
    display: flex;
    align-items: center;
    font-weight: normal;
    font-size: 13px; /* Testo privacy più piccolo */
    color: #666;
    cursor: pointer;
    margin-top: 10px; /* Spazio sopra checkbox */
 }
 #avvisami-modal input[type="checkbox"] {
    margin-right: 8px;
    width: auto; /* Ripristina larghezza auto */
    flex-shrink: 0; /* Impedisce al checkbox di restringersi */
    position: relative; /* Per allineamento verticale */
    top: -1px;
 }

#avvisami-modal .avvisami-form-actions {
    margin-top: 25px; /* Più spazio sopra il pulsante */
    text-align: right;
}

#avvisami-modal .avvisami-submit-button {
    /* Usa lo stile del pulsante principale o uno simile */
    padding: 12px 25px;
    background: #BF548F;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 16px; /* Dimensione testo pulsante */
    font-weight: 600;
}
#avvisami-modal .avvisami-submit-button:hover {
    background: #D9A7C2;
}
#avvisami-modal .avvisami-submit-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}
#avvisami-modal .avvisami-loading { display: none; margin-left: 5px; } /* Nascondi per default */
#avvisami-modal .avvisami-submit-button:disabled .avvisami-loading { display: inline-block; } /* Mostra quando disabilitato */
#avvisami-modal .avvisami-submit-button:disabled .avvisami-submit-text { display: none; } /* Nascondi testo quando carica */


#avvisami-modal .avvisami-messages {
    margin-top: 15px;
    padding: 12px 15px; /* Più padding per messaggi */
    border-radius: 4px;
    display: none; /* Nascosto per default */
    font-size: 14px;
    line-height: 1.5;
}
#avvisami-modal .avvisami-messages.success {
    background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;
}
#avvisami-modal .avvisami-messages.error {
    background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
}

/* Reset base per compatibilità (opzionale ma utile) */
#avvisami-modal *, #avvisami-modal *:before, #avvisami-modal *:after {
    box-sizing: border-box;
}