/* Mobile Responsive Overrides for Webshop Routes */
@media screen and (max-width: 768px) {
    /* Mencegah horizontal scroll yang bikin layout berantakan */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Memastikan container tidak menabrak batas layar di hp 375-425px */
    .container, .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }

    /* Memperbaiki baris row yang kadang marginnya bikin horizontal scroll */
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Jangan ubah semua tabel jadi block, biarkan bootstrap table-responsive yang handle horizontal scroll */
    /* Untuk tabel Credit Limit, kita jadikan layout Card bersusun secara vertikal (Stacked Cards) */
    .table-responsive table thead {
        display: none !important; /* Sembunyikan header tabel di HP */
    }

    .credit-limit-row {
        display: flex;
        flex-direction: column;
        background: #fff;
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .credit-limit-row td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 5px !important;
        border-top: none !important;
        border-bottom: 1px solid #f8f9fa;
        text-align: right !important; /* Value di kanan */
    }

    .credit-limit-row td:last-child {
        border-bottom: none !important;
    }

    /* Tambahkan label kolom dari atribut data-label ke sebelah kiri */
    .credit-limit-row td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6c757d;
        text-align: left;
        flex: 1;
        padding-right: 15px;
    }

    /* ====== PERBAIKAN CART (KERANJANG) DI HP ====== */
    /* Ubah tabel keranjang jadi model baris/list (stack vertikal) */
    .cart-table thead {
        display: none !important; /* Sembunyikan header tabel */
    }
    
    .cart-table tbody tr {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    
    .cart-table td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 5px 0 !important;
        text-align: left !important;
    }

    /* Sembunyikan kolom subtotal desktop di HP */
    .cart-table td.column-sm-view {
        display: none !important;
    }

    /* Perbaiki lebar gambar produk di keranjang */
    .cart-item-image {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        margin-right: 15px !important;
    }

    /* Merapikan susunan input quantity dan harga */
    .cart-table td:nth-child(2) {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: none !important;
    }

    .cart-table td:nth-child(2) > .d-flex {
        align-items: center;
    }

    .cart-table td:nth-child(2) > .sm-item-subtotal {
        text-align: right !important;
    }

    .cart-table .sm-item-subtotal > div:first-child {
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 5px;
    }

    /* Rapikan posisi tombol quantity (+/-) di HP */
    .cart-table .number-spinner {
        max-width: 120px;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }

    /* ====== TOTAL SECTION DI PALING BAWAH ====== */
    .cart-table tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2px solid #dee2e6;
        padding-top: 15px;
    }

    .cart-table tfoot th {
        border: none !important;
        padding: 0 !important;
    }

    .cart-table tfoot th:first-child {
        display: none !important; /* Hide empty column */
    }

    .item-grand-total {
        font-size: 1.2rem;
    }

    /* Tombol Past Orders & Continue Shopping numpuk rapi ke bawah */
    .cart-container .row.mt-2 > .col-3,
    .cart-container .row.mt-2 > .col-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .place-order-container a {
        width: 100%;
        display: block;
    }
    
    .cart-container .row.mt-2 > .col-3 a {
        width: 100%;
        display: block;
    }

    /* Memastikan gambar produk tidak melebihi layar */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Memaksa text panjang (misal nama produk/link) agar turun ke baris baru */
    .text-wrap, p, a, h1, h2, h3, h4, h5, h6, span {
        word-wrap: break-word;
        word-break: break-word;
    }

    /* Perbaikan khusus item card di webshop (Grid View) */
    .webshop-item-card, .item-card {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }

    /* Perbaikan untuk List View Product Card di Webshop */
    /* Melebarkan area gambar yang aslinya cuma col-2 (terlalu sempit di HP) */
    .list-row .list-image {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        height: auto !important;
    }

    /* Area teks detail produk */
    .list-row .col-10 {
        flex: 0 0 70% !important;
        max-width: 70% !important;
        padding-left: 15px !important;
        padding-right: 5px !important;
    }

    /* Mengubah row judul & tombol Add to Cart menjadi vertikal agar tidak tumpang tindih */
    .list-row .col-10 > div[style*="display: flex"] {
        flex-direction: column !important;
        margin-left: 0 !important;
    }

    /* Judul produk ambil lebar penuh */
    .list-row .col-10 > div > .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 5. Add Notes (Lebar Penuh, Paling Bawah!) */
    .cart-table .notes {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 15px !important;
        order: 5;
    }

    .cart-table .notes textarea {
        width: 100% !important;
    }

    /* ====== PERBAIKAN HALAMAN ORDER DETAILS (/orders/...) ====== */
    /* Tiap baris order dijadikan flex container membujur */
    .order-container .order-items {
        display: flex !important;
        flex-wrap: wrap;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    /* Sembunyikan header tabel yang berantakan di HP (Specificity ditingkatkan) */
    .order-container .order-items.order-item-header {
        display: none !important;
    }

    /* Area nama & gambar produk ambil lebar penuh (100%) */
    .order-container .order-items > .order-item-name {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 10px;
    }

    /* Sembunyikan Harga Satuan (Rate) dan Teks Qty sesuai request */
    .order-container .order-items > .order-rate,
    .order-qty {
        display: none !important;
    }

    /* Total Harga (Amount) jadi Lebar Penuh (100%) dan Rata Kanan */
    .order-container .order-items > .col-2.text-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: right !important;
        margin-top: 5px;
    }
    .order-container .order-items > .col-2.text-right::before {
        content: "Amount: ";
        color: #6c757d;
        font-size: 0.9em;
    }

    /* Merapikan posisi gambar dan teks di dalam row order */
    .item_name_and_description {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 !important;
    }
    
    .item_name_and_description .order-image-col {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding-left: 0 !important;
        padding-right: 15px !important;
    }
    
    .item_name_and_description > div:nth-child(2) {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ====== PERBAIKAN TOMBOL ACTIONS & PAY DI HEADER ====== */
    .page-header-wrapper {
        display: flex;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* ====== PERBAIKAN HALAMAN MY ACCOUNT (/me) ====== */
    .my-account-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .my-account-container .my-account-header {
        margin-bottom: 20px !important;
    }

    .my-account-container .account-info {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        background: #fff;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .my-account-container .account-info .col {
        padding: 20px 15px !important;
        border-bottom: 1px solid #dee2e6;
    }

    .my-account-container .account-info .col:last-child {
        border-bottom: none !important;
    }

    .my-account-container .my-account-name {
        margin-left: 15px !important;
    }

    .my-account-container .my-account-item-desc {
        padding-right: 15px !important;
        color: #6c757d;
        font-size: 0.9em;
    }

    /* ====== TUKAR POSISI NAMA CUSTOMER DAN INDICATOR PILL ====== */
    .indicator-container {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Indicator Pill ditaruh di Kanan */
    .indicator-container .col-10 {
        order: 2;
        flex: 0 0 auto !important;
        max-width: 50% !important;
        padding: 0 !important;
        text-align: right !important;
    }

    /* Nama Customer ditaruh di Kiri */
    .indicator-container .col-2.text-right {
        order: 1;
        flex: 0 0 auto !important;
        max-width: 50% !important;
        text-align: left !important;
        padding: 0 !important;
    }
    
    .page-header-actions {
        margin-top: 15px;
        width: 100%;
    }
    
    .page-header-actions .row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-left: 0 !important;
        width: 100%;
    }
    
    .page-header-actions .dropdown {
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
    }
    
    .page-header-actions .dropdown .btn {
        width: 100%;
        text-align: center;
    }

    /* Pindahkan tombol PAY menjadi lengket (Sticky) di paling bawah layar ala Native App */
    #pay-for-order {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 0 !important; /* Hapus lengkungan biar nyatu sama pinggiran layar */
        padding: 15px !important;
        font-size: 1.1rem !important;
        font-weight: bold;
        z-index: 9999;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
        margin: 0 !important;
    }

    /* Berikan ruang kosong di paling bawah halaman agar konten tidak tertutup tombol Pay yang fixed */
    body {
        padding-bottom: 70px !important;
    }

    /* Tombol Add to Cart turun ke bawah judul */
    .list-row .cart-action-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        margin-top: 10px !important;
        justify-content: flex-start !important;
    }

    /* Hapus float right di tombol Add to Cart agar rapi di kiri */
    .btn-add-to-cart-list {
        float: none !important;
        margin-top: 5px !important;
    }
}