/* CONTATTI PAGE */

.page-hero {
    height: 35vh; min-height: 300px; width: 100%;
    background: url('../../foto/contatti/header.jpg') no-repeat center center/cover;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.page-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.page-hero h1, .page-hero h2 {
    position: relative; z-index: 2;
    font-family: var(--font-title);
    font-size: var(--fs-page-h1);
    color: #fff; text-shadow: 0 5px 15px rgba(0,0,0,0.5);
    padding: 0 20px; text-align: center;
}

.contact-section { padding: 80px 40px; max-width: 1400px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }

.info-col h2 {
    color: var(--gold);
    font-family: var(--font-title);
    font-size: clamp(1.4rem, 1.5vw + 0.8rem, 1.8rem);
    margin-bottom: 20px;
}
.info-item { display: flex; gap: 20px; margin-bottom: 25px; align-items: flex-start; }
.info-icon { font-size: 1.2rem; color: var(--gold); margin-top: 5px; }
.info-text h4 { font-size: 1rem; margin-bottom: 5px; font-family: var(--font-title); color: #fff; }
.info-text p, .info-text a { color: #ccc; font-size: 0.95rem; line-height: 1.6; }
.info-text a:hover { color: var(--gold); }

.btn-whatsapp {
    display: inline-flex; align-items: center; gap: 12px;
    background: #25D366; color: #fff; padding: 16px 30px;
    border-radius: 8px; font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; margin-top: 30px;
    transition: 0.3s; width: 100%; justify-content: center;
}
.btn-whatsapp:hover {
    background: #1ebe57; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(37,211,102,0.3);
}
.btn-whatsapp i { font-size: 1.4rem; }

.map-container {
    width: 100%; height: 300px; margin-top: 30px;
    border: 1px solid var(--gold); border-radius: 4px;
    overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: 0.3s;
}
.map-container:hover { box-shadow: 0 6px 25px rgba(197,160,89,0.25); }
.map-container iframe { width: 100%; height: 100%; border: 0; }

.form-box { background: var(--light-dark); padding: 40px; border: 1px solid #333; }
.form-box h3 {
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 1vw + 0.8rem, 1.5rem);
    margin-bottom: 10px; color: #fff;
}
.form-group { margin-bottom: 20px; }
.form-group label {
    display: block; color: var(--gold);
    font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px;
}
.form-input {
    width: 100%; background: transparent; border: none;
    border-bottom: 1px solid #444;
    padding: 10px 0; color: #fff;
    font-family: var(--font-body); font-size: 1rem;
    outline: none; transition: 0.3s;
    min-height: 44px;
}
.form-input:focus { border-bottom-color: var(--gold); }
textarea.form-input { resize: vertical; min-height: 80px; }

.btn-submit {
    background: var(--gold); color: var(--dark); border: none; width: 100%;
    padding: 16px 0; font-size: 0.9rem;
    text-transform: uppercase; letter-spacing: 2px; font-weight: 700;
    cursor: pointer; margin-top: 10px;
    transition: all 0.3s ease;
    min-height: 44px;
}
.btn-submit:hover {
    background: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(197,160,89,0.25);
}

.form-success[hidden] { display: none !important; }
.form-success {
    background: linear-gradient(135deg, rgba(197,160,89,0.15), rgba(197,160,89,0.05));
    border: 1px solid var(--gold);
    padding: 20px 24px; margin-bottom: 25px;
    color: #fff; border-radius: 6px;
    display: flex; flex-direction: column; gap: 6px;
    animation: fadeIn 0.6s ease;
    box-shadow: 0 8px 30px rgba(197,160,89,0.2);
}
.form-success strong { color: var(--gold-bright); font-family: var(--font-title); letter-spacing: 2px; }

.booking-direct {
    margin-top: 30px; text-align: center;
    border-top: 1px solid #333; padding-top: 20px;
}
.booking-direct a {
    color: var(--gold); font-family: var(--font-title);
    font-weight: bold; font-size: 1rem;
    border-bottom: 1px solid var(--gold);
}
.booking-direct a:hover { color: var(--gold-soft); }

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-section { padding: 60px 20px; }
    .form-box { padding: 30px 22px; }
}

@media (max-width: 480px) {
    .contact-section { padding: 40px 16px; }
    .form-box { padding: 24px 16px; }
}