/* =========================================

   1. RESET E VARIABILI

   ========================================= */

:root {

    --primary-color: #5A3A54;    /* Melanzana Polveroso */

    --primary-hover: #452C40;    /* Melanzana scuro */

    --secondary-color: #E6DFD4;  /* Beige sabbia */

    --accent-light: #F2EDF4;     /* Grigio-lilla */

    --text-dark: #4A454A;        /* Grigio-marrone */

    --font-heading: 'Playfair Display', serif;

    --font-body: 'Lato', sans-serif;

}



* { margin: 0; padding: 0; box-sizing: border-box; }



body {

    font-family: var(--font-body);

    color: var(--text-dark);

    line-height: 1.6;

    background-color: #FAF9FA;

    font-weight: 300;

}



h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--primary-color); font-weight: 400; }

a { text-decoration: none; color: inherit; transition: 0.3s; }

ul { list-style: none; }



/* =========================================

   2. LAYOUT E HEADER

   ========================================= */

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.section-padding { padding: 60px 0; }

.bg-light { background-color: var(--accent-light); }

.center-title { text-align: center; margin-bottom: 40px; font-size: 2.2rem; }



header {

    background: #ffffff;

    box-shadow: 0 2px 5px rgba(90, 58, 84, 0.1);

    padding: 20px 0;

}

header .container { display: flex; justify-content: space-between; align-items: center; }

header h1 { font-size: 1.5rem; }

header nav ul { display: flex; gap: 20px; font-size: 0.95rem; }



.dark-header { background-color: var(--primary-color); color: white; }

.dark-header h1, .dark-header a { color: white; }



/* =========================================

   3. SWITCH LINGUE (VERSIONI LIGHT E DARK)

   ========================================= */

.lang-switch, .lang-switch-dark {

    display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: bold; margin-left: 20px;

}



/* Versione Index (Sfondo Bianco) */

.lang-switch a { color: #999; padding: 4px 10px; border-radius: 4px; }

.lang-switch span { color: #ddd; }

.lang-switch a.active-lang { background-color: var(--primary-color); color: white !important; }



/* Versione Appartamento (Sfondo Viola) */

.lang-switch-dark a { color: rgba(255, 255, 255, 0.3) !important; padding: 4px 10px; border-radius: 4px; }

.lang-switch-dark span { color: rgba(255, 255, 255, 0.1); }

.lang-switch-dark a.active-lang { background-color: white; color: var(--primary-color) !important; }



/* =========================================

   4. HERO, BOTTONI E CARD

   ========================================= */

.hero {

    background: linear-gradient(rgba(70, 45, 65, 0.6), rgba(70, 45, 65, 0.6)), url("https://media.istockphoto.com/id/513906137/nl/foto/tuscany-seen-from-the-walls-of-montepulciano-i.jpg?s=612x612&w=0&k=20&c=ozszbwN5t8whUHIeTGPakwN6DRe8QqwZBXLVd14vdL4=");

    background-size: cover; background-position: center; height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white;

}

.hero h2 { color: white; font-size: 3.2rem; font-weight: 300; }



.btn { display: inline-block; background: var(--primary-color); color: white !important; padding: 10px 25px; border-radius: 5px; border: none; cursor: pointer; }

.btn-outline { padding: 8px 20px; border-radius: 5px; border: 1px solid var(--primary-color); color: var(--primary-color); display: inline-block; margin-top: 10px; }

.btn-outline:hover { background: var(--primary-color); color: white; }

.full-width { width: 100%; text-align: center; }



.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.card img { width: 100%; height: 200px; object-fit: cover; }

.card-body { padding: 20px; text-align: center; }



/* =========================================

   5. CAROSELLO E DETTAGLI APPARTAMENTO

   ========================================= */

.carousel-container {

    position: relative; width: 100%; max-width: 800px; height: 500px; margin: 0 auto 40px; overflow: hidden; border-radius: 8px; background-color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.08);

}

.carousel-slide { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }

.carousel-slide img { width: 100%; height: 100%; object-fit: contain; flex-shrink: 0; background-color: #fff; }

.carousel-prev, .carousel-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(90, 58, 84, 0.7); color: white; border: none; padding: 15px; cursor: pointer; border-radius: 50%; z-index: 10; }

.carousel-next { right: 10px; } .carousel-prev { left: 10px; }



/* --- SEZIONE PREZZI (RESTURATA) --- */

.apt-details-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 30px; }

.price-box { background: #ffffff; border: 1px solid var(--secondary-color); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.price { font-size: 1.8rem; font-weight: 400; color: var(--primary-color); }

.per-night { font-size: 1rem; color: #666; font-weight: 300; }

.extra-info { margin-bottom: 5px; font-size: 0.9rem; }

.small { font-size: 0.85rem; color: #777; margin-bottom: 10px; display: block; }



/* =========================================

   6. POPUP CONTATTI (STILE GMAIL + VIOLA)

   ========================================= */

.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 10000; }

.popup-content { background: white; padding: 35px; border-radius: 12px; max-width: 450px; width: 90%; text-align: center; position: relative; }



/* Bottone Gmail */

.contact-method-btn {

    display: flex; align-items: center; justify-content: center; gap: 10px; background: #f1f3f4; color: #3c4043;

    padding: 15px; text-decoration: none; border-radius: 8px; font-weight: bold; margin: 20px auto; border: 1px solid #dadce0; width: 100%;

}



/* Box Email Copy */

.copy-email-box { display: flex; justify-content: center; margin-top: 15px; }

.copy-email-box input { flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 6px 0 0 6px; font-size: 0.9rem; outline: none; }

.copy-email-box button { background: var(--primary-color); color: white; border: none; padding: 12px 20px; border-radius: 0 6px 6px 0; cursor: pointer; font-weight: bold; white-space: nowrap; }

.copy-email-box button:hover { background: var(--primary-hover); }



.close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #333; }



/* =========================================

   7. FOOTER, COOKIE E MEDIA QUERIES

   ========================================= */

footer { background: var(--primary-color); color: white; text-align: center; padding: 30px 0; margin-top: 50px; }

footer a { color: white; text-decoration: underline; }



.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: white; padding: 20px; z-index: 9999; display: none; border-top: 3px solid var(--primary-color); box-shadow: 0 -4px 10px rgba(0,0,0,0.1); }



@media (max-width: 768px) {

    header .container { flex-direction: column; gap: 15px; }

    .lang-switch, .lang-switch-dark { margin-left: 0; margin-top: 10px; justify-content: center; width: 100%; }

    .hero h2 { font-size: 2rem; }

    .carousel-container { height: 300px; }

    .apt-details-grid { grid-template-columns: 1fr; }

    .copy-email-box { flex-direction: column; }

    .copy-email-box input, .copy-email-box button { border-radius: 6px; width: 100%; }

}