/* SITO_GIONA/static/css/04_calendar.css - Stili per Pagina Contatti V8 (Mobile-First Optimizations) */

/* --- Layout Generale e Wrapper --- */
.contact-content-wrapper {
    max-width: 1200px; /* Larghezza massima contenitore */
    margin: 0 auto; /* Centra */
    padding: 0 20px; /* Padding laterale */
    text-align: center; /* Centra testo introduttivo H2/P */
}

/* --- Griglia a Due Colonne (Desktop First) --- */
.contact-grid-affiancata {
    display: grid;
    /* Desktop default: Colonna sinistra (form) più larga */
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 40px; /* Spazio tra colonne */
    align-items: start; /* Allinea all'inizio verticalmente */
    text-align: left; /* Allinea testo a sinistra dentro le colonne */
    margin-top: 3rem; /* Spazio sopra la griglia */
}

/* --- Stile Riquadro Opaco Glassmorphism per ENTRAMBE le colonne --- */
.form-column,
.info-column {
    background-color: rgba(18, 18, 18, 0.4); /* Sfondo nero più opaco */
    border: 1px solid var(--color-glass-border); /* Bordo glass definito altrove */
    border-radius: 16px; /* Angoli arrotondati */
    padding: 35px; /* Padding interno (Desktop Base) */
    backdrop-filter: blur(10px); /* Effetto sfocatura sfondo */
    -webkit-backdrop-filter: blur(10px); /* Prefisso per Safari */
    /* Rimosso height: 100% per prevenire problemi di stretching non voluto su mobile */
    box-sizing: border-box; /* Include padding e border nel calcolo altezza/larghezza */
}

/* Titoli delle colonne (es. "Invia un Messaggio", "Contatti Diretti...") */
.column-title {
    font-size: 1.6rem;
    color: var(--color-neon-blue); /* Colore blu neon definito altrove */
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-glass-border);
    padding-bottom: 0.75rem;
    text-align: left;
    margin-top: 0; /* Rimuovi margine alto di default */
}

/* --- Stili Form di Contatto (Colonna Sinistra) --- */
.contact-form {
    padding: 0; /* Padding è sulla colonna */
    margin-top: 0;
    border: none;
    background: none;
    display: flex; /* Abilita flexbox per layout interno */
    flex-direction: column; /* Elementi in colonna */
    /* Rimosso height: 100% per prevenire problemi di stretching */
}

.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #b0b0b0; /* Grigio chiaro per label */
    margin-bottom: 8px;
    text-align: left;
}

/* Stili per tutti gli input e textarea del form */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="subject"],
.form-group textarea {
    width: 100%;
    padding: 14px 18px; /* Padding interno */
    font-family: inherit; /* Usa font del sito */
    font-size: 1rem;
    color: var(--color-text-light); /* Colore testo chiaro definito altrove */
    background-color: rgba(0, 0, 0, 0.3); /* Sfondo input scuro semi-trasparente */
    border: 1px solid var(--color-glass-border); /* Bordo glass */
    border-radius: 8px; /* Angoli input */
    box-sizing: border-box;
    transition: all 0.3s ease; /* Transizione focus */
}

/* Effetto Focus per input e textarea */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="subject"]:focus,
.form-group textarea:focus {
    outline: none; /* Rimuovi outline di default */
    border-color: var(--color-neon-blue); /* Bordo blu focus */
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.4); /* Glow blu focus */
    background-color: rgba(0, 0, 0, 0.4); /* Sfondo leggermente più scuro focus */
}

.form-group textarea {
    min-height: 140px; /* Altezza minima textarea */
    resize: vertical; /* Permetti resize verticale */
    flex-grow: 1; /* Fa espandere la textarea se c'è spazio nella flexbox */
}

