/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://oceanvision.school
 Description:  Child theme for Hello Elementor — comprehensive mobile redesign
 Author:       Ocean Vision
 Template:     hello-elementor
 Version:      2.0.0
*/

/* ============================================================
   OCEAN VISION — COMPLETE MOBILE REDESIGN
   All styles below are mobile-only (max-width: 767px).
   Zero changes to desktop layout or visuals.
   ============================================================ */


/* ── DESKTOP: Hide all custom mobile elements ──────────────── */
.ocean-mobile-nav-btn,
.ocean-mobile-nav,
.ocean-mobile-nav-overlay,
.tutor-mobile-menu-btn,
.tutor-mobile-sidebar-overlay {
    display: none !important;
}


/* ============================================================
   1. HEADER — Compact mobile header with hamburger
   ============================================================ */

@media (max-width: 767px) {

    /* Hide desktop nav, My Profile button, fake hamburger */
    .elementor-94 .elementor-element-b07b94c .elementor-nav-menu,
    .elementor-94 .elementor-element-b07b94c .elementor-nav-menu__container,
    .elementor-94 .elementor-element-b07b94c .elementor-menu-toggle,
    .elementor-94 .elementor-element-7e8035d {
        display: none !important;
    }

    /* Compact header */
    .elementor-94 .elementor-element.elementor-element-fb9d0e1 {
        padding: 6px 12px !important;
    }

    /* Keep header behind lesson sidebar and dashboard sidebar */
    .elementor-location-header,
    .elementor-94 {
        z-index: 999 !important;
    }

    /* Logo sizing */
    .elementor-94 .elementor-element.elementor-element-558df0e img,
    .elementor-94 .elementor-element.elementor-element-f0c3fa0 img {
        max-height: 42px;
        width: auto !important;
    }
}


/* ============================================================
   2. CUSTOM HAMBURGER BUTTON (site-wide)
   ============================================================ */

