/*
========================================
  CART PAGE STYLES (DESKTOP)
========================================
*/
.cart-page {
    /* padding: 40px 0 80px 0; */
    font-family: 'Spline Sans', sans-serif;
    background-color: #fff;
    color: #1a1a1a;
}

.cart-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.cart-title {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
    margin-top: 30px;
}

/* Section Header (&CLASS) */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #000;
    padding-bottom: 15px;
}

.section-header h2 {
    font-size: 20px;
    font-weight: 400;
}

.delete-section-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
}

.delete-section-btn:hover {
    color: #000;
}

/* Layout Grid Utama untuk Tabel */
.cart-grid {
    display: grid;
    /* Kolom: Produk | Qty | Total */
    grid-template-columns: 1.5fr 200px 120px;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid black;
}

.cart-flex {
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
}

.cart-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    padding-top: 20px;
}

/* Kolom Individual */
.product-col {
    display: flex;
    align-items: center;
    gap: 15px;
}

.product-col img {
    width: 162px;
    height: 157px;
    object-fit: cover;
}

.qty-col {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Memusatkan quantity selector */
    gap: 15px;
}

.total-col {
    gap: 7px;
    text-align: right;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    flex-direction: column;
}

.total-col-mobile {
    gap: 7px;
    text-align: right;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    flex-direction: column;
}

/* Info Item */
.item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}



.item-title {
    font-size: 1rem;
    font-weight: 600;
}

.item-price {
    font-size: 0.9rem;
    font-weight: 500;
    color: black;
    margin-top: 30px;
}

/* Quantity Selector (digunakan kembali dari halaman detail) */
.quantity-selector {
    display: flex;
    gap: 10px;
}

.quantity-selector input {
    width: 86px;
    height: 48px;
    text-align: center;
    border: 1px solid black;
    /* border-left: none;
    border-right: none; */
    font-size: 1rem;
    font-weight: 500;
}

.qty-btn {
    width: 48px;
    height: 48px;
    border: 1px solid black;
    background: white;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Tombol Hapus Item */
.delete-item-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
}

.delete-item-btn:hover {
    color: #000;
}

/* Styling untuk item BUNDLING */
.bundle-label {
    font-size: 14px;
    font-weight: 500;
    color: #FF9358;
    /* Warna oranye/tan */
    text-transform: uppercase;
}

.cart-item.is-bundle .quantity-selector,
.cart-item.is-bundle .delete-item-btn {
    /* display: none; */
    /* Sembunyikan Qty dan tombol hapus */
}

.cart-item.is-bundle .qty-col {
    /* justify-content: flex-end; */
    /* Pindahkan label ke kiri */
}

.cart-grid.cart-item.is-bundle {
    padding-left: 20px;
}

.cart-item-mobile.is-bundle {
    padding-left: 40px;
}

/* Tombol Aksi Bawah */
.cart-actions {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn {
    padding: 16px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
}

.btn-outline:hover {
    background-color: #f7f7f7;
}

.btn-secondary {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #555;
}

.btn-secondary:hover {
    border-color: #000;
    color: #000;
}

.checkbox-1 {
    height: 18px;
    width: 18px;
}

/*
=========================================================
  CART PAGE STYLES (MOBILE OVERRIDES)
=========================================================
*/

/* Secara default, sembunyikan semua elemen khusus mobile */
.mobile-only,
.floating-checkout-bar,
.cart-actions-mobile {
    display: none;
}

.mobile-only {
    display: none;
}

.mb-20 {
    margin-bottom: 20px;
}

.item-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    /* Penyesuaian vertikal kecil */
    flex-shrink: 0;
    /* Mencegah checkbox menyusut */
}

/* Terapkan gaya ini hanya pada layar kecil (di bawah 769px) */
@media (max-width: 768px) {

    /* 1. Sembunyikan elemen khusus desktop */
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    /* 2. Tampilkan elemen khusus mobile */
    .mobile-only,
    .floating-checkout-bar,
    .cart-actions-mobile {
        display: block;
        /* atau flex, grid, sesuai kebutuhan */
    }

    /* 3. Penyesuaian Layout Utama */
    .cart-page {
        padding: 0px;
        /* Beri ruang di bawah untuk floating bar dan tombol */
    }

    .cart-container {
        padding: 0;
        /* Hapus padding container agar konten menempel ke tepi */
    }

    .cart-title {
        padding: 0 20px;
    }

    .section-header {
        padding: 0 20px 15px 20px;
    }

    .select-all {
        font-size: 16px;
        font-weight: 400;
    }

    /* 4. Tampilkan "Select All" Mobile */
    .cart-select-all-mobile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px 20px;
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        font-weight: 600;
    }

    /* 5. Ubah Tata Letak Grid Item menjadi Flexbox */
    .cart-item {
        grid-template-columns: 1fr auto;
        /* Hanya 2 kolom: konten utama dan tombol hapus */
        gap: 10px;
        padding: 20px;
    }

    .cart-item .product-col img {
        /* Sembunyikan gambar di mobile */
        display: none;
    }

    .cart-item .item-info {
        gap: 10px;
        /* Atur ulang jarak antar elemen info */
    }

    .cart-item .item-price {
        margin-top: 0;
        /* Hapus margin atas pada harga */
    }

    /* 6. Atur ulang quantity selector di mobile */
    .item-info .quantity-selector {
        display: flex;
        /* Pastikan ia tampil */
        margin-top: 10px;
    }

    /* 7. Styling Floating Checkout Bar */
    .floating-checkout-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 15px 20px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .total-summary {
        font-weight: 600;
    }

    .total-summary span {
        display: block;
        font-size: 1.2rem;
    }

    .floating-checkout-bar .btn-primary {
        padding: 16px 30px;
        background-color: black;
        color: white;
    }

    /* 8. Tombol Aksi Tambahan di Bawah */
    .cart-actions-mobile {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /*
=========================================================
  CART ITEM COMPONENT STYLES (MOBILE)
=========================================================
*/

    .cart-item-mobile {
        padding: 20px;
        border-bottom: 1px solid black;
    }

    .cart-item-mobile:last-child {
        border-bottom: none;
    }

    /* Baris Atas: Checkbox dan Info */
    .item-main-info {
        display: flex;
        align-items: flex-start;
        /* Sejajarkan checkbox dengan awal teks */
        gap: 15px;
        margin-bottom: 20px;
    }



    .item-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .item-details .artist-name {
        font-size: 14px;
        color: black;
        font-weight: 500;
    }

    .item-details .item-title {
        font-size: 16px;
        font-weight: 500;
    }

    .item-details .item-price {
        font-size: 14px;
        font-weight: 500;
        margin-top: 5px;
    }


    /* Baris Bawah: Kontrol (Quantity & Hapus) */
    .item-controls {
        display: flex;
        justify-content: space-between;
        /* Mendorong item ke sisi berlawanan */
        align-items: center;
        padding-left: 35px;
    }

    .quantity-selector {
        display: flex;
    }

    .quantity-selector .qty-btn,
    .quantity-selector .qty-value {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
        background-color: #fff;
        font-size: 1.2rem;
        font-weight: 500;
    }

    .lebar-ya {
        width: 86px !important;
    }


    .quantity-selector .qty-btn {
        cursor: pointer;
    }


    .delete-item-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: #000;
        /* Warna ikon hitam */
        padding: 5px;
        /* Memberi area klik yang lebih besar */
    }
}