/**
 * mp-03-customer.css
 * Styling storefront customer: header toko, kategori bar, grid produk,
 * modal detail (galeri + varian), cart, checkout, success, track order.
 */

/* ---------- Header toko ---------- */
.mp-store-header {
    background: var(--mp-color-surface);
    border-bottom: 1px solid var(--mp-color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.mp-store-header__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--mp-space-4) var(--mp-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mp-space-4);
}
.mp-store-brand {
    display: flex;
    align-items: center;
    gap: var(--mp-space-3);
    min-width: 0;
}
.mp-store-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--mp-radius-md);
    object-fit: cover;
    border: 1px solid var(--mp-color-border);
    flex-shrink: 0;
}
.mp-store-brand__text { min-width: 0; }
.mp-store-name {
    font-size: 18px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-store-desc {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--mp-color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mp-space-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}
#mp-btn-view-maps,
#mp-btn-track-order,
#mp-btn-cart {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.mp-store-map-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--mp-space-4) var(--mp-space-5) 0;
}
.mp-store-map-wrap iframe {
    display: block;
    width: 100%;
    height: 280px;
    max-height: 40vh;
    border: 0;
    border-radius: var(--mp-radius-lg);
    background: var(--mp-color-bg);
    box-shadow: var(--mp-shadow-sm);
}

/* ---------- Toolbar: search + kategori ---------- */
.mp-catalog-toolbar {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--mp-space-4) var(--mp-space-5) 0;
}
.mp-search-box { margin-bottom: var(--mp-space-3); }
.mp-search-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--mp-radius-pill);
    border: 1px solid var(--mp-color-border);
    background: var(--mp-color-surface);
    font-size: 14px;
}
.mp-search-input:focus {
    outline: none;
    border-color: var(--mp-color-primary);
    box-shadow: 0 0 0 3px var(--mp-color-primary-soft);
}
.mp-category-bar {
    display: flex;
    gap: var(--mp-space-2);
    overflow-x: auto;
    padding-bottom: var(--mp-space-3);
    scrollbar-width: none;
}
.mp-category-bar::-webkit-scrollbar { display: none; }
.mp-cat-chip {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: var(--mp-radius-pill);
    border: 1px solid var(--mp-color-border);
    background: var(--mp-color-surface);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--mp-color-text-muted);
    transition: all .15s ease;
}
.mp-cat-chip.is-active {
    background: var(--mp-color-primary);
    border-color: var(--mp-color-primary);
    color: #fff;
}

/* ---------- Grid produk ---------- */
.mp-catalog-main {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--mp-space-4) var(--mp-space-5) 100px;
}
.mp-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mp-space-4);
}
.mp-product-card {
    background: var(--mp-color-surface);
    border-radius: var(--mp-radius-md);
    overflow: hidden;
    border: 1px solid var(--mp-color-border);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.mp-product-card:hover {
    box-shadow: var(--mp-shadow-md);
    transform: translateY(-2px);
}
.mp-product-card:active {
    transform: scale(.98);
    transition: transform .08s ease;
}
.mp-product-card.is-habis { opacity: .6; }
.mp-product-card__img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--mp-color-bg);
}
.mp-product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.mp-product-card__img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}
.mp-badge {
    position: absolute;
    top: var(--mp-space-2);
    left: var(--mp-space-2);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--mp-radius-pill);
}
.mp-badge--habis { background: var(--mp-color-danger-soft); color: var(--mp-color-danger); }
.mp-badge--low-stok { background: var(--mp-color-warning-soft); color: var(--mp-color-warning); }
.mp-badge--info { background: rgba(255,255,255,.92); color: var(--mp-color-text); box-shadow: var(--mp-shadow-sm); }
.mp-badge--hemat {
    top: var(--mp-space-2);
    bottom: auto;
    left: auto;
    right: var(--mp-space-2);
    background: var(--mp-color-danger);
    color: #fff;
}

/* Badge promo — pill compact di pojok kiri-atas (bukan bar full-width lagi),
   biar bentuknya konsisten sama badge lain tapi tetap standout lewat warna
   gradient merah-oranye + sedikit pulse. */
