/* Palette colori per distributori carburanti */

:root {

    /* Gasolio */

    --nero: rgba(0, 0, 0, 1);

    --nero-trasp: rgba(0, 0, 0, 0.2);

    /* Benzina */

    --verde: rgba(0, 128, 128, 1); /* #008080 */

    --verde-trasp: rgba(0, 128, 128, 0.2);

    /* Metano */

    --blu: rgba(2, 88, 187, 1); /* #0258bb */

    --blu-trasp: rgba(2, 88, 187, 0.2);

    /* GPL */

    --verde-acqua: rgba(14, 225, 191, 1); /* #0ee1bf */

    --verde-acqua-trasp: rgba(14, 225, 191, 0.2);

    /* Giallo (se serve) */

    --giallo: rgba(255, 235, 59, 1);

    --giallo-trasp: rgba(255, 235, 59, 0.2);

}



.card {

    border-radius: 15px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    transition: transform 0.3s, box-shadow 0.3s;

}



    .card:hover {

        transform: scale(1.05);

        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

    }



.card-header {

    font-size: 1.5rem;

    font-weight: bold;

    padding: 15px;

    border-radius: 15px 15px 0 0;

}



.card-body p {

    font-size: 1.2rem;

}



.card-footer {

    font-size: 1rem;

    font-weight: bold;

    background-color: #f8f9fa;

    border-radius: 0 0 15px 15px;

}



.gasolio {

    background-color: var(--nero);

    color: white;

}



.benzina {

    background-color: var(--verde);

    color: white;

}



.metano {

    background-color: var(--blu);

    color: white;

}



.gpl {

    background-color: var(--verde-acqua);

    color: black;

}

html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Roboto', sans-serif;

}





/* Titoli */

h1 {

    color: var(--verde);

    font-weight:bold;

}



h2 {

    color: var(--blu);

    font-weight: bold;

}



p {

    --bs-text-opacity: 1;

    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;

    font-size: 1.2rem;

    font-weight: 300;

    margin-top: 10px;

}

/* Bottoni */

.btn-primary {

    background-color: var(--blu);

    border-color: var(--blu);

    color: white;

}



    .btn-primary.alternativo {

        background-color: var(--verde);

        border-color: var(--verde);

        color: white;

    }



.btn-secondary {

    background-color: var(--verde-acqua);

    border-color: var(--verde-acqua);

    color: var(--nero);

}







/* HEADER */

.header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px;

    background-color: #fff;

}



/* LOGO ADATTIVO MENU */

.navbar-brand img {

    width: 100%;

    max-width: 150px;

    height: auto;

}



@media (max-width: 768px) {

    .navbar-brand img {

        max-width: 120px;

    }

}



@media (max-width: 480px) {

    .navbar-brand img {

        max-width: 100px;

    }

}





.logo {

    max-height: 60px;

}



.jumbotron {

    background-color: #f8f9fa;

    padding: 2rem;

    border-radius: 10px;

    text-align: right;

}



.jumbotron-fade {

    opacity: 0;

    transform: translateY(-20px);

    transition: opacity 1s ease-in-out, transform 1s ease-in-out;

}



.jumbotron-sfumato {

    background: linear-gradient(135deg, #32CD32, #007bff);

}



.bg-verde {

    background-color: #32CD32; /* Verde Lime */

}



/* MENU */

.menu {

    background-color: #007bff;

}



/* SLIDESHOW */

.slideshow-container {

    position: relative;

    width: 100%;

    height: 450px;

    overflow: hidden;

}



    .slideshow-container img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        animation: zoomEffect 30s infinite alternate;

    }



@keyframes zoomEffect {

    0% {

        transform: scale(1);

    }



    100% {

        transform: scale(1.2);

    }

}



.navbar {

    background-color: var(--verde);

    color:#fff;

}

.navbar-nav .nav-link {

    font-size: 18px;

    font-weight: 500;

    transition: color 0.3s ease-in-out;

    color:white;

}

    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {

        color: rgb(228 228 228);

    }





    .navbar-nav .nav-link:hover {

        color: #ffc107 !important;

    }



.nav-link {

    transition: color 0.3s ease-in-out;

}



    .nav-link:hover {

        color: #f8d210; /* Cambia colore */

    }



