/**
 * Checkout Button Component
 * Consistent styling for all "Continue to Checkout" buttons across the application
 */

/* Animation keyframes */
@keyframes buttonShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Base checkout button style - extends Bootstrap btn-success */
.btn-checkout {
    /* Remove gradient - let btn-success handle the green color */
    /* background: linear-gradient(135deg, #1b6d52, #005a3e); */
    border: none;
    color: white !important;
    
    /* Typography */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 1.125rem;
    
    /* Sizing - Consistent across all checkout buttons */
    width: 100%;
    padding: 15px 10px;
    min-height: 56px;
    
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* Effects */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
    z-index: 0;
}

/* Ensure button text is above the animation */
.btn-checkout > * {
    position: relative;
    z-index: 2;
}

/* Animated shine effect */
.btn-checkout::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    animation: buttonShine 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Hover state */
.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(25, 135, 84, 0.3);
    /* Let Bootstrap btn-success handle hover color */
    color: white !important;
}

/* Active/pressed state */
.btn-checkout:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(27, 109, 82, 0.2);
}

/* Focus state for accessibility */
.btn-checkout:focus {
    outline: 2px solid #1b6d52;
    outline-offset: 2px;
}

/* Disabled state */
.btn-checkout:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    animation: none;
}

.btn-checkout:disabled::after {
    animation: none;
}

/* Size variants if needed */
.btn-checkout.btn-checkout-sm {
    padding: 10px 20px;
    min-height: 40px;
    font-size: 0.875rem;
}

.btn-checkout.btn-checkout-lg {
    padding: 18px 32px;
    min-height: 60px;
    font-size: 1.125rem;
}

/* Inline variant (not full width) */
.btn-checkout.btn-checkout-inline {
    width: auto;
    min-width: 200px;
}

/* Success variant (after successful action) */
.btn-checkout.btn-checkout-success {
    background: linear-gradient(135deg, #059669, #047857);
}

.btn-checkout.btn-checkout-success:hover {
    background: linear-gradient(135deg, #047857, #059669);
}