/* ===============================
   RESET E STILI BASE
   =============================== */

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

body, html {
    margin: 0;
    padding: 0;
    scroll-behavior: auto;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* Evita scroll orizzontale */
}

/* ===============================
   BURGER MENU
   =============================== */
#burger {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    background: #df6270;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
}
#burger .lines {
    position: relative;
    width: 28px;
    height: 20px;
}
#burger .line {
    position: absolute;
    left: 0;
    width: 28px;
    height: 3px;
    background: white;
    transition: 0.35s ease;
    transform-origin: center;
}
#burger .line:nth-child(1) { top: 0px; }
#burger .line:nth-child(2) { top: 8.5px; }
#burger .line:nth-child(3) { top: 17px; }
#burger.active .line:nth-child(1) {
    top: 8.5px;
    transform: rotate(45deg);
}
#burger.active .line:nth-child(2) {
    opacity: 0;
}
#burger.active .line:nth-child(3) {
    top: 8.5px;
    transform: rotate(-45deg);
}

/* ===============================
   POPUP MENU
   =============================== */
#menuPopup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(48, 157, 164, 0.95);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.4s ease;
    z-index: 900;
    overflow-y: auto; /* <-- permette scroll verticale se necessario */
    padding: 40px 20px; /* aggiunge margine interno */
}
#menuPopup.active {
    opacity: 1;
    pointer-events: auto;
}
#menuPopup a {
    color: white;
    font-size: 2rem;
    margin: 15px 0;
    text-decoration: none;
    cursor: pointer;
}

/* ===============================
   SEZIONI GENERALI
   =============================== */
section {
    padding: 60px 20px;
    margin: 0;
    box-sizing: border-box;
}

#home img {
    width: 100%;
    height: auto;
    display: block;
}

#home-extra {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;	
}

#home-extra img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===============================
   SEZIONI CASA E SERVIZI
   =============================== */
.section-casa, .section-servizi { color: white; }
.section-privacy-policy { background-color: #F6EEB0; color: #323232; }
.section-casa { background-color: #2f8f4e; }
.section-servizi { background-color: #3498db; }
.section-casa .content, .section-servizi .content, .section-privacy-policy .content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.section-casa h2, .section-servizi h2, .section-privacy-policy h2 {
    font-size: 3.8rem;
    margin-bottom: 20px;
}
.section-privacy-policy h3 {
    font-size: 2.5rem;
    line-height: 1.6;
    margin-bottom: -20px;
}
.section-casa p, .section-servizi p, .section-privacy-policy p {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 15px;
}
.section-privacy-policy p.extra {
	margin-top: -10px;
}
.section-casa .strong, .section-servizi .strong, .section-privacy-policy .strong {
    font-weight: bold;
}

.section-casa a {
	font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: white;
    text-decoration: underline;
    font-weight: bold;
}

/* ===============================
   SEZIONE DOCUMENTI PDF
   =============================== */
.section-documenti {
    background-color: #e74c3c;
    color: white;
    padding: 60px 20px;
}
.section-documenti .content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}
.section-documenti h2 {
    font-size: 3.8rem;
    margin-bottom: 20px;
}
.section-documenti p {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 15px;
}
.section-documenti ul {
    list-style: none;
    padding: 0;
}
.section-documenti li {
    margin-bottom: 15px;
}
.section-documenti a {
    font-size: 1.5rem;   /* stessa dimensione dei paragrafi */
    font-weight: bold;   /* opzionale, per uniformità */
    text-decoration: underline;
    color: white;
}


/* ===============================
   TITOLI “SCOTCH”
   =============================== */
.scotch {
    display: inline-block;
    padding: 10px 25px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    position: relative;
    margin-bottom: 30px;
    transform: rotate(-1deg);
}
.scotch::before,
.scotch::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 100%;
    top: 0;
    background: rgba(255,255,255,0.25);
}
.scotch::before { left: -12px; transform: rotate(-3deg); }
.scotch::after { right: -12px; transform: rotate(3deg); }
.scotch-privacy-policy {
    display: inline-block;
    padding: 10px 25px;
    background: rgba(12, 41, 11, 0.75);
    color: white;
    position: relative;
    margin-bottom: 30px;
    transform: rotate(-1deg);
}
.scotch-privacy-policy::before,
.scotch-privacy-policy::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 100%;
    top: 0;
    background: rgba(12,41,11,0.85);
}
.scotch-privacy-policy::before { left: -12px; transform: rotate(-3deg); }
.scotch-privacy-policy::after { right: -12px; transform: rotate(3deg); }

/* ===============================
   ALTRE SEZIONI
   =============================== */
/* Footer */
#footer {
    width: 100%;
    min-height: 150px;
    background-color: #5d2f6e;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
	font-size: 1rem;
    line-height: 1.5;
    color: white;
}

#footer .footer-privacy {
    margin-bottom: 15px;
    text-align: center;
}

#footer .footer-privacy a {
    color: #fff;
	font-weight: bold;
    text-decoration: underline;
}