/* Messaggi di Stato del Form (Successo/Errore) */
#form-status {
    margin-top: 20px;
    padding: 12px 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    font-size: 0.95rem;
    display: none; /* Nascosto di default */
    border-width: 1px;
    border-style: solid;
}
#form-status.success {
    background-color: rgba(0, 191, 255, 0.1);
    border-color: var(--color-neon-blue);
    color: var(--color-neon-blue);
}
#form-status.error {
    background-color: rgba(192, 96, 255, 0.1); /* Usa magenta per errore */
    border-color: var(--color-neon-magenta);
    color: var(--color-neon-magenta);
}

/* --- Stili Contatti Diretti (Colonna Destra) --- */
.contact-recap-list {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Spazio tra link contatti */
    margin-top: 20px;
}
.contact-detail-link {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    transition: color 0.3s, transform 0.3s;
    padding: 5px 0;
    /* AGGIUNTO: Impedisce al testo del link di rompere il layout orizzontale */
    overflow-wrap: break-word;
}
.contact-detail-link:hover {
    color: var(--color-neon-magenta); /* Colore magenta hover */
    transform: translateX(5px);
}
.contact-detail-link:hover .contact-icon {
    filter: drop-shadow(0 0 5px var(--color-neon-magenta)); /* Glow icona hover */
}
.contact-icon {
    width: 24px;
    height: 24px;
    color: var(--color-neon-blue); /* Colore icona blu */
    margin-right: 18px;
    flex-shrink: 0;
}
.contact-recap-text p {
    margin-top: 2rem;
    color: #ccc;
    line-height: 1.7;
}

/* --- Stili Sezione Bottone Prenotazione Link (Colonna Destra) --- */
.google-booking-section {
    margin-top: 35px; /* Aumentato spazio sopra */
    padding-top: 30px; /* Aumentato spazio sopra testo */
    border-top: 1px dashed var(--color-glass-border);
    text-align: left; /* Allinea a sinistra */
}
.google-booking-section p {
    color: #b0b0b0;
    margin-bottom: 15px; /* Spazio sotto testo */
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}

/* Stile Bottone/Link di Prenotazione (Azzurro Neon Piccolo) */
/* Applica stile base .cta-button e la variante .small */
.cta-button.small {
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
}
/* Stile specifico per il link di booking */
.booking-link.cta-button.small { /* Usa le classi .cta-button e .small */
    margin-top: 20px; /* Aumentato margine sopra per abbassarlo */
    /* Non serve aggiungere colore qui, usa il default blu di .cta-button */
}

/* ===================================== */
/* --- Media Queries per Responsività (Mobile-First Stacking) --- */
/* ===================================== */

@media (max-width: 900px) {
    /* Stack delle colonne */
    .contact-grid-affiancata {
        /* CRITICO: Forza la colonna singola per lo stacking su tablet/mobile */
        grid-template-columns: 1fr;
    }
    /* Spazio sotto la colonna del form quando stackata */
    .form-column {
        margin-bottom: 40px;
    }
    /* Padding ridotto per le colonne su tablet */
    .form-column,
    .info-column {
        padding: 30px;
    }
    /* Titoli più piccoli */
    .column-title {
        font-size: 1.4rem;
    }
    /* Testo contatti leggermente più piccolo */
    .contact-recap-list a {
        font-size: 0.95rem;
    }
    /* Icone contatti leggermente più piccole */
    .contact-icon {
        width: 22px;
        height: 22px;
        margin-right: 15px;
    }
}

@media (max-width: 768px) {
    /* Padding laterale di sicurezza per il contenuto su mobile */
    .contact-content-wrapper {
        padding: 0 4vw; /* Uso di VW per padding flessibile */
    }
    /* Padding colonne ancora minore su mobile */
    .form-column,
    .info-column {
        padding: 25px;
    }
    /* Riduci padding input su mobile */
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="subject"],
    .form-group textarea {
        padding: 12px 15px;
    }
}

/* --- Rimosse tutte le regole CSS obsolete --- */
/* (relative a .custom-calendar-*, .calendar-day, .slot-*, etc.) */