/* VexaCourse Global Overrides - Point 4 */

/* Remove background effects on organization and course listing pages */
.organizations-lists-hero__mask,
.organizations-lists-hero,
.organization-card__mask,
.courses-lists-hero__mask,
.courses-lists-hero {
    display: none !important;
}

/* Clean transparent backgrounds for organization cards */
.organization-card {
    background: transparent !important;
}

/* === Course Detail Page Overrides === */
/* Black Enroll Button */
.js-enroll-actions-card .btn-primary {
    background-color: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}
.js-enroll-actions-card .btn-primary:hover {
    background-color: #333 !important;
    border-color: #333 !important;
}
.js-enroll-actions-card .btn-outline-accent {
    border-color: #111 !important;
    color: #111 !important;
}
.js-enroll-actions-card .btn-outline-accent:hover {
    background-color: #111 !important;
    color: #fff !important;
}


/* ================================================ */
/* === Learning Page - Video + Sidebar Layout ===    */
/* ================================================ */

/* ============================================================
   VX learning-page video card.  v2.2's native learning_page.min.css
   already owns the two-pane layout and the simplebar scrolling, so we
   deliberately do NOT re-declare .learning-page / .__main / .__sidebar /
   .__main-content heights or overflow here — overriding them added a
   second scrollbar and mis-sized the pane (71px subtracted twice).
   We only (a) keep the lesson card white + readable and (b) make the
   video player sit flush to the card edges (client edge-to-edge ask).
   ============================================================ */

/* Lesson content card: readable white; clips the flush player to its corners */
.learning-page__main-content .bg-white.rounded-24.p-16 {
    background: #fff !important;
    overflow: hidden !important;
}

/* Video / online-viewer player: full-width 16:9 (no letterbox, no forced
   empty height) and edge-to-edge — negative margins cancel the card p-16.
   Only real player cards use this class; the download-prompt branches keep
   their own padding. */
.learning-page__main-content .learning-page__file-player-card {
    position: relative !important;
    width: auto !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    margin: -16px -16px 16px -16px !important;
    border-radius: 0 !important;
    background-color: #000 !important;
    overflow: hidden !important;
}

/* Player inner fills the card */
.learning-page__file-player-card > iframe,
.learning-page__file-player-card > video,
.learning-page__file-player-card .plyr,
.learning-page__file-player-card .plyr__video-embed,
.learning-page__file-player-card .plyr--video,
.learning-page__file-player-card iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.learning-page__file-player-card .plyr__video-wrapper {
    height: 100% !important;
}

/* Poster image before play */
.learning-page__file-player-card img.img-cover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Play button centred */
.learning-page__file-player-card .file-player-button {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
}

/* Lesson description / actions below the video stay readable + padded */
.learning-page__main-content .vx-lesson-desc {
    color: #5a6a85 !important;
}
.learning-page__main-content .vx-lesson-actions {
    margin-bottom: 8px !important;
}


/* Mobile responsive - stack video and sidebar vertically */
@media (max-width: 991px) {
    .learning-page {
        flex-direction: column !important;
        height: auto !important;
        overflow: auto !important;
    }
    .learning-page__main {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    .learning-page__sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-left: none !important;
        border-top: 1px solid #e8e8e8 !important;
    }
    .rtl .learning-page__sidebar {
        border-right: none !important;
    }
}


/* === Side-Click Navigation Overlays === */
.vx-video-nav-overlay {
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.vx-video-nav-overlay:hover {
    opacity: 1;
}

.vx-video-nav-overlay--prev {
    left: 0;
    justify-content: flex-start;
    padding-left: 20px;
    background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
}

.vx-video-nav-overlay--next {
    right: 0;
    justify-content: flex-end;
    padding-right: 20px;
    background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}

/* RTL support */
.rtl .vx-video-nav-overlay--prev {
    left: auto;
    right: 0;
    padding-right: 20px;
    padding-left: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}
.rtl .vx-video-nav-overlay--next {
    right: auto;
    left: 0;
    padding-left: 20px;
    padding-right: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.3), transparent);
}

.vx-video-nav-overlay__icon {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, background 0.2s ease;
}
.vx-video-nav-overlay:hover .vx-video-nav-overlay__icon {
    transform: scale(1.1);
    background: rgba(255,255,255,1);
}

.vx-video-nav-overlay__icon svg {
    width: 24px;
    height: 24px;
    fill: #333;
}

/* ============================================= */
/* Mobile Bottom Navigation Bar - Mobile Only    */
/* ============================================= */
@media (min-width: 769px) {
    .vx-mobile-nav-bar { display: none !important; }
}

