/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/
/*
Theme Name: Nome del Mio Tema Child
Template: nome-del-tema-parent
Description: Un tema child personalizzato per il Tema Parent.
Version: 1.0.0
Author: Il Tuo Nome
Text Domain: your-theme-textdomain // Assicurati che questo corrisponda a quello usato nel PHP
*/

/* ===================================================================
   CSS per il Modale di Richiesta Informazioni
   DA INSERIRE NEL FILE style.css DEL TUO TEMA CHILD
   =================================================================== */

.custom-modal-overlay {
    /* Nascosto di default. Verrà mostrato con il JavaScript aggiungendo la classe 'is-visible'. */
    display: none;
    position: fixed; /* Rimane fisso anche durante lo scroll */
    z-index: 9999; /* Alto valore per essere sicuro che sia sopra gli altri elementi */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Aggiunge scroll se il contenuto è troppo lungo */
    background-color: rgba(0,0,0,0.7); /* Overlay scuro e semi-trasparente */
    /* Usa flexbox per centrare il contenuto */
    display: flex; /* Già flexbox qui, ma display: none lo nasconde. Verrà cambiato in flex con JS. */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    /* Transizione opzionale per un effetto smooth */
    transition: opacity 0.3s ease-in-out;
    opacity: 0; /* Inizia trasparente per la transizione */
    pointer-events: none; /* Non interagibile quando invisibile */
}

/* Stato visibile del modale */
.custom-modal-overlay.is-visible {
    opacity: 1; /* Rendi visibile */
    pointer-events: auto; /* Rendi interagibile */
}


.custom-modal-content {
    background-color: #fefefe; /* Sfondo bianco per il contenuto */
    padding: 30px; /* Spazio interno */
    border: 1px solid #888;
    width: 90%; /* Larghezza base */
    max-width: 600px; /* Larghezza massima */
    position: relative; /* Necessario per posizionare il pulsante di chiusura */
    box-shadow: 0 5px 15px rgba(0,0,0,.5); /* Ombra */
    border-radius: 8px; /* Angoli arrotondati */
    box-sizing: border-box; /* Include padding e border nella larghezza/altezza */

    /* Animazione apertura (opzionale, potrebbe essere gestita anche via JS) */
    /* animation-name: animatetop; */
    /* animation-duration: 0.4s; */
}

/* Animazione di scivolamento dall'alto (opzionale) */
/*
@keyframes animatetop {
    from { top: -300px; opacity: 0 }
    to { top: 0; opacity: 1 }
}
*/


.custom-modal-close {
    color: #aaa;
    float: right; /* Posiziona a destra */
    font-size: 30px; /* Dimensione della X */
    font-weight: bold;
    position: absolute; /* Posiziona rispetto al contenitore del modale */
    top: 10px;
    right: 15px;
    cursor: pointer; /* Indica che è cliccabile */
    transition: color 0.3s ease; /* Transizione colore al passaggio del mouse */
}

.custom-modal-close:hover,
.custom-modal-close:focus {
    color: #333; /* Cambia colore al passaggio del mouse */
    text-decoration: none;
}

/* Stili per il titolo dentro il modale */
.custom-modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 24px;
    color: #333;
}

/* Stili per la sezione info prodotto nel modale */
#product-info-in-modal {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 16px;
    color: #555;
}

#product-info-in-modal strong {
    color: #0073aa; /* Colore di esempio per il nome prodotto */
    font-weight: bold;
}

/* Stili per l'immagine prodotto dentro il modale (se la usi) */
/*
#modal-product-image {
    display: block; // O inline-block a seconda del layout desiderato
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: #fff;
}
*/

/* Stili per il wrapper del modulo Contact Form 7 */
.modal-contact-form-7-wrapper {
    /* Potresti voler aggiungere padding o margini qui */
}

/* Stili per il form Contact Form 7 stesso all'interno del modale */
/* Le classi specifiche di CF7 (es. .wpcf7-form) possono essere targettate qui per stilizzare gli input, label, submit, ecc. */
.custom-modal-content .wpcf7-form {
    /* Esempio: */
    /* label { display: block; margin-bottom: 10px; } */
    /* input[type="text"], input[type="email"], textarea { width: 100%; padding: 8px; margin-bottom: 15px; border: 1px solid #ccc; box-sizing: border-box; } */
    /* input[type="submit"] { background-color: #0073aa; color: white; padding: 10px 20px; border: none; cursor: pointer; } */
}


/* Rendi il modale responsive su schermi piccoli */
@media (max-width: 768px) {
    .custom-modal-content {
        width: 95%;
        padding: 20px;
    }
}