/* --- CSS VARIABLES & RESET --- */
:root {
    --color-gold: #f0c646;
    --color-black: #0b2a3c;
    --color-dark-blue: #0b2a3c;
	--color-orange: #C9683F;
	--color-pale: #85a5c6;
    --color-white: #ffffff;
    --color-text-blue: #0b2a3c;
    --font-heading: 'Alice', serif;
	--font-subtitle: 'Exo 2', serif;
    --font-body: 'Noto Sans', sans-serif;
}

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

body {
    font-family: var(--font-body);
	font-size: 1.125rem;
    background-color: var(--color-white);
    color: var(--color-black);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* --- TYPOGRAPHY --- */
h1, h2, { font-family: var(--font-heading); color: var(--color-white); }
h2 { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1.2;}
h3 { font-family: var(--font-subtitle); color: var(--color-orange); font-style: italic;}
.gold-text { color: var(--color-gold); }
.pale-text { color: var(--color-pale); }

/* --- BUTTONS --- */
.btn {
    margin-top: 0.5rem;
	display: inline-block;
    padding: 15px 35px;
    background-color: var(--color-gold);
    color: var(--color-black);
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid var(--color-gold);
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.btn:hover {
    background-color: transparent;
    color: var(--color-gold);
}
.btn-outline {
    background-color: transparent;
    color: var(--color-black);
    border: 2px solid var(--color-black);
    margin-left: 10px;
}
.btn-outline:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* --- HEADER & NAV --- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: #2d3f73;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.logo img {
    height: 50px; /* Regola questo valore in base all'altezza del tuo logo */
    width: auto;  /* Mantiene le proporzioni corrette */
    display: block;
}

.nav-actions { display: flex; align-items: center; gap: 20px; }
.lang-switch { color: var(--color-white); cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.lang-switch span.active { color: var(--color-gold); border-bottom: 1px solid var(--color-gold); }

/* --- HERO SECTION --- */
/* --- HERO SECTION (Versione Desktop) --- */
.hero {
    height: 100vh;
    /* Qui carichiamo l'immagine ORIZZONTALE per PC */
    background: url('img/hero-desktop.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* (Opzionale) Effetto parallasse carino su desktop */
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

/* --- MEDIA QUERY PER MOBILE (L'Eccezione) --- */
@media (max-width: 768px) {
    .hero {
        /* Qui sovrascriviamo l'immagine con quella VERTICALE per Telefono */
        background: url('img/hero-mobile.png');
        
        /* Reimpostiamo la posizione per centrare bene il soggetto verticale */
        background-position: center bottom; 
        background-attachment: scroll; /* Su mobile meglio togliere il "fixed" per performance */
        
        /* Aggiustiamo l'altezza se serve (spesso su mobile serve meno spazio) */
        height: 100vh; 
    }
}
.hero-content { max-width: 800px; }
.hero h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; }
.hero h3 { font-size: 1.5rem; margin-bottom: 50px; }

/* --- TRUST SECTION (BMV) --- */
.trust-bar {
    background-color: var(--color-orange);
    padding: 40px 5%;
    text-align: center;
    border-bottom: 1px solid #C9683F;
}
.trust-content p { font-size: 1.5rem; letter-spacing: 1px; color: var(--color-text-blue); }
.trust-content strong { color: var(--color-white); }

/* --- CONCEPT SECTION --- */
.section { padding: 100px 5%; }
.concept { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.concept-img img { width: 80%; border-radius: 4px; }
.concept-text h2 { margin-bottom: 20px; }
.subtitle { font-family: var(--font-subtitle); color: var(--color-orange); font-style: italic;}

/* --- MINI GALLERY (Sotto il testo Concept) --- */

.concept-gallery {
    display: flex;       /* Mette le immagini una di fianco all'altra */
    gap: 15px;           /* Spazio tra le immagini */
    margin-top: 30px;    /* Distanza dal testo sopra */
    max-width: 200px;
	/*margin-left: auto; margin-right: auto;*/
}

.concept-gallery img {
    width: 100%;         /* Si adattano alla larghezza disponibile */
    aspect-ratio: 1 / 1; /* Le forza a diventare QUADRATE perfette */
    object-fit: cover;   /* Ritaglia l'immagine se necessario per riempire il quadrato (niente deformazioni) */
    border-radius: 4px;  /* Leggero arrotondamento angoli */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Ombra leggerissima elegante */
}

/* Effetto Hover: quando passi sopra col mouse */
.concept-gallery img:hover {
    transform: translateY(-5px); /* Si alza leggermente */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Mobile: Se lo schermo è molto piccolo, riduciamo un po' il gap */
@media (max-width: 768px) {
    .concept-gallery {
        gap: 10px;
    }
}

/* --- BUSINESS MODEL --- */
.business { background-color: var(--color-gold); text-align: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
.card {
    background: var(--color-dark-blue);
    padding: 40px 20px;
    border: 1px solid #333;
    transition: 0.3s;
}
.card:hover { transform: translateY(-10px); border-color: var(--color-gold); }
.card i { font-size: 2.5rem; color: var(--color-gold); margin-bottom: 20px; }
.card h3 { margin-bottom: 15px; font-size: 1.2rem; }
.card p { font-size: 1rem; color: var(--color-white); }

/* --- CONTACT FORM --- */
.contact { text-align: center; max-width: 700px; margin: 0 auto; }

.form-group { margin-bottom: 20px; text-align: left; }

/* Stile Base Campi (Input, Select, Textarea) */
input, select, textarea {
    width: 100%;
    padding: 15px;
    background: #fafafa;
    border: 1px solid #0b2a3c; /* Bordo Blu scuro */
    color: #0b2a3c;            /* Colore del testo SCRITTO dall'utente (Blu scuro pieno) */
    font-family: var(--font-body);
    margin-top: 5px;
    border-radius: 0; /* Rimuove arrotondamenti di default su iOS */
    appearance: none; /* Rimuove stili nativi browser per uniformità */
    -webkit-appearance: none;
}

/* --- GESTIONE PLACEHOLDER (Testo "fantasma") --- */

/* 1. Placeholder per Input e Textarea */
::placeholder {
    color: #0b2a3c; /* Blu scuro */
    opacity: 0.6;   /* Opacità al 60%: lo rende "sbiadito" rispetto al testo vero */
}

/* Supporto per vecchi browser Microsoft */
:-ms-input-placeholder { color: #0b2a3c; opacity: 0.6; }
::-ms-input-placeholder { color: #0b2a3c; opacity: 0.6; }

/* 2. Placeholder per la SELECT (Il trucco per renderla uguale agli altri) */
/* Quando la select è obbligatoria ma non è stata fatta una scelta (valore vuoto), 
   applico lo stesso colore/opacità del placeholder degli input */
select:required:invalid {
    color: #0b2a3c;
    opacity: 0.6;
}

/* Forza il colore pieno per le opzioni del menu a tendina (altrimenti su Windows restano sbiadite) */
option {
    color: #0b2a3c;
    background: white;
}


/* --- CHECKBOX GROUP --- */

/* Contenitore generale dei checkbox */
.checkbox-group {
    display: flex;
    flex-direction: column; /* Mette le righe una sotto l'altra */
    gap: 15px;              /* Spazio verticale tra le due opzioni */
    margin-bottom: 30px;
    text-align: left;
}

/* La singola riga (Checkbox + Testo) */
.check-row {
    display: flex;
    align-items: flex-start; /* Allinea il checkbox all'inizio del testo (utile se va a capo) */
    gap: 10px;               /* Spazio tra quadratino e testo */
}

/* Stile specifico per l'input checkbox */
.check-row input[type="checkbox"] {
    width: 20px;     /* Larghezza fissa per il quadratino */
    height: 20px;
    margin-top: 2px; /* Piccola correzione ottica per allinearlo al testo */
    cursor: pointer;
    border: 1px solid #0b2a3c; 
    background: white;
    /* Reimposta appearance per mostrare il checkbox custom */
    appearance: auto;
    -webkit-appearance: auto;
}

/* Stile del testo delle label */
.check-row label {
    font-size: 0.8rem;
    color: #0b2a3c; /* O var(--color-text-grey) se preferisci grigio */
    line-height: 1.4;
    cursor: pointer;
}

/* Colore del Link Privacy */
.check-row a {
    color: var(--color-gold);
    text-decoration: underline;
    font-weight: 600;
}
.check-row a:hover {
    color: #0b2a3c; /* Diventa blu scuro al passaggio del mouse */
}


/* --- FORM VALIDATION STYLES (Feedback utente) --- */

/* Quando l'utente clicca sul campo (FOCUS) */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-gold); /* Bordo Oro quando scrivi */
    background-color: #ffffff;       /* Sfondo diventa bianco puro */
}

/* (Opzionale) Se un campo è valido (compilato bene) -> Bordo Azzurro */
input:valid:not(:placeholder-shown) {
    border-color: #85a5c6;
}

/* (Opzionale) Se un campo è invalido -> Bordo Rosso (solo se non è il placeholder) */
input:invalid:not(:placeholder-shown) {
    border-color: #e53935;
}

/* --- FOOTER --- */
footer { background-color: #C9683F; padding: 50px 5%; text-align: center; font-size: 0.8rem; color: #ffffff; border-top: 1px solid #C9683F; }
.social-links { margin-bottom: 20px; }
.social-links a { margin: 0 10px; font-size: 1.2rem; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .concept { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .btn-outline { margin-top: 15px; margin-left: 0; display: block; width: 100%; }
    .btn { width: 100%; display: block; }
	.concept-gallery {
        flex-direction: column;  /* Mette le foto in colonna verticale */
        gap: 20px;               /* Più spazio tra una e l'altra */
    }

    .concept-gallery img {
        width: 100%;             /* Occupa tutta la larghezza */
        aspect-ratio: 4 / 3;     /* CONSIGLIO: Rendile rettangolari! */
                                 /* Se lasci 1/1 (quadrato) al 100% di larghezza, diventano altissime e occupano tutto lo schermo del telefono. 4/3 è più armonioso per le full-width. */
        object-fit: cover;
    }
}

/* --- REVENUE SECTION --- */
.revenue {
    padding: 80px 5%;
    background-color: #fafafa; /* Sfondo grigio chiarissimo per stacco */
    text-align: center;
}

.section-intro {
    max-width: 700px;
    margin: 20px auto 50px auto;
    font-size: 1.125 rem;
    color: var(--color-dark-blue);
}

/* Griglia delle Card */
.revenue-grid {
    display: grid;
    /* Crea colonne automatiche (minimo 300px larghezza) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: left; /* Il testo dentro le card è allineato a sinistra */
}

/* Stile della Singola Card */
.revenue-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 4px; /* Leggermente arrotondato */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Ombra leggera elegante */
    border-left: 4px solid var(--color-orange); /* La linea arancione laterale */
    transition: transform 0.3s ease;
}

.revenue-card:hover {
    transform: translateY(-5px); /* Si alza leggermente al mouseover */
}

/* Header dentro la Card (Orario + Titolo) */
.card-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.time-slot {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-pale);
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.revenue-card h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-dark-blue);
    font-family: var(--font-heading);
}

.revenue-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    margin-bottom: 10px;
}

.revenue-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* --- STILE SPECIALE RETAIL CARD (Fixed) --- */

/* Usiamo entrambe le classi attaccate per aumentare la priorità */
.revenue-card.retail-card {
    background-color: var(--color-orange) !important; /* Forza l'arancione */
    border-left: 4px solid var(--color-dark-blue);
}

/* Forza il colore bianco su tutti gli elementi dentro la card retail */
.revenue-card.retail-card .time-slot, 
.revenue-card.retail-card h3, 
.revenue-card.retail-card h4, 
.revenue-card.retail-card p {
    color: #ffffff !important;
}

.revenue-card.retail-card .card-header {
    border-bottom-color: rgba(255,255,255,0.2);
}

/* Effetto Hover specifico per la Retail Card */
.revenue-card.retail-card:hover {
    background-color: var(--color-dark-blue) !important; /* Diventa leggermente più scura all'hover */
}

/* --- THANK YOU PAGE STYLES --- */

.thank-you-section {
    height: 100vh; /* Occupa tutta l'altezza dello schermo */
    width: 100%;
    background-color: var(--color-bg-light); /* Sfondo grigio chiarissimo */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.thank-you-card {
    background: #ffffff;
    padding: 60px 40px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-width: 600px;
    width: 100%;
    border-top: 5px solid var(--color-brand-blue); /* Dettaglio Blu in alto */
}

/* Stile dell'icona check */
.icon-check {
    margin-bottom: 20px;
}
.icon-check svg {
    stroke: var(--color-gold); /* Usa la variabile Gold */
    width: 80px;
    height: 80px;
}

.thank-you-card h1 {
    font-family: var(--font-heading);
    color: var(--color-brand-blue);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.thank-you-card p {
    font-family: var(--font-body);
    color: var(--color-text-grey);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.thank-you-card .small-note {
    font-size: 0.9rem;
    margin-bottom: 40px;
    opacity: 0.8;
}

/* Adattamento Mobile */
@media (max-width: 768px) {
    .thank-you-card {
        padding: 40px 20px;
    }
    .thank-you-card h1 {
        font-size: 2rem;
    }
}