/* Premium Palette Choose Button - Complete Override */

/* Container styling with high specificity */
.sb-container div h4 span.palette-card-footer {
    display: block !important;
    width: 100% !important;
    padding: 15px 10px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Main button with maximum specificity to override everything */
.sb-container div h4 span.palette-card-footer button.btn-palette-choose.tab-opener,
.sb-container div h4 button.btn-palette-choose,
button.btn-palette-choose {
    /* Complete reset 
    all: unset;
    box-sizing: border-box;
*/
    /* Display & Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    /* Sizing */
    width: auto !important;
    min-width: 110px !important;
    padding: 7px 15px !important;
    margin: 0 auto !important;

    /* Typography - Force override */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    /* Colors - Vibrant coral/pink gradient */
    color: #ffffff !important;
    /*
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
*/
    /* Border & Shape */
    border: none !important;
    border-radius: 16px !important;
    outline: none !important;

    /* Shadows - Soft and appealing */
    box-shadow:
        0 8px 24px rgba(250, 112, 154, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;

    /* Interaction 
    cursor: pointer !important;
    overflow: visible !important;
    position: relative !important;
*/
    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* Touch optimization */
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    user-select: none !important;
    -webkit-user-select: none !important;

    /* Transform origin */
    transform-origin: center !important;
    transform: translateZ(0) !important;
    will-change: transform, box-shadow !important;
}

/* Icon inside button */
.btn-palette-choose .btn-icon,
.btn-palette-choose .btn-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #ffffff !important;
    font-style: normal !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    will-change: transform !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Button text */
.btn-palette-choose .btn-text {
    color: #ffffff !important;
    position: relative !important;
    z-index: 2 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ripple effect element */
.btn-palette-choose .btn-ripple {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    transform: translate(-50%, -50%) !important;
    transition: all 0.6s ease-out !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Shine effect with ::after */
.btn-palette-choose::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) !important;
    transition: left 0.7s ease !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

/* HOVER STATE */
.sb-container div h4 span.palette-card-footer button.btn-palette-choose:hover,
.btn-palette-choose:hover {
    transform: translateY(-4px) scale(1.05) !important;
    background: linear-gradient(135deg, #fee140 0%, #fa709a 100%) !important;
    box-shadow:
        0 12px 32px rgba(250, 112, 154, 0.45),
        0 6px 16px rgba(0, 0, 0, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.btn-palette-choose:hover::after {
    left: 150% !important;
}

.btn-palette-choose:hover .btn-icon,
.btn-palette-choose:hover .btn-icon i {
    transform: scale(1.3) rotate(12deg) !important;
}

.btn-palette-choose:hover .btn-ripple {
    width: 500% !important;
    height: 500% !important;
    opacity: 0 !important;
}

/* ACTIVE/PRESSED STATE */
.sb-container div h4 span.palette-card-footer button.btn-palette-choose:active,
.btn-palette-choose:active {
    transform: translateY(-1px) scale(1) !important;
    box-shadow:
        0 4px 16px rgba(250, 112, 154, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.1s !important;
}

/* FOCUS STATE */
.btn-palette-choose:focus {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 8px 24px rgba(250, 112, 154, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 0 0 4px rgba(250, 112, 154, 0.3) !important;
}

/* SELECTED STATE */
.btn-palette-choose.selected {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    box-shadow:
        0 8px 24px rgba(56, 239, 125, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 -2px 0 rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-palette-choose.selected .btn-icon i::before {
    content: '\f058' !important;
    /* Check circle solid */
}

.btn-palette-choose.selected:hover {
    transform: translateY(-4px) scale(1.05) !important;
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%) !important;
}

/* LOADING STATE */
.btn-palette-choose.loading {
    opacity: 0.8 !important;
    pointer-events: none !important;
    cursor: wait !important;
}

.btn-palette-choose.loading .btn-icon {
    animation: rotateIcon 1s linear infinite !important;
}

@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ENTRANCE ANIMATION */
@keyframes slideInScale {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

    60% {
        transform: translateY(-5px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.palette-card-footer {
    animation: slideInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {

    .sb-container div h4 span.palette-card-footer button.btn-palette-choose,
    .btn-palette-choose {
        padding: 12px 24px !important;
        font-size: 12px !important;
        gap: 8px !important;
        min-width: 100px !important;
    }

    .btn-palette-choose .btn-icon,
    .btn-palette-choose .btn-icon i {
        font-size: 14px !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn-palette-choose {
        border: 2px solid #ffffff !important;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    .btn-palette-choose,
    .btn-palette-choose *,
    .palette-card-footer {
        animation: none !important;
        transition: none !important;
    }
}