@media (max-width: 768px) {
    body {
        padding-bottom: 100px !important;
    }
    .vx-mobile-nav-bar {
        position: fixed;
        bottom: 25px;
        left: 5%;
        right: 5%;
        height: 70px;
        background: #000000;
        border-radius: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        z-index: 9999;
        -webkit-tap-highlight-color: transparent;
    }
    .vx-mobile-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none !important;
        color: #adb5bd;
        font-weight: 600;
        font-size: 10px;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        padding: 5px;
    }
    .vx-mobile-nav-item:hover, .vx-mobile-nav-item:focus {
        text-decoration: none !important;
        color: #adb5bd;
    }
    .vx-mobile-nav-item i {
        font-size: 18px;
        margin-bottom: 4px;
        transition: 0.4s;
        z-index: 2;
    }
    .vx-mobile-nav-item span {
        white-space: nowrap;
        font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    }
    .vx-mobile-nav-item.active {
        color: #ffffff;
        transform: translateY(-8px);
    }
    .vx-mobile-nav-item.active:hover, .vx-mobile-nav-item.active:focus {
        color: #ffffff;
    }
    .vx-mobile-nav-item.active i {
        font-size: 20px;
    }
    .vx-mobile-nav-dot {
        position: absolute;
        bottom: -12px;
        width: 6px;
        height: 6px;
        background: #ffffff;
        border-radius: 50%;
        opacity: 0;
        transform: scale(0);
        transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .vx-mobile-nav-item.active .vx-mobile-nav-dot {
        opacity: 1;
        transform: scale(1);
    }
    .vx-mobile-nav-home {
        background: #ffffff !important;
        color: #000000 !important;
        width: 50px;
        height: 50px;
        border-radius: 15px;
        justify-content: center;
        margin-top: -35px;
        box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
        border: 4px solid #ffffff;
    }
    .vx-mobile-nav-home:hover, .vx-mobile-nav-home:focus {
        color: #000000 !important;
    }
    .vx-mobile-nav-home i {
        margin: 0 !important;
        font-size: 20px !important;
        color: #000000 !important;
    }
    .vx-mobile-nav-home.active {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
    }
    .vx-mobile-nav-home .vx-mobile-nav-dot { display: none; }
    .vx-mobile-nav-home span { display: none; }
}

/* ============================================= */
/* Mobile Content-First Layout                    */
/* Courses, Products, Organizations pages         */
/* ============================================= */
@media (max-width: 991px) {
    /* Reorder: content column first, sidebar hidden (but NOT cart summary) */
    main .row {
        display: flex !important;
        flex-direction: column !important;
    }
    main .row > .col-12.col-lg-9 {
        order: 1 !important;
        margin-top: 12px !important;
    }
    /* Hide filter sidebar (col-lg-3 without col-md-5), keep cart summary visible */
    main .row > .col-12.col-lg-3:not(.col-md-5) {
        order: 2 !important;
        display: none !important;
    }
}

/* ==========================================
   MOBILE: Cart page - items → summary → coupon
   ========================================== */
@media (max-width: 768px) {
    #cartForm > .row {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Unwrap items column so its children join the row flex */
    #cartForm > .row > .col-12.col-md-7.col-lg-9 {
        display: contents !important;
    }
    /* Cart items card: first */
    #cartForm > .row > .col-12.col-md-7.col-lg-9 > .card-with-mask:first-child {
        order: 1 !important;
        margin-top: 32px !important;
    }
    /* Summary column: second (after items, before coupon) */
    #cartForm > .row > .col-12.col-md-5.col-lg-3 {
        order: 2 !important;
        margin-top: 16px !important;
    }
    /* Coupon section: third */
    #cartForm > .row > .col-12.col-md-7.col-lg-9 > .card-with-mask.mt-28 {
        order: 3 !important;
    }
    /* Cashback/group discount alerts */
    #cartForm > .row > .col-12.col-md-7.col-lg-9 > .cashback-alert,
    #cartForm > .row > .col-12.col-md-7.col-lg-9 > .user-group-discount {
        order: 0 !important;
    }
}

/* ============================================= */
/* Course Card - Icons Row (live streaming etc)   */
/* ============================================= */
.vx-course-card__icons-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.vx-course-card__type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f0f0f0;
    color: #555;
}
.vx-course-card__type-icon--live {
    background: #fee2e2;
    color: #dc2626;
    position: relative;
}
.vx-course-card__live-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
    animation: vx-pulse 1.5s infinite;
}
@keyframes vx-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Course card cart button */
.vx-course-card__btn--cart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.vx-course-card__btn--cart:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

/* ============================================= */
/* Cart Drawer - Fix z-index over mobile nav      */
/* ============================================= */
@media (max-width: 768px) {
    .cart-drawer {
        z-index: 99999 !important;
    }
    .cart-drawer-mask {
        z-index: 99998 !important;
    }
    /* Add bottom padding to cart drawer so content isn't hidden behind mobile nav */
    .cart-drawer__body {
        padding-bottom: 120px !important;
    }
}

/* ============================================= */
/* Mobile Card Layouts - Content First            */
/* Books: title → price → buy at top              */
/* Courses: title → subscribe → description       */
/* ============================================= */
@media (max-width: 768px) {
    /* Course cards on mobile - reorder body content */
    .vx-course-card__body {
        display: flex;
        flex-direction: column;
    }
    .vx-course-card__title { order: 1; }
    .vx-course-card__actions { order: 2; margin-top: 10px !important; margin-bottom: 8px; }
    .vx-course-card__tag-row { order: 3; }
    .vx-course-card__instructor { order: 4; }
    .vx-course-card__icons-row { order: 5; }
    .vx-course-card__price-block { order: 6; }

    /* Product/Book cards on mobile - title → price → buy */
    .vx-product-card__body {
        display: flex;
        flex-direction: column;
    }
    .vx-product-card__title { order: 1; }
    .vx-product-card__price-block { order: 2; margin-top: 8px !important; }
    .vx-product-card__actions { order: 3; margin-top: 8px !important; }
    .vx-product-card__tag-row { order: 4; margin-top: 8px; }
    .vx-product-card__instructor { order: 5; }
}


