/* SkillBridge automatic Available / Coming Soon status */

.sb-course-availability-host {
    position: relative !important;
}

.sb-course-availability-badge {
    position: absolute;
    z-index: 8;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    box-shadow: 0 7px 22px rgba(0,0,0,.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sb-course-availability-badge.is-available,
.sb-detail-availability.is-available {
    color: #d8ffe8;
    background: rgba(20, 116, 67, .94);
    border: 1px solid rgba(108, 241, 164, .35);
}

.sb-course-availability-badge.is-coming-soon,
.sb-detail-availability.is-coming-soon {
    color: #fff3df;
    background: rgba(179, 91, 11, .96);
    border: 1px solid rgba(255, 181, 89, .4);
}

.sb-course-coming-soon {
    position: relative;
}

.sb-course-coming-soon .app-course-image img,
.sb-course-coming-soon .course-thumb img {
    filter: saturate(.82) brightness(.82);
}

.sb-detail-availability {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 12px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sb-disabled-course-action {
    opacity: .68 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    filter: grayscale(.15);
}

.sb-coming-soon-note {
    margin-top: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(242, 140, 40, .25);
    border-radius: 12px;
    background: rgba(242, 140, 40, .08);
    color: #b9c1ca;
    font-size: 13px;
    line-height: 1.45;
}

.course-availability-native {
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.course-availability-native.available {
    color: #d8ffe8;
    background: #147443;
}

.course-availability-native.coming-soon {
    color: #fff3df;
    background: #b35b0b;
}

@media (max-width: 640px) {
    .sb-course-availability-badge {
        top: 8px;
        right: 8px;
        min-height: 25px;
        padding: 5px 8px;
        font-size: 9.5px;
    }
}