/* ===== MOTOR CARD HOVER FIX ===== */
/* Perbaikan untuk masalah hover pada card motor yang menyebabkan gambar miring */

/* Nonaktifkan efek scale pada gambar motor saat hover */
.motor-card:hover .motor-image img,
.motor-card .motor-image:hover img,
.motor-image:hover img {
    transform: none !important;
    scale: 1 !important;
}

/* Nonaktifkan efek transform pada container gambar motor */
.motor-card .motor-image-container:hover {
    transform: none !important;
    background: #f8f9fa !important;
    transition: background-color 0.3s ease !important;
}

/* Pastikan gambar motor tetap dalam posisi normal */
.motor-card .motor-image-container img,
.motor-card .motor-image img {
    transform: none !important;
    transition: none !important;
}

/* Nonaktifkan efek scale pada icon motor */
.motor-card:hover .fa-motorcycle {
    transform: none !important;
    color: #495057 !important;
}

/* PERBAIKAN UTAMA: Nonaktifkan efek opacity swap pada front-img dan back-img */
.motor-card:hover .front-img {
    opacity: 1 !important; /* Tetap tampil, jangan hilang */
}

.motor-card:hover .back-img {
    opacity: 0 !important; /* Tetap tersembunyi, jangan muncul */
}

/* Pastikan gambar depan selalu terlihat */
.motor-card .front-img {
    opacity: 1 !important;
}

/* Pastikan gambar belakang selalu tersembunyi */
.motor-card .back-img {
    opacity: 0 !important;
}

/* Efek hover yang lebih halus hanya pada card, bukan gambar - HANYA DESKTOP */
@media (min-width: 769px) {
    .motor-card:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
        transition: all 0.3s ease !important;
    }
}

/* MOBILE: Nonaktifkan SEMUA efek hover pada mobile */
@media (max-width: 768px) {
    .motor-card:hover {
        transform: none !important;
        box-shadow: none !important;
        transition: none !important;
    }
    
    .motor-card .motor-image-container:hover {
        background: transparent !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Nonaktifkan hover pada gambar motor di mobile */
    .motor-card:hover .motor-image img,
    .motor-card .motor-image:hover img,
    .motor-image:hover img {
        transform: none !important;
        scale: 1 !important;
        opacity: 1 !important;
    }
    
    /* Pastikan front-img dan back-img tidak berubah di mobile */
    .motor-card:hover .front-img {
        opacity: 1 !important;
    }
    
    .motor-card:hover .back-img {
        opacity: 0 !important;
    }
    
    /* Nonaktifkan pointer events untuk gambar di mobile */
    .motor-card .motor-image-container img {
        pointer-events: none !important;
    }
}

/* Nonaktifkan semua efek transform pada gambar motor di popup */
#diskonPopup .motor-image-wrapper:hover img {
    transform: scale(1.0) !important;
}

/* Override untuk semua kemungkinan selector gambar motor */
.motor-card img,
.motor-image img,
.motor-image-container img,
.motor-image-wrapper img {
    transform: none !important;
    transition: opacity 0.3s ease !important;
}

/* Pastikan gambar tetap dalam aspect ratio yang benar */
.motor-card .motor-image-container img {
    object-fit: contain !important;
    object-position: center !important;
}