.mp-badge--promo-ribbon {
    top: var(--mp-space-2);
    bottom: auto;
    left: var(--mp-space-2);
    right: auto;
    width: auto;
    max-width: calc(100% - var(--mp-space-2) * 2);
    text-align: center;
    background: linear-gradient(90deg, #ff3b30, #ff8a00);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 6px rgba(255,59,48,.35);
    animation: mp-promo-pulse 1.8s ease-in-out infinite;
}
@keyframes mp-promo-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,.45); }
    50%      { box-shadow: 0 0 0 5px rgba(255,59,48,0); }
}
.mp-product-card.has-promo {
    border-color: #ff8a00;
}

.mp-product-card__harga-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
}
.mp-product-card__harga-coret {
    font-size: 12px;
    color: var(--mp-color-text-muted);
    text-decoration: line-through;
}
.mp-product-card__harga--promo { color: #ff3b30; }

.mp-detail-promo-label {
    display: inline-block;
    background: linear-gradient(90deg, #ff3b30, #ff8a00);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--mp-radius-pill);
    margin: 0 0 6px;
}
.mp-detail-harga-coret {
    font-size: 15px;
    color: var(--mp-color-text-muted);
    text-decoration: line-through;
    font-weight: 500;
}
.mp-product-card__body { padding: var(--mp-space-3); }
.mp-product-card__nama {
    font-size: 14px;
    margin: 0 0 4px;
    line-height: 1.3;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mp-product-card__harga {
    margin: 0;
    font-weight: 700;
    color: var(--mp-color-primary-dark);
    font-size: 15px;
}

.mp-empty-state,
.mp-loading-state {
    text-align: center;
    padding: var(--mp-space-6);
    color: var(--mp-color-text-muted);
}

/* ---------- Modal detail produk ---------- */
.mp-modal__panel--detail { padding: 0; max-width: 480px; }
.mp-modal__panel--detail .mp-modal__close {
    position: absolute;
    top: var(--mp-space-3);
    right: var(--mp-space-3);
    background: rgba(255,255,255,.9);
    border-radius: 50%;
    z-index: 2;
}
.mp-detail-gallery__main {
    aspect-ratio: 4 / 3;
    background: var(--mp-color-bg);
}
.mp-detail-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.mp-detail-gallery__placeholder {
    aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    background: var(--mp-color-bg);
}
.mp-detail-gallery__thumbs {
    display: flex;
    gap: var(--mp-space-2);
    padding: var(--mp-space-3);
    overflow-x: auto;
}
.mp-gallery-thumb {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: var(--mp-radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
}
.mp-gallery-thumb.is-active { border-color: var(--mp-color-primary); }

.mp-detail-body { padding: var(--mp-space-5) var(--mp-space-5) 88px; position: relative; }

/* Tombol beli sticky di bawah panel, selalu kelihatan tanpa perlu scroll —
   penting kalau varian banyak (S/M/L/XL dst) bikin body jadi panjang. */
#mp-btn-add-to-cart {
    position: sticky;
    bottom: 0;
    box-shadow: 0 -6px 16px rgba(0,0,0,.08);
}
.mp-detail-nama { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: var(--mp-color-text-muted); }
.mp-detail-harga {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--mp-color-primary-dark);
    margin: 0 0 var(--mp-space-2);
}
.mp-detail-stok { color: var(--mp-color-text-muted); font-size: 13px; margin: 0 0 var(--mp-space-3); }
.mp-detail-deskripsi { color: var(--mp-color-text); font-size: 14px; line-height: 1.6; margin: 0 0 var(--mp-space-4); }

.mp-detail-atribut {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--mp-space-4);
}
.mp-atribut-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 8px 12px;
    background: var(--mp-color-bg);
    border-radius: var(--mp-radius-sm);
}
.mp-atribut-row span { color: var(--mp-color-text-muted); }

.mp-detail-varian { margin-bottom: var(--mp-space-4); }
.mp-varian-options { display: flex; flex-direction: column; gap: var(--mp-space-2); }
.mp-varian-option {
    display: flex;
    align-items: center;
    gap: var(--mp-space-2);
    padding: 10px 14px;
    border: 1px solid var(--mp-color-border);
    border-radius: var(--mp-radius-sm);
    cursor: pointer;
    font-size: 13px;
}
.mp-varian-option:has(input:checked) {
    border-color: var(--mp-color-primary);
    background: var(--mp-color-primary-soft);
}
.mp-varian-option.is-disabled { opacity: .5; cursor: not-allowed; }
.mp-varian-option__nama { flex: 1; font-weight: 600; }
.mp-varian-option__harga { color: var(--mp-color-primary-dark); font-weight: 700; }
.mp-varian-option__habis { font-size: 11px; color: var(--mp-color-danger); }

