/**
 * Button Animation Effects
 * Custom animations for buttons throughout the site
 */

/* Base styling for View Details button */
.btn-primary.animated-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
    background: linear-gradient(135deg, #e52d27, #b31217);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    z-index: 1;
}

/* Hover effect  */
.btn-primary.animated-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.12);
} 

/* Active/pressed state */
.btn-primary.animated-btn:active {
    transform: translateY(1px);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
} 

/* Shine effect on hover */
.btn-primary.animated-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0s;
    z-index: -1;
}

.btn-primary.animated-btn:hover::before {
    animation: shine 1.2s infinite;
} 

/* Pulsating effect for button */
.btn-primary.animated-btn.pulsate {
    animation: pulsate 2s infinite;
} 

/* Arrow indicator for button */
.btn-primary.animated-btn .btn-icon {
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.btn-primary.animated-btn:hover .btn-icon {
    transform: translateX(4px);
} 

/* Animations */
@keyframes shine {
    0% {
        left: -100%;
    }
    20% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(227, 30, 36, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(227, 30, 36, 0);
    }
} 

/* Special styles for Apply Filters button */
.btn-primary.animated-btn[type="submit"] {
    background: linear-gradient(135deg, #e52d27, #b31217);
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px 20px;
}

.btn-primary.animated-btn[type="submit"]:hover {
    background: linear-gradient(135deg, #b31217, #e52d27);
}

/* Cart Button Animations */

/* Mini Cart Quantity Buttons */
.quantity-decrease.animated-btn,
.quantity-increase.animated-btn {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.quantity-decrease.animated-btn:hover,
.quantity-increase.animated-btn:hover {
    transform: scale(1.15);
    z-index: 2; 
}

/* Remove item button animation */
.remove-item.animated-btn,
.remove-item-btn.animated-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.remove-item.animated-btn:hover,
.remove-item-btn.animated-btn:hover {
    background-color: #dc3545;
    color: white;
    transform: rotate(5deg) scale(1.1);
}

.remove-item.animated-btn i,
.remove-item-btn.animated-btn i {
    transition: all 0.3s ease;
}

.remove-item.animated-btn:hover i,
.remove-item-btn.animated-btn:hover i {
    animation: shake 0.5s ease-in-out;
}

/* Checkout Button Animation */
.checkout-btn.animated-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #e52d27, #b31217);
    transition: all 0.4s ease;
}

.checkout-btn.animated-btn:hover {
    background: linear-gradient(135deg, #b31217, #e52d27);
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
} 

/* Clear Cart Button Animation */
 .clear-cart-btn.animated-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.clear-cart-btn.animated-btn:hover {
    background-color: #dc3545;
    color: white;
    transform: scale(1.05); 
} 

/* Add to Cart Button Animation */
 form button.animated-btn[type="submit"] {
    background: linear-gradient(135deg, #e52d27, #b31217);
}

form button.animated-btn[type="submit"]:hover {
    background: linear-gradient(135deg, #b31217, #e52d27);
}

form button.animated-btn[type="submit"] i {
    transition: transform 0.3s ease;
}

form button.animated-btn[type="submit"]:hover i {
    transform: translateX(-4px);
}

.clear-cart-btn.animated-btn i {
    transition: all 0.3s ease;
}

.clear-cart-btn.animated-btn:hover i {
    animation: rotateTrash 0.8s ease;
} 

/* Ripple effect styling */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s linear;
    background-color: rgba(255, 255, 255, 0.4);
}

/* Additional Animations */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes shake {
    0% { transform: rotate(0); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0); }
}

@keyframes rotateTrash {
    0% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
    100% { transform: rotate(0); }
} 

/* Small button animations for order history */
.btn-sm.animated-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    z-index: 1;
}

.btn-sm.animated-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-sm.animated-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-sm.animated-btn .btn-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 3px;
}

.btn-sm.animated-btn:hover .btn-icon {
    transform: translateX(3px);
}

.order-actions .animated-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0s;
    z-index: -1;
}

.order-actions .animated-btn:hover::before {
    animation: shine 1s;
}

/* =====================================
   ICON ANIMATIONS FOR CART & CHECKOUT
   ===================================== */

/* Base icon animation setup */
.btn .fa-shopping-cart,
.btn .fa-credit-card,
.btn .fa-sign-in-alt,
.btn .fa-user-plus,
.btn .fa-sign-out-alt,
.btn .fa-eye {
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block;
}

/* Shopping Cart Icon Animation */
.btn:hover .fa-shopping-cart {
    transform: scale(1.1) translateX(2px);
    animation: cartBounce 0.6s ease;
}

@keyframes cartBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: scale(1.1) translateY(0) translateX(2px);
    }
    40% {
        transform: scale(1.15) translateY(-3px) translateX(2px);
    }
    60% {
        transform: scale(1.12) translateY(-2px) translateX(2px);
    }
}

/* Credit Card Icon Animation */
.btn:hover .fa-credit-card {
    transform: scale(1.1) rotateY(10deg);
    color: #28a745;
}

