/* Colorful Button Styles - Inspired by React Component */

.btn-colorful {
    position: relative;
    height: 40px;
    padding: 0 16px;
    overflow: hidden;
    background: #18181b; /* zinc-900 equivalent */
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Gradient background effect */
.btn-colorful::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #6366f1, #8b5cf6, #ec4899); /* indigo-500, purple-500, pink-500 */
    opacity: 0.4;
    filter: blur(1px);
    transition: opacity 0.5s ease;
    z-index: 1;
}

.btn-colorful:hover::before {
    opacity: 0.8;
}

/* Content layer */
.btn-colorful > * {
    position: relative;
    z-index: 2;
}

.btn-colorful:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-colorful:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Icon styling */
.btn-colorful i {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.9);
}

/* Disabled state */
.btn-colorful:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-colorful:disabled:hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-colorful:disabled::before {
    opacity: 0.4;
}

/* Size variants */
.btn-colorful-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.btn-colorful-lg {
    height: 48px;
    padding: 0 24px;
    font-size: 16px;
}

/* Alternative gradient variations */
.btn-colorful-variant-1::before {
    background: linear-gradient(to right, #3b82f6, #06b6d4, #10b981); /* blue-500, cyan-500, emerald-500 */
}

.btn-colorful-variant-2::before {
    background: linear-gradient(to right, #f59e0b, #ef4444, #ec4899); /* amber-500, red-500, pink-500 */
}

.btn-colorful-variant-3::before {
    background: linear-gradient(to right, #8b5cf6, #06b6d4, #3b82f6); /* purple-500, cyan-500, blue-500 */
}