/* Floating "Enroll now" bar for phones and tablets: a frosted pill with the course name and one gradient button.
   Same shape as the masterclass register bar. It floats above the bottom menu pill when that is there. */
.enroll-bar { display: none; }

@media (max-width: 991.98px) {
    .enroll-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 99; /* under the bottom menu (100) and its popups, over the page */
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        max-width: 560px;
        margin-inline: auto;
        padding: 8px 8px 8px 18px;
        border: 1px solid rgba(255, 255, 255, .75);
        border-radius: 999px;
        background: rgba(255, 255, 255, .72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 40px -14px rgba(15, 80, 130, .4);
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(16px);
        transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s .4s;
    }

    /* the bottom menu pill is 10px off the screen edge and about 62px tall: stack above it */
    .enroll-bar.has-nav { bottom: calc(82px + env(safe-area-inset-bottom)); }

    /* the floating WhatsApp button steps up so it never covers the Enroll button */
    #scholarhatWhatsAppWidget { transition: translate .3s ease; }
    body.has-enroll-bar #scholarhatWhatsAppWidget { translate: 0 -72px; }

    .enroll-bar.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

    [data-bs-theme="dark"] .enroll-bar {
        border-color: rgba(255, 255, 255, .1);
        background: rgba(8, 24, 44, .72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 40px -14px rgba(0, 0, 0, .7);
    }

    .enroll-bar__info { min-width: 0; line-height: 1.2; }
    .enroll-bar__info b { display: block; overflow: hidden; font-size: .92rem; font-weight: 800; letter-spacing: -.01em; color: #0f1b2d; text-overflow: ellipsis; white-space: nowrap; }
    .enroll-bar__info small { display: block; font-size: .74rem; color: #64748b; }
    [data-bs-theme="dark"] .enroll-bar__info b { color: #eef7ff; }
    [data-bs-theme="dark"] .enroll-bar__info small { color: #9fb3c8; }

    .enroll-bar__btn {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(135deg, #06b6d4, #3b82f6);
        box-shadow: 0 12px 22px -12px rgba(8, 145, 178, .8);
        color: #fff;
        font-size: .92rem;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .2s, filter .2s;
    }

    .enroll-bar__btn:hover { filter: brightness(1.06); }
    .enroll-bar__btn:active { transform: scale(.97); }
    .enroll-bar__btn:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
    .enroll-bar__btn svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) { .enroll-bar, .enroll-bar__btn { transition: none; } }