#footer .footer-privacy a:hover {
    text-decoration: none;
}

#footer .footer-copy {
    text-align: center;
    line-height: auto;
    margin: 0;
    color: #fff;
}

@media (max-width: 768px) {	
    #footer {
		font-size: 0.9rem;
		line-height: 1.4;
	}
}

.info-pdf {
    margin-top: 20px;
    font-size: 1rem;
}
.info-pdf a {
    color: white;
    text-decoration: underline;
    font-weight: bold;
}

/* ===============================
   SCROLLBAR
   =============================== */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background-color: #7dba45; border-radius: 6px; border: 3px solid #f0f0f0; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: #7dba45; }

* { scrollbar-width: thin; scrollbar-color: #7dba45 #f0f0f0; }

/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width: 768px) {
    section { padding: 40px 15px; }
    .section-casa h2, .section-servizi h2, .section-documenti h2, .section-privacy-policy h2 { font-size: 2.2rem; padding: 8px 18px; }
	.section-privacy-policy h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: -10px;}
    .section-casa p, .section-casa a, .section-servizi p, .section-documenti p, .section-documenti a, .section-privacy-policy p { font-size: 1.2rem; line-height: 1.6; }
    .scotch { transform: rotate(0deg); }
    .scotch::before, .scotch::after { width: 18px; }
	.scotch-privacy-policy { transform: rotate(0deg); }
    .scotch-privacy-policy::before, .scotch-privacy-policy::after { width: 18px; }
}

/* ===============================
   SEZIONE STRUTTURA / GALLERY
   =============================== */
#gallery { background: #ccc; }


/* ===============================
   CORREZIONE MOBILE
   =============================== */
* {
    box-sizing: border-box; /* Assicura che padding e border non causino overflow */
}

body, html {
    overflow-x: hidden; /* Previene scroll orizzontale */
}

@media (max-width: 768px) {
    section {
        padding-left: 20px;   /* più spazio a sinistra */
        padding-right: 20px;  /* più spazio a destra */
        overflow-x: hidden;   /* evita overflow da elementi interni */
    }

    .section-casa .content,
    .section-servizi .content,
    .section-documenti .content,
	.section-privacy-policy .content,
    #gallery .content {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        width: 100%;
    }

    img, video {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .scotch {
        transform: rotate(0deg);
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }

    .scotch::before,
    .scotch::after {
        display: none; /* evita effetti che potrebbero generare overflow */
    }
	
	.scotch-privacy-policy {
        transform: rotate(0deg);
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }

    .scotch-privacy-policy::before,
    .scotch-privacy-policy::after {
        display: none; /* evita effetti che potrebbero generare overflow */
    }
	
}

/* SEZIONE I NOSTRI SPAZI */
#gallery {
    background-color: #E67E22; /* giallo */
    color: white;              /* testo bianco */
}

/* GRID IMMAGINI */
#gallery .gallery-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* massimo 2 immagini per riga */
    gap: 20px;
    margin-top: 40px;
}

#gallery .gallery-images img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}

/* RESPONSIVE MOBILE */
@media (max-width: 768px) {
    #gallery .gallery-images {
        grid-template-columns: 1fr; /* 1 immagine per riga su mobile */
        gap: 15px;
    }
}


/* ===============================
   SEZIONE CONTATTI (LILLA)
   =============================== */

/* Override del blu di .section-servizi */
#contatti.section-servizi {
    background-color: #9272c0;
    color: #fff;
}

/* Layout */
#contatti .contatti-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
}

/* Colonna sinistra */
#contatti .contatti-info {
    flex: 1;
}

#contatti .contatti-info p {
    margin-bottom: 20px;
    line-height: 1.6;
}

#contatti .contatti-info a {
    color: #fff;
    text-decoration: none;
}

#contatti .contatti-info a:hover {
    text-decoration: underline;
}

/* ===============================
   FORM CONTATTI
   =============================== */

#contatti .contatti-form-container {
    flex: 1;
}

#contatti #contactForm {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(6px);
    padding: 30px;
    border-radius: 18px;
}

#contatti .form-title {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
}

#contatti .form-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #fff;
    margin-top: 6px;
    transition: width 0.3s ease;
}

#contatti .form-title:hover::after {
    width: 100%;
}

/* Aumenta la dimensione del checkbox */
#privacyCheck {
    transform: scale(1.5);  /* Aumenta la dimensione di 1.5 volte */
    -webkit-transform: scale(1.5);  /* Per compatibilità con Safari */
    margin-right: 10px;  /* Aggiungi un po' di spazio a destra, se necessario */
    cursor: pointer;  /* Cambia il cursore al passaggio sopra */
}


/* Input */
#contatti #contactForm input,
#contatti #contactForm textarea {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 15px;
    font-size: 15px;
    border-radius: 25px;
    border: none;
    background: rgba(255,255,255,0.95);
}

#contatti #contactForm textarea {
    min-height: 120px;
    resize: vertical;
    border-radius: 18px;
}

#contatti #contactForm input::placeholder,
#contatti #contactForm textarea::placeholder {
    color: #555;
}

