/* Stili specifici di contatti.php.
   Estratto il 2026-08-25 dal blocco inline nella pagina. */

.hero-wrapper { background: url('/assets/img/hero-contatti.webp') center center / cover no-repeat; position: relative; }

        .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }

        .contact-info { position: sticky; top: 120px; }
        .contact-info h2 { font-size: 2rem; color: var(--secondary); margin-bottom: 16px; }
        .contact-info > p { color: var(--text-light); font-size: 1.1rem; margin-bottom: 40px; line-height: 1.8; }

        .contact-cards { display: flex; flex-direction: column; gap: 20px; }
        .contact-card { display: flex; align-items: flex-start; gap: 20px; padding: 24px; background: var(--white); border-radius: 16px; box-shadow: var(--shadow); border: 1px solid var(--gray-100); transition: all 0.3s; }
        .contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
        .contact-card-icon { width: 56px; height: 56px; background: linear-gradient(135deg, rgba(252, 179, 33, 0.2) 0%, rgba(252, 179, 33, 0.1) 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .contact-card-icon svg { width: 28px; height: 28px; stroke: var(--primary-dark); }
        .contact-card-content h4 { font-size: 1.1rem; color: var(--secondary); margin-bottom: 4px; }
        .contact-card-content p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 8px; }
        .contact-card-content a { color: var(--secondary); font-weight: 600; font-size: 1.05rem; transition: color 0.3s; }
        .contact-card-content a:hover { color: var(--primary); }

        .contact-social { margin-top: 40px; }
        .contact-social h4 { font-size: 1.1rem; color: var(--secondary); margin-bottom: 16px; }
        .contact-social-links { display: flex; gap: 12px; }
        .contact-social-links a { width: 52px; height: 52px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--text); transition: all 0.3s; }
        .contact-social-links a:hover { background: var(--primary); border-color: var(--primary); color: var(--secondary); transform: translateY(-3px); }

        .contact-form-wrapper { background: var(--white); border-radius: 24px; padding: 48px; box-shadow: var(--shadow-lg); border: 1px solid var(--gray-100); }
        .contact-form-wrapper h3 { font-size: 1.5rem; color: var(--secondary); margin-bottom: 8px; }
        .contact-form-wrapper > p { color: var(--text-light); margin-bottom: 32px; }

        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--secondary); margin-bottom: 8px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 16px 20px; border: 2px solid var(--gray-200); border-radius: 12px; font-family: 'Lato', sans-serif; font-size: 1rem; color: var(--text); transition: all 0.3s; background: var(--white); }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(252, 179, 33, 0.1); }
        .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-light); }
        .form-group textarea { min-height: 150px; resize: vertical; }
        .form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 20px; }

        .form-checkbox { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
        .form-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }
        .form-checkbox label { font-size: 0.9rem; color: var(--text-light); line-height: 1.5; cursor: pointer; }
        .form-checkbox label a { color: var(--primary); text-decoration: underline; }

        .btn-primary { width: 100%; justify-content: center; }

        .map-section { padding: 0; }
        .map-container { width: 100%; height: 400px; background: var(--gray-100); }
        .map-container iframe { width: 100%; height: 100%; border: none; filter: grayscale(20%); }

        @media (max-width: 1024px) {
            .contact-grid { grid-template-columns: 1fr; gap: 40px; }
            .contact-info { position: static; }
            .form-row { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .contact-form-wrapper { padding: 32px 24px; }
        }

        @media (max-width: 480px) {
            .contact-social-links a { width: 46px; height: 46px; }
        }