/* === IMPOSTAZIONI GLOBALI PER LAYOUT CON FOOTER FISSO === */

html {
    /* Necessario per far funzionare min-height sul body */
    height: 100%;
}

body {
    /* 1. Fa in modo che lo sfondo copra sempre tutta l'altezza */
    min-height: 100%;
    /* 2. CREA SPAZIO VITALE IN FONDO ALLA PAGINA.
       Questo impedisce che il contenuto venga nascosto dal footer fisso.
       L'altezza (es. 120px) dovrebbe essere un po' più grande dell'altezza del tuo footer. */
    padding-bottom: 120px;
    /* 3. Le tue regole per lo sfondo (senza duplicati) */
    /*background: linear-gradient( to right, #d7d7d7 0 180px,*/ /* Fascia sinistra grigia */
    /*#ffffff 180px calc(100% - 180px),*/ /* Area centrale bianca */
    /*#d7d7d7 calc(100% - 180px) 100%*/ /* Fascia destra grigia */
    /*);
    background-attachment: fixed;*/
    /* ---ESEMPIO 1 Inizio delle regole per lo sfondo --- */
    /* 1. Colore di fallback nel caso l'immagine non carichi */
    /*background-color: #333333;*/
    /* 2. Imposta l'immagine di sfondo */
    /*    Assicurati che 'sfondo-officina.jpg' corrisponda al nome del tuo file! */
    /*background-image: url('../Images/sfondoApp.png');*/
    /* 3. Fa in modo che l'immagine copra sempre tutto lo schermo senza deformarsi */
    /*background-size: cover;*/
    /* 4. Impedisce la ripetizione dell'immagine se è più piccola dello schermo */
    /*background-repeat: no-repeat;*/
    /* 5. Mantiene l'immagine fissa mentre si scorre la pagina (effetto parallax) */
    /*background-attachment: fixed;*/
    /* 6. Centra l'immagine sia orizzontalmente che verticalmente */
    /*background-position: center center;*/
    /* ---FINE  ESEMPIO 1 Inizio delle regole per lo sfondo --- */

    position: relative; /* FONDAMENTALE: serve per posizionare gli pseudo-elementi */
   
    /* Impostiamo solo l'immagine di sfondo per il body */
    background-image: url('../Images/sfondoApp.png'); /* <- CAMBIA QUI IL NOME FILE */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    /* Impedisce che gli pseudo-elementi creino una barra di scorrimento orizzontale */
    overflow-x: hidden;
}

    /* 2. Creiamo la fascia sinistra */
    body::before {
        content: ''; /* Obbligatorio per far apparire lo pseudo-elemento */
        position: fixed; /* O 'absolute' se preferisci. 'fixed' è meglio con background-attachment: fixed */
        top: 0;
        left: 0;
        width: 180px; /* Larghezza della fascia */
        height: 100%;
        background-color: #d7d7d7; /* Il colore grigio */
        z-index: -1; /* Spinge la fascia DIETRO al contenuto del body */
    }

    /* 3. Creiamo la fascia destra */
    body::after {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        width: 180px; /* Larghezza della fascia */
        height: 100%;
        background-color: #d7d7d7; /* Il colore grigio */
        z-index: -1; /* Spinge anche questa fascia dietro */
    }


}
/* === STILI PER LA BARRA DI NAVIGAZIONE (HEADER) === */

/* Migliora l'allineamento tra testo e logo nel brand */
.navbar-brand {
    display: flex;
    align-items: center; /* Allinea verticalmente il testo e il logo */
}

/* Regola le dimensioni del logo nella navbar */
.logo-navbar {
    height: 40px; /* Imposta un'altezza fissa per il logo */
    width: auto; /* La larghezza si adatterà in automatico per non deformare l'immagine */
    margin-left: 10px; /* Aggiunge un po' di spazio tra il testo "Auto Officina Pulcini" e il logo */
}

/* === STILE PER IL FOOTER FISSO === */

.footer-fisso {
    position: fixed; /* Fissa il footer alla finestra del browser */
    left: 0;
    bottom: 0; /* Lo ancora al fondo */
    width: 100%; /* Occupa tutta la larghezza */
    z-index: 1000; /* Lo mette in primo piano rispetto al resto */
    /* Stili per l'aspetto (che avevi già) */
    background-color: white;
    color: #333;
    text-align: center;
}

/* Regole per il contenuto interno del footer (che avevi già e sono corrette) */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.footer-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

    .footer-text a {
        color: #0d6efd;
        text-decoration: none;
    }

        .footer-text a:hover {
            text-decoration: underline;
        }

/* Media query per la responsività del footer */
/* 4. Su schermi piccoli, nascondiamo le fasce (opzionale ma consigliato) */
@media (max-width: 992px) {
    body::before,
    body::after {
        display: none; /* Le fasce scompaiono */
    }

    body {
        padding-bottom: 150px;
    }
}

