/* Eleiby Project - Modern Luxury Boutique Style 
   Focus: Mobile Friendly, Clean, & Premium Feel
*/

:root {
    --primary-lux: #d4a373;      /* Muted Gold / Sand */
    --text-dark: #1a1a1a;       /* Deep Charcoal */
    --text-muted: #757575;
    --bg-light: #ffffff;
    --bg-soft: #fcfaf8;         /* Warm White */
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.04);
    --radius-sm: 4px;
    --radius-md: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-soft);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* --- NAVBAR (Fixed & Elegant) --- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 5%;
    border-bottom: 1px solid #eee;
}

.logo {
    color: var(--text-dark);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.nav-menus {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- BUTTONS --- */
.btn-nav, .btn-primary, .btn-action {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s ease;
}

.btn-nav {
    background: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
}

.btn-primary {
    background: var(--text-dark);
    color: white;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.btn-primary:hover {
    background: var(--primary-lux);
}

/* --- CATEGORY BAR (Minimalist) --- */
.category-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 15px 5%;
    background: var(--bg-light);
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.category-bar::-webkit-scrollbar { display: none; } /* Hide scrollbar Chrome/Safari */

.btn-cat {
    background: white;
    border: 1px solid #eee;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--text-muted);
}

.btn-cat.active {
    background: var(--text-dark);
    color: white;
    border-color: var(--text-dark);
}

/* --- PRODUCT GRID (Mobile 2 Columns) --- */
.container {
    padding: 0 5% 100px;
}

h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 20px 0;
    color: var(--text-dark);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Tetap 2 kolom di HP */
    gap: 15px;
}

@media (min-width: 768px) {
    .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- PRODUCT CARD (Clean & Luxurious) --- */
.card {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.card:active { transform: scale(0.98); }

.card img {
    width: 100%;
    aspect-ratio: 3/4; /* Proporsi baju anak yang pas */
    object-fit: cover;
}

.card h4 {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 12px 12px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-lux);
    padding: 0 12px;
}

.stock {
    font-size: 0.7rem;
    color: #aaa;
    padding: 2px 12px 12px;
}

.btn-action {
    background: var(--text-dark);
    color: white;
    margin: 0 12px 12px;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- CHAT WIDGET (Eleiby Theme) --- */
.chat-toggle {
    position: fixed;
    bottom: 25px;
    right: 20px;
    background: var(--text-dark); /* Tema gelap/elegan */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 1001;
}

.chat-box {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    height: 450px;
    background: var(--bg-soft); /* Warna background web */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    z-index: 1001;
    overflow: hidden;
}

.chat-header {
    background: var(--text-dark);
    color: var(--primary-lux);
    padding: 12px 15px;
    font-weight: 600;
    display: flex;
    justify-content: space-between; /* Membuat tulisan & tombol terpisah kanan-kiri */
    align-items: center;
    font-size: 0.9rem;
}

.btn-minimize-chat {
    background: none;
    border: none;
    color: var(--primary-lux);
    cursor: pointer;
    font-size: 1rem;
    padding: 5px;
    opacity: 0.7;
    transition: 0.3s;
}

.btn-minimize-chat:hover {
    opacity: 1;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-message {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    color: var(--text-dark);
}

.msg-user {
    align-self: flex-end;
    background: #f5e6d3; /* Gold pudar/krem, bukan hijau */
    border-top-right-radius: 0;
}

.msg-admin {
    align-self: flex-start;
    background: #ffffff;
    border-top-left-radius: 0;
}

.chat-time {
    font-size: 0.65rem;
    color: rgba(0,0,0,0.45);
    text-align: right;
    display: block;
    margin-top: 4px;
}

.chat-input-area {
    background: white;
    padding: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid #eee;
}

.chat-input-area input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 25px;
    outline: none;
    font-size: 0.85rem;
}

.chat-input-area button {
    background: var(--text-dark);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    transition: 0.3s;
}

.chat-input-area button:hover {
    background: var(--primary-lux);
}

/* --- Modern Modal Glassmorphism --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 15px;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    max-width: 800px;
    height: 85dvh; /* Menggunakan dvh agar adaptif di Safari */
    max-height: 100%;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

.modal-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; 
}

/* Gambar mengisi sisa ruang maksimal (sekitar 80-85%) */
.modal-image-container {
    flex: 1 1 auto; 
    position: relative;
    min-height: 0;
    background: #f8f9fa;
}

.modal-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Area teks dipadatkan di bawah (sekitar 15-20%) */
.modal-info {
    flex: 0 0 auto; 
    padding: 10px 15px; 
    display: flex;
    flex-direction: column;
    gap: 4px; /* Jarak antar elemen dirapatkan */
    background: white;
}

.modal-category {
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: var(--primary-lux);
    font-weight: 700;
    margin: 0;
}

.modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.1;
}

.modal-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-lux);
    margin: 0;
}

