/* ==========================================================================
   MYMALLBEAUTY - OFFCANVAS PANELS
   Shared styles for Cart, Wishlist, and Compare slide-out panels.
   ========================================================================== */

/* Panel open state */
.mmb-offcanvas-open .mmb-offcanvas-overlay {
    opacity: 1;
    visibility: visible;
}

.mmb-offcanvas-open .mmb-offcanvas-panel {
    transform: translateX(0);
}

/* ==========================================================================
   ICON BADGES (header)
   ========================================================================== */
.mmb-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--mmb-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    transition: transform .2s ease;
}

.mmb-icon-badge.mmb-badge-red {
    background: #ef4444;
}

/* Badge scale animation on update */
.mmb-icon-badge.mmb-badge-bounce {
    animation: mmbBadgeBounce .3s ease;
}

@keyframes mmbBadgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* ==========================================================================
   SEARCH RESULTS SCROLLBAR
   ========================================================================== */
#mmbSearchResults {
    scrollbar-width: thin;
    scrollbar-color: var(--mmb-primary) #f3f4f6;
}

#mmbSearchResults::-webkit-scrollbar {
    width: 5px;
}

#mmbSearchResults::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 0 8px 8px 0;
}

#mmbSearchResults::-webkit-scrollbar-thumb {
    background: var(--mmb-primary);
    border-radius: 4px;
}

#mmbSearchResults::-webkit-scrollbar-thumb:hover {
    background: var(--mmb-primary-dark);
}

/* Bold highlights inside search results */
#mmbSearchResults strong {
    font-weight: 700;
}

/* ==========================================================================
   SMOOTH SCROLLING
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar on overflow containers */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

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

/* Line clamp support */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}