/* Stili aggiuntivi per NoloBike */

/* Animazione ruota dentata */
.bi-gear-fill {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Migliora visualizzazione immagini nelle card */
.card-img-top {
    border-bottom: 2px solid #f0f0f0;
}

/* Effetto hover sulle card biciclette */
.card {
    transition: all 0.3s ease;
}

.card:hover .card-img-top {
    opacity: 0.9;
}

/* Badge personalizzati */
.badge-disponibile {
    background-color: #2ecc71 !important;
}

.badge-non-disponibile {
    background-color: #e74c3c !important;
}

.badge-elettrica {
    background-color: #3498db !important;
}

/* Stile per il placeholder immagine */
.bg-light i {
    opacity: 0.3;
}

/* Responsive per le immagini */
@media (max-width: 768px) {
    .card-img-top {
        height: 200px !important;
    }
}

/* Stile per form filtri */
.form-select:focus,
.form-control:focus {
    border-color: #2ecc71;
    box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25);
}

/* Preview immagine */
.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

/* Link contatti nelle card */
.card-body a {
    color: inherit;
    transition: color 0.2s ease;
}

.card-body a:hover {
    color: #2ecc71 !important;
}

/* Gap tra elementi inline */
.gap-2 {
    gap: 0.5rem !important;
}

/* Separatori tra contatti inline */
.card-body small:not(:last-child)::after {
    content: "|";
    margin: 0 0.5rem;
    color: #dee2e6;
}

/* Info venditore */
.card-body hr {
    opacity: 0.1;
}

/* Icone colorate */
.bi-telephone-fill {
    color: #27ae60 !important;
}

.bi-envelope-fill {
    color: #3498db !important;
}

.bi-geo-alt-fill {
    color: #e74c3c !important;
}

.bi-shop {
    color: #2c3e50 !important;
}