/* Cache cleared at: 2026-02-09 02:54:09 */

/* Motor Card Full Image Fix - Make motor images fill the entire card area */
/* IMPORTANT: This CSS has higher priority and overrides motor-card-hover-fix.css */

/* Base motor image container - Full height with proper alignment */
.motor-image-container {
    position: relative !important;
    height: 250px !important; /* Increased from various smaller heights */
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 8px 8px 0 0 !important; /* Rounded top corners */
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Motor images - Full size with proper aspect ratio and centering */
.motor-card .motor-image-container img,
.motor-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Changed from cover to contain to prevent skewing */
    object-position: center !important;
    transition: all 0.3s ease !important;
    border-radius: 8px 8px 0 0 !important;
    transform: none !important; /* Reset any existing transforms */
}

/* Hover effect for better interactivity - reduced to prevent skewing */
.motor-card:hover .motor-image-container img,
.motor-image-container:hover img {
    transform: scale(1.01) !important; /* Reduced from 1.02 to prevent distortion */
}

/* Front and back image positioning - ensure proper alignment */
.motor-card .motor-image-container .front-img,
.motor-card .motor-image-container .back-img,
.motor-image-container .front-img,
.motor-image-container .back-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
    display: block !important;
}

/* Override hover fix CSS - Enable image swapping on hover */
.motor-card .motor-image-container .back-img,
.motor-image-container .back-img {
    opacity: 0 !important;
}

.motor-card:hover .motor-image-container .back-img,
.motor-image-container:hover .back-img {
    opacity: 1 !important;
}

.motor-card:hover .motor-image-container .front-img,
.motor-image-container:hover .front-img {
    opacity: 0 !important;
}

/* Default/placeholder image styling */
.motor-image-container .text-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
}

/* Motor card adjustments for better proportions */
.motor-card {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    transform: none !important; /* Reset any existing transforms */
}

.motor-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    transform: translateY(-1px) !important; /* Reduced movement to prevent skewing */
}

/* Badge positioning adjustment for larger images */
.motor-card .badge {
    z-index: 10 !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 0.8rem !important;
}

/* Card body adjustments */
.motor-card .card-body {
    padding: 0 !important;
}

/* Motor name section */
.motor-name-section {
    padding: 1rem !important;
    background: white !important;
}

/* OTR section */
.otr-section {
    padding: 0.75rem 1rem !important;
    background: #f8f9fa !important;
}

/* DP and Cicilan section */
.motor-card .row.g-0 .col-6 {
    padding: 0.75rem 0.5rem !important;
}

/* Button section */
.motor-card .p-3 {
    padding: 1rem !important;
}

/* Fix for any existing transform issues */
.motor-image-container *,
.motor-card * {
    transform-origin: center center !important;
}