.dropdown-menu {

    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;

    opacity: 0;

    transform: translateY(-10px);

}



.nav-item.dropdown:hover .dropdown-menu {

    opacity: 1;

    transform: translateY(0);

}

/* SEZIONE RICERCA SOVRAPPOSTA ALLO SLIDESHOW */

.search-overlay {

    position: absolute;

    top: 40%;

    left: 10%;

    transform: translate(-50%, -50%);

    background: rgba(255, 255, 255, 0.8);

    padding: 20px;

    border-radius: 10px;

    text-align: center;

    width: 80%;

    max-width: 600px;

}



/* CARD SOVRAPPOSTE ALLO SLIDESHOW */



.cards-Slideshow {

    margin-top: -3rem !important;

}



.cards-overlay {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    width: 80%;

    display: flex;

    gap: 15px;

    justify-content: center;

}



.custom-card {

    border-radius: 10px;

    overflow: hidden;

    position: relative;

    border: 1px solid #ddd;

    flex: 1;

    /* Palette colori modernizzata */

    :root {

        --nero: #1a1a1a; /* Gasolio */

        --verde: #4caf50; /* Benzina */

        --blu: #2196f3; /* Metano */

        --verde-acqua: #00bcd4; /* GPL */

        --giallo: #ffc107; /* Accento */

        --grigio-chiaro: #f5f5f5; /* Sfondo */

        --grigio-scuro: #616161; /* Testo secondario */

    }



    /* Corpo */

    html {

        scroll-behavior: smooth;

    }



    body {

        font-family: 'Roboto', sans-serif;

        background-color: var(--grigio-chiaro);

        color: var(--nero);

        line-height: 1.6;

        margin: 0;

        padding: 0;

    }



    /* Titoli */

    h1, h2, h3, h4, h5, h6 {

        font-weight: bold;

        margin-bottom: 1rem;

    }



    h1 {

        color: var(--verde);

        font-size: 2.5rem;

    }



    h2 {

        color: var(--blu);

        font-size: 2rem;

    }



    /* Bottoni */

    .btn-primary {

        background-color: var(--blu);

        border: none;

        color: white;

        padding: 10px 20px;

        border-radius: 5px;

        transition: background-color 0.3s ease-in-out;

    }



    .btn-primary:hover {

        background-color: var(--verde);

    }



    .btn-secondary {

        background-color: var(--verde-acqua);

        border: none;

        color: white;

        padding: 10px 20px;

        border-radius: 5px;

        transition: background-color 0.3s ease-in-out;

    }



    .btn-secondary:hover {

        background-color: var(--giallo);

    }



    /* Header */

    .header {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 20px;

        background-color: var(--blu);

        color: white;

        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    }



    /* Navbar */

    .navbar {

        background-color: var(--verde);

        color: white;

        padding: 10px 20px;

    }



    .navbar-nav .nav-link {

        font-size: 18px;

        font-weight: 500;

        color: white;

        transition: color 0.3s ease-in-out;

    }



    .navbar-nav .nav-link:hover {

        color: var(--giallo);

    }



    /* Jumbotron */

    .jumbotron {

        background: linear-gradient(135deg, var(--verde), var(--blu));

        padding: 2rem;

        border-radius: 10px;

        color: white;

        text-align: center;

        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

    }



    /* Card */

    .custom-card {

        background-color: white;

        border-radius: 10px;

        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

        padding: 20px;

        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    }



    .custom-card:hover {

        transform: scale(1.05);

        box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);

    }



    /* Footer */

    .footer {

        background-color: var(--grigio-scuro);

        color: white;

        text-align: center;

        padding: 15px;

        font-size: 0.9rem;

    }



    /* Scrollbar personalizzata */

    ::-webkit-scrollbar {

        width: 10px;

    }



    ::-webkit-scrollbar-track {

        background: var(--grigio-chiaro);

        border-radius: 10px;

    }



    ::-webkit-scrollbar-thumb {

        background: var(--verde);

        border-radius: 10px;

    }



    ::-webkit-scrollbar-thumb:hover {

        background: var(--blu);

    }

    /* background: rgba(255, 255, 255, 0.9); */

    padding: 15px;

}



    .custom-card::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        width: 6px;

        height: 100%;

        background-color: var(--border-color);

    }