@media (max-width: 576px) {
    .footer-text {
        font-size: 0.8rem;
    }

    body {
        /* Aumenta ancora lo spazio su schermi piccoli */
        padding-bottom: 180px;
    }
}

/* === STILI FINALI PER LE FRECCE IN ALTO, VISIBILI SU TUTTI I DISPOSITIVI === */

/* === STILI FINALI E CORRETTI PER LE FRECCE (VISIBILI SU MOBILE) === */

/* 1. Il container del contenuto rimane il punto di riferimento */
.main-content-container {
    position: relative;
    padding-top: 50px; /* Aggiungiamo spazio sopra per non sovrapporre il testo */
}

/* 2. NUOVO: Contenitore invisibile per le frecce */
.page-nav-wrapper {
    position: absolute;
    top: 15px; /* Distanza dal bordo superiore del container */
    left: 0;
    right: 0;
    /* Usiamo Flexbox per posizionare le frecce al suo interno */
    display: flex;
    justify-content: space-between; /* Spinge le frecce agli estremi */
    align-items: center;
    padding: 0 10px; /* Un po' di spazio dai bordi laterali */
    z-index: 999;
}


/* 3. Stile delle singole frecce (semplificato) */
.page-nav-arrow {
    /* Non hanno più bisogno di position, left, right, top */
    cursor: pointer;
    font-size: 2.2rem;
    color: #dc3545;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    user-select: none;
}

    .page-nav-arrow:hover {
        background-color: rgba(220, 53, 69, 0.8);
        color: #ffffff;
        transform: scale(1.1);
    }

    /* Nasconde le frecce se lo script lo richiede */
    .page-nav-arrow.d-none {
        display: none !important;
    }


/* 4. Stili specifici per schermi piccoli (mobile) */
@media (max-width: 576px) {
    .main-content-container {
        padding-top: 45px; /* Riduciamo un po' lo spazio */
    }

    .page-nav-wrapper {
        padding: 0 5px; /* Meno spazio laterale */
        top: 10px;
    }

    .page-nav-arrow {
        font-size: 1.8rem;
        padding: 5px;
    }
}
/* Stile per tutti i titoli H1 */
h1 {
    color: var(--bs-secondary-color) !important; /* Usa la variabile ufficiale di Bootstrap per il colore secondario */
}
/* ------------------------------------------------------------------- */
/* --- STILE TITOLO SIMILE A FERRARI --- */
/* ------------------------------------------------------------------- */

.ferrari-style {
    /* Colore Rosso Ferrari (un rosso caldo e acceso) */
    color: #FF2800 !important;
    /* Font audace. Se non hai font custom, usiamo Impact come alternativa forte e compatta */
    font-family: Engravers MT, 'Kunstler Script', Monotype Grotesque Bold;
    /* Rendi il testo in maiuscolo (tipico dei loghi auto) */
    text-transform: uppercase;
    /* Inclinazione leggera per dare un effetto dinamico e sportivo */
    transform: skewX(-5deg);
    /* Rimuovi la decorazione di testo per pulizia */
    text-decoration: none;
    /* Spaziatura tra le lettere per un look più ricercato */
    letter-spacing: 2px;
}

/* Regolazione per schermi piccoli (per evitare che la scritta sia troppo grande) */
@media (max-width: 768px) {
    .ferrari-style {
        /* Riduci la dimensione del font solo su schermi piccoli */
        font-size: 2.5rem !important;
        /* Riduci la spaziatura */
        letter-spacing: 1px;
        /* Puoi anche ridurre l'inclinazione se sembra troppo compressa */
        transform: skewX(-3deg);
    }
}


.btn-soft-primary {
    /*background-color: rgba(13, 110, 253, 0.09);*/ /* blue-500 leggero 3, 17, 38*/
    background-color: rgba(3, 17, 38, 1.09);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

    .btn-soft-primary:hover {
        background-color: rgba(13, 110, 253, 0.14);
        color: #0d6efd;
    }

/* Bottone di cancellazione soft */
.btn-soft-danger {
    /*background-color: rgba(220, 53, 69, 0.08);*/
    background-color: rgba(3, 17, 38, 1.09);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.18);
}

    .btn-soft-danger:hover {
        background-color: rgba(220, 53, 69, 0.14);
        color: #dc3545;
    }

/* Bottone secondario soft */
.btn-soft-secondary {
    background-color: rgba(108, 117, 125, 0.06);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.12);
}

    .btn-soft-secondary:hover {
        background-color: rgba(108, 117, 125, 0.10);
        color: #6c757d;
    }

    /* Piccole migliorie visive */
    .btn-soft-primary .fa-pencil-alt,
    .btn-soft-danger .fa-trash-alt,
    .btn-soft-secondary .fa-times {
        margin-right: .35rem;
    }