.btn {
    border: 0;

    border-radius:
        var(--radius-sm);

    padding:
        10px 15px;

    font-weight: 700;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--sulnet-orange),
            #f58e2b
        );

    box-shadow:
        0 6px 16px
        rgba(242, 116, 5, .18);
}

.btn-danger {
    color: #ad2a23;

    background: #fff;

    border:
        1px solid #f0d0ce;
}

.btn-danger:hover {
    background: #fff2f1;
}

.input {
    width: 100%;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    outline: none;

    background: #fff;

    color: var(--text);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.input:focus {
    border-color:
        rgba(24, 162, 217, .55);

    box-shadow:
        0 0 0 3px
        rgba(24, 162, 217, .09);
}

.badge {
    min-width: 21px;
    height: 21px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 6px;

    border-radius: 999px;

    background:
        var(--sulnet-orange);

    color: #fff;

    font-size: 10px;
    font-weight: 700;
}

.fade-in {
    animation:
        fadeIn .22s ease both;
}

.slide-up {
    animation:
        slideUp .24s ease both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform:
            translateY(5px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}