.cards-icon-top-right {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 20px;

    color: #007bff;

}



/* FOOTER */

.footer {

    background-color: #343a40;

    color: white;

    text-align: center;

    padding: 15px;

}



/* Effetto di transizione per la barra di ricerca */

.search-overlay {

    opacity: 0;

    transform: translateY(-20px);

    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}



    .search-overlay.show {

        opacity: 1;

        transform: translateY(0);

    }



/* Animazione sulle card */

.custom-card {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}



    .custom-card.show {

        opacity: 1;

        transform: translateY(0);

    }



    /* Effetto hover sulle card */

    .custom-card:hover {

        transform: scale(1.05);

        transition: transform 0.3s ease-in-out;

    }



/* Per browser Webkit (Chrome, Edge, Safari) */

::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: #f1f1f1; /* Colore del fondo */

    border-radius: 10px;

}



::-webkit-scrollbar-thumb {

    background: #000000; /* Colore della barra */

    border-radius: 10px;

}



    ::-webkit-scrollbar-thumb:hover {

        background: #000010; /* Cambia colore al passaggio del mouse */

    }



.text-Benzina {

    color: var(--verde) !important;

}



.text-Gasolio {

    color: var(--nero) !important;

}



.text-GPL {

    color: var(--verde-acqua) !important;

}



.text-Metano {

    color: var(--blu) !important;

}



.border-Benzina {

    --border-color: var(--verde);

    position: relative;

}



.border-Gasolio {

    --border-color: var(--nero);

    position: relative;

}



.border-GPL {

    --border-color: var(--verde-acqua);

    position: relative;

}



.border-Metano {

    --border-color: var(--blu);

    position: relative;

}





/*INTRODUZIONE*/

.container-fluid-introduzione {

    text-align: center;

    margin: 50px;

    padding: 20px;

    background: linear-gradient(45deg, #009688, var(--verde));

    color: white;

    border-radius: 10px;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

}



.container-fluid-introduzione h2 {

    font-weight: bold;

    font-size: 2.5rem;

    line-height: 1.2;

    color:var(--giallo);

}

    .container-fluid-introduzione p {

        color: white !important;

        

    }



/*Dettaglio-Distributore*/

.container-fluid-dettaglio {

    text-align: center;

    margin: 50px;

    padding: 20px;

    background: linear-gradient(45deg, #009688, var(--verde));

    color: white;

    border-radius: 10px;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);

}



    .container-fluid-dettaglio h2 {

        font-weight: bold;

        font-size: 1.5rem;

        line-height: 1.2;

        color: var(--blu);

    }



    .container-fluid-dettaglio p {

        color: white;

        line-height: 0.8;

    }



    .container-fluid-introduzione p {

        color: white !important;

    }



p.lead {

    font-size: 1.2rem;

    font-weight: 300;

    margin-top: 10px;

}



h2 span {

    display: block;

    font-size: 2rem;

    font-weight: normal;

    color: #ffeb3b;

}



.container-fluid-introduzione::after {

    content: '🔥 Prezzi sempre aggiornati!';

    display: block;

    font-size: 1rem;

    font-weight: bold;

    color: var(--giallo);

    margin-top: 15px;

}





/*Charts*/



.benzina-charts {

    --border-color: var(--verde);

    --background-color: var(--verde-trasp); /* Versione trasparente */

}



.gasolio-charts {

    --border-color: var(--nero);

    --background-color: var(--nero-trasp);

}



/*LOADING*/



#loading-spinner {

    position: relative;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(255,255,255,0.9);

    padding: 10px 20px;

    border-radius: 8px;

    font-size: 1.2em;

    box-shadow: 0 0 10px rgba(0,0,0,0.2);

    z-index: 1000;

}

@keyframes pulse {

    0% {

        opacity: 0.3;

    }



    50% {

        opacity: 1;

    }



    100% {

        opacity: 0.3;

    }

}





/*mappa*/

.fade-marker {

    opacity: 0;

    animation: fadeIn 0.8s ease forwards;

}



@keyframes fadeIn {

    to {

        opacity: 1;

    }

}