/* Sembunyikan box deskripsi abu-abu di mobile agar hemat tempat */
.modal-description {
    display: none; 
}

.modal-options {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-options label {
    font-size: 0.75rem !important;
    margin: 0;
    font-weight: 600;
}

.size-picker {
    display: flex;
    gap: 4px !important;
    flex-wrap: nowrap;
    overflow-x: auto; /* Bisa digeser ke samping jika ukuran banyak */
    scrollbar-width: none; /* Sembunyikan scrollbar di Firefox */
}
.size-picker::-webkit-scrollbar { display: none; } /* Sembunyikan scrollbar di Chrome/Safari */

.btn-size {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0; /* Agar tombol ukuran tidak gepeng */
}

.modal-actions {
    margin-top: 4px;
}

.btn-add-main {
    width: 100%;
    background: var(--text-dark);
    color: white;
    border: none;
    padding: 10px !important;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
}

.close-modal-btn {
    position: absolute;
    top: 15px; /* Diturunkan sedikit agar aman dari notch/status bar */
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 9999; /* Z-index maksimal agar selalu di atas */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mengembalikan deskripsi & tampilan lega di versi Desktop/Tablet */
@media (min-width: 768px) {
    .modal-content { height: 75vh; max-height: 600px; flex-direction: row; }
    .modal-body { flex-direction: row; width: 100%; }
    .modal-image-container { flex: 0 0 45%; height: 100%; }
    .modal-info { flex: 1 1 55%; padding: 30px; justify-content: space-evenly; gap: 15px; }
    
    .modal-description { 
        display: flex; 
        font-size: 0.85rem;
        color: var(--text-muted);
        background: #fcfaf8;
        padding: 12px;
        border-radius: 8px;
        flex-direction: column;
        justify-content: center;
    }
    .modal-description p { margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    
    .modal-title { font-size: 1.5rem; }
    .modal-price { font-size: 1.8rem; }
    .btn-size { padding: 8px 16px !important; font-size: 0.85rem !important; }
    .btn-add-main { padding: 15px !important; font-size: 1rem; }
    .close-modal-btn { top: 15px; right: 15px; width: 35px; height: 35px; }
}

/* Animasi Muncul */
.animate-pop {
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* --- UTILS --- */
.btn-danger {
    background: none;
    color: #e03131;
    border: 1px solid #ffc9c9;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

/* --- ICON BUTTONS & TOOLTIP UNTUK KATALOG --- */
.card-actions {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}

/* --- Modern Luxury Pop Buttons --- */

/* 1. Tombol Utama (Keranjang) - Dibuat Standout dengan Gradien */
.btn-icon {
    flex: 1.2; /* Lebih lebar sedikit dari tombol chat */
    background: linear-gradient(135deg, #fbfbfb 0%, #f1f1f1 100%);
    color: white;
    padding: 12px;
    border-radius: 12px;
    border: 2px solid #d7904d;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px -10px rgba(236, 75, 50, 0.5);
}

.btn-icon:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px -5px rgba(212, 163, 115, 0.6);
    filter: brightness(1.1);
}

/* 2. Tombol Chat - Dibuat Minimalis (Ghost Style) agar tidak berebut perhatian */
.btn-ask {
    flex: 0.8;
    background: white;
    color: #b88655;
    border: 2px solid #f3e5d8;
    box-shadow: none;
}

.btn-ask:hover {
    background: #fdfaf7;
    border-color: #d4a373;
    color: #d4a373;
    transform: translateY(-3px);
}

/* 3. Perbaikan Teks Harga agar lebih Kontras */
.price {
    font-size: 1.2rem;
    font-weight: 800;
    color: #8d6e63; /* Cokelat tua agar lebih terbaca di bg putih */
    padding: 5px 12px;
    letter-spacing: -0.5px;
}

/* 4. Update Modal Action Button (Tombol di dalam Detail Produk) */
.btn-add-main {
    background: linear-gradient(135deg, #1a1a1a 0%, #454545 100%);
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    letter-spacing: 1px;
}

.btn-add-main:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4);
}

/* Tooltip Hover Effect Global */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    font-size: 0.7rem;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100; /* Ditingkatkan agar tidak tertutup elemen lain */
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* --- TOAST NOTIFICATION --- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: #1a1a1a;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.error {
    background: #e03131;
}

/* --- CHECKOUT & FORM STYLING --- */
.checkout-container {
    background: white;
    padding: 25px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    max-width: 600px;
    margin: 0 auto;
}

.checkout-container h3 {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #444;
}

.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fafafa;
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--primary-lux);
    background: white;
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.15);
}

