/* Custom Styles for Mitra Belanja */

:root {
    --scrollbar-track: #f1f1f1;
    --scrollbar-thumb: #c1c1c1;
    --scrollbar-thumb-hover: #a1a1a1;
}

body {
    font-family: 'Inter', sans-serif;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar for Cart and Grid */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.product-card {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Material Symbols sizing */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glassmorphism effects */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Active states */
.category-btn.active {
    background-color: #00236f;
    color: white;
}

.payment-method.active {
    background-color: #e0e7ff;
    border-color: #00236f;
    color: #00236f;
}

/* Tablet (md) */
@media (min-width: 768px) {
    .page-content {
        padding: 2rem;
    }
}

/* Laptop (lg) */
@media (min-width: 1024px) {
    .product-card img {
        height: 10rem;
    }
}

/* Large Desktop (xl) */
@media (min-width: 1280px) {
    .product-card img {
        height: 12rem;
    }
}

/* Custom Responsive Utilities */
@media (max-width: 1023px) {
    #page-cashier {
        height: auto;
        overflow: visible;
    }
    #cart-sidebar {
        position: sticky;
        top: 4rem;
        height: 50vh;
        border-left: none;
        border-bottom: 1px solid #c5c5d3;
    }
    main {
        padding-bottom: 5rem;
    }
}

/* Utilities */
.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AI Agent Styles */
#ai-agent-window {
    z-index: 200;
}

#ai-chat-messages::-webkit-scrollbar {
    width: 4px;
}

#ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.ai-msg {
    animation: slideInLeft 0.3s ease-out forwards;
}

.user-msg {
    animation: slideInRight 0.3s ease-out forwards;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-10px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(10px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

#ai-suggestions::-webkit-scrollbar {
    display: none;
}