/* ==========================================================================
   STYLESDESKTOP.CSS — Media Queries Layar Lebar (Tablet & Desktop >= 768px)
   (Wajib dimuat paling akhir di index.html)
   ========================================================================== */

.top-section,
.top-left {
    display: contents;
}

/* ---------- 1. TABLET & LAPTOP KECIL (>= 768px) ---------- */
@media (min-width: 768px) {
    :root {
        --header-h: 4rem;
        --page-max: 1400px;
    }

    html {
        font-size: 18px;
    }

    body {
        margin: 0;
        width: 100%;
    }

    /* Header Satu Baris */
    .header {
        height: var(--header-h);
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
    }

    .header .container-fluid {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        max-width: var(--page-max);
        margin: 0 auto;
        height: 100%;
    }

    .header-top,
    .header-controls {
        display: contents;
    }

    .header h1 {
        margin: 0;
        order: 1;
    }

    #app-title .app-main-title {
        margin-left: 0;
    }

    .search-container {
        order: 2;
        flex: 1 1 auto;
        max-width: 40rem;
        margin: 0 auto;
    }

    .filters {
        order: 3;
        margin: 0;
        gap: 0.5rem;
    }

    .header-top .sort-filter-btn,
    .header-top .header-icon-btn {
        margin: 0;
    }

    .cart-btn {
        order: 4;
        cursor: pointer;
    }

    .container-fluid.main-container {
        max-width: var(--page-max);
        margin: 0 auto;
        padding: 1.25rem 1rem 3.5rem !important;
    }

    #adCarousel {
        margin: 0 0 0.75rem !important;
    }

    .flash-sale-section {
        margin: 0 0 1rem;
    }

    #flash-sale-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        align-content: flex-start;
        padding-bottom: 0;
        scrollbar-width: none;
    }

    #flash-sale-list::-webkit-scrollbar {
        display: none;
    }

    .flash-sale-section > .d-flex {
        margin-bottom: 2rem !important;
    }

    #flash-sale-list > * {
        margin-top: 0;
    }

    #flash-sale-list > .col-4 {
        width: 25%;
        min-width: 9rem;
    }

    /* Kategori Bar */
    .category-bar {
        top: var(--header-h);
        padding: 0.5rem 1rem;
    }

    .category-buttons::-webkit-scrollbar {
        height: 6px;
    }

    .category-btn {
        cursor: pointer;
    }

    /* Grid Katalog Produk */
    #product-list.row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    #product-list > [class*="col-"] {
        width: auto;
        max-width: none;
        padding: 0 !important;
        margin: 0 !important;
    }

    #product-list > .col-12 {
        grid-column: 1 / -1;
    }

    .product-pagination .page-numbers-scroll {
        max-width: calc(10 * 2.25rem + 9 * 0.35rem + 0.2rem);
    }

    @media (hover: hover) {
        #flash-sale-list .product-card:hover .highlighted-price {
            display: none;
        }

        #flash-sale-list .product-card:hover .add-to-cart-btn {
            display: block;
            animation: fadeIn 0.3s ease;
        }
    }

    .product-card {
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 18px rgba(0, 0, 0, 0.18);
    }

    /* Modal Detail Produk Mengambang */
    .product-detail-panel {
        top: 3vh;
        bottom: auto;
        left: 50%;
        right: auto;
        width: min(30rem, 100%);
        height: 94dvh;
        padding: 0 1.25rem;
        border-radius: 1rem;
        overflow: hidden;
        transform: translate(-50%, 110%);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    .product-detail-panel.active {
        transform: translate(-50%, 0);
    }

    .product-image-container {
        margin: 0 -1.25rem 0;
    }

    .product-image {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    /* Modal Bottom Sheet Dipusatkan */
    #variant-sheet-panel,
    #qty-sheet-panel,
    #notif-sheet-panel,
    #member-sheet-panel {
        left: 50%;
        right: auto;
        width: min(32rem, 100%);
        transform: translate(-50%, 100%);
        border-radius: 1rem;
    }

    #variant-sheet-panel.active,
    #qty-sheet-panel.active,
    #notif-sheet-panel.active,
    #member-sheet-panel.active {
        transform: translate(-50%, 0);
    }

    /* Chat AI Mengambang */
    .aichat-panel {
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(30rem, 100%);
        top: 5vh !important;
        height: min(46rem, 90dvh) !important;
        border-radius: 1rem;
        transform: translate(-50%, 110%);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    .aichat-panel.active {
        transform: translate(-50%, 0);
    }

    .swal2-popup {
        max-width: 32rem !important;
        font-size: 0.8rem !important;
    }
}

/* ---------- 2. DESKTOP SEDANG (>= 992px) ---------- */
@media (min-width: 992px) {
    .top-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 1rem;
        align-items: stretch;
        margin-bottom: 1rem;
    }

    .top-left {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        min-width: 0;
    }

    .top-left #adCarousel {
        margin: 0 !important;
    }

    .flash-sale-section {
        margin: 0;
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: 0;
        min-height: 100%;
        overflow: hidden;
        padding-bottom: 0.1rem;
    }

    #flash-sale-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    #flash-sale-list > .col-4 {
        width: calc(100% / 5);
        min-width: 2.5rem;
    }

    #product-list.row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .flash-sale-wrap {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .fs-nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15%;
        transform: translateY(-50%);
        z-index: 5;
        width: 2rem;
        height: 2rem;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        color: #c0392b;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .fs-nav-btn:hover:not(:disabled) {
        opacity: 1;
        transform: translateY(-50%) scale(1.08);
    }

    .fs-nav-btn:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .fs-prev {
        left: 0.25rem;
    }

    .fs-next {
        right: 0.25rem;
    }
}

/* ---------- 3. DESKTOP BESAR (>= 1300px) ---------- */
@media (min-width: 1300px) {
    #product-list.row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}