/* ============================================
   UiKitButton.css - Button Styles
   ============================================ */

/* Base Button Styles */
.btn {
    display: inline-block;
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: var(--font-family);
    text-align: center;
}

/* Primary Button - Orange/Red Gradient */
.btn-primary {
    background: var(--gradient-button);
    color: #ffffff;
    border: none;
    box-shadow: inset var(--shadow-inner-orange), var(--shadow-outer-orange);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: inset var(--shadow-inner-white), var(--shadow-outer-white);
}

/* Secondary Button - Transparent (No Border) */
.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset var(--shadow-inner-light-dark), var(--shadow-outer-light-dark);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset var(--shadow-inner-white), var(--shadow-outer-white);
}

/* Button Sizes */
.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

.btn-full {
    width: 100%;
}

/* Disabled Button */
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button with Glow Effect */
.btn-glow {
    border: none;
    box-shadow: inset var(--shadow-inner-red), var(--shadow-outer-red);
}

.btn-glow:hover {
    box-shadow: inset var(--shadow-inner-white), var(--shadow-outer-white);
}