/* ==========================================
   TOP CATEGORIES STRIP
   ========================================== */
.vx-top-categories {
    direction: rtl;
    margin-bottom: 8px;
    overflow: visible;
}
.vx-top-categories__scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 12px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.vx-top-categories__scroll::-webkit-scrollbar {
    display: none;
}
.vx-top-categories__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f0f2f5;
    border-radius: 50px;
    white-space: nowrap;
    text-decoration: none !important;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
    border: 2px solid #e0e3e8;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.vx-top-categories__item:hover {
    background: #e2e5ea;
    text-decoration: none !important;
    color: #333;
    border-color: #c0c4cc;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.vx-top-categories__item.active {
    background: linear-gradient(135deg, #4a90d9, #357abd);
    color: #fff;
    border-color: #357abd;
    box-shadow: 0 3px 10px rgba(53,122,189,0.35);
}
.vx-top-categories__item.active:hover {
    background: linear-gradient(135deg, #357abd, #2a6299);
    color: #fff;
}
.vx-top-categories__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.vx-top-categories__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
}
.vx-top-categories__item.active .vx-top-categories__icon img {
    filter: brightness(0) invert(1);
}
.vx-top-categories__icon i {
    font-size: 15px;
}
.vx-top-categories__label {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}



/* Mobile categories adjustments */
@media (max-width: 768px) {
    .vx-top-categories {
        margin-bottom: 4px;
    }
    .vx-top-categories__item {
        padding: 8px 14px;
        font-size: 13px;
    }
    .vx-top-categories__icon {
        width: 22px;
        height: 22px;
    }
    .vx-top-categories__icon img {
        width: 18px;
        height: 18px;
    }
    .vx-top-categories__label {
        font-size: 12px;
        font-weight: 500;
    }
}




/* ==========================================
   MOBILE: Bigger, cleaner cart icon in header
   ========================================== */
@media (max-width: 768px) {
    .js-view-cart-drawer {
        width: 44px !important;
        height: 44px !important;
        background: rgba(255,255,255,0.2) !important;
        border-radius: 12px !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .js-view-cart-drawer .icons {
        width: 26px !important;
        height: 26px !important;
        opacity: 1 !important;
    }
    .js-view-cart-drawer .js-cart-counter,
    .theme-header-1__top-navbar-cart-counter {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        min-width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        background: #ff3b30 !important;
        border-radius: 10px !important;
        padding: 0 5px !important;
        box-shadow: 0 2px 6px rgba(255,59,48,0.4) !important;
    }
}


/* ==========================================
   MOBILE: Course Detail - Price first, then tabs, then extras
   ========================================== */
@media (max-width: 768px) {
    /* Course detail page: split right_side so price is above tabs */
    .d-flex.flex-column.flex-lg-row.gap-24 {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Make right-side transparent so its children join parent flex */
    .course-right-side {
        display: contents !important;
    }
    /* Price/buy section appears first */
    .vx-course-purchase-section {
        order: 1 !important;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
    /* Tabs appear second */
    .course-body-side {
        order: 2 !important;
    }
    /* Course specs, instructor, tags appear last */
    .vx-course-extras-section {
        order: 3 !important;
    }
    /* Sidebar banner (inside right-side) goes to end */
    .course-right-side + .advertising-banners,
    .course-right-side .advertising-banners {
        order: 4 !important;
    }
}

/* ==========================================
   MOBILE: Product Detail - Buttons before description
   ========================================== */
@media (max-width: 768px) {
    /* Product detail: make main_info column flex so we can reorder children */
    .container.pb-80.mt-120 > .row > .col-12.col-lg-6.mt-32.mt-lg-0 {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Title/breadcrumb card stays at top */
    .container.pb-80.mt-120 .card-with-mask {
        order: 1 !important;
    }
    /* Price/quantity/actions wrapper moves up */
    .container.pb-80.mt-120 .vx-product-purchase-section {
        order: 2 !important;
        margin-top: 16px !important;
    }
    /* Summary/description moves down */
    .container.pb-80.mt-120 .vx-product-summary-section {
        order: 3 !important;
    }
    /* Specifications move after summary */
    .container.pb-80.mt-120 .js-product-specifications {
        order: 4 !important;
    }
}


/* =========================================================
   VX FULL-WIDTH SUBSCRIPTION PRICING SECTION (homepage top)
   RTL / Arabic — premium SaaS-style, replaces the hero.
   ========================================================= */
.vx-pricing-section {
    --vx-blue: #0170FF;
    --vx-blue-light: #67A9FF;
    --vx-purple: #6C5CE7;
    --vx-navy: #0E2145;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 90px 0 100px;
    background:
        radial-gradient(120% 120% at 15% 0%, #F3F7FF 0%, #FBFCFF 45%, #FFFFFF 100%);
    direction: rtl;
}

/* floating gradient orbs in background */
.vx-pricing-section__bg-orbs { position: absolute; inset: 0; pointer-events: none; }
.vx-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
}
.vx-orb--1 { width: 360px; height: 360px; top: -90px; right: -60px;
    background: radial-gradient(circle, var(--vx-blue), transparent 70%); }
.vx-orb--2 { width: 420px; height: 420px; bottom: -120px; left: -80px;
    background: radial-gradient(circle, var(--vx-purple), transparent 70%); opacity: .28; }
.vx-orb--3 { width: 240px; height: 240px; top: 40%; left: 45%;
    background: radial-gradient(circle, var(--vx-blue-light), transparent 70%); opacity: .18; }

/* ---------- Heading ---------- */
.vx-pricing-section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.vx-pricing-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vx-blue);
    background: rgba(1, 112, 255, .10);
    padding: 9px 20px;
    border-radius: 32px;
    margin-bottom: 18px;
}
.vx-pricing-section__eyebrow .icons { color: var(--vx-purple); }
.vx-pricing-section__title {
    font-size: 40px;
    line-height: 1.35;
    font-weight: 900;
    color: var(--vx-navy);
    margin: 0 0 16px;
}
.vx-pricing-section__subtitle {
    font-size: 17px;
    line-height: 1.7;
    color: #6A7488;
    margin: 0;
}

/* ---------- Grid (full width container) ---------- */
.vx-pricing-grid {
    display: grid;
    gap: 28px;
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin: 0 auto;
}
.vx-pricing-grid--count-1 { grid-template-columns: minmax(0, 460px); max-width: 460px; }
.vx-pricing-grid--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
.vx-pricing-grid--count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1280px; }

/* ---------- Plan card ---------- */
.vx-plan {
    position: relative;
    border-radius: 26px;
    padding: 2px;                 /* room for gradient ring */
    background: #ECEFF6;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
    box-shadow: 0 16px 40px -26px rgba(14, 33, 69, .35);
}
.vx-plan__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 36px 30px 34px;
}
.vx-plan:hover {
    transform: translateY(-10px);
    box-shadow: 0 36px 70px -28px rgba(1, 112, 255, .45);
}

