/* Button */
/* =========== | BUTTON BASE STYLES | =========== */
.btn{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn :focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.btn :hover,
.btn:focus,
.btn.focus {
    color: #333;
    text-decoration: none;
}

.btn:active,
.btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-primary{
    color: #fff;
    background-color: #31063B;
    border-color: #31063B;
}

.btn .bg-primary {
    color: #fff !important;
    background-color: #f43b48;
    border-color: #f43b48;
}
.btn .bg-success {
    color: #fff !important;
    background-color: #55ce63;
    border-color: #55ce63;
} 

.btn:hover .bg-primary:hover {
    color: #fff;
    background-color: #f10e1d;
    border-color: #f10e1d;
}
.btn:hover .bg-success:hover {
    color: #fff;
    background-color: #4ab657;
    border-color: #4ab657;
}

.btn-ui {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    border: 0;
    outline: none;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    transition: all .28s ease;
    text-decoration: none !important;
}

/* =========== | CONTENT STYLES | =========== */
.btn-ui-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-ui-icon {
    font-size: 17px;
}

/* =========== | ANIMATED GLOW EFFECT | =========== */
.btn-ui-glow {
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%);
    transform: rotate(25deg);
    animation: glowMove 5s linear infinite;
    z-index: 1;
}

@keyframes glowMove {
    0% {
        transform: translateX(-120%) rotate(25deg);
    }

    100% {
        transform: translateX(120%) rotate(25deg);
    }
}

/* =========== | PRIMARY BUTTON STYLES | =========== */
.btn-ui-primary {
    color: #fff;
    background: linear-gradient(135deg, #000000 0%, #111827 20%, #1f2937 45%, #374151 65%, #4b5563 100%);
    box-shadow: 0 14px 35px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .08);
}

/* =========== | TOP GLOSS EFFECT | =========== */
.btn-ui-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 45%);
    z-index: 0;
}

/* =========== | SHINE EFFECT | =========== */
.btn-ui-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -120%;
    width: 80%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
    transform: rotate(25deg);
    transition: .9s ease;
}

/* =========== | HOVER STYLES | =========== */
.btn-ui-primary:hover {
    transform: translateY(-3px) scale(1.01);
    background: linear-gradient(135deg, #050505 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .38);
    color: #fff;
}

/* =========== | SHINE MOVE ON HOVER | =========== */
.btn-ui-primary:hover::after {
    left: 150%;
}

/* =========== | CLICK | =========== */
.btn-ui-primary:active {
    transform: scale(.97);
}

/* =========== | DISABLED BUTTON STYLES | =========== */
.btn-ui:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none !important;
}

/* =========== | SUCCESS BUTTON STYLES | =========== */
.btn-ui-success {
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #166534);
}

/* =========== | DANGER BUTTON STYLES | =========== */
.btn-ui-danger {
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #7f1d1d);
}

/* =========== | WARNING BUTTON STYLES | =========== */
.btn-ui-warning {
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

/* =========== | DARK BUTTON STYLES | =========== */
.btn-ui-dark {
    color: #fff;
    background: linear-gradient(135deg, #020617, #111827);
}