.mp-detail-qty { margin-bottom: var(--mp-space-4); }
.mp-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mp-color-border);
    border-radius: var(--mp-radius-pill);
    overflow: hidden;
}
.mp-qty-btn {
    width: 36px; height: 36px;
    border: none;
    background: var(--mp-color-bg);
    font-size: 18px;
    cursor: pointer;
}
.mp-qty-input {
    width: 48px;
    text-align: center;
    border: none;
    font-size: 14px;
    font-weight: 600;
    appearance: textfield;
    -moz-appearance: textfield;
}
.mp-qty-input::-webkit-outer-spin-button,
.mp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Cart modal ---------- */
.mp-modal__panel--cart { display: flex; flex-direction: column; }
.mp-cart-list { display: flex; flex-direction: column; gap: var(--mp-space-3); margin-bottom: var(--mp-space-4); }
.mp-cart-row {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: var(--mp-space-3);
    align-items: center;
}
.mp-cart-row__img,
.mp-cart-row__img--placeholder {
    width: 56px; height: 56px;
    border-radius: var(--mp-radius-sm);
    object-fit: cover;
    background: var(--mp-color-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.mp-cart-row__nama { font-size: 13px; font-weight: 600; margin: 0; }
.mp-cart-row__varian { font-size: 12px; color: var(--mp-color-text-muted); margin: 2px 0; }
.mp-cart-row__harga { font-size: 13px; color: var(--mp-color-primary-dark); font-weight: 700; margin: 0; }
.mp-cart-row__qty {
    display: flex;
    align-items: center;
    gap: var(--mp-space-2);
    font-size: 13px;
    font-weight: 600;
}
.mp-cart-row__qty .mp-qty-btn { width: 28px; height: 28px; font-size: 14px; }
.mp-cart-row__remove {
    background: none; border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: .6;
}
.mp-cart-row__remove:hover { opacity: 1; }
.mp-cart-empty { text-align: center; padding: var(--mp-space-5); color: var(--mp-color-text-muted); }
.mp-cart-footer { border-top: 1px solid var(--mp-color-border); padding-top: var(--mp-space-4); margin-top: auto; }
.mp-cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-bottom: var(--mp-space-3);
}

/* ---------- Checkout ---------- */
.mp-checkout-summary {
    background: var(--mp-color-primary-soft);
    border-radius: var(--mp-radius-md);
    padding: var(--mp-space-4);
    margin: var(--mp-space-4) 0;
    /* sticky dihapus — sebelumnya bikin box ini "ngambang" nempel di
       posisi scroll manapun dan ketimpuk di atas field lain (alamat,
       provinsi dkk), bukannya diam di tempatnya deket tombol submit. */
}
.mp-checkout-summary .mp-cart-total-row { margin-bottom: 0; }

/* ---------- Success modal ---------- */
.mp-modal__panel--success { text-align: center; }
.mp-success-icon { font-size: 48px; margin-bottom: var(--mp-space-2); }
.mp-success-detail {
    background: var(--mp-color-bg);
    border-radius: var(--mp-radius-md);
    padding: var(--mp-space-4);
    margin: var(--mp-space-4) 0;
    text-align: left;
}
.mp-success-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--mp-space-2) 0;
    font-size: 13px;
}
.mp-success-row:not(:last-child) { border-bottom: 1px solid var(--mp-color-border); }

/* ---------- Track order ---------- */
.mp-track-result { margin-top: var(--mp-space-4); }

/* ---------- Badge diskon ongkir ---------- */
.mp-badge--diskon {
    position: static;
    display: inline-block;
    margin-left: 6px;
    background: var(--mp-color-primary-soft);
    color: var(--mp-color-primary-dark);
}
.mp-ongkir-harga {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.3;
}
.mp-ongkir-harga-asli {
    font-size: 11px;
    color: var(--mp-color-text-muted);
    text-decoration: line-through;
}
.mp-ongkir-harga-final { color: var(--mp-color-primary-dark); }
.mp-ongkir-harga-final--gratis { color: var(--mp-color-primary); }