/* Popular — gradient ring + dark gradient body */
.vx-plan--popular {
    background: linear-gradient(150deg, var(--vx-blue), var(--vx-purple));
    box-shadow: 0 30px 70px -24px rgba(108, 92, 231, .6);
    transform: translateY(-6px);
}
.vx-plan--popular:hover { transform: translateY(-16px); }
.vx-plan--popular .vx-plan__inner {
    background: linear-gradient(165deg, #173A8C 0%, #3B2C8F 55%, #5A3FB0 100%);
    color: #fff;
}

/* Ribbon */
.vx-plan__ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--vx-purple);
    font-size: 13px;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 32px;
    box-shadow: 0 10px 24px -8px rgba(14, 33, 69, .45);
    white-space: nowrap;
    z-index: 3;
}
.vx-plan__ribbon .icons { color: #FFB200; }

/* Header */
.vx-plan__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.vx-plan--popular .vx-plan__header { margin-top: 8px; }
.vx-plan__icon {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(1, 112, 255, .09);
    overflow: hidden;
}
.vx-plan--popular .vx-plan__icon { background: rgba(255,255,255,.16); }
.vx-plan__icon img { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; }
.vx-plan__name {
    font-size: 21px; font-weight: 800; margin: 0; color: var(--vx-navy);
}
.vx-plan--popular .vx-plan__name { color: #fff; }
.vx-plan__subtitle {
    font-size: 13px; line-height: 1.55; margin: 5px 0 0; color: #8A93A6;
}
.vx-plan--popular .vx-plan__subtitle { color: rgba(255,255,255,.82); }

/* Price */
.vx-plan__price-wrap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 24px;
}
.vx-plan__price { display: inline-flex; align-items: baseline; gap: 8px; }
.vx-plan__price-amount {
    font-size: 44px; font-weight: 900; line-height: 1; color: var(--vx-navy);
}
.vx-plan--popular .vx-plan__price-amount { color: #fff; }
.vx-plan__price-old {
    font-size: 18px; color: #B0B7C5; text-decoration: line-through;
}
.vx-plan--popular .vx-plan__price-old { color: rgba(255,255,255,.6); }
.vx-plan__price-period { font-size: 14px; font-weight: 600; color: #8A93A6; }
.vx-plan--popular .vx-plan__price-period { color: rgba(255,255,255,.78); }
.vx-plan__discount {
    font-size: 12px; font-weight: 800; color: #fff;
    background: var(--vx-purple); padding: 4px 12px; border-radius: 20px;
}

/* CTA */
.vx-plan__form { width: 100%; margin: 0; }
.vx-plan__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    font-size: 16px; font-weight: 800;
    font-family: inherit;
    text-decoration: none;
    background: linear-gradient(90deg, var(--vx-blue), var(--vx-purple));
    color: #fff !important;
    box-shadow: 0 16px 30px -14px rgba(1, 112, 255, .65);
    transition: transform .25s, box-shadow .25s, filter .25s;
}
.vx-plan__cta .icons { color: #fff; transition: transform .25s; }
.vx-plan__cta:hover {
    transform: translateY(-2px); filter: brightness(1.05);
    box-shadow: 0 22px 38px -14px rgba(108, 92, 231, .7);
    color: #fff !important;
}
.vx-plan__cta:hover .icons { transform: translateX(-4px); }
.vx-plan--popular .vx-plan__cta {
    background: #fff; color: var(--vx-purple) !important;
    box-shadow: 0 16px 32px -14px rgba(0,0,0,.4);
}
.vx-plan--popular .vx-plan__cta .icons { color: var(--vx-purple); }
.vx-plan--popular .vx-plan__cta:hover { color: var(--vx-blue) !important; }
.vx-plan--popular .vx-plan__cta:hover .icons { color: var(--vx-blue); }

/* Divider with label */
.vx-plan__divider {
    position: relative;
    text-align: center;
    margin: 26px 0 18px;
}
.vx-plan__divider::before {
    content: ""; position: absolute; top: 50%; left: 0; right: 0;
    height: 1px; background: #E6EAF2;
}
.vx-plan--popular .vx-plan__divider::before { background: rgba(255,255,255,.22); }
.vx-plan__divider span {
    position: relative;
    background: #fff; padding: 0 14px;
    font-size: 12.5px; font-weight: 700; color: #9AA3B5;
}
.vx-plan--popular .vx-plan__divider span {
    background: transparent; color: rgba(255,255,255,.8);
}
.vx-plan--popular .vx-plan__divider span::before,
.vx-plan--popular .vx-plan__divider span::after { content: none; }

/* Features */
.vx-plan__features {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
    flex: 1 1 auto;
}
.vx-plan__features li {
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 14.5px; line-height: 1.5; color: #46506A;
}
.vx-plan--popular .vx-plan__features li { color: rgba(255,255,255,.92); }
.vx-plan__check {
    flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(22, 192, 152, .14);
    margin-top: 1px;
}
.vx-plan__check .icons { color: #16C098; }
.vx-plan--popular .vx-plan__check { background: rgba(255,255,255,.18); }
.vx-plan--popular .vx-plan__check .icons { color: #B8F5E4; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .vx-pricing-section { padding: 64px 0 72px; }
    .vx-pricing-section__title { font-size: 30px; }
    .vx-pricing-grid--count-3,
    .vx-pricing-grid--count-4 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; }
}
@media (max-width: 640px) {
    .vx-pricing-section { padding: 52px 0 60px; }
    .vx-pricing-section__title { font-size: 25px; }
    .vx-pricing-section__subtitle { font-size: 15px; }
    .vx-pricing-grid,
    .vx-pricing-grid--count-1,
    .vx-pricing-grid--count-2,
    .vx-pricing-grid--count-3,
    .vx-pricing-grid--count-4 {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
    .vx-plan--popular, .vx-plan--popular:hover { transform: none; }
    .vx-plan__inner { padding: 32px 24px 30px; }
    .vx-plan__price-amount { font-size: 38px; }
}

/* =====================================================================
   VX: courses/classes list header — enforce the hero + header layout here so
   it renders even if the page-specific courses_lists.min.css is stale on the
   server (deploy gap). Without the hero's fixed height the header card is
   pulled up (top:-119px) under the sticky menu and its title/breadcrumb clip.
   Values mirror courses_lists.min.css exactly; scoped to .courses-lists-*.
   ===================================================================== */
.courses-lists-hero {
    width: 100% !important;
    height: 320px !important;
}
.courses-lists-hero__mask {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}
.courses-lists-header {
    position: relative !important;
    top: -119px !important;
    margin-bottom: -119px !important;
    z-index: 5 !important;
}
.courses-lists-header__mask {
    position: absolute !important;
    inset: 8px !important;
    bottom: -8px !important;
    border-radius: 32px !important;
    opacity: 0.5 !important;
    background: var(--white) !important;
    z-index: 1 !important;
}

@media (max-width: 991px) {
    .courses-lists-hero { height: 200px !important; }
    .courses-lists-header { top: -80px !important; margin-bottom: -80px !important; }
}

/* =====================================================================
   VX 1.4: rich-text lesson description (summernote HTML) on the learning page.
   Styles headings/lists/tables/images/links and formatted code blocks. NOTE:
   colour syntax-highlighting needs the highlight.js library shipped separately
   (see report); this provides a clean formatted <pre><code> block regardless.
   ===================================================================== */
.vx-rich { line-height: 1.7; color: #5a6a85; word-break: break-word; }
.vx-rich h1, .vx-rich h2, .vx-rich h3, .vx-rich h4 { color: #1a2b4b; font-weight: 700; margin: 16px 0 8px; line-height: 1.3; }
.vx-rich h1 { font-size: 24px; } .vx-rich h2 { font-size: 20px; } .vx-rich h3 { font-size: 18px; } .vx-rich h4 { font-size: 16px; }
.vx-rich p { margin: 0 0 12px; }
.vx-rich ul, .vx-rich ol { margin: 0 0 12px; padding-inline-start: 24px; }
.vx-rich li { margin-bottom: 6px; }
.vx-rich a { color: #4f46e5; text-decoration: underline; }
.vx-rich img { max-width: 100%; height: auto; border-radius: 8px; }
.vx-rich table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.vx-rich table th, .vx-rich table td { border: 1px solid #e4e6f0; padding: 8px 12px; text-align: inherit; }
.vx-rich table th { background: #f6f7fb; font-weight: 700; color: #1a2b4b; }
.vx-rich blockquote { margin: 0 0 12px; padding: 8px 16px; border-inline-start: 4px solid #e4e6f0; background: #f6f7fb; border-radius: 8px; }
/* Formatted code blocks (monospace, scrollable). Syntax colours come from highlight.js if present. */
.vx-rich pre { background: #1e1e2e; color: #e4e6f0; padding: 16px; border-radius: 10px; overflow-x: auto; margin: 0 0 16px; direction: ltr; text-align: left; }
.vx-rich pre code { background: none; padding: 0; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 1.6; white-space: pre; }
.vx-rich code { background: #f0f1f6; color: #d6336c; padding: 2px 6px; border-radius: 6px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; direction: ltr; }

/* =====================================================================
   VX 1.6: "Ask the Instructor" public-chat CTA — card + float variants.

   Why this lives here: rules for these classes exist only in
   parts/public_chat.min.css, which is linked from ONE place —
   design_1/panel/public_chat/index.blade.php (the panel chat page). The CTA
   partial renders on course show / learning page / bundle show / event show,
   none of which load that file, so the markup arrived with no background,
   no box and zero-sized icon circles => effectively invisible.
   These rules are self-contained (they do not depend on public_chat.min.css)
   and sit in the globally loaded override, so the card is styled everywhere.

   Markup: resources/views/design_1/web/components/public_chat_cta.blade.php
   ===================================================================== */

/* ---------- card shell ---------- */
.public-chat-cta-card {
    display: block;
    position: relative;
    text-decoration: none !important;
    color: inherit;
}
.public-chat-cta-card,
.public-chat-cta-card * {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease,
                box-shadow .25s ease, transform .25s ease, opacity .25s ease;
}
/* decorative under-layer (.card-with-mask .mask-8-white) must stay behind the box */
.public-chat-cta-card .mask-8-white {
    z-index: 1;
}
.public-chat-cta-card-box {
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(18, 31, 62, .06);
    padding: 16px;
}
.public-chat-cta-card .min-width-0 {
    min-width: 0;
}

/* ---------- icon / avatar circles ---------- */
.public-chat-cta-card-icon-1 {
    position: relative;
    width: 56px;
    min-width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.public-chat-cta-card-icon-1:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-color: var(--primary);
    opacity: .16;
}
.public-chat-cta-card-icon-2 {
    position: relative;
    z-index: 2;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--white);
}
.public-chat-cta-card-icon-2 svg {
    color: var(--white);
}
.public-chat-cta-card-icon-2 img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- text + arrow ---------- */
.public-chat-cta-card-title {
    margin: 0;
    color: var(--dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}
.public-chat-cta-card-subtitle {
    margin-top: 4px;
    color: var(--gray-500);
    font-size: 12px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.public-chat-cta-card-arrow {
    display: flex;
    align-items: center;
    color: var(--gray-400);
}

/* ---------- hover (skipped for the float variant, which opts out) ---------- */
.public-chat-cta-card:hover {
    text-decoration: none !important;
}
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-box {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(1, 112, 255, .22);
}
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .mask-8-white {
    background-color: var(--primary);
}
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-icon-1:before {
    background-color: var(--white);
    opacity: .25;
}
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-icon-2 {
    background-color: var(--white);
    color: var(--primary);
}
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-icon-2 svg {
    color: var(--primary);
}
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-title,
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-subtitle,
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-arrow {
    color: var(--white);
}
.public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-arrow {
    transform: translateX(3px);
}
.public-chat-cta-card--no-hover:hover {
    transform: translateY(-2px);
}

/* ---------- online dot ---------- */
.public-chat-online-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--success);
    border: 2px solid var(--white);
    animation: vxPublicChatPulse 2s infinite;
}
.public-chat-online-dot--float {
    top: 2px;
    right: 2px;
    bottom: auto;
}
.public-chat-online-dot--lg {
    top: 4px;
    right: 4px;
    width: 13px;
    height: 13px;
}
@keyframes vxPublicChatPulse {
    0%   { box-shadow: 0 0 0 0 rgba(67, 212, 119, .6); }
    70%  { box-shadow: 0 0 0 7px rgba(67, 212, 119, 0); }
    100% { box-shadow: 0 0 0 0 rgba(67, 212, 119, 0); }
}

/* ---------- float CTA (pushed to body_end, position:fixed) ---------- */
.public-chat-float {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9998;
    max-width: calc(100vw - 32px);
}
.public-chat-float--style2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.public-chat-float--style2 .public-chat-float__circle {
    display: block;
    position: relative;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    text-decoration: none !important;
}
.public-chat-float--style2 .public-chat-float__circle:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
}
.public-chat-float--style2 .public-chat-float__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 0 12px;
    border-radius: 32px !important;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
}
.public-chat-float--style2 .public-chat-float__btn:hover {
    transform: translateY(-2px);
}
/* never sit on top of an open modal */
body.modal-open .public-chat-float {
    display: none !important;
}

/* ---------- RTL ---------- */
[dir=rtl] .public-chat-float {
    right: auto;
    left: 28px;
}
/* .ml-8 / .ml-16 are physical !important margins in the theme — flip them here */
[dir=rtl] .public-chat-cta-card .ml-8 {
    margin-left: 0 !important;
    margin-right: 8px !important;
}
[dir=rtl] .public-chat-cta-card .ml-16 {
    margin-left: 0 !important;
    margin-right: 16px !important;
}
[dir=rtl] .public-chat-cta-card-arrow svg {
    transform: scaleX(-1);
}
[dir=rtl] .public-chat-cta-card:not(.public-chat-cta-card--no-hover):hover .public-chat-cta-card-arrow {
    transform: translateX(-3px);
}
[dir=rtl] .public-chat-online-dot {
    right: auto;
    left: 1px;
}
[dir=rtl] .public-chat-online-dot--float {
    right: auto;
    left: 2px;
}
[dir=rtl] .public-chat-online-dot--lg {
    right: auto;
    left: 4px;
}

/* ---------- small screens ---------- */
@media (max-width: 575.98px) {
    .public-chat-float {
        right: 16px;
        bottom: 16px;
    }
    [dir=rtl] .public-chat-float {
        right: auto;
        left: 16px;
    }
    .public-chat-cta-card-box {
        padding: 12px;
    }
}

/* ---------- dark mode ---------- */
.dark-mode .public-chat-cta-card-box {
    background-color: #1f2937;
    border-color: #374151;
}
.dark-mode .public-chat-cta-card .mask-8-white {
    background-color: #1f2937;
    border-color: #374151;
}
.dark-mode .public-chat-cta-card-title {
    color: #f3f4f6;
}
.dark-mode .public-chat-cta-card-subtitle {
    color: #9ca3af;
}
.dark-mode .public-chat-float--style2 .public-chat-float__circle {
    background-color: #1f2937;
}

/* =====================================================================
   VX: /classes header bleeding into the navbar — actual cause.

   The Point-4 block at the top of this file hides the classes hero band:
       .courses-lists-hero__mask, .courses-lists-hero { display: none !important }
   but the header card still carries the compensating pull-up that
   courses_lists.min.css gives it (position:relative; top:-119px;
   margin-bottom:-119px), which exists purely to lift the card up over that
   320px band. With the band collapsed to zero height the card is dragged
   119px ABOVE the top of <main> — i.e. straight under the sticky navbar.
   /products is unaffected because .products-lists-hero was never hidden, so
   its identical -119px pull-up lands on the hero instead of on the menu.

   7eed2ed re-declared the hero's width and height to fix this, but never
   re-declared `display`, so `display:none !important` still won and the band
   stayed collapsed. Restoring `display` here (later rule, same specificity,
   wins on source order) puts the band back and the header card then overlaps
   it exactly the way .products-lists-header does on /products.

   Applies to the four pages sharing this markup: /classes, category course
   lists, reward courses and upcoming courses.
   ===================================================================== */
.courses-lists-hero {
    display: block !important;
}
.courses-lists-hero__mask {
    display: block !important;
}

/* =====================================================================
   VX 1.6: learning page — "Ask the Instructor" inline beside the
   "I passed this lesson" switch instead of floating, and the Chat Room
   button on the lesson title row. The card keeps all its styling from the
   block above; this only constrains it to sit in a flex row.
   ===================================================================== */
.vx-lesson-chat-cta {
    flex-shrink: 0;
    max-width: 100%;
}
.public-chat-cta-card--inline {
    width: 340px;
    max-width: 100%;
    margin-top: 0 !important;
}
.public-chat-cta-card--inline .public-chat-cta-card-box {
    padding: 12px;
}

/* Chat Room button on the title row keeps its label on one line */
.vx-lesson-chat-room-btn {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .vx-lesson-chat-cta {
        width: 100%;
    }
    .public-chat-cta-card--inline {
        width: 100%;
    }
    /* title row stacks: keep the Chat Room button from squashing the title */
    .vx-lesson-chat-room-btn {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* =====================================================================
   VX: learning page — completion switch and the "Ask the Instructor"
   card sit NEXT TO EACH OTHER with a gap, not pushed to opposite edges.
   The row previously used justify-content-lg-between, which pinned the
   switch to the start edge (right, in RTL) and the card to the far left.
   ===================================================================== */
.learning-page__main-content .vx-lesson-completion-row {
    justify-content: flex-start !important;
    column-gap: 16px;
    row-gap: 16px;
}
.learning-page__main-content .vx-lesson-completion-row > * {
    margin-top: 0 !important;
}
.learning-page__main-content .vx-lesson-completion-row .vx-lesson-chat-cta {
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .learning-page__main-content .vx-lesson-completion-row {
        align-items: stretch;
    }
    .learning-page__main-content .vx-lesson-completion-row .vx-lesson-chat-cta {
        flex: 1 1 100%;
    }
}

/* =====================================================================
   VX 1.5: lesson resources list under the video (shown when a lesson has
   more than one resource; a single one is a plain button).
   ===================================================================== */
.vx-lesson-resources__item {
    border: 1px solid #e4e6f0;
    transition: background-color .15s ease, border-color .15s ease;
}
.vx-lesson-resources__item:hover {
    background: #eef0f8 !important;
    border-color: #c9cde3;
    text-decoration: none;
}
.vx-lesson-resources__item span {
    word-break: break-word;
}

/* Instructor panel: keep resource rows visually grouped inside the accordion */
.js-vx-resources .js-vx-resource-row {
    background: #fafbfe;
}

/* Download Resources button shares the title row with Chat Room — keep it on one line */
.vx-lesson-resources-btn {
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .vx-lesson-resources-btn {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ============================================================
   VX 2.2: the lesson video fills its card on large screens.

   The card above is locked to a 16:9 box (the theme's own rule is worse:
   a flat height: 87vh).  Any lesson file that isn't exactly 16:9 — most
   screen recordings aren't — is therefore letterboxed inside it, and the
   wider the viewport the thicker the dark bars around the picture.

   For real <video> lessons we don't need to guess a ratio: drop the fixed
   box and let the file's own intrinsic ratio drive the card height.  The
   picture then fills the card edge to edge at every width and the card
   keeps the video's aspect ratio, so nothing dark is left showing.

   iframe embeds (YouTube / Vimeo / ViewerJS / secure-host poster) keep the
   16:9 box declared earlier — a cross-origin embed exposes no intrinsic
   ratio, so a fixed box is the only thing CSS can give them.
   ============================================================ */
.learning-page__main-content .learning-page__file-player-card:has(video) {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    aspect-ratio: auto !important;
}

/* Player chrome flows with the video instead of stretching to the old box */
.learning-page__file-player-card:has(video) .plyr,
.learning-page__file-player-card:has(video) .plyr--video,
.learning-page__file-player-card:has(video) .plyr__video-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 0 !important;
}

/* The video itself: full width, height from its own ratio — never letterboxed.
   Also beats the height="426" attribute the blade puts on the element. */
.learning-page__file-player-card:has(video) video {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Fullscreen is the one case where the box, not the file, sets the size */
.learning-page__file-player-card:has(video) .plyr--fullscreen-active,
.learning-page__file-player-card:has(video) .plyr--fullscreen-active .plyr__video-wrapper {
    height: 100% !important;
}
.learning-page__file-player-card:has(video) .plyr--fullscreen-active video {
    height: 100% !important;
    object-fit: contain !important;
}


/* ============================================================
   VX 2.2 (b): the lesson video renders at its own pixel size, centred
   inside the black card — the "huge padding" the client is seeing.

   Cause: the "Player inner fills the card" block above targets
   `.learning-page__file-player-card > video` — a DIRECT child only.
   Plyr moves the <video> into `.plyr > .plyr__video-wrapper` as soon as
   it initialises, so after that nothing sizes the element any more and a
   854x480 file paints at 854x480 in the middle of a 1400px-wide card.
   The gap is even on all four sides, which is the give-away: it is not
   letterboxing (that only ever pads one axis), it is a small video that
   was never scaled up.

   Fix: size every nested player element, not just direct children.
   This block supersedes the (a) block below-the-fold rules and the
   `> video` rule above; it is last in the file so it wins.
   ============================================================ */

/* The card is a full-width 16:9 box again — for <video> as well, since the
   (a) block let its height collapse to the video's own size. */
.learning-page__main-content .learning-page__file-player-card,
.learning-page__main-content .learning-page__file-player-card:has(video) {
    position: relative !important;
    width: auto !important;
    height: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding-bottom: 56.25% !important;
    margin: -16px -16px 16px -16px !important;
    background-color: #000 !important;
    overflow: hidden !important;
}

/* Every player element inside the card fills it — note the descendant
   selectors: `video` and `iframe` at any depth, not just `> video`. */
.learning-page__main-content .learning-page__file-player-card .plyr,
.learning-page__main-content .learning-page__file-player-card .plyr--video,
.learning-page__main-content .learning-page__file-player-card .plyr__video-embed,
.learning-page__main-content .learning-page__file-player-card .plyr__video-wrapper,
.learning-page__main-content .learning-page__file-player-card .plyr__video-wrapper--fixed-ratio,
.learning-page__main-content .learning-page__file-player-card video,
.learning-page__main-content .learning-page__file-player-card iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
}

/* Scaled up to the card, keeping proportions — a 16:9 file therefore
   covers the card exactly and nothing black is left showing. */
.learning-page__main-content .learning-page__file-player-card video {
    display: block !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
}

/* Plyr's poster (course cover) fills instead of sitting small and centred */
.learning-page__main-content .learning-page__file-player-card .plyr__poster {
    background-size: cover !important;
    background-position: 50% 50% !important;
}

/* Fullscreen: plyr owns the sizing, the card box no longer applies */
.learning-page__file-player-card .plyr--fullscreen-active,
.learning-page__file-player-card .plyr--fullscreen-active .plyr__video-wrapper,
.learning-page__file-player-card .plyr--fullscreen-active video {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ==========================================================================
   VX — comments under a video lesson (learning page)

   The block reuses the course page's comment components, which are built for a
   full-width page column. Inside the learning page's narrower main column the
   defaults leave the thread cramped against the video card, so only spacing and
   width are adjusted here — the cards themselves keep their own styling.
   ========================================================================== */

.vx-lesson-comments {
    max-width: 100%;
}

/* The submit form's "Have a question?" banner carries a decorative mask that is
   sized for the wide course page; clip it to the lesson column. */
.vx-lesson-comments .comment-have-a-question-card,
.vx-lesson-comments .comment-have-a-question-card__mask {
    max-width: 100%;
    overflow: hidden;
}

/* Long words / pasted URLs in a comment must not widen the lesson column. */
.vx-lesson-comments .js-comment-card {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Replies indent under their parent, as they do on the course page. */
.vx-lesson-comments .js-comment-reply-form:empty {
    display: none;
}

@media (max-width: 767.98px) {
    .vx-lesson-comments {
        padding: 12px !important;
    }
}