@media (max-width: 767px) {

    .ocean-mobile-nav-btn {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 999997;
        background: #001F60;
        border: none;
        border-radius: 10px;
        width: 42px;
        height: 42px;
        padding: 10px;
        cursor: pointer;
        box-shadow: 0 2px 12px rgba(0, 31, 96, 0.35);
        transition: transform 0.2s ease, background 0.2s ease;
    }

    .ocean-mobile-nav-btn:active {
        transform: scale(0.92);
    }

    .ocean-mobile-nav-btn span {
        display: block;
        width: 20px;
        height: 2px;
        background: #ffffff;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Animate to X */
    .ocean-mobile-nav-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .ocean-mobile-nav-btn.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .ocean-mobile-nav-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
}


/* ============================================================
   3. SLIDE-IN NAV PANEL (site-wide, non-dashboard pages)
   ============================================================ */

@media (max-width: 767px) {

    .ocean-mobile-nav {
        position: fixed !important;
        top: 0 !important;
        right: -300px !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999999 !important;
        background: linear-gradient(180deg, #001F60 0%, #001845 100%) !important;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -6px 0 30px rgba(0, 0, 0, 0.3) !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .ocean-mobile-nav.open {
        right: 0 !important;
    }

    /* Nav header */
    .ocean-mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 20px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .ocean-mobile-nav-logo {
        height: 50px;
        width: auto;
        object-fit: contain;
    }

    .ocean-mobile-nav-title {
        display: none;
    }

    .ocean-mobile-nav-close {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: #ffffff;
        font-size: 22px;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

    .ocean-mobile-nav-close:active {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Nav links */
    .ocean-mobile-nav-links {
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        flex: 1;
    }

    .ocean-mobile-nav-links a {
        color: #ffffff;
        text-decoration: none;
        padding: 15px 24px;
        font-size: 15px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        transition: background 0.2s, padding-left 0.2s;
        display: flex;
        align-items: center;
        min-height: 48px;
    }

    .ocean-mobile-nav-links a:active {
        background: rgba(255, 255, 255, 0.12);
        padding-left: 28px;
    }

    /* Login/Profile CTA */
    .ocean-mobile-nav-login {
        margin: auto 20px 24px !important;
        background: #ffffff !important;
        color: #001F60 !important;
        border-radius: 10px !important;
        text-align: center !important;
        font-weight: 700 !important;
        padding: 14px 24px !important;
        border: none !important;
        font-size: 15px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.2s !important;
    }

    .ocean-mobile-nav-login:active {
        transform: scale(0.97) !important;
    }

    /* Overlay */
    .ocean-mobile-nav-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 15, 40, 0.6) !important;
        z-index: 999998 !important;
        cursor: pointer !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        transition: opacity 0.3s ease !important;
    }

    .ocean-mobile-nav-overlay.active {
        display: block !important;
        animation: fadeIn 0.3s ease !important;
    }
}


/* ============================================================
   4. DASHBOARD — Sidebar as slide-in drawer
   ============================================================ */

@media (max-width: 767px) {

    /* Sidebar drawer */
    .tutor-dashboard-left-menu {
        position: fixed !important;
        top: 0 !important;
        right: -300px !important;
        left: auto !important;
        width: 280px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        background: linear-gradient(180deg, #001F60 0%, #001845 100%) !important;
        transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -6px 0 30px rgba(0, 0, 0, 0.3) !important;
        padding-top: 20px !important;
        border-right: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tutor-dashboard-left-menu.tutor-sidebar-open {
        right: 0 !important;
    }

    /* Sidebar menu items — white text on dark bg */
    .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link {
        color: rgba(255, 255, 255, 0.85) !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        transition: background 0.2s, color 0.2s !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-menu-item-link:active {
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-link {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    /* Sidebar icons */
    .tutor-dashboard-left-menu .tutor-dashboard-menu-item-icon {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .tutor-dashboard-left-menu .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon {
        color: #ffffff !important;
    }

    /* "Instructor" section label */
    .tutor-dashboard-left-menu .tutor-dashboard-permalinks li[class*="separator"],
    .tutor-dashboard-left-menu .tutor-dashboard-permalinks .tutor-dashboard-menu-divider {
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        padding: 16px 24px 8px !important;
    }

    /* Dashboard Menu button (top-right) */
    .tutor-mobile-menu-btn {
        display: flex !important;
        align-items: center;
        gap: 6px;
        position: fixed;
        top: 12px;
        right: 12px;
        z-index: 100000;
        background: #001F60;
        color: #ffffff;
        border: none;
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 2px 12px rgba(0, 31, 96, 0.35);
        transition: transform 0.2s ease;
    }

    .tutor-mobile-menu-btn:active {
        transform: scale(0.94);
    }

    /* Sidebar overlay */
    .tutor-mobile-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 15, 40, 0.6);
        z-index: 99998;
        cursor: pointer;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .tutor-mobile-sidebar-overlay.active {
        display: block !important;
        animation: fadeIn 0.3s ease;
    }

    /* Dashboard wrapper */
    .tutor-dashboard,
    .tutor-screen-frontend-dashboard .tutor-dashboard {
        display: block !important;
    }

    .tutor-frontend-dashboard-maincontent {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tutor-dashboard-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
    }

    /* No padding-top needed since menu is top-right, not overlapping content */
    .tutor-screen-frontend-dashboard .tutor-dashboard {
        padding-top: 0 !important;
    }
}


/* ============================================================
   5. DASHBOARD — Profile header redesign
   ============================================================ */

@media (max-width: 767px) {

    .tutor-frontend-dashboard-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 16px !important;
        gap: 16px !important;
    }

    .tutor-header-left-side,
    .tutor-dashboard-header {
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Avatar */
    .tutor-dashboard-header-avatar {
        margin: 0 auto !important;
    }

    .tutor-avatar.tutor-avatar-xl {
        width: 80px !important;
        height: 80px !important;
    }

    /* User info */
    .tutor-user-info {
        margin-left: 0 !important;
        text-align: center !important;
        margin-top: 8px !important;
    }

    .tutor-user-info .tutor-fs-4 {
        font-size: 20px !important;
    }

    /* Right side (notifications + create course) */
    .tutor-header-right-side {
        width: 100% !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 0 !important;
    }

    /* Ratings stars */
    .tutor-dashboard-header-ratings {
        justify-content: center !important;
    }
}


/* ============================================================
   6. DASHBOARD — Stat cards as modern grid
   ============================================================ */

@media (max-width: 767px) {

    /* Card grid */
    .tutor-dashboard-content-inner .tutor-row.tutor-gx-lg-4 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Reset column widths */
    .tutor-dashboard-content-inner .tutor-row.tutor-gx-lg-4 > [class*="tutor-col"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Card styling */
    .tutor-dashboard-content-inner .tutor-card {
        border-radius: 14px !important;
        border: 1px solid #e8ecf1 !important;
        box-shadow: 0 1px 4px rgba(0, 31, 96, 0.06) !important;
        overflow: hidden !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        cursor: pointer !important;
    }

    .tutor-dashboard-content-inner .tutor-card:active {
        transform: scale(0.97) !important;
        box-shadow: 0 2px 8px rgba(0, 31, 96, 0.12) !important;
    }

    /* Card inner layout */
    .tutor-dashboard-content-inner .tutor-card > div {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 16px 12px !important;
        gap: 6px !important;
    }

    /* Icon circle */
    .tutor-dashboard-content-inner .tutor-round-box {
        margin: 0 0 4px 0 !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Number */
    .tutor-dashboard-content-inner .tutor-card .tutor-fs-4,
    .tutor-dashboard-content-inner .tutor-card .tutor-fs-3 {
        display: block !important;
        font-size: 22px !important;
        margin-left: 0 !important;
    }

    /* Label */
    .tutor-dashboard-content-inner .tutor-card .tutor-fs-7 {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Dashboard title */
    .tutor-dashboard-title {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }
}


/* ============================================================
   7. ENROLLED COURSES — Tab nav + course cards
   ============================================================ */

@media (max-width: 767px) {

    /* Tab navigation — horizontal scroll */
    .tutor-dashboard-content .tutor-nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 0 !important;
        border-bottom: 2px solid #e8ecf1 !important;
        margin-bottom: 16px !important;
    }

    .tutor-dashboard-content .tutor-nav::-webkit-scrollbar {
        display: none !important;
    }

    .tutor-dashboard-content .tutor-nav-item {
        flex-shrink: 0 !important;
    }

    .tutor-dashboard-content .tutor-nav-link {
        white-space: nowrap !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #6b7280 !important;
        border-bottom: 2px solid transparent !important;
        margin-bottom: -2px !important;
        transition: color 0.2s, border-color 0.2s !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    .tutor-dashboard-content .tutor-nav-link.is-active {
        color: #001F60 !important;
        border-bottom-color: #001F60 !important;
        font-weight: 600 !important;
    }

    /* Legacy enrolled course tabs */
    .course-enrolled-nav-wrap,
    .course-enrolled-nav {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    .course-enrolled-nav a,
    .course-enrolled-nav li a,
    .tutor-course-enrolled-nav a {
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        min-height: 44px !important;
    }

    /* Course cards grid — single column */
    .tutor-grid.tutor-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Course card */
    .tutor-course-card {
        border-radius: 14px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 6px rgba(0, 31, 96, 0.08) !important;
        border: 1px solid #e8ecf1 !important;
    }

    /* Course thumbnail */
    .tutor-course-card .tutor-course-thumbnail {
        border-radius: 14px 14px 0 0 !important;
        overflow: hidden !important;
    }

    /* Card body */
    .tutor-course-card .tutor-card-body {
        padding: 16px !important;
    }

    /* Course name */
    .tutor-course-card .tutor-course-name {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* Progress bar */
    .tutor-course-card .tutor-progress-bar {
        border-radius: 6px !important;
        height: 6px !important;
        background: #e8ecf1 !important;
    }

    .tutor-course-card .tutor-progress-value {
        border-radius: 6px !important;
        background: #001F60 !important;
    }

    /* Continue Learning button */
    .tutor-course-card .tutor-btn {
        width: 100% !important;
        text-align: center !important;
        border-radius: 10px !important;
        min-height: 46px !important;
        font-weight: 600 !important;
    }

    /* Course card footer */
    .tutor-course-card .tutor-card-footer {
        padding: 0 16px 16px !important;
    }

    /* Fix progress text — stack "3/87" above "3% Complete" */
    .tutor-course-progress .tutor-d-flex,
    .tutor-course-progress .tutor-fs-6,
    .tutor-course-card .tutor-course-progress > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .tutor-course-progress .tutor-d-flex > span,
    .tutor-course-card .tutor-course-progress span {
        display: block !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: 14px !important;
    }
}


/* ============================================================
   8. COURSES ARCHIVE — Public course listing
   ============================================================ */

@media (max-width: 767px) {

    .tutor-courses-wrap {
        grid-template-columns: 1fr !important;
    }

    .tutor-course-list.tutor-grid.tutor-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Sort/filter dropdown */
    .tutor-course-filter {
        padding: 0 16px 12px !important;
    }

    .tutor-course-filter .tutor-form-select {
        font-size: 14px !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
    }

    /* Bookmark button */
    .tutor-course-card .tutor-course-bookmark {
        top: 10px !important;
        right: 10px !important;
    }

    .tutor-course-wishlist-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(4px) !important;
    }

    /* Pagination */
    .tutor-pagination-wrap {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 16px !important;
    }
}


/* ============================================================
   9. LESSON PLAYER — Full mobile experience
   ============================================================ */

@media (max-width: 767px) {

    /* Disable ALL TutorLMS built-in sidebar/offcanvas behavior */
    .tutor-offcanvas-backdrop,
    .tutor-offcanvas,
    .tutor-offcanvas-show {
        display: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Prevent TutorLMS from blurring anything */
    body.tutor-offcanvas-open,
    body.tutor-offcanvas-open *,
    .tutor-course-single-content-wrapper,
    .tutor-quiz-single-entry-wrap {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Main wrapper — stack vertically */
    .tutor-course-single-content-wrapper {
        flex-direction: column !important;
        display: flex !important;
    }

    /* Video area — full width */
    .tutor-quiz-single-entry-wrap,
    .tutor-course-player,
    .tutor-lesson-player-wrap {
        width: 100% !important;
        flex: none !important;
    }

    /* Remove floating course content button */
    .ocean-lesson-sidebar-btn {
        display: none !important;
    }

    /* Hide site-wide nav hamburger on lesson/course player pages */
    .tutor-course-single-content-wrapper ~ .ocean-mobile-nav-btn,
    body:has(.tutor-course-single-content-wrapper) .ocean-mobile-nav-btn,
    body:has(.tutor-course-single-content-wrapper) .ocean-mobile-nav,
    body:has(.tutor-course-single-content-wrapper) .ocean-mobile-nav-overlay {
        display: none !important;
    }

    /* Make TutorLMS top-right hamburger visible and styled */
    .tutor-course-topic-single-header .tutor-iconic-btn,
    .tutor-course-topic-single-header [class*="tutor-d-block"][class*="tutor-d-xl-none"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Responsive video embed */
    .tutor-video-player-wrapper .tutor-ratio,
    .tutor-lesson-video-wrap,
    .tutor-video-wrap {
        position: relative !important;
        padding-bottom: 56.25% !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .tutor-lesson-video-wrap iframe,
    .tutor-lesson-video-wrap video,
    .tutor-video-wrap iframe,
    .tutor-video-wrap video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Top bar */
    .tutor-course-topic-single-header {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .tutor-course-topic-single-header-title {
        font-size: 14px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        flex: 1 !important;
    }

    /* Course content sidebar — slide-in overlay from left */
    .tutor-lesson-sidebar,
    .tutor-course-single-sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        width: 300px !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        background: #ffffff !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 6px 0 30px rgba(0, 0, 0, 0.3) !important;
        -webkit-overflow-scrolling: touch !important;
        flex: none !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    /* Ensure inner content doesn't block scroll */
    .tutor-lesson-sidebar *,
    .tutor-course-single-sidebar-wrapper * {
        touch-action: pan-y !important;
    }

    .tutor-lesson-sidebar.lesson-sidebar-open,
    .tutor-course-single-sidebar-wrapper.lesson-sidebar-open {
        left: 0 !important;
    }

    /* Force sidebar content visible — EXCEPT tooltips/popovers */
    .tutor-lesson-sidebar,
    .tutor-course-single-sidebar-wrapper {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .tutor-lesson-sidebar > *,
    .tutor-lesson-sidebar .tutor-course-topic,
    .tutor-lesson-sidebar .tutor-accordion-item-header,
    .tutor-lesson-sidebar .tutor-course-topic-item,
    .tutor-lesson-sidebar .tutor-course-topic-item a,
    .tutor-lesson-sidebar .tutor-course-single-sidebar-title {
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Keep tooltips/popovers hidden until clicked */
    .tutor-lesson-sidebar .tutor-tooltip,
    .tutor-lesson-sidebar [class*="tooltip"],
    .tutor-lesson-sidebar [class*="popover"],
    .tutor-lesson-sidebar [role="tooltip"],
    .tutor-lesson-sidebar .tutor-course-topic-description,
    .tutor-lesson-sidebar .tutor-accordion-item-header ~ .tutor-mt-4,
    .tutor-lesson-sidebar [data-toggle="tooltip"],
    .tutor-lesson-sidebar .tooltip {
        visibility: hidden !important;
        opacity: 0 !important;
        display: none !important;
    }

    /* When tooltip is actively shown (by clicking i button) — make it readable */
    .tutor-lesson-sidebar .tutor-tooltip.show,
    .tutor-lesson-sidebar [class*="tooltip"].show,
    .tutor-lesson-sidebar [class*="popover"].show,
    .tutor-lesson-sidebar .tooltip.show {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        background: #001F60 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
        z-index: 100000 !important;
    }

    .tutor-lesson-sidebar .tutor-tooltip.show *,
    .tutor-lesson-sidebar [class*="tooltip"].show *,
    .tutor-lesson-sidebar [class*="popover"].show * {
        color: #ffffff !important;
    }

    /* Force sidebar structural elements visible — but NOT accordion bodies (let them toggle) */
    .tutor-lesson-sidebar .tutor-course-topic,
    .tutor-lesson-sidebar .tutor-course-topic-item,
    .tutor-lesson-sidebar .tutor-course-single-sidebar-title,
    .tutor-lesson-sidebar .tutor-accordion-item-header,
    .tutor-course-single-sidebar-wrapper .tutor-course-topic,
    .tutor-course-single-sidebar-wrapper .tutor-course-topic-item {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
    }

    /* Accordion bodies: only show when parent is active/expanded */
    .tutor-lesson-sidebar .tutor-accordion-item-body {
        overflow: hidden !important;
    }

    /* Topic headers — readable dark text on light bg */
    .tutor-lesson-sidebar .tutor-accordion-item-header,
    .tutor-lesson-sidebar .tutor-accordion-item-header * {
        color: #001F60 !important;
        background: #f0f3f8 !important;
    }

    /* Lesson items — dark text on white */
    .tutor-lesson-sidebar .tutor-course-topic-item a,
    .tutor-lesson-sidebar .tutor-course-topic-item a * {
        color: #333333 !important;
    }

    /* Active lesson item highlight */
    .tutor-lesson-sidebar .tutor-course-topic-item.is-active a,
    .tutor-lesson-sidebar .tutor-course-topic-item.is-active a * {
        color: #001F60 !important;
        font-weight: 600 !important;
    }

    /* Duration text */
    .tutor-lesson-sidebar .tutor-course-topic-item-duration {
        color: #6b7280 !important;
    }

    /* Topic progress count (e.g. "2/5") */
    .tutor-lesson-sidebar .tutor-course-topic-summary,
    .tutor-lesson-sidebar .tutor-course-topic-summary * {
        color: #6b7280 !important;
        background: transparent !important;
    }

    /* Completion checkmarks — green */
    .tutor-lesson-sidebar [class*="tutor-icon-circle-mark"] {
        color: #10b981 !important;
    }

    /* Sidebar title header */
    .tutor-lesson-sidebar .tutor-course-single-sidebar-title,
    .tutor-lesson-sidebar .tutor-course-single-sidebar-title * {
        color: #001F60 !important;
        background: #ffffff !important;
    }

    .tutor-lesson-sidebar .lesson-sidebar-close-btn,
    .tutor-lesson-sidebar .lesson-sidebar-close-btn * {
        color: #ffffff !important;
    }

    .tutor-lesson-sidebar .tutor-accordion-item-header {
        background: #f8f9fb !important;
        border-bottom: 1px solid #e8ecf1 !important;
    }

    .tutor-lesson-sidebar .tutor-course-topic-item a {
        background: #ffffff !important;
    }

    .tutor-lesson-sidebar .tutor-course-topic-item.is-active a {
        background: rgba(0, 31, 96, 0.06) !important;
    }

    /* Ensure icons are visible */
    .tutor-lesson-sidebar [class*="tutor-icon"] {
        color: #001F60 !important;
    }

    /* Completion checkmarks */
    .tutor-lesson-sidebar .tutor-course-topic-item-status .tutor-icon-circle-mark-line {
        color: #10b981 !important;
    }

    /* Lesson sidebar overlay — no blur */
    .lesson-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 15, 40, 0.5);
        z-index: 99998;
        cursor: pointer;
    }

    .lesson-sidebar-overlay.active {
        display: block !important;
        animation: fadeIn 0.3s ease;
    }

    /* Video/content takes full width and comes first visually */
    .tutor-quiz-single-entry-wrap {
        order: -1 !important;
    }

    /* Sidebar header — sticky, clean look */
    .tutor-course-single-sidebar-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 16px !important;
        border-bottom: 2px solid #e8ecf1 !important;
        background: #001F60 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    /* "Course Content" text — white on dark */
    .tutor-course-single-sidebar-title,
    .tutor-course-single-sidebar-title * {
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    /* X close button — clean white circle */
    .tutor-course-single-sidebar-title button,
    .tutor-course-single-sidebar-title .tutor-iconic-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: #ffffff !important;
        font-size: 18px !important;
        transition: background 0.2s !important;
    }

    .tutor-course-single-sidebar-title button:active,
    .tutor-course-single-sidebar-title .tutor-iconic-btn:active {
        background: rgba(255, 255, 255, 0.35) !important;
    }

    /* Header stays visible normally, but hides behind sidebar when open */
    .elementor-location-header {
        z-index: 900 !important;
        position: relative !important;
    }

    /* Hide JS-injected close button — we use the existing X in sidebar header */
    .lesson-sidebar-close-btn {
        display: none !important;
    }

    /* Topic accordion items */
    .tutor-accordion-item-header {
        padding: 14px 16px !important;
        min-height: 48px !important;
    }

    .tutor-course-topic-title {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* Lesson items in sidebar */
    .tutor-course-topic-item {
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .tutor-course-topic-item a {
        padding: 12px 16px 12px 24px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .tutor-course-topic-item.is-active {
        background: rgba(0, 31, 96, 0.06) !important;
        border-left: 3px solid #001F60 !important;
    }

    /* Lesson content tabs (Overview, Exercise Files, Comments) */
    .tutor-course-spotlight-nav {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-bottom: 2px solid #e8ecf1 !important;
        gap: 0 !important;
    }

    .tutor-course-spotlight-nav::-webkit-scrollbar {
        display: none !important;
    }

    .tutor-course-spotlight-nav .tutor-nav-item {
        flex-shrink: 0 !important;
    }

    .tutor-course-spotlight-nav .tutor-nav-link {
        padding: 12px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        min-height: 44px !important;
    }

    /* Lesson content area */
    .tutor-course-topic-single-body {
        padding: 0 !important;
    }

    .tutor-course-spotlight-wrapper .tutor-container {
        padding: 16px !important;
    }

    .tutor-course-spotlight-wrapper .tutor-col-xl-8 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Previous / Next navigation */
    .tutor-course-topic-single-footer {
        padding: 12px 16px !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
        border-top: 1px solid #e8ecf1 !important;
    }

    .tutor-course-topic-single-footer .tutor-btn {
        flex: 1 !important;
        text-align: center !important;
        border-radius: 10px !important;
        min-height: 44px !important;
        font-size: 14px !important;
    }

    /* Mobile progress bar */
    .tutor-spotlight-mobile-progress-complete {
        padding: 12px 16px !important;
        background: #f8f9fb !important;
        border-top: 1px solid #e8ecf1 !important;
    }

    .tutor-topbar-mark-btn {
        border-radius: 10px !important;
        min-height: 44px !important;
        font-size: 14px !important;
        width: 100% !important;
    }

    /* Desktop-only content */
    .content-for-desktop {
        display: none !important;
    }

    .content-for-mobile {
        display: block !important;
    }
}


/* ============================================================
   10. QUIZ & ASSIGNMENTS
   ============================================================ */

@media (max-width: 767px) {

    .tutor-quiz-attempt-btn-wrap,
    .tutor-quiz-footer {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px !important;
    }

    .tutor-quiz-attempt-btn-wrap .tutor-btn,
    .tutor-quiz-footer .tutor-btn {
        width: 100% !important;
        text-align: center !important;
        border-radius: 10px !important;
        min-height: 48px !important;
    }

    /* Quiz question cards */
    .tutor-quiz-question-wrapper {
        padding: 16px !important;
    }

    .tutor-quiz-question-body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Quiz answer options — larger tap targets */
    .tutor-quiz-answer-item {
        padding: 14px 16px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
        border: 1px solid #e8ecf1 !important;
        min-height: 48px !important;
    }

    .tutor-quiz-answer-item:active {
        background: rgba(0, 31, 96, 0.05) !important;
    }
}


/* ============================================================
   11. PROFILE PAGE
   ============================================================ */

@media (max-width: 767px) {

    .tutor-dashboard-profile-data .tutor-row {
        flex-direction: column !important;
        gap: 2px !important;
        margin-bottom: 16px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .tutor-dashboard-profile-data .tutor-col-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    .tutor-dashboard-profile-data .tutor-color-secondary {
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #6b7280 !important;
    }

    .tutor-dashboard-profile-data .tutor-fw-medium {
        font-size: 15px !important;
    }
}


/* ============================================================
   12. SINGLE COURSE PAGE (course detail before enrolling)
   ============================================================ */

@media (max-width: 767px) {

    .tutor-single-course-sidebar {
        width: 100% !important;
        position: relative !important;
        top: 0 !important;
        margin-top: 16px !important;
    }

    /* Course benefits, requirements lists */
    .tutor-course-details-benefits li,
    .tutor-course-details-requirements li {
        padding: 10px 0 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Course instructor card */
    .tutor-single-course-author-wrap {
        padding: 16px !important;
    }

    /* Enroll button */
    .tutor-course-single-btn-group .tutor-btn {
        width: 100% !important;
        border-radius: 10px !important;
        min-height: 50px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }
}


/* ============================================================
   13. TABLES — Horizontal scroll for data tables
   ============================================================ */

@media (max-width: 767px) {

    .tutor-table-wrapper,
    .tutor-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
        border-radius: 10px !important;
    }

    .tutor-table th,
    .tutor-table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}


/* ============================================================
   14. GLOBAL MOBILE POLISH
   ============================================================ */

@media (max-width: 767px) {

    /* All Tutor buttons — consistent styling */
    .tutor-btn {
        min-height: 44px !important;
        padding: 10px 20px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
        transition: transform 0.15s ease !important;
    }

    .tutor-btn:active {
        transform: scale(0.97) !important;
    }

    /* Card radiuses globally */
    .tutor-card {
        border-radius: 14px !important;
    }

    /* Input fields */
    .tutor-form-control {
        min-height: 44px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        padding: 10px 14px !important;
    }

    /* Smooth scroll for whole page */
    html {
        scroll-behavior: smooth !important;
    }

    /* Hide AI chatbot & WhatsApp widgets on mobile */
    .joinchat,
    .joinchat__button,
    [class*="chatbot"],
    [class*="wpbot"],
    .wpb_wrapper .chatbot-container,
    .wpaicg_chat_widget,
    [id*="wpaicgChat"],
    .ht-ctc-chat,
    [class*="click-to-chat"],
    .ctc-chat {
        display: none !important;
    }

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }

    .tutor-container,
    .tutor-wrap {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Safe area padding for notched phones */
    .ocean-mobile-nav,
    .tutor-dashboard-left-menu {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}


/* ============================================================
   15. ANIMATIONS
   ============================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 767px) {

    /* Animate stat cards on load */
    .tutor-dashboard-content-inner .tutor-card {
        animation: slideInUp 0.4s ease backwards !important;
    }
    .tutor-dashboard-content-inner .tutor-card:nth-child(1) { animation-delay: 0.05s !important; }
    .tutor-dashboard-content-inner .tutor-card:nth-child(2) { animation-delay: 0.10s !important; }
    .tutor-dashboard-content-inner .tutor-card:nth-child(3) { animation-delay: 0.15s !important; }
    .tutor-dashboard-content-inner .tutor-card:nth-child(4) { animation-delay: 0.20s !important; }
    .tutor-dashboard-content-inner .tutor-card:nth-child(5) { animation-delay: 0.25s !important; }
    .tutor-dashboard-content-inner .tutor-card:nth-child(6) { animation-delay: 0.30s !important; }

    /* Animate course cards on load */
    .tutor-course-card {
        animation: slideInUp 0.4s ease backwards !important;
    }
    .tutor-course-card:nth-child(1) { animation-delay: 0.05s !important; }
    .tutor-course-card:nth-child(2) { animation-delay: 0.10s !important; }
    .tutor-course-card:nth-child(3) { animation-delay: 0.15s !important; }
    .tutor-course-card:nth-child(4) { animation-delay: 0.20s !important; }

    /* Nav link staggered entrance */
    .ocean-mobile-nav.open .ocean-mobile-nav-links a {
        animation: slideInRight 0.3s ease backwards !important;
    }
    .ocean-mobile-nav.open .ocean-mobile-nav-links a:nth-child(1) { animation-delay: 0.05s !important; }
    .ocean-mobile-nav.open .ocean-mobile-nav-links a:nth-child(2) { animation-delay: 0.08s !important; }
    .ocean-mobile-nav.open .ocean-mobile-nav-links a:nth-child(3) { animation-delay: 0.11s !important; }
    .ocean-mobile-nav.open .ocean-mobile-nav-links a:nth-child(4) { animation-delay: 0.14s !important; }
    .ocean-mobile-nav.open .ocean-mobile-nav-links a:nth-child(5) { animation-delay: 0.17s !important; }
    .ocean-mobile-nav.open .ocean-mobile-nav-links a:nth-child(6) { animation-delay: 0.20s !important; }
    .ocean-mobile-nav.open .ocean-mobile-nav-links a:nth-child(7) { animation-delay: 0.23s !important; }
}