/* 
=====================================================
Cart System CSS - نظام سلة التسوق
=====================================================
*/

/* Cart Variables */
:root {
    --cart-primary: #39B54A;
    --cart-secondary: #32a852;
    --cart-danger: #e74c3c;
    --cart-warning: #f39c12;
    --cart-info: #3498db;
    --cart-success: #27ae60;
    
    --cart-bg: #ffffff;
    --cart-border: #e9ecef;
    --cart-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --cart-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    --cart-radius: 10px;
    --cart-radius-lg: 15px;
    --cart-transition: all 0.3s ease;
}

/* ======================
   Add to Cart Animations
   ====================== */

/* Flying Cart Animation */
.cart-flying-animation {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--cart-primary) 0%, var(--cart-secondary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4rem;
    box-shadow: 0 4px 20px rgba(57, 181, 74, 0.4);
    animation: flyToCartKeyframes 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes flyToCartKeyframes {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    20% {
        opacity: 1;
        transform: scale(1.1) rotate(45deg);
    }
    60% {
        opacity: 0.8;
        transform: scale(0.8) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) rotate(360deg);
    }
}

/* Product Card Cart Button Animations */
.add-to-cart-btn {
    position: relative;
    overflow: hidden;
    transition: var(--cart-transition);
}

.add-to-cart-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.add-to-cart-btn:hover::before {
    width: 300px;
    height: 300px;
}

.add-to-cart-btn.loading {
    background: var(--cart-warning) !important;
    cursor: not-allowed;
}

.add-to-cart-btn.success {
    background: var(--cart-success) !important;
    animation: successPulse 0.6s ease-in-out;
}

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

/* ======================
   Cart Icon Animations
   ====================== */

/* Header Cart Icon Pulse */
.cart-btn.cart-updated {
    animation: cartPulse 0.8s ease-in-out;
}

@keyframes cartPulse {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(1.1);
    }
}

/* Cart Count Badge Animation */
.cart-count {
    animation: bounceIn 0.5s ease-out;
}

.cart-count.updating {
    animation: countUpdate 0.4s ease-in-out;
}

@keyframes countUpdate {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
        background: var(--cart-warning);
    }
}

/* ======================
   Cart Page Animations
   ====================== */

/* Cart Item Entry Animation */
.cart-item {
    animation: slideInFromRight 0.5s ease-out;
}

.cart-item:nth-child(even) {
    animation-delay: 0.1s;
}

.cart-item:nth-child(odd) {
    animation-delay: 0.05s;
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Cart Item Removal Animation */
.cart-item.removing {
    animation: slideOutToRight 0.3s ease-in forwards;
}

@keyframes slideOutToRight {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(20px) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
        height: 0;
        margin: 0;
        padding: 0;
    }
}

/* Quantity Controls Animation */
.quantity-controls .quantity-btn:active {
    animation: buttonPress 0.1s ease-in-out;
}

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

/* ======================
   Loading Animations
   ====================== */

/* Loading Spinner */
.cart-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Loading Overlay */
.cart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ======================
   Success Animations
   ====================== */

/* Success Checkmark */
.success-checkmark {
    animation: checkmarkDraw 0.6s ease-in-out forwards;
}

@keyframes checkmarkDraw {
    0% {
        stroke-dasharray: 0, 100;
    }
    100% {
        stroke-dasharray: 100, 0;
    }
}

/* Success Modal Animation */
.success-modal .modal-content {
    animation: successBounceIn 0.6s ease-out;
}

@keyframes successBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(-50px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ======================
   Checkout Animations
   ====================== */

/* Form Field Focus Animation */
.checkout-form .form-control:focus {
    animation: fieldFocus 0.3s ease-out;
}

@keyframes fieldFocus {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2);
    }
}

/* Validation Error Shake */
.form-control.is-invalid {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ======================
   Micro-interactions
   ====================== */

/* Button Hover Effects */
.cart-btn-interactive {
    position: relative;
    overflow: hidden;
    transition: var(--cart-transition);
}

.cart-btn-interactive::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}

.cart-btn-interactive:hover::after {
    width: 200%;
    height: 200%;
}

/* Cart Summary Highlight */
.cart-summary-highlight {
    animation: highlightPulse 2s ease-in-out infinite;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(57, 181, 74, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 5px rgba(57, 181, 74, 0.2);
    }
}

/* ======================
   Responsive Animations
   ====================== */

