/* =========================================
   CART DRAWER & UI STYLES
   ========================================= */

/* Drawer Overlay */
.pro-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.pro-cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Cart Drawer */
.pro-cart-drawer {
    position: fixed;
    top: 0;
    right: -400px; /* Start off-screen */
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: #fff;
    z-index: 2001;
    box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* RTL adjustment: Slide from left instead of right if RTL is standard, but the text is RTL. 
   Actually for RTL websites, sliding from left is common, but let's slide from right for now.
   Wait, if it's RTL, right: -400px is the right side. Let's make it slide from left since it's RTL. */
html[dir="rtl"] .pro-cart-drawer {
    right: auto;
    left: -400px;
    box-shadow: 5px 0 25px rgba(0,0,0,0.1);
    transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
html[dir="rtl"] .pro-cart-drawer.open {
    left: 0;
}

.pro-cart-drawer.open {
    right: 0;
}

/* Cart Header */
.pro-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #fdfdfd;
}
.pro-cart-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--pro-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}
.pro-cart-close {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #666;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.pro-cart-close:hover {
    background: #ffeeee;
    color: #ef4444;
    transform: rotate(90deg);
}

/* Cart Body */
.pro-cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--pro-primary) #f1f1f1;
}

/* Cart Footer */
.pro-cart-footer {
    padding: 20px;
    background: #fdfdfd;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.02);
}
.pro-cart-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--pro-dark);
}
.pro-cart-total-price {
    color: var(--pro-primary);
}

/* Add to Cart Quick Button (on cards) */
.quick-add-btn {
    position: absolute;
    top: 15px;
    left: 15px; /* right in ltr, left in rtl */
    background: var(--pro-white);
    color: var(--pro-primary);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 3;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.quick-add-btn:hover {
    background: var(--pro-primary);
    color: var(--pro-white);
    transform: scale(1.1) rotate(90deg);
}
.quick-add-btn:active {
    transform: scale(0.95);
}

/* Adjust pro-badge if needed to avoid overlap */
.pro-card-img-wrap .pro-badge.pulse {
    right: 15px;
    left: auto !important; /* Move discount badge to right in RTL */
}

/* Packs Notification Box */
.packs-notification {
    background: linear-gradient(135deg, #fff8f3 0%, #fff1e6 100%);
    border: 1px solid #ffddc1;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.05);
    animation: fadeIn 0.5s ease-out;
}
.packs-icon {
    width: 45px;
    height: 45px;
    background: var(--pro-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(255, 106, 0, 0.3);
}
.packs-content h4 {
    margin: 0 0 5px 0;
    color: var(--pro-dark);
    font-size: 1.1rem;
}
.packs-content p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.4;
}