/* Sign-in Icon Animation */
.btn:hover .fa-sign-in-alt {
    transform: scale(1.1) translateX(3px);
    color: #17a2b8;
}

/* User Plus (Sign Up) Icon Animation */
.btn:hover .fa-user-plus {
    transform: scale(1.1) rotate(5deg);
    color: #28a745;
}

/* Sign-out Icon Animation */
.btn:hover .fa-sign-out-alt {
    transform: scale(1.1) translateX(-3px);
    color: #dc3545;
}

/* Eye Icon Animation (View Details) */
.btn:hover .fa-eye {
    transform: scale(1.1);
    color: #17a2b8;
}

/* Special animation for Add to Cart button in product detail */
.btn-primary.w-100 .fa-shopping-cart {
    transition: transform 0.4s ease, color 0.3s ease;
}

.btn-primary.w-100:hover .fa-shopping-cart {
    transform: scale(1.2) rotate(15deg);
    color: #fff;
    animation: addToCartPulse 0.8s ease;
}

@keyframes addToCartPulse {
    0% {
        transform: scale(1.2) rotate(15deg);
    }
    50% {
        transform: scale(1.3) rotate(20deg);
        filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
    }
    100% {
        transform: scale(1.2) rotate(15deg);
    }
}

/* Mini cart specific animations */
.mini-cart .btn:hover .fa-shopping-cart {
    animation: cartWiggle 0.5s ease;
}

.mini-cart .btn:hover .fa-credit-card {
    animation: cardFlip 0.6s ease;
}

@keyframes cartWiggle {
    0%, 100% { transform: scale(1.1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-5deg); }
    75% { transform: scale(1.15) rotate(5deg); }
}

@keyframes cardFlip {
    0% { transform: scale(1.1) rotateY(0deg); }
    50% { transform: scale(1.2) rotateY(180deg); }
    100% { transform: scale(1.1) rotateY(360deg); }
}

/* Prevent animation conflicts with existing trash animations */
.btn .fa-trash,
.btn .fa-trash-alt {
    /* Let existing trash animations take precedence - no additional transforms */
    transition: none;
}

/* =====================================
   LOGIN & SIGNUP FORM ANIMATIONS
   ===================================== */

/* Login Form Sign-in Button */
.btn-primary.w-100 .fa-sign-in-alt {
    transition: transform 0.4s ease, color 0.3s ease, filter 0.3s ease;
}

.btn-primary.w-100:hover .fa-sign-in-alt {
    transform: scale(1.15) translateX(4px);
    color: #fff;
    animation: loginPulse 0.6s ease;
}

@keyframes loginPulse {
    0% {
        transform: scale(1.15) translateX(4px);
    }
    50% {
        transform: scale(1.25) translateX(6px);
        filter: drop-shadow(0 0 6px rgba(23,162,184,0.6));
    }
    100% {
        transform: scale(1.15) translateX(4px);
    }
}

/* Signup Form User Plus Button */
.btn-primary.w-100 .fa-user-plus {
    transition: transform 0.4s ease, color 0.3s ease, filter 0.3s ease;
}

.btn-primary.w-100:hover .fa-user-plus {
    transform: scale(1.15) rotate(10deg);
    color: #fff;
    animation: signupBounce 0.7s ease;
}

@keyframes signupBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: scale(1.15) rotate(10deg) translateY(0);
    }
    40% {
        transform: scale(1.25) rotate(15deg) translateY(-4px);
        filter: drop-shadow(0 0 8px rgba(40,167,69,0.6));
    }
    60% {
        transform: scale(1.2) rotate(12deg) translateY(-2px);
    }
}

/* =====================================
   PRODUCT CARD BUTTON ANIMATIONS
   ===================================== */

/* Quick Add to Cart Button (Product Cards) */
.quick-add-btn .fa-shopping-cart {
    transition: transform 0.3s ease, color 0.3s ease;
}

.quick-add-btn:hover .fa-shopping-cart {
    transform: scale(1.15) rotate(10deg);
    animation: quickAddBounce 0.5s ease;
}

@keyframes quickAddBounce {
    0%, 100% {
        transform: scale(1.15) rotate(10deg);
    }
    50% {
        transform: scale(1.25) rotate(15deg);
    }
}

/* View Details Button (Product Cards) - Simple Shine Animation */
.btn-outline-primary.animated-btn.view-details-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid #e52d27;
    color: #e52d27;
    background: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    z-index: 1;
}

.btn-outline-primary.animated-btn.view-details-btn:hover {
    background: linear-gradient(135deg, #e52d27, #b31217);
    border-color: #e52d27;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.btn-outline-primary.animated-btn.view-details-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Shine effect for View Details button */
.btn-outline-primary.animated-btn.view-details-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0s;
    z-index: -1;
}

.btn-outline-primary.animated-btn.view-details-btn:hover::before {
    animation: shine 1.2s infinite;
}

/* Simple icon animation for View Details */
.view-details-btn .fa-eye {
    transition: transform 0.3s ease;
}

.view-details-btn:hover .fa-eye {
    transform: scale(1.1);
}