/* Mobile Specific Animations */
@media (max-width: 768px) {
    .cart-flying-animation {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .cart-item {
        animation: slideInFromBottom 0.5s ease-out;
    }
    
    @keyframes slideInFromBottom {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ======================
   Special Effects
   ====================== */

/* Sparkle Effect for Success */
.sparkle-effect {
    position: relative;
}

.sparkle-effect::before,
.sparkle-effect::after {
    content: '✨';
    position: absolute;
    animation: sparkle 1.5s ease-in-out infinite;
    pointer-events: none;
}

.sparkle-effect::before {
    top: -10px;
    left: -10px;
    animation-delay: 0s;
}

.sparkle-effect::after {
    top: -10px;
    right: -10px;
    animation-delay: 0.7s;
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

/* ======================
   Theme Integration
   ====================== */

/* Golden Theme Integration */
.golden-cart-theme {
    background: linear-gradient(135deg, #f4c542 0%, #ffd700 100%);
    color: #333;
}

.golden-cart-theme .cart-btn {
    background: linear-gradient(135deg, #f4c542 0%, #ffd700 100%);
    border: 2px solid #e6b800;
}

.golden-cart-theme .cart-btn:hover {
    background: linear-gradient(135deg, #ffd700 0%, #f4c542 100%);
    box-shadow: 0 4px 15px rgba(244, 197, 66, 0.4);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --cart-bg: #2c3e50;
        --cart-border: #34495e;
        --cart-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .cart-flying-animation {
        box-shadow: 0 4px 20px rgba(57, 181, 74, 0.6);
    }
}

/* ======================
   Success Alert Styling
   ====================== */

/* Enhanced success alert colors */
.alert.alert-success,
.alert-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
    border: 2px solid #28a745 !important;
    border-left: 4px solid #28a745 !important;
}

.alert.alert-success i,
.alert-success i {
    color: #28a745 !important;
}

.alert.alert-success .btn-close,
.alert-success .btn-close {
    color: #155724 !important;
}

/* Force success alert styling */
div[class*="alert-success"] {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
    border: 2px solid #28a745 !important;
}

div[class*="alert-success"] i {
    color: #28a745 !important;
}

/* Global success styling override */
.alert-success,
[class*="alert-success"],
.toast.success,
.notification-success {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
    border: 2px solid #28a745 !important;
}

.alert-success i,
[class*="alert-success"] i,
.toast.success i,
.notification-success i {
    color: #28a745 !important;
}

/* Force green success styling everywhere */
div[style*="background-color"][class*="success"],
div[style*="background"][class*="success"] {
    background-color: #d4edda !important;
    color: #155724 !important;
    border-color: #28a745 !important;
}

/* Enhanced success animations */
.alert.alert-success {
    animation: successSlideIn 0.5s ease-out;
}

@keyframes successSlideIn {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateX(-10px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Enhanced success alert glow effect */
.alert-success {
    position: relative;
    overflow: visible;
}

.alert-success::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #28a745, #20c997, #28a745);
    border-radius: 8px;
    z-index: -1;
    animation: successGlow 2s ease-in-out infinite alternate;
}

@keyframes successGlow {
    0% {
        opacity: 0.5;
        filter: blur(2px);
    }
    100% {
        opacity: 0.8;
        filter: blur(4px);
    }
}

/* ======================
   Icon-Only Button Styling
   ====================== */

/* Enhanced button styling for icon-only buttons */
.btn-product {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    min-height: 45px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-product i {
    font-size: 1.2rem !important;
    transition: all 0.3s ease !important;
}

.btn-product:hover i {
    transform: scale(1.2) !important;
}

/* View details button (eye icon) */
.btn-primary-product {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-primary-product:hover {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4) !important;
}

/* Add to cart button (cart icon) */
.btn-success-product {
    background: linear-gradient(135deg, var(--cart-primary) 0%, var(--cart-secondary) 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-success-product:hover {
    background: linear-gradient(135deg, var(--cart-secondary) 0%, var(--cart-primary) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(57, 181, 74, 0.4) !important;
}

/* Loading state for icon-only buttons */
.btn-product.loading {
    background: var(--cart-warning) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.btn-product.success {
    background: var(--cart-success) !important;
    animation: successButtonPulse 0.6s ease-in-out !important;
}

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

/* Enhanced hover effects for icon-only buttons */
.btn-product::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-product:hover::before {
    width: 200px;
    height: 200px;
}

/* Tooltip styling for icon-only buttons */
.btn-product[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 1000;
    animation: tooltipFadeIn 0.3s ease-out;
}

.btn-product[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

@keyframes tooltipFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ======================
   Performance Optimizations
   ====================== */

/* GPU Acceleration */
.cart-animated-element {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .cart-item,
    .cart-flying-animation,
    .cart-btn,
    .add-to-cart-btn {
        animation: none !important;
        transition: none !important;
    }
    
    .cart-count {
        animation: none !important;
    }
}