/* TROVA VEICOLO */
body {
    background-color: #f3f4f6;
    min-height: 100vh;
}
/* CUORICINO */
.cuore-preferiti,
.cuore-preferiti-lista {
    cursor: pointer;
    transition: transform 0.2s;
}
.cuore-preferiti:hover,
.cuore-preferiti-lista:hover {
    transform: scale(1.2);
}
.cuore-preferiti-lista {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}


.bottone_dettagli {
    background: linear-gradient(135deg, var(--arancione-primario), var(--arancione-secondario));
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.bottone_dettagli:hover {
    background: linear-gradient(135deg, var(--arancione-hover), var(--arancione-secondario));
    transform: scale(1.05);
}

/* Card veicolo */
.card-veicolo {
    border-radius: 15px;
    border: 1px solid #ffe2cc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    background-color: white;
    padding: 15px;
}
.card-veicolo:hover {
    border-color: var(--arancione-primario);
    box-shadow: 0 6px 16px rgba(255, 127, 0, 0.2);
    transform: translateY(-5px);
}

.text-orange {
    color: #f97316;
}

.btn-orange {
    background-color: #f97316;
    color: white;
}
.btn-orange:hover {
    background-color: #ea580c;
    color: white;
}
.text-cyan {
    color: #0891b2;
}
.btn-cyan {
    background-color: #0891b2;
    color: white;
}
.btn-cyan:hover {
    background-color: #0e7490;
    color: white;
}
.shadow-custom {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.hover-shadow:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease;
}

#titolo-veicolo {
    font-weight: 700;
    color: #f97316;
    font-size: 1.7rem;
}
.card {
    width: 600px;
    /* larghezza fissa della card */
    height: 500px;
    /* altezza fissa della card */
    overflow: hidden;
    /* taglia ciò che esce */
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 10px;
}
.card-img-top {
    object-fit: cover;
    /* ritaglia l'immagine mantenendo proporzioni */
    height: 200px;
    /* altezza fissa se vuoi uniformare */
}

body.dark-mode {
    background-color: #020617;
    color: #e5e7eb;
}

/* Sidebar / box bianchi */
body.dark-mode .bg-white {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* Card veicoli */
body.dark-mode .card,
body.dark-mode .card-veicolo {
    background: rgba(34, 45, 73, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}

/* Titoli */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5 {
    color: #f8fafc;
}

/* Prezzi (NO celeste casuale) */
body.dark-mode .text-dark,
body.dark-mode .card-text,
body.dark-mode p {
    color: #e5e7eb !important;
}

/* Evidenze prezzo */
body.dark-mode .text-orange {
    color: #fb923c;
}

/* Form */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: rgba(26, 33, 61, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e5e7eb;
}
body.dark-mode .form-control::placeholder {
    color: #9ca3af;
}

/* Bottoni */
body.dark-mode .btn-orange {
    background: linear-gradient(135deg, #fb923c, #f97316);
}
body.dark-mode .btn-orange:hover {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

body.dark-mode .btn-cyan {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    color: #020617;
}
body.dark-mode .btn-cyan:hover {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

/* Pagination */
body.dark-mode .page-link {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
}
body.dark-mode .page-item.active .page-link {
    background: #fb923c;
    border-color: #fb923c;
    color: #020617;
}