/**
 * 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 {
    /* OWN solid green — never inherit btn-success's color: theme_buttons maps
       it to the org's Success theme color (!important), and orgs that set a
       pale badge tint there (e.g. #def2e6) made every Continue/Checkout
       button in the cart flow nearly invisible. */
    background: linear-gradient(135deg, #16a34a, #1e4d2d) !important;
    border: none !important;
    color: white !important;
    
    /* Typography — uppercase MUST carry !important: theme_buttons.css sets
       `.btn { text-transform: none !important }` and this file loads after it,
       so matching importance is what makes UPPERCASE win. Same for weight/
       letter-spacing, which theme_buttons also pins. */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    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;
}

/* Icons inside the button are ALWAYS white — context rules (e.g. an alert's
   `.alert-info .bi` tinting on cart/success) must never ink them against the
   green fill. The .btn prefix out-specifies two-class context rules. */
.btn.btn-checkout i,
.btn.btn-checkout .bi,
.btn-checkout i,
.btn-checkout .bi {
    color: white !important;
}

/* 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);
    background: linear-gradient(135deg, #15803d, #163823) !important;
    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);
}