/* Privacy */
#contatti .privacy-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

#contatti .privacy-right {
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
}

#contatti .privacy-right a {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

/* Bottone */
#contatti #contactForm button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 25px;
    background: #fff;
    color: #7a4fd9;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
}

#contatti #contactForm button:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

/* Errori */

#contatti #formErrors {
    display: none;
    margin-bottom: 20px;
    padding: 18px 22px;
    background-color: #ffffff; /* bianco */
    color: #d93025; /* rosso errori Google-style */
    border-radius: 14px;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* leggerissima profondità */
}

/* Mantieni buona spaziatura tra le righe di errore */
#contatti #formErrors br {
    margin-bottom: 6px;
    display: block;
}

/* Success */
#contatti .success-box {
    display: none;
    background: #7a4fd9;
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 40px 30px;
    border-radius: 18px;
}

/* ===============================
   RESPONSIVE CONTATTI
   =============================== */
@media (max-width: 1024px) {
    #contatti .contatti-wrapper {
        flex-direction: column;
        gap: 30px;
    }
}


/* ===============================
   MODAL PRIVACY
   =============================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);  /* Sfondo scuro con trasparenza */
    z-index: 3000;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards; /* Animazione di entrata */
}

.modal-content {
    background: #fff;
    color: #333;
    max-width: 600px;
    margin: 10% auto;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2); /* Ombra soft */
    max-height: 60vh;
    overflow-y: auto;
    /* Rimosso border-radius per angoli quadrati */
    transform: translateY(-30px);
    animation: slideIn 0.5s ease-out forwards;
}

/* Media query per dispositivi con larghezza inferiore a 768px in modalità portrait */
@media (max-width: 768px) and (orientation: portrait) {
    .modal-content {
        max-height: 80vh;  /* Imposta max-height a 80vh in portrait */
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slideIn {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.modal-content h3 {
    margin-top: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-content p {
    font-size: 1rem;
    line-height: 1.5;
}

.modal-content p.first {
    margin-top: -15px;
}

/* Bottone chiusura - cerchio bianco e X bianca */
#closePrivacy {
    position: fixed;  /* Posizionato fuori dal .modal-content */
    top: 20px;         /* Distanza dal bordo superiore */
    right: 20px;       /* Distanza dal bordo destro */
    width: 55px;        /* Aumentato il diametro */
    height: 55px;       /* Aumentato il diametro */
    border-radius: 50%; /* Cerchio */
    background-color: #fff;  /* Cerchio bianco */
    color: #28a745;          /* Colore della X */
    font-size: 30px;         /* Aumentato la dimensione della X */
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3001; /* Deve rimanere sopra al modal */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Aggiunta ombra leggera */
}

/* Cambia colore del cerchio quando ci si passa sopra */
#closePrivacy:hover {
    background-color: #f8f9fa;  /* Cambia a un bianco più chiaro quando hover */
}

/* X (simbolo della chiusura) */
#closePrivacy::before,
#closePrivacy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;        /* Aumentato per una X più grande */
    height: 4px;        /* Aumentato per una X più visibile */
    background: #28a745; /* Colore verde per la X */
    border-radius: 2px;
    transform-origin: center;
}

/* Ruotiamo le linee per formare una X */
#closePrivacy::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#closePrivacy::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* CONTATTI - ALLINEAMENTO DESKTOP COME ALTRE SEZIONI */
@media (min-width: 769px) {

    #contatti .contatti-wrapper {
        width: 100%;
        max-width: 1100px; /* stessa larghezza delle altre */
        margin: 0 auto;
    }

    #contatti .contatti-info,
    #contatti .contatti-form-container {
        flex: 0 0 50%; /* colonne vere al 50% */
    }
}

/* PADDING DESTRO FORM – SOLO TABLET */
@media (min-width: 769px) and (max-width: 1024px) {

    #contatti .contatti-form-container {
        padding-right: 20px;
    }

}

@media (max-width: 768px) {
    .modal-content {
        margin: 10% 20px; /* margine verticale 10%, orizzontale 20px */
        padding: 20px;    /* padding interno ridotto */
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    #menuPopup {
        justify-content: flex-start; /* allinea link dall’alto */
        padding-top: 60px;           /* lascia un po’ di spazio sopra */
    }
    #menuPopup a {
        font-size: 1.6rem;           /* eventualmente ridurre leggermente il font */
        margin: 10px 0;
    }
}

/* ===============================
   BACK TO TOP
   =============================== */

#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px;          /* stessa dimensione del burger */
    height: 55px;
    background: #df6270;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#backToTop.show {
    opacity: 1;
    pointer-events: auto;
}

/* Freccia a V verso l'alto, solo bordi, più grande e centrata */
.arrow-up {
    width: 18px;            
    height: 18px;           
    border-left: 4px solid #fff;
    border-top: 4px solid #fff;
    transform: rotate(45deg); /* solo rotazione */
    position: relative;
    top: 3px; /* spostamento verso il basso */
}