/* Mempercantik kotak total harga */
.cart-total {
    background: var(--bg-soft);
    padding: 18px;
    border-radius: 8px;
    margin-top: 25px;
    border: 1px dashed #d4a373;
}

.cart-total h4, .cart-total h3 {
    color: var(--text-dark);
    margin-bottom: 5px;
}

/* --- KERANJANG & EMPTY STATE --- */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 15px;
    border-radius: var(--radius-md);
    margin-bottom: 15px;
    box-shadow: var(--shadow-soft);
    border: 1px solid #f9f9f9;
}

.cart-item h4 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
    color: var(--text-dark);
}

.cart-item p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cart-item .price-subtotal {
    font-weight: 600;
    color: var(--primary-lux);
    font-size: 1rem;
}

.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    margin-top: 20px;
}

.empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: 10px;
    display: block;
}

/* --- LAYOUT RESPONSIVE CHAT ADMIN (WA WEB & MOBILE) --- */
.admin-chat-layout {
    display: flex;
    height: 75vh;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    border: 1px solid #eee;
    background: white;
    position: relative;
}

.chat-list-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
    transition: all 0.3s ease;
}

.chat-detail-view {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%; /* Hidden di mobile (geser ke kanan) */
    background: var(--bg-soft);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Saat di HP, geser ruang chat ke dalam layar */
.chat-detail-view.active {
    left: 0; 
}

.chat-user-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.chat-user-item:hover, .chat-user-item.active-chat {
    background: #f0f2f5;
}

/* DESKTOP MODE: Side-by-side (WA Web) */
@media (min-width: 768px) {
    .chat-list-view {
        width: 35%; /* List 35% layar */
    }
    .chat-detail-view {
        position: relative;
        width: 65%; /* Chat 65% layar */
        left: 0; /* Selalu tampil */
    }
    .btn-back-chat {
        display: none !important; /* Hilangkan tombol back di Desktop */
    }
}

/* --- Logo & Icon Updates --- */
#main-logo {
    height: 40px;
    object-fit: contain;
    display: block;
}

.nav-menus {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-nav i, .btn-login i, .btn-logout i {
    font-size: 1.1rem;
}

.btn-nav span {
    font-size: 0.8rem;
    font-weight: 500;
}

/* --- Cart Badge (Bubble) --- */
.btn-cart-nav {
    position: relative;
    padding: 5px 10px;
}

.badge {
    position: absolute;
    top: -5px;
    right: -2px;
    background: #e03131;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    display: none; /* Sembunyi jika 0 */
}

/* --- Responsive Nav --- */
@media (max-width: 480px) {
    .btn-nav span { display: none; } /* Hanya icon di HP */
    .logo img { height: 32px; }
}

/* --- Admin Panel Refinement --- */
.sidebar .btn-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    text-align: left;
    border-radius: 12px;
}

.admin-table th {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    background: #f8f9fa;
}

.admin-table td {
    padding: 15px 10px;
}

.admin-form-card {
    border: 1px solid #eee;
    background: white;
    box-shadow: var(--shadow-soft);
}

.btn-back-chat i {
    font-size: 1.2rem;
}

/* Status Labels */
.status-pill {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Sapaan Nama Minimalis */
#user_info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    border-left: 1px solid #eee;
}

#user_name {
    font-size: 0.7rem; /* Sangat kecil & elegan */
    font-weight: 300;   /* Tipis */
    color: #999;        /* Warna abu-abu halus */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tombol Logout Ikonik */
.btn-logout {
    background: none;
    border: none;
    color: #cc0000;
    cursor: pointer;
    font-size: 0.85rem;
    opacity: 0.5;
    transition: 0.3s;
}

.btn-logout:hover {
    opacity: 1;
}

