/**
 * Sparkles Button Components
 * 12 button variants with premium animations
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* ========== BASE BUTTON ========== */
.sparkles-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    border-width: 0;
    border-radius: .5rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.sparkles-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.sparkles-btn-primary:hover {
    background-color: var(--color-primary-dark);
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

.sparkles-btn-primary:active {
    --tw-translate-y: 0px;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    transition-duration: .1s;
}

/* Ripple Effect for Primary Button */
.sparkles-btn-primary::before {
    content: '';
    transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1), height 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 0;
    height: 0;
    border-radius: var(--radius-full);
}

.sparkles-btn-primary:active::before {
    width: 300px;
    height: 300px;
}

/* ========== SECONDARY BUTTON ========== */
.sparkles-btn-secondary {
    background-color: var(--color-secondary);
}

.sparkles-btn-secondary,
.sparkles-author-social-link:hover {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
}

.sparkles-btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
}

/* ========== SUCCESS BUTTON ========== */
.sparkles-btn-success,
.sparkles-btn-danger {
    --tw-bg-opacity: 1;
}

.sparkles-btn-success {
    background-color: rgba(5,150,105,var(--tw-bg-opacity,1));
}

.sparkles-btn-success:hover {
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

/* ========== DANGER BUTTON ========== */
.sparkles-btn-danger {
    background-color: rgba(220,38,38,var(--tw-bg-opacity,1));
}

.sparkles-btn-danger:hover {
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

/* ========== OUTLINE BUTTON ========== */
.sparkles-btn-outline {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: initial;
    border-width: 2px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

/* ========== GHOST BUTTON ========== */
.sparkles-btn-ghost {
    color: var(--color-secondary);
    background-color: initial;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

.sparkles-btn-ghost:hover {
    color: var(--color-primary);
    background-color: var(--gray-100);
}

/* ========== GRADIENT BUTTON ========== */
.sparkles-btn-gradient {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
    position: relative;
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-to: var(--color-primary-dark) var(--tw-gradient-to-position);
}

.sparkles-btn-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    transition-duration: .3s;
    border-radius: .5rem;
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-primary) var(--tw-gradient-from-position);
    --tw-gradient-to: #fff0 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: var(--color-primary-dark) var(--tw-gradient-to-position);
}

.sparkles-btn-gradient:hover::after {
    opacity: 1;
}

.sparkles-btn-gradient:hover {
    --tw-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

/* ========== FLOATING ACTION BUTTON ========== */
.sparkles-btn-floating {
    background-color: var(--color-primary);
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border-radius: var(--radius-full);
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: var(--z-modal);
    container-type: inline-size;
}

.sparkles-btn-floating:hover {
    transform: scale(1.1);
    --tw-shadow: 0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
}

/* ========== ICON BUTTON ========== */
.sparkles-btn-icon {
    color: var(--color-secondary);
    width: 2.5rem;
    height: 2.5rem;
    padding: .5rem;
    border-radius: .375rem;
    background-color: initial;
}

.sparkles-btn-icon:hover {
    color: var(--color-primary);
    background-color: var(--gray-100);
}

/* ========== LOADING BUTTON ========== */
.sparkles-btn-loading {
    position: relative;
    color: #0000;
}

.sparkles-btn-loading::after {
    content: '';
    top: 50%;
    left: 50%;
    animation: sparkles-spin 1s linear infinite;
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
    border-color: currentColor;
    border-radius: var(--radius-full);
    border-top-color: #0000;
}

/* sparkles-spin keyframe moved to animations/sparkles-animations.css */

/* ========== BUTTON SIZES ========== */
.sparkles-btn-xs,
.sparkles-alert-inline {
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .75rem;
    line-height: 1rem;
}

.sparkles-btn-lg,
.sparkles-action-button.xl {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.sparkles-btn-xl {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* ========== BUTTON WIDTHS ========== */
.sparkles-btn-full {
    width: 100%;
}

.sparkles-btn-wide {
    min-width: 200px;
}

/* ========== CHECKOUT BUTTON (SPECIAL) ========== */
.sparkles-btn-checkout {
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-dark));
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    border-radius: var(--radius-full);
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
    container-type: inline-size;
}

.sparkles-btn-checkout:hover {
    transform: scale(1.02);
    background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary));
    --tw-shadow: 0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
}

/* ========== LINK BUTTON ========== */
.sparkles-btn-link {
    color: var(--color-primary);
    background-color: initial;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    border-radius: .125rem;
}

.sparkles-btn-link:hover {
    background-color: var(--color-accent);
    color: var(--color-primary-dark);
}

/* ========== BUTTON GROUPS ========== */
.sparkles-btn-group {
    display: inline-flex;
    border-radius: .5rem;
    overflow: hidden;
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
}

.sparkles-btn-group .sparkles-btn {
    border-radius: 0;
    border-right-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgba(255,255,255,var(--tw-border-opacity,1));
}

.sparkles-btn-group .sparkles-btn:first-child {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.sparkles-btn-group .sparkles-btn:last-child {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-right-width: 0;
}

.sparkles-btn-group .sparkles-btn:only-child {
    border-radius: .5rem;
    border-right-width: 0;
}

/* ========== SPARKLE EFFECTS ========== */
.sparkles-btn-sparkle {
    position: relative;
    overflow: visible;
}

.sparkles-btn-sparkle::after {
    content: '✨';
    top: -5px;
    right: -5px;
    animation: sparkle-float 2s ease-in-out infinite;
    position: absolute;
    font-size: .75rem;
    line-height: 1rem;
    opacity: 0;
}

.sparkles-btn-sparkle:hover::after {
    opacity: 1;
}

/* ========== AMASTY-INSPIRED VARIANTS ========== */

/* Light button variant */
.sparkles-btn-light {
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity,1));
    color: var(--gray-700);
    border-width: 1px;
    border-color: var(--gray-300);
    --tw-shadow: 0 1px 2px 0 #0000000d;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
}

