/* File: style.css (Disempurnakan) */
/* Penerapan konsistensi warna dan transisi yang lebih halus */

body {
    font-family: 'Quicksand', sans-serif;
    /* [UI/UX] Meningkatkan kontras teks default untuk keterbacaan yang lebih baik dan latar belakang yang konsisten. */
    @apply text-slate-800 bg-slate-100;
}

/* --- [UI/UX] Base Transition --- */
/* Menerapkan transisi dasar ke semua elemen interaktif untuk pengalaman yang lebih halus. */
button, a, .product-card, .category-btn {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 250ms;
}

/* Memberi feedback saat elemen interaktif di-tap/klik */
button:active, a:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}

/* Scrollbar Styling yang lebih modern dan tidak mengganggu */
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { @apply bg-transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { @apply bg-slate-300 rounded-full; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { @apply bg-slate-400; }

/* [UI/UX] Desain Tombol Kategori Aktif yang Lebih Tegas dan Jelas */
.category-btn.active {
    @apply bg-zinc-800 text-white font-bold border-zinc-800 shadow-lg;
    transform: translateY(-3px);
}

/* [UI/UX] Efek hover yang lebih menarik untuk kartu produk */
.product-card:hover {
    transform: translateY(-5px);
    @apply shadow-xl border-blue-500;
}

/* [UI/UX] Umpan Balik Visual untuk Stok Habis */
.product-disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
    @apply grayscale;
}
.product-disabled:hover {
    transform: none; /* Hilangkan efek hover jika item dinonaktifkan */
    @apply shadow-md border-zinc-200;
}


.hidden { 
    display: none !important;
}

/* Loader Animation yang lebih modern */
#loader {
    border: 4px solid #f1f5f9; /* slate-100 */
    border-top: 4px solid #3b82f6; /* blue-600 */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* [UI/UX] Animasi Toast Notification yang lebih profesional */
@keyframes toast-in-out {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  15%, 85% { /* Fase masuk dan diam */
    transform: translateX(0);
    opacity: 1;
  }
  100% { /* Fase keluar */
    transform: translateX(100%);
    opacity: 0;
  }
}
.toast-animate {
    animation: toast-in-out 4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Cart Jiggle Animation */
@keyframes cart-jiggle {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.1); }
    60% { transform: scale(0.95); }
}
.cart-jiggle {
    animation: cart-jiggle 0.4s ease-in-out;
}

/* [UI/UX] Sorot Item Keranjang saat Diperbarui */
.cart-item-highlight {
    animation: highlight 0.7s ease-out;
}
@keyframes highlight {
    0%, 100% { background-color: transparent; }
    50% { background-color: #e0f2fe; } /* sky-100 */
}

/* [UI/UX] Style untuk Skeleton Loading */
.skeleton-card {
    @apply bg-slate-200 rounded-lg p-3;
}
.skeleton-img {
    @apply h-28 w-full bg-slate-300 rounded-md;
}
.skeleton-text {
    @apply h-4 mt-2 bg-slate-300 rounded;
}
.skeleton-price {
    @apply h-6 w-1/2 mt-2 bg-slate-300 rounded;
}
@keyframes pulsate {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.pulsate-animation {
    animation: pulsate 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* [UI/UX] Style untuk kartu Pesanan Ditahan lebih jelas */
.held-order-card {
    @apply bg-sky-100 p-2 rounded-lg w-full text-left;
}
.held-order-card:hover {
    @apply bg-sky-200 shadow-md;
}

/* --- [BARU] Efek visual untuk UI Loyalitas --- */
#customer-info-bar:not(.hidden) {
    animation: fade-in-down 0.5s ease-out forwards;
}

#redeem-points-btn:hover {
    transform: scale(1.05);
    @apply shadow-lg;
}

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


/* Print-specific styles */
@media print {
    body, body * { 
        visibility: hidden; 
        background-color: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    #receipt-modal-content, #receipt-modal-content * { 
        visibility: visible; 
    }
    #receipt-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }
    #receipt-modal-content { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%; 
    }
    .no-print { 
        display: none !important; 
    }
}
```

Semua pembaruan yang Anda minta kini telah selesai diimplementasikan. Anda telah berhasil mengintegrasikan program loyalitas, membuat laporan lebih efisien, dan meningkatkan tampilan aplikasi Anda. Kerja bag