/* =================================================================
   Button Styles - AuraMedi
   ================================================================= */

/* Black Buttons */
.btn-black {
    color: #FFFFFF;
    background-image: linear-gradient(to right, #333333 0%, #666666 51%, #333333 100%);
}

.btn-outline-black {
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #333333 0%, #666666 51%, #333333 100%);
}

/* Sky Buttons */
.btn-sky,
.btn-sky:hover,
.btn-sky:active,
.btn-sky:focus {
    background-color: #0f90ff !important;
    color: #FFFFFF !important;
    transition: background-color 0.5s ease !important;
}

.btn-outline-sky,
.btn-outline-sky:hover,
.btn-outline-sky:active,
.btn-outline-sky:focus {
    border: 1px solid #0f90ff !important;
    color: #0f90ff !important;
    transition: background-color 0.5s ease !important;
}

/* Purple Buttons */
.btn-purple,
.btn-purple:hover,
.btn-purple:active,
.btn-purple:focus {
    background: linear-gradient(118deg, #4541FF, rgba(69, 65, 255, 0.7));
    box-shadow: 0 0 3px 1px rgba(69, 65, 255, 0.2);
    color: #FFFFFF;
}

.btn-outline-purple,
.btn-outline-purple:hover,
.btn-outline-purple:active,
.btn-outline-purple:focus {
    border: 1px solid #4541FF !important;
    color: #4541FF !important;
    transition: background-color 0.5s ease !important;
}

/* Red Buttons */
.btn-red,
.btn-red:hover,
.btn-red:active,
.btn-red:focus {
    background: linear-gradient(118deg, #ff414e, rgba(255, 65, 78, 0.7));
    box-shadow: 0 0 3px 1px rgba(255, 65, 65, 0.2);
    color: #FFFFFF;
}

.btn-outline-red,
.btn-outline-red:hover,
.btn-outline-red:active,
.btn-outline-red:focus {
    border: 1px solid #ff414e !important;
    color: #ff414e !important;
    transition: background-color 0.5s ease !important;
}

/* White Button */
.btn-white,
.btn-white:hover,
.btn-white:active,
.btn-white:focus {
    border: 1px solid #dee2e6 !important;
    background: #FFFFFF !important;
    transition: background 0.5s ease, opacity 0.5s ease;
}