.sparkles-btn-light:hover {
    background-color: var(--gray-50);
    border-color: var(--gray-400);
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
}

.sparkles-btn-light:active {
    background-color: var(--gray-100);
    --tw-translate-y: 0px;
}

/* Brown/Dark button variant */
.sparkles-btn-brown {
    background-color: var(--color-taupe);
}

.sparkles-btn-brown:hover {
    background-color: var(--color-taupe-light);
    --tw-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);
}

.sparkles-btn-brown:active {
    background-color: var(--color-taupe-dark);
    --tw-translate-y: 0px;
}

/* Gray button variant */
.sparkles-btn-gray {
    background-color: var(--gray-200);
    color: var(--gray-800);
    border-width: 1px;
    border-color: var(--gray-300);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
}

.sparkles-btn-gray:hover {
    background-color: var(--gray-300);
    border-color: var(--gray-400);
    color: var(--gray-900);
}

.sparkles-btn-gray:active {
    --tw-bg-opacity: 1;
    background-color: rgba(156,163,175,var(--tw-bg-opacity,1));
}

/* Icon button size variants */
.sparkles-btn-icon.sparkles-btn-sm,
.sparkles-btn-icon.sparkles-btn-lg {
    width: var(--sparkles-btn-icon-size);
    height: var(--sparkles-btn-icon-size);
    padding: var(--sparkles-btn-icon-padding);
}

.sparkles-btn-icon.sparkles-btn-sm {
    --sparkles-btn-icon-size: 2rem;
    --sparkles-btn-icon-padding: .25rem;
}

.sparkles-btn-icon.sparkles-btn-lg {
    --sparkles-btn-icon-size: 3rem;
    --sparkles-btn-icon-padding: .75rem;
}

/* ========== MIGRATION COMPATIBILITY REMOVED ========== */
/* Legacy button classes removed - use sparkles-btn-* classes */

/* ========== ACCESSIBILITY ========== */
.sparkles-btn:focus:not(:focus-visible) {
    outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sparkles-btn-primary,
    .sparkles-btn-secondary,
    .sparkles-btn-danger,
    .sparkles-btn-success {
        border-width: 2px;
        border-style: solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sparkles-btn,
    .sparkles-btn::before,
    .sparkles-btn::after {
        transition: none;
        animation: none;
    }
}

/* ========== MODULE BUTTON VARIANTS ========== */

/* Shop The Look Action Buttons */
.quick-view-btn,
.add-to-cart-btn {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.quick-view-btn:hover,
.add-to-cart-btn:hover {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Enhanced Focus Styles for Gallery Thumbnails */
.canva-gallery-thumbnail:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ========== ADDITIONAL BUTTON VARIANTS ========== */

/* Luxury Button Variant */
.sparkles-btn-luxury {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
    background-size: 200% 100%;
    --tw-text-opacity: 1;
    color: rgba(41, 37, 36, var(--tw-text-opacity, 1));
    font-weight: 700;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-gold-darker);
    --tw-shadow: 0 10px 15px -3px rgba(212, 175, 55, 0.3), 0 4px 6px -4px rgba(212, 175, 55, 0.2);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.sparkles-btn-luxury::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
}

.sparkles-btn-luxury:hover {
    background-position: 100% 0;
    border-color: var(--color-gold-dark);
    --tw-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.4), 0 8px 10px -6px rgba(212, 175, 55, 0.3);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    transform: translateY(-2px);
}

.sparkles-btn-luxury:hover::before {
    opacity: 1;
    left: 100%;
}

.sparkles-btn-luxury:active {
    transform: translateY(0);
    --tw-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.3), 0 2px 4px -2px rgba(212, 175, 55, 0.2);
}

/* Warning Button Variant */
.sparkles-btn-warning {
    --tw-bg-opacity: 1;
    background-color: rgba(234, 179, 8, var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
    --tw-shadow: 0 4px 6px -1px rgba(234, 179, 8, 0.2), 0 2px 4px -2px rgba(234, 179, 8, 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    font-weight: 600;
}

.sparkles-btn-warning:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(202, 138, 4, var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgba(234, 179, 8, 0.3), 0 4px 6px -4px rgba(234, 179, 8, 0.2);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    transform: translateY(-1px);
}

.sparkles-btn-warning:active {
    --tw-bg-opacity: 1;
    background-color: rgba(161, 98, 7, var(--tw-bg-opacity, 1));
    transform: translateY(0);
    --tw-shadow: 0 1px 2px 0 rgba(234, 179, 8, 0.1);
}

/* ========== RESPONSIVE DESIGN ========== */
@container (max-width: 768px) {
    .sparkles-btn-floating {
        width: 3rem;
        height: 3rem;
        bottom: 1rem;
        right: 1rem;
    }

    .sparkles-btn-checkout {
        font-size: 1rem;
        line-height: 1.5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: .75rem;
        padding-bottom: .75rem;
    }
}