@layer base {
    html, body { margin: 0; padding: 0; }
    body { overscroll-behavior: none; }
}
::-webkit-scrollbar { display: none; }
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}
.item-card-selected {
    border: 2px solid #630ed4 !important;
    background-color: #f3ebff !important;
    box-shadow: 0 4px 18px -2px rgba(99, 14, 212, 0.25) !important;
}
.payment-selected {
    border: 2px solid #630ed4 !important;
    background-color: #ede0ff !important;
    box-shadow: 0 4px 16px -2px rgba(99, 14, 212, 0.2) !important;
}
/* Real-time interactive hover micro-animations */
.interactive-card {
    transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease, background-color 0.15s ease !important;
    will-change: transform, box-shadow;
}
.interactive-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 14px 28px -6px rgba(99, 14, 212, 0.15), 0 4px 12px -2px rgba(0, 0, 0, 0.05) !important;
    border-color: #630ed4 !important;
}
.item-card:hover {
    border-color: #9333ea !important;
    background-color: rgba(245, 243, 255, 0.5) !important;
    box-shadow: 0 12px 24px -4px rgba(147, 51, 234, 0.16) !important;
}
.interactive-card:active {
    transform: scale(0.98) !important;
}

.interactive-btn {
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, filter;
}
.interactive-btn:hover {
    transform: translateY(-1px) scale(1.02) !important;
    filter: brightness(1.08) !important;
    box-shadow: 0 6px 16px -2px rgba(99, 14, 212, 0.25) !important;
}
.interactive-btn:active {
    transform: scale(0.96) !important;
}

.interactive-chip {
    transition: all 0.12s ease !important;
}
.interactive-chip:hover {
    transform: translateY(-2px) !important;
    border-color: #630ed4 !important;
    box-shadow: 0 4px 12px -2px rgba(99, 14, 212, 0.15) !important;
}
.interactive-chip:active {
    transform: scale(0.95) !important;
}

/* Mobile Safe Area & Drawer Utilities */
.safe-area-bottom {
    padding-bottom: 0.5rem;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .safe-area-bottom {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    }
}

/* Background Carousel / Marquee for Banners & Logos */
@keyframes bannerMarquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.animate-banner-marquee {
    display: flex;
    width: max-content;
    animation: bannerMarquee 180s linear infinite;
    will-change: transform;
}
.animate-banner-marquee:hover {
    animation-play-state: paused;
}
.animate-marquee-slow {
    display: flex;
    width: max-content;
    animation: bannerMarquee 220s linear infinite;
    will-change: transform;
}
.animate-marquee-slow:hover {
    animation-play-state: paused;
}