/* Penyesuaian Tombol Minimize agar tetap di kanan */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.price-container {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
}

.price-old {
    font-size: 0.75rem;
    color: #e03131;
    text-decoration: line-through;
    opacity: 0.7;
    margin-bottom: -5px;
}

/* Update Badge Diskon agar dinamis */
.badge-disc {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #e03131;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.65rem; /* Ukuran lebih kecil untuk rentang angka */
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(224, 49, 49, 0.3);
    max-width: 80%; /* Mencegah badge keluar dari gambar */
    white-space: normal; /* Biarkan teks turun jika terlalu panjang */
    line-height: 1.2;
    text-transform: uppercase;
}

/* Perbaikan untuk teks SKU di detail produk agar tidak memakan tempat */
.modal-description p:first-child {
    background: #eee;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 0.5px;
}

/* Responsive Table untuk layar split-screen/HP */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-table {
    min-width: 400px; /* Memastikan tabel punya ruang saat scroll horizontal di layar sangat sempit */
}

/* Label Diskon Persen di sebelah harga */
.shopee-disc {
    background: #ffeeee;
    color: #ee4d2d;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 4px;
    border: 0.5px solid #ee4d2d;
    border-radius: 2px;
}

/* Container Timer Kecil */
.shopee-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ee4d2d;
    font-size: 0.65rem;
    font-weight: 600;
    margin-top: 4px;
}

.shopee-timer i {
    font-size: 0.6rem;
}

/* Penyesuaian Harga */
.price {
    color: #ee4d2d !important;
    padding: 0 !important;
}
.price-old {
    font-size: 0.7rem;
    margin-top: -2px;
    display: block;
}

/* Timeline Tracking Vertical */
.tracking-timeline {
    margin-top: 15px;
    padding-left: 20px;
    border-left: 2px solid #eee;
    position: relative;
}
.timeline-item {
    position: relative;
    padding-bottom: 20px;
    font-size: 0.8rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: var(--primary-lux);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 0 2px #eee;
}
.timeline-date { 
    color: #999; 
    font-size: 0.7rem; 
    display: block; 
    margin-bottom: 2px;
}
.timeline-desc { 
    color: var(--text-dark); 
    font-weight: 500; 
    line-height: 1.3;
}

/* --- SKELETON LOADING --- */
.skeleton {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: var(--radius-md);
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    box-shadow: none !important;
    border: 1px solid #f9f9f9;
}

.skeleton-img { height: 200px; width: 100%; }
.skeleton-text { height: 15px; margin: 15px; width: 80%; border-radius: 4px; }
.skeleton-price { height: 20px; margin: 0 15px 15px; width: 50%; border-radius: 4px; }

@keyframes shine {
    to { background-position-x: -200%; }
}

/* --- IMAGE ZOOM DETAIL --- */
.modal-image-container {
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
    touch-action: pan-y; /* Mencegah pull-to-refresh saat zoom di mobile */
}

.modal-image-container.zoomed {
    cursor: zoom-out;
}

.modal-image-container img {
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Agar event mouse dibaca oleh container */
}

.modal-image-container.zoomed img {
    transform: scale(2.5); /* Tingkat pembesaran */
}