/* Ensure proper container dimensions */
.motor-image-container .h-100 {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Override any skewing transforms from other CSS files */
.motor-image-container img[style*="transform"],
.motor-card[style*="transform"],
.motor-card .motor-image-container img,
.motor-card .motor-image img {
    transform: none !important;
}

/* CRITICAL: Override hover-fix.css rules with higher specificity */
.motor-card:hover .motor-image img,
.motor-card .motor-image:hover img,
.motor-image:hover img {
    transform: scale(1.01) !important; /* Enable subtle scale effect */
    scale: 1.01 !important;
}

/* Override hover fix container rules */
.motor-card .motor-image-container:hover {
    transform: none !important;
    background: #f8f9fa !important;
    transition: background-color 0.3s ease !important;
}

/* Ensure images maintain proper sizing */
.motor-card .motor-image-container img,
.motor-card .motor-image img {
    transform: none !important;
    transition: all 0.3s ease !important; /* Re-enable transitions */
    object-fit: contain !important;
    object-position: center !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .motor-image-container {
        height: 220px !important;
    }
}

@media (max-width: 992px) {
    .motor-image-container {
        height: 200px !important;
    }
}

@media (max-width: 768px) {
    .motor-image-container {
        height: 180px !important;
    }
    
    /* CRITICAL FIX: Ensure images are not skewed on mobile */
    .motor-card .motor-image-container img,
    .motor-image-container img,
    .motor-card .motor-image-container .front-img,
    .motor-image-container .front-img {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Ensure form and button don't interfere */
    .motor-image-container form {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .motor-image-container form button {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .motor-card .motor-name-section {
        padding: 0.75rem !important;
    }
    
    .motor-card .otr-section {
        padding: 0.5rem 0.75rem !important;
    }
    
    .motor-card .row.g-0 .col-6 {
        padding: 0.5rem 0.25rem !important;
    }
    
    .motor-card .p-3 {
        padding: 0.75rem !important;
    }
    
    /* Mobile: Disable hover effects to prevent issues */
    .motor-card:hover .motor-image-container img,
    .motor-image-container:hover img {
        transform: none !important;
        scale: 1 !important;
    }
    
    .motor-card:hover {
        transform: none !important;
    }
}

@media (max-width: 576px) {
    .motor-image-container {
        height: 160px !important;
    }
    
    /* CRITICAL FIX: Ensure images are not skewed on small mobile */
    .motor-card .motor-image-container img,
    .motor-image-container img,
    .motor-card .motor-image-container .front-img,
    .motor-image-container .front-img {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* Special handling for motor terbaru page */
.motor-terbaru-grid-box .motor-image-container {
    height: 280px !important;
}

@media (max-width: 1200px) {
    .motor-terbaru-grid-box .motor-image-container {
        height: 240px !important;
    }
}

@media (max-width: 992px) {
    .motor-terbaru-grid-box .motor-image-container {
        height: 220px !important;
    }
}

@media (max-width: 768px) {
    .motor-terbaru-grid-box .motor-image-container {
        height: 200px !important;
    }
}

@media (max-width: 576px) {
    .motor-terbaru-grid-box .motor-image-container {
        height: 180px !important;
    }
}

/* Override any existing height constraints */
.motor-image-container[style*="height"] {
    height: 250px !important;
}

@media (max-width: 768px) {
    .motor-image-container[style*="height"] {
        height: 180px !important;
    }
}

/* Form button in motor image (for motor terbaru page) */
.motor-image-container form button {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    transform: none !important;
}

.motor-image-container form button:hover {
    background: transparent !important;
    transform: none !important;
}

/* Ensure images in forms also follow the rules */
.motor-image-container form img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

/* Additional fixes for skewing issues */
.motor-image-container,
.motor-image-container *,
.motor-card,
.motor-card * {
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* Reset any perspective or 3D transforms */
.motor-image-container {
    perspective: none !important;
    -webkit-perspective: none !important;
}

/* Ensure proper box model */
.motor-image-container,
.motor-image-container img {
    box-sizing: border-box !important;
}

/* Final override to ensure no skewing */
.motor-card,
.motor-card *,
.motor-image-container,
.motor-image-container * {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
}

/* Only allow specific hover transforms */
.motor-card:hover {
    transform: translateY(-1px) !important;
}

@media (min-width: 769px) {
    .motor-card:hover .motor-image-container img {
        transform: scale(1.01) !important;
    }
}


/* ===== CRITICAL MOBILE FIX - HIGHEST PRIORITY ===== */
/* Keep position absolute but ensure proper sizing on mobile devices */
@media (max-width: 768px) {
    .motor-card .motor-image-container .front-img,
    .motor-card .motor-image-container .back-img,
    .motor-image-container .front-img,
    .motor-image-container .back-img,
    .motor-image-container img.front-img,
    .motor-card .motor-image-container img.front-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        display: block !important;
    }
    
    /* Disable back image on mobile */
    .motor-card .motor-image-container .back-img,
    .motor-image-container .back-img {
        display: none !important;
    }
    
    /* Ensure front image is always visible on mobile */
    .motor-card .motor-image-container .front-img,
    .motor-image-container .front-img {
        opacity: 1 !important;
        display: block !important;
    }
}

/* Small mobile specific */
@media (max-width: 576px) {
    .motor-card .motor-image-container .front-img,
    .motor-image-container .front-img,
    .motor-image-container img.front-img,
    .motor-card .motor-image-container img.front-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }
}