/* ===== INFO LEASING MOBILE LAYOUT FIX ===== */
/* Layout 2 leasing per baris di mobile, footer sticky fix */

/* Fix untuk mobile - 2 leasing per baris */
@media screen and (max-width: 768px) {
    /* Pastikan body dan main content memiliki min-height yang cukup */
    body {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .main-content {
        flex: 1 !important;
        min-height: calc(100vh - 200px) !important;
    }
    
    /* Pastikan section info leasing memiliki padding yang cukup */
    section.mt-5 {
        min-height: 60vh !important;
        padding-bottom: 3rem !important;
    }
    
    /* Container untuk leasing di mobile - flex wrap untuk 2 per baris ultra dempet */
    .col-12.d-flex.justify-content-between {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 0.2rem 0 !important; /* Gap vertikal dikurangi jadi 0.2rem */
    }
    
    /* Margin-bottom untuk judul leasing */
    .col-12:has(h4.f-w-300.text-black) {
        margin-bottom: 1rem !important;
    }
    
    /* Alternatif selector jika :has tidak didukung */
    .col-12 h4.f-w-300.text-black {
        margin-bottom: 1rem !important;
    }
    
    /* Override Bootstrap py-4 padding untuk ultra dempet */
    .info-leasing-wrapper.py-4 {
        padding-top: 0.2rem !important; /* Override Bootstrap default 1.5rem */
        padding-bottom: 0.2rem !important; /* Override Bootstrap default 1.5rem */
    }
    
    /* Info leasing wrapper - 2 per baris di mobile TANPA margin-bottom */
    .info-leasing-wrapper {
        width: 48% !important; /* 48% untuk 2 per baris dengan sedikit gap */
        margin-bottom: 0 !important; /* HAPUS margin-bottom sepenuhnya */
        margin-right: 0 !important; /* Reset margin-right */
    }
    
    /* Jika ada leasing ganjil (ke-5), buat full width di baris terakhir */
    .info-leasing-wrapper:nth-child(odd):last-child {
        width: 48% !important; /* Tetap 48% untuk konsistensi */
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    /* Pastikan baris terakhir tetap rapi - TANPA margin */
    .info-leasing-wrapper:last-child {
        margin-bottom: 0 !important; /* Tetap 0 */
    }
    
    /* Pastikan container memiliki padding yang cukup */
    .container {
        padding-bottom: 2rem !important;
    }
    
    /* Adjust gambar leasing untuk mobile - tinggi dikurangi ultra dempet */
    .img-info-leasing {
        height: 90px !important; /* Dikurangi dari 100px jadi 90px */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .img-info-leasing img {
        max-height: 60px !important; /* Dikurangi dari 70px jadi 60px */
        max-width: 90% !important;
        object-fit: contain !important;
    }
    
    /* Adjust teks nama leasing - padding dikurangi ultra dempet */
    .info-leasing-wrapper .py-3 {
        padding-top: 0.3rem !important; /* Dikurangi dari 0.5rem jadi 0.3rem */
        padding-bottom: 0.2rem !important; /* Dikurangi dari 0.5rem jadi 0.2rem */
    }
    
    .info-leasing-wrapper .py-3 p {
        font-size: 0.8rem !important; /* Font dikurangi dari 0.85rem jadi 0.8rem */
        margin-bottom: 0 !important;
        line-height: 1.1 !important; /* Dikurangi dari 1.2 jadi 1.1 */
    }
}

/* Fix untuk tablet */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .main-content {
        flex: 1 !important;
        min-height: calc(100vh - 180px) !important;
    }
    
    section.mt-5 {
        min-height: 65vh !important;
        padding-bottom: 2.5rem !important;
    }
    
    .info-leasing-wrapper {
        width: 22% !important;
    }
}

/* Fix untuk desktop */
@media screen and (min-width: 1025px) {
    body {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .main-content {
        flex: 1 !important;
        min-height: calc(100vh - 160px) !important;
    }
    
    section.mt-5 {
        min-height: 70vh !important;
        padding-bottom: 2rem !important;
    }
}

/* ===== BASIC LEASING STYLES ===== */
.img-info-leasing {
    position: relative;
    border-radius: 15px;
    border: 1.5px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.info-leasing-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.5s;
}

.img-info-leasing:hover .info-leasing-overlay {
    opacity: 1;
}

.info-leasing-wrapper {
    width: 20%;
}

/* ===== MODAL CENTERING FIX ===== */
/* Mobile popup centering fix - Using very specific selectors to override global CSS */
@media screen and (max-width: 768px) {
    /* Ensure modal container uses flexbox for centering - ONLY when shown */
    [id^="ModalLeasing"].modal.show,
    [id^="ModalLeasing"].modal.fade.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Center the modal dialog - SPECIFIC selector to override responsive-fixes.css */
    [id^="ModalLeasing"] .modal-dialog,
    [id^="ModalLeasing"].modal .modal-dialog,
    body [id^="ModalLeasing"] .modal-dialog {
        margin: 0 !important;
        width: 90% !important;
        max-width: 90% !important;
        height: auto !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-height: 90vh !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Ensure centered modal dialog works properly - SPECIFIC selector */
    [id^="ModalLeasing"] .modal-dialog-centered,
    [id^="ModalLeasing"].modal .modal-dialog-centered,
    body [id^="ModalLeasing"] .modal-dialog-centered {
        margin: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 90% !important;
        max-height: 90vh !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Style modal content */
    [id^="ModalLeasing"] .modal-content {
        width: 100%;
        margin: 0;
        border-radius: 15px;
        position: relative;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Fix for Bootstrap modal animation - force center position */
    [id^="ModalLeasing"].modal.show .modal-dialog,
    [id^="ModalLeasing"].modal.fade.show .modal-dialog,
    [id^="ModalLeasing"].modal.show .modal-dialog-centered,
    [id^="ModalLeasing"].modal.fade.show .modal-dialog-centered {
        transform: translate(-50%, -50%) !important;
        top: 50% !important;
        left: 50% !important;
        align-items: center !important;
    }
}