/* --- BUTTON REFINEMENT --- */
.btn-buy-now {
    background: linear-gradient(135deg, #2b8a3e 0%, #1e5f2a 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    flex: 2; /* Paling besar */
    box-shadow: 0 8px 20px rgba(43, 138, 62, 0.3);
    text-transform: uppercase;
}

.btn-fav {
    background: white;
    border: 1.5px solid #eee;
    color: #e03131;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s;
}

.btn-fav.active {
    background: #fff5f5;
    border-color: #ffa8a8;
}

/* --- MODERN CHAT TOGGLE --- */
.chat-toggle {
    background: #1a1a1a;
    width: 60px;
    height: 60px;
    border-radius: 50% !important;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.chat-toggle span#user_chat_badge {
    position: absolute;
    top: 0;
    right: 0;
}

/* --- PERBAIKAN TOMBOL MODAL & BUY NOW PULSE --- */
.btn-action-outline {
    background: white;
    border: 2px solid #f0f0f0;
    color: var(--text-dark);
    border-radius: 14px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-action-outline:hover {
    border-color: var(--primary-lux);
    color: var(--primary-lux);
    transform: translateY(-3px);
}

.btn-action-outline.active {
    color: #e03131;
    border-color: #ffa8a8;
    background: #fff5f5;
}

.btn-buy-pulse {
    background: linear-gradient(135deg, #d4a373 0%, #b5835a 100%) !important;
    border: none;
    border-radius: 14px !important;
    color: white;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 15px rgba(212, 163, 115, 0.4) !important;
    animation: pulse-buy 2s infinite;
    text-transform: uppercase;
}

@keyframes pulse-buy {
    0% { box-shadow: 0 0 0 0 rgba(212, 163, 115, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(212, 163, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 163, 115, 0); }
}

/* --- PERBAIKAN ICON CHAT LEBIH MODERN --- */
.chat-toggle {
    background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%) !important;
    color: #fff !important;
    border: 3px solid #fff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.chat-toggle:hover {
    transform: scale(1.1) rotate(-10deg) !important;
    background: linear-gradient(135deg, var(--primary-lux) 0%, #b5835a 100%) !important;
}

.chat-toggle i {
    font-size: 1.6rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* --- TAHAP 2: SCROLLBAR & SKELETON PRO --- */

/* Scrollbar tipis dan elegan (Chrome/Safari) */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: rgba(212, 163, 115, 0.4); 
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 163, 115, 0.8); 
}

/* Override Skeleton Shimmer agar lebih mulus (mirip Instagram/Facebook) */
.skeleton {
    background: #f6f7f8 !important;
    background: linear-gradient(to right, #eeeeee 8%, #e0e0e0 18%, #eeeeee 33%) !important;
    background-size: 800px 100% !important;
    animation: shimmer-pro 1.5s linear infinite forwards !important;
    border: none !important;
}

@keyframes shimmer-pro {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* --- TAHAP 3: ANIMASI BADGE, KARTU & TOAST PREMIUM --- */

/* Animasi Pantulan Badge Keranjang */
.badge.pop {
    animation: badge-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badge-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.6); background: var(--primary-lux); }
    100% { transform: scale(1); }
}

/* Efek Melayang Halus pada Kartu Produk */
.card {
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

@media (min-width: 768px) {
    .card:hover {
        transform: translateY(-6px) !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
    }
}

/* Toast Notifikasi ala Apple (Glassmorphism) */
.toast {
    background: rgba(26, 26, 26, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 4px solid var(--primary-lux);
    border-radius: 14px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px;
}

/* --- TAHAP 1: PERBAIKAN PROPORSI NAVBAR & TOOLTIP BAWAH --- */

/* Tooltip arah bawah khusus untuk elemen di area atas (seperti tombol share) */
[data-tooltip-bottom] {
    position: relative;
}
[data-tooltip-bottom]::after {
    content: attr(data-tooltip-bottom);
    position: absolute;
    top: 120%; /* Muncul ke arah bawah */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    font-size: 0.7rem;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}
[data-tooltip-bottom]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(5px); /* Animasi turun */
}

/* Responsivitas Navbar untuk layar HP (Mencegah ikon tumpah/sesak) */
@media (max-width: 600px) {
    .navbar {
        padding: 0.6rem 3%;
        gap: 5px;
    }
    .nav-menus {
        gap: 8px; /* Rapatkan jarak antar ikon */
    }
    .btn-nav i, .btn-login i, .btn-logout i {
        font-size: 1rem; /* Sedikit dikecilkan */
    }
    .btn-nav {
        padding: 4px; /* Kurangi padding bawaan tombol */
    }
    /* Sembunyikan nama user di layar sempit, cukup ikon logout */
    #user_name {
        display: none !important; 
    }
    #user_info {
        padding-left: 5px;
        gap: 5px;
    }
}

/* --- TAHAP 2: NATIVE APP FEEL & PERFORMANCE --- */

html {
    scroll-behavior: smooth; /* Gulir halus saat navigasi */
}

body {
    /* Mencegah efek pantulan (bounce) berlebih saat mentok scroll di mobile */
    overscroll-behavior-y: none; 
}

/* Transisi gambar agar tidak muncul mendadak */
.card img {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Memperhalus bayangan Navbar saat digulir */
.navbar {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- TAHAP 3: PERBAIKAN PROPORSI HEADER (NAVBAR) --- */

.nav-menus {
    display: flex;
    align-items: center;
    gap: 8px; /* Rapatkan jarak antar ikon */
}

/* Sembunyikan teks menu secara default (untuk HP & Tablet) agar tidak penuh */
.btn-nav span {
    display: none; 
}

/* Penyesuaian ukuran ikon agar seragam dan elegan */
.btn-nav i, .btn-login i, .btn-logout i {
    font-size: 1.15rem;
    color: var(--text-dark);
}

.btn-nav, .btn-login, .btn-logout {
    padding: 6px; /* Kurangi padding berlebih */
}

/* Tampilkan teks menu HANYA di layar besar (Desktop) */
@media (min-width: 768px) {
    .btn-nav span { 
        display: inline-block; 
        margin-left: 6px;
        font-size: 0.85rem;
    }
    .nav-menus { gap: 15px; }
}

/* Penyesuaian ekstra untuk layar HP yang sangat sempit */
@media (max-width: 480px) {
    .navbar { 
        padding: 10px 15px; 
    }
    .logo img { 
        height: 26px; /* Perkecil logo sedikit agar ikon dikanan bernapas */
    }
    .nav-menus { 
        gap: 5px; 
    }
    .btn-nav i, .btn-login i, .btn-logout i {
        font-size: 1.05rem; 
    }
}

/* --- TAHAP 4: DROPDOWN & SEARCH REFINEMENT --- */

.dropdown-menu {
    display: none; /* Sembunyi secara default */
    position: absolute;
    top: 130%;
    right: 0;
    background: white;
    min-width: 180px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 8px 0;
    border: 1px solid #eee;
    animation: fadeInDown 0.3s ease;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.85rem;
    transition: 0.2s;
}

.dropdown-menu a:hover {
    background: #f8f9fa;
    color: var(--primary-lux);
}

.dropdown-menu i {
    width: 16px;
    text-align: center;
    font-size: 1rem;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- TAHAP 5: STICKY SEARCH BAR & MOBILE STICKY ACTION (PRO FEEL) --- */

/* Membuat Search Bar menempel di bawah Header saat digulir */
.search-bar-container {
    position: sticky;
    top: 55px; /* Sesuaikan dengan tinggi navbar mobile */
    background: rgba(252, 250, 248, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 990;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
    .search-bar-container { top: 65px; } /* Header desktop sedikit lebih tinggi */
}

/* Di Mobile, buat tombol Beli/Keranjang di detail produk melayang (Sticky Bottom) */
@media (max-width: 768px) {
    .modal-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        padding: 15px 5%;
        box-shadow: 0 -10px 25px rgba(0,0,0,0.08);
        z-index: 100;
        margin-top: 0 !important;
        border-radius: 20px 20px 0 0;
        align-items: center;
    }
    
    /* Beri ruang kosong ekstra di bawah info produk agar tidak tertutup tombol melayang */
    .modal-info {
        padding-bottom: 100px !important; 
    }
}

/* --- TAHAP 7: PAGE TRANSITION & TOP LOADING BAR --- */

/* Efek Loading Bar di atas layar */
#top_loading_bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-lux), #e6c2a1, var(--primary-lux));
    background-size: 200% 100%;
    z-index: 9999;
    transition: width 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
    width: 0;
}

#top_loading_bar.loading {
    opacity: 1;
    width: 70%;
    animation: loadingMove 1s infinite linear;
}

#top_loading_bar.complete {
    width: 100%;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.4s ease 0.2s;
}

@keyframes loadingMove {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Animasi Fade-in untuk konten utama saat pindah halaman */
.page-fade-in {
    animation: pageFadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- TAHAP 8: PREMIUM CART & CHECKOUT UI --- */

/* Layout Keranjang & Checkout yang lebih rapi */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

@media (min-width: 992px) {
    .cart-layout { grid-template-columns: 1.5fr 1fr; }
}

/* Item produk di keranjang yang lebih clean */
.cart-item {
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 0;
}

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

/* Ringkasan Pembayaran (Sticky) */
.checkout-summary-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 130px;
    border: 1px solid #f0f0f0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.summary-total {
    border-top: 1px dashed #ddd;
    padding-top: 15px;
    margin-top: 15px;
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1.1rem;
}

/* Badge Keamanan */
.trust-badges {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
    opacity: 0.6;
    font-size: 0.7rem;
    color: #666;
}

/* --- TAHAP 9: ADVANCED CHECKOUT UI --- */

/* Penyesuaian khusus untuk elemen form di checkout */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .checkout-grid { grid-template-columns: 1.5fr 1fr; }
}

.form-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bg-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mempercantik Dropdown Wilayah */
.form-group select:disabled {
    background: #f0f0f0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Ringkasan melayang di sisi kanan */
.sticky-summary {
    position: sticky;
    top: 130px;
}

/* --- TAHAP 10: ORDER PROGRESS TRACKER --- */

.order-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-soft);
    border: 1px solid #f0f0f0;
}

/* Stepper / Progress Bar */
.order-stepper {
    display: flex;
    justify-content: space-between;
    margin: 25px 0;
    position: relative;
}

.order-stepper::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #eee;
    z-index: 1;
}

.step-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.step-dot {
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #ccc;
    transition: 0.3s;
}

.step-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #999;
    margin-top: 8px;
    text-transform: uppercase;
}

/* State Aktif (Warna Emas Eleiby) */
.step-item.active .step-dot {
    background: var(--primary-lux);
    border-color: var(--primary-lux);
    color: white;
    box-shadow: 0 0 10px rgba(212, 163, 115, 0.4);
}

.step-item.active .step-label {
    color: var(--text-dark);
}

/* Garis Progress Aktif */
.stepper-progress-fill {
    position: absolute;
    top: 15px;
    left: 10%;
    height: 2px;
    background: var(--primary-lux);
    z-index: 1;
    transition: width 0.5s ease;
}

/* Merapikan tampilan tombol Tanya di samping Checkout */
.checkout-summary-card .btn-action:hover {
    background: #fbb019 !important; /* Warna kuning sedikit lebih gelap saat hover */
    transform: translateY(-2px);
    transition: 0.3s;
}

/* Memastikan padding summary card pas untuk layout tombol baru */
@media (max-width: 480px) {
    .checkout-summary-card {
        padding: 20px 15px;
    }
}

/* --- FINAL TOUCH: BUTTON HARMONY --- */

.btn-buy-pulse {
    /* Menyamakan font dengan standar aplikasi premium */
    font-family: 'Poppins', sans-serif !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-action i {
    /* Sedikit efek bayangan pada ikon agar lebih muncul */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* Tooltip khusus untuk tombol chat agar user tahu fungsinya walau tanpa teks */
.btn-action[data-tooltip]::after {
    bottom: 130%;
    font-weight: 600;
}

@media (max-width: 480px) {
    /* Di layar kecil, pastikan tombol punya tinggi yang nyaman untuk jempol */
    .checkout-summary-card div[style*="display: flex"] {
        height: 50px !important;
    }
    .btn-action {
        width: 50px !important;
    }
}

/* --- PERBAIKAN DETAIL PRODUCT ACTIONS --- */

.modal-actions {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    align-items: stretch;
    height: 54px; /* Tinggi standar yang nyaman */
}

.btn-action-outline {
    width: 54px; /* Ikon samping berbentuk kotak presisi */
    flex-shrink: 0;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-dark);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-action-outline.active {
    color: #e03131;
    border-color: #ffa8a8;
    background: #fff5f5;
}

.btn-buy-pulse {
    flex: 1; /* Tombol beli otomatis melebar */
    border-radius: 16px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Responsif Mobile (Sticky Bottom seperti Shopee/Tokopedia) */
@media (max-width: 768px) {
    .modal-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 15px 5%;
        box-shadow: 0 -15px 35px rgba(0,0,0,0.06);
        border-radius: 28px 28px 0 0;
        height: 90px; /* Lebih tinggi agar nyaman di jempol */
        z-index: 2001;
        margin-top: 0 !important;
    }
}

/* --- ADMIN & MANAGER PRO MOBILE LAYOUT --- */
.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.stat-card-pro {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
}

.stat-card-pro:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.table-wrapper-pro {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    padding: 15px;
    overflow-x: auto;
    border: 1px solid #f0f0f0;
    -webkit-overflow-scrolling: touch;
}

/* Mobile Tweak: Sidebar Admin jadi Sticky Tabs */
@media (max-width: 768px) {
    .admin-container {
        flex-direction: column;
        padding: 10px;
    }
    .sidebar {
        position: sticky;
        top: 55px; /* Menempel di bawah navbar */
        background: rgba(252, 250, 248, 0.95);
        backdrop-filter: blur(10px);
        z-index: 100;
        margin: -10px -10px 15px -10px;
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
    }
    .sidebar .btn-cat {
        padding: 8px 16px;
        font-size: 0.8rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .content {
        box-shadow: none;
        padding: 0;
        background: transparent;
    }
}