/* ==========================================
   NAGEYE SCHOOL OF LANGUAGES — MOBILE CSS
   Final Production Version
   ========================================== */

/* ==========================================
   TABLET & BELOW (max-width: 1199px)
   ========================================== */
@media (max-width: 1199px) {

    /* Header */
    .tgmenu__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tgmenu__nav .logo img {
        max-height: 40px;
    }
    .tgmenu__search {
        display: none !important;
    }
    .tgmenu__action .list-wrap {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-login-btn {
        display: none !important;
    }
    .mobile-nav-toggler {
        order: 1;
    }

    /* Mobile menu logo */
    .tgmobile__menu .nav-logo img {
        max-height: 40px !important;
        width: 40px !important;
        object-fit: contain !important;
    }

    /* Mobile menu close button */
    .tgmobile__menu-box .close-btn {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 10;
    }

    /* Profile Dropdown */
    #profileDropdown {
        right: -50px !important;
        width: 260px !important;
    }

    /* Dashboard Layout — centered */
    .dashboard__top-wrap {
        margin-bottom: 20px;
    }
    .dashboard__instructor-info-left {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    .dashboard__instructor-info-left .thumb {
        margin: 0 auto;
    }
    .dashboard__instructor-info-left .content {
        text-align: center;
    }
    .dashboard__instructor-info-left .content .list-wrap {
        justify-content: center;
    }
    .dashboard__counter-item {
        margin-bottom: 10px;
        text-align: center;
    }
    .dashboard__sidebar-wrap {
        margin-bottom: 30px;
    }

    /* Quick Actions — centered */
    .dashboard__content-wrap .row.mb-4 .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .dashboard__content-title {
        text-align: center;
    }

    /* Course Cards */
    .courses__item-seven {
        margin-bottom: 20px;
    }

    /* Subscription Overlay */
    #subscriptionOverlay > div {
        max-width: 95% !important;
        margin: 10px auto !important;
    }
    #subscriptionOverlay > div > div:last-child {
        flex-direction: column !important;
    }

    /* Call Room */
    #jitsiContainer {
        height: calc(100vh - 200px) !important;
    }

    /* Course Details Sidebar */
    .courses__details-sidebar {
        margin-top: 30px;
    }

    /* Settings Page */
    .color-swatch {
        width: 35px !important;
        height: 35px !important;
    }
    .banner-thumb {
        width: 110px !important;
        height: 40px !important;
    }

    /* Feedback Thread Messages */
    .d-flex.mb-3 .card {
        max-width: 90% !important;
    }

    /* Analytics Tables */
    .table-responsive {
        font-size: 13px;
    }

    /* Start Call Tabs */
    .nav-tabs .nav-link {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Manage Groups */
    .manage-groups .col-md-4,
    .manage-groups .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Section titles — centered */
    .section__title {
        text-align: center;
    }
    .section__title .sub-title {
        justify-content: center;
    }

    /* Breadcrumb — centered */
    .breadcrumb__content {
        text-align: center;
    }
    .breadcrumb__content .breadcrumb {
        justify-content: center;
    }
}


/* ==========================================
   FOOTER MOBILE (max-width: 767px)
   ========================================== */
@media (max-width: 767px) {

    .footer__top .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .footer__widget {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }
    .footer__widget:last-child {
        border-bottom: none;
    }
    .footer__widget .logo {
        text-align: center;
    }
    .footer__widget .logo img {
        max-height: 50px;
        margin: 0 auto;
    }
    .footer__widget-title {
        font-size: 16px;
        margin-bottom: 12px;
        text-align: center;
    }
    .footer__link ul {
        text-align: center;
    }
    .footer__link ul li {
        margin-bottom: 6px;
    }
    .footer__link ul li a {
        font-size: 14px;
    }
    .footer__content {
        text-align: center;
    }
    .footer__content p {
        font-size: 13px;
    }
    .footer__content .list-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer__contact-content {
        text-align: center;
    }
    .footer__contact-content .list-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer__social {
        justify-content: center;
    }
    .footer__bottom div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 5px !important;
        text-align: center;
    }
    .footer__bottom span[style*="opacity:0.3"] {
        display: none !important;
    }
    .footer__bottom p {
        font-size: 12px;
    }
}


/* ==========================================
   MOBILE PHONE (max-width: 576px)
   ========================================== */
@media (max-width: 576px) {

    /* Header */
    .tg-header__top {
        display: none;
    }
    .tgmenu__nav .logo img {
        max-height: 35px;
    }

    /* Profile Dropdown */
    #profileDropdown {
        right: -80px !important;
        width: 250px !important;
        top: 45px !important;
    }
    #profileDropdown > div:first-child {
        padding: 15px !important;
    }
    #profileDropdown > div:first-child > div:first-child {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    /* Banner / Hero Section — centered */
    .banner__content-six {
        text-align: center;
    }
    .banner__content-six .title {
        font-size: 28px !important;
    }
    .banner__content-six .sub-title {
        font-size: 14px !important;
        display: block;
        text-align: center;
    }
    .banner__info-list {
        justify-content: center;
    }
    .banner__btn-wrap-three {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .banner__btn-wrap-three .btn {
        font-size: 13px !important;
        padding: 10px 20px !important;
    }
    .banner__images-six {
        display: block !important;
        max-width: 100% !important;
        margin: 0 auto 28px;
    }

    /* Pricing Cards on Landing — centered */
    .col-lg-5.col-md-6 .card {
        margin-bottom: 20px;
    }
    .col-lg-5.col-md-6 .card div[style*="text-align:center"] {
        text-align: center !important;
    }

    /* Subscription Overlay — centered */
    #subscriptionOverlay {
        padding: 10px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }
    #subscriptionOverlay > div {
        max-width: 100% !important;
        margin: 5px auto !important;
    }
    #subscriptionOverlay > div > div:first-child {
        padding: 20px 15px !important;
        text-align: center;
    }
    #subscriptionOverlay > div > div:first-child h3 {
        font-size: 20px !important;
    }
    #subscriptionOverlay > div > div:last-child {
        padding: 15px !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    #subscriptionOverlay > div > div:last-child > div {
        min-width: auto !important;
        text-align: center;
    }
    #subscriptionOverlay > div > div:last-child > div span[style*="font-size:36px"] {
        font-size: 28px !important;
    }

    /* Dashboard — centered */
    .dashboard__content-title .title {
        font-size: 18px;
        text-align: center;
    }
    .dashboard__content-title.d-flex {
        flex-direction: column !important;
        gap: 10px;
        align-items: center;
    }
    .dashboard__counter-item {
        text-align: center;
    }
    .dashboard__counter-item .content .count {
        font-size: 24px;
    }
    .dashboard__counter-item .content p {
        font-size: 11px;
    }

    /* Quick Actions — stack vertically, centered (exclude stat card columns that have col-6) */
    .dashboard__content-wrap .row.mb-4 .col-md-3:not(.col-6) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .dashboard__content-wrap .row.mb-4 .btn {
        font-size: 14px !important;
        white-space: normal !important;
    }

    /* Course Cards — centered text */
    .courses__item-content {
        text-align: center;
    }
    .courses__item-content h5.title,
    .courses__item-content h5.title a {
        font-size: 15px;
    }
    .courses__item-meta {
        justify-content: center;
    }
    .courses__item-bottom {
        justify-content: center;
    }

    /* Course Details — centered */
    .courses__details-content h2.title {
        font-size: 22px;
        text-align: center;
    }
    .courses__details-meta {
        text-align: center;
    }
    .courses__details-meta .list-wrap {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .courses__details-content .nav-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
    .courses__details-content .nav-tabs .nav-link {
        font-size: 13px;
        padding: 8px 12px;
    }
    .courses__cost-wrap {
        text-align: center;
    }
    .courses__cost-wrap span[style*="font-size: 24px"] {
        font-size: 20px !important;
    }
    .courses__details-enroll {
        text-align: center;
    }
    .courses__details-enroll .btn {
        font-size: 14px;
    }
    .courses__information-wrap {
        text-align: center;
    }
    .courses__details-social {
        text-align: center;
    }
    .courses__details-social .list-wrap {
        justify-content: center;
    }

    /* Instructor Tab — centered */
    .courses__instructors-wrap {
        flex-direction: column;
        text-align: center;
    }
    .courses__instructors-thumb {
        margin: 0 auto 15px;
    }
    .courses__instructors-thumb img {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50%;
        object-fit: cover;
    }
    .courses__instructors-content {
        text-align: center;
    }

    /* Call Room */
    #jitsiContainer {
        height: calc(100vh - 180px) !important;
    }
    .dashboard__area .container-fluid > div:first-child {
        padding: 10px 15px !important;
        flex-direction: column !important;
        gap: 10px;
        min-height: auto !important;
        text-align: center;
    }
    .dashboard__area .container-fluid > div:first-child .btn {
        padding: 6px 14px !important;
        font-size: 13px;
    }
    .dashboard__area .container-fluid > div:first-child .d-flex {
        justify-content: center;
    }

    /* Settings Page — centered */
    .col-md-3.text-center {
        margin-bottom: 20px;
    }
    #profilePreview {
        width: 80px !important;
        height: 80px !important;
        font-size: 28px !important;
        margin: 0 auto;
    }
    .color-swatch {
        width: 30px !important;
        height: 30px !important;
    }
    .banner-thumb {
        width: 90px !important;
        height: 35px !important;
    }

    /* Feedback Thread — centered headers */
    .d-flex.mb-3 .card {
        max-width: 95% !important;
    }
    .card-body.py-2.px-3 {
        padding: 8px 10px !important;
    }
    #replyForm .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }
    #replyForm .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        justify-content: center;
    }
    #voiceRecordBtn {
        font-size: 12px !important;
    }

    /* Student Analytics — centered */
    .table th,
    .table td {
        padding: 6px 8px;
        font-size: 12px;
        text-align: center;
    }

    /* Start Call — centered */
    .nav-tabs {
        flex-direction: column;
    }
    .nav-tabs .nav-item {
        width: 100%;
    }
    .nav-tabs .nav-link {
        width: 100%;
        text-align: center;
    }

    /* Manage Groups — centered */
    .card-header.d-flex {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        align-items: center;
    }

    /* My Group — centered */
    .col-md-6.mb-3 .d-flex.align-items-center {
        padding: 10px !important;
        justify-content: center;
    }

    /* Breadcrumb — centered */
    .breadcrumb__content {
        text-align: center;
    }
    .breadcrumb__content h3.title {
        font-size: 22px;
    }
    .breadcrumb__content .breadcrumb {
        justify-content: center;
    }

    /* Cards General */
    .card {
        margin-bottom: 15px;
    }
    .card-header {
        padding: 12px 15px;
        text-align: center;
    }
    .card-body {
        padding: 15px;
    }

    /* Forms — centered labels */
    .form-control,
    .form-select {
        font-size: 14px;
    }
    .btn {
        font-size: 14px;
    }
    .btn-two {
        padding: 10px 20px;
    }

    /* Accordion */
    .accordion-button {
        font-size: 14px;
        padding: 12px 15px;
    }

    /* All Courses Page — centered */
    .courses__sidebar {
        margin-bottom: 30px;
    }
    .courses-top-wrap .row {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .courses-top-left p {
        text-align: center;
    }
    .courses-top-right {
        justify-content: center;
    }
    .courses__nav-tabs {
        justify-content: center;
    }

    /* Footer */
    .footer__area .row .col-lg-3 {
        margin-bottom: 20px;
    }

    /* Lesson Player */
    .lesson-player video {
        max-height: 250px;
    }

    /* Quiz Taking */
    .quiz-question .form-check {
        padding-left: 25px;
    }

    /* Assessment Taking */
    .assessment-question textarea {
        min-height: 80px;
    }

    /* Progress Page — centered */
    .progress-item h6.title {
        font-size: 13px;
        text-align: center;
    }

    /* Order History */
    .order-history .table {
        font-size: 12px;
    }

    /* Error Pages — centered */
    .error-wrap {
        text-align: center;
    }
    .error-wrap .error-img img {
        max-width: 200px;
        margin: 0 auto;
    }
    .error-wrap h2.title {
        font-size: 24px;
    }

    /* Subscription Status — centered */
    .fs-5 {
        font-size: 1rem !important;
    }
    .fs-6 {
        font-size: 0.85rem !important;
    }

    /* Call History Table */
    .call-history .table td,
    .call-history .table th {
        white-space: nowrap;
        font-size: 12px;
        text-align: center;
    }

    /* Mobile Menu */
    .tgmobile__search input {
        font-size: 14px;
    }

    /* General Spacing */
    .section-py-120 {
        padding: 50px 0;
    }
    .section-py-140 {
        padding: 60px 0;
    }
    .section-pt-140 {
        padding-top: 60px;
    }
    .section-pb-140 {
        padding-bottom: 60px;
    }
    .section-pb-130 {
        padding-bottom: 55px;
    }
    .section-pb-120 {
        padding-bottom: 50px;
    }
    .section-pb-110 {
        padding-bottom: 45px;
    }
    .mb-50 {
        margin-bottom: 25px !important;
    }
    .mb-xs-20 {
        margin-bottom: 20px !important;
    }
    .mt-40 {
        margin-top: 20px !important;
    }

    /* Breadcrumb — reduce vertical padding */
    .breadcrumb__area {
        padding: 40px 0 !important;
    }
    .breadcrumb__content h3.title {
        font-size: 20px;
    }

    /* Banner — center image column when stacked */
    .banner-area .col-lg-7,
    .banner-area .col-md-9,
    .banner-area .col-sm-10 {
        display: block !important;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .banner__content-six {
        padding: 30px 0;
    }

    /* Pricing cards — reduce internal padding */
    .card div[style*="padding:30px"] {
        padding: 20px !important;
    }

    /* View-all link — center on mobile */
    .view-all-categories {
        text-align: center;
        margin-top: 10px;
    }

    /* About / Instructors — centered */
    .instructor__item {
        text-align: center;
    }
    .instructor__thumb {
        display: flex;
        justify-content: center;
    }
    .instructor__content {
        text-align: center;
    }
    .instructor__social .list-wrap {
        justify-content: center;
    }

    /* Choose Section — hide decorative image, show content only */
    .choose__img-three {
        display: none !important;
    }
    .choose__content-three {
        text-align: center;
    }
    .choose__list-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .choose__list-item {
        text-align: center;
    }

    /* FAQ — hide decorative image stack, show accordion only */
    .faq__img-four {
        display: none !important;
    }
    .faq__content-two {
        text-align: center;
    }
    .faq__content-three {
        text-align: center;
    }

    /* Testimonials — hide decorative portrait, show slides only */
    .testimonial__img-three {
        display: none !important;
    }
    .testimonial__content-three {
        text-align: center;
    }
    .testimonial__item-four {
        text-align: center;
    }

    /* Fact area — hide big image, keep counters */
    .fact__img-wrap {
        display: none !important;
    }
    .fact__inner-wrap-two {
        text-align: center;
    }
    .fact__item-wrap {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }
    .fact__item {
        min-width: 120px;
    }

    /* Login / Register pages — centered */
    .signin__content,
    .signup__content {
        text-align: center;
    }
    .signin__title,
    .signup__title {
        text-align: center;
    }
    .signin__form .form-grp label,
    .signup__form .form-grp label {
        text-align: center;
        display: block;
    }
    .signin__form .form-grp,
    .signup__form .form-grp {
        text-align: center;
    }
    .signin__form .btn,
    .signup__form .btn {
        margin: 0 auto;
    }

    /* Contact page — centered */
    .contact__form-wrap {
        text-align: center;
    }
    .contact__info-wrap {
        text-align: center;
    }
}


/* ==========================================
   SMALL PHONES (max-width: 375px)
   ========================================== */
@media (max-width: 375px) {

    .banner__content-six .title {
        font-size: 24px !important;
    }

    #profileDropdown {
        width: 230px !important;
        right: -90px !important;
    }

    .dashboard__counter-item {
        padding: 10px;
    }
    .dashboard__counter-item .icon i {
        font-size: 24px;
    }

    .courses__cost-wrap span[style*="font-size: 24px"] {
        font-size: 18px !important;
    }

    .accordion-button {
        font-size: 13px;
        padding: 10px 12px;
    }

    .btn-two {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Mobile logo text smaller */
    .mobile-logo span {
        font-size: 12px !important;
    }
}


/* ==========================================
   GLOBAL OVERRIDES
   ========================================== */

/* Fix mobile menu flush right — theme uses padding-right: 30px */
.tgmobile__menu {
    padding-right: 0 !important;
}

/* Logo transparent background */
.mobile-logo img {
    background: transparent !important;
}


/* ================================================
   DASHBOARD: UNIVERSAL MOBILE LAYOUT
   ================================================ */

@media (max-width: 991px) {

    /* Hide sidebar column entirely — bottom nav replaces it */
    .dashboard__area .col-lg-3 {
        display: none !important;
    }

    /* Content: full width + clearance above bottom nav */
    .dashboard__area .col-lg-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-bottom: 80px !important;
    }

    /* Hide decorative shapes in dashboard breadcrumb header */
    .breadcrumb__bg-three .breadcrumb__shape-wrap {
        display: none !important;
    }

    /* Collapse the purple banner area — keeps profile info only */
    .breadcrumb__bg-three {
        min-height: 0 !important;
        padding: 0 !important;
    }

    /* Profile top banner */
    .dashboard__top-wrap { margin-bottom: 20px; }
    .dashboard__top-bg { height: 220px !important; min-height: 220px !important; }

    .dashboard__instructor-info {
        padding: 0 20px 20px !important;
        position: absolute !important;
        align-items: flex-end !important;
    }

    .dashboard__instructor-info-left {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-end !important;
        text-align: left !important;
        gap: 14px !important;
    }

    .dashboard__instructor-info-left .thumb {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
    }

    .dashboard__instructor-info-left .thumb span {
        font-size: 36px !important;
    }

    .dashboard__instructor-info-left .content {
        text-align: left !important;
    }

    .dashboard__instructor-info-left .content .list-wrap {
        justify-content: flex-start !important;
    }

    .dashboard__instructor-info-left .content h4.title {
        font-size: 19px !important;
        margin-bottom: 6px !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .dashboard__instructor-info-left .content ul {
        gap: 12px !important;
    }

    .dashboard__instructor-info-left .content ul li {
        font-size: 13px !important;
    }

    /* Hide public footer on all dashboard pages */
    .dashboard-page footer {
        display: none !important;
    }

    /* Hide subscription popup on dashboard pages */
    .dashboard-page .subscribe__popup-wrap {
        display: none !important;
    }

    /* Remove bottom section padding on dashboard */
    .dashboard__area.section-pb-120 {
        padding-bottom: 16px !important;
    }

    /* Content wrap: remove extra padding */
    .dashboard__content-wrap {
        padding: 0 !important;
    }

    .dashboard__content-wrap-two {
        padding: 16px !important;
    }

    /* Content title */
    .dashboard__content-title h4.title {
        font-size: 18px !important;
    }

    /* Stat cards: tighter */
    .dashboard__inner {
        padding: 16px !important;
    }

    .dashboard__inner.mb-30 {
        margin-bottom: 12px !important;
    }

    /* Tables: always scrollable */
    .dashboard__content-wrap .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
    }

    /* Quick action buttons: full width stack */
    .dashboard__content-wrap .d-flex.gap-2 > a,
    .dashboard__content-wrap .d-flex.gap-2 > button {
        flex: 1 1 auto;
    }

    /* Course card within dashboard */
    .dashboard__content-wrap .course__item {
        margin-bottom: 16px !important;
    }

    /* Filter pill tabs on feedback/assessments */
    .dashboard__content-wrap .d-flex.flex-wrap.gap-2 {
        gap: 6px !important;
    }
}

/* ================================================
   MOBILE BOTTOM NAVIGATION BAR
   ================================================ */

.dashboard-mobile-nav {
    display: none;
}

@media (max-width: 991px) {
    .dashboard-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #ffffff;
        border-top: 1px solid #e8e8f0;
        box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
        height: calc(62px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        align-items: stretch;
    }

    .dashboard-mobile-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #9ca3af;
        font-weight: 500;
        gap: 3px;
        padding: 6px 2px 10px;
        position: relative;
        transition: color 0.15s ease;
        border-top: 2.5px solid transparent;
        -webkit-tap-highlight-color: transparent;
    }

    .dashboard-mobile-nav a.active {
        color: #5751E1;
        border-top-color: #5751E1;
    }

    .dashboard-mobile-nav a i {
        font-size: 20px;
        line-height: 1;
    }

    .dashboard-mobile-nav a .mobile-nav-label {
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0.3px;
    }

    .dashboard-mobile-nav a .mobile-nav-dot {
        position: absolute;
        top: 4px;
        right: calc(50% - 18px);
        background: #ef4444;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        line-height: 1;
    }
}

/* ================================================
   FEEDBACK THREAD: WHATSAPP-STYLE MOBILE
   Styles are now in thread-detail.html <style> block.
   This block intentionally left blank to avoid conflicts.
   ================================================ */


/* ================================================
   DASHBOARD STAT CARDS: COMPACT 3-PER-ROW ON MOBILE
   ================================================ */

@media (max-width: 575px) {

    /* Force stat counter columns to 3-per-row */
    .dashboard__area .col-sm-6 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Compact the counter card itself */
    .dashboard__counter-item {
        padding: 14px 6px !important;
        text-align: center;
        min-height: 0 !important;
    }

    .dashboard__counter-item .icon {
        font-size: 22px !important;
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        margin: 0 auto 6px !important;
    }

    .dashboard__counter-item .content span.count,
    .dashboard__counter-item .content span.odometer {
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    .dashboard__counter-item .content p {
        font-size: 8px !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    /* Quick action buttons: 2 per row */
    .dashboard__area .col-md-3.col-sm-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Quick action buttons: smaller font */
    .dashboard__area .btn.arrow-btn.w-100 {
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }
}

/* Progress page: 4 stat cards → 2 per row on mobile */
@media (max-width: 767px) {

    .dashboard__area .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Compact progress stat card bodies */
    .dashboard__area .col-md-3 .card-body {
        padding: 10px 8px !important;
    }

    .dashboard__area .col-md-3 .card-body h3 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    .dashboard__area .col-md-3 .card-body .fa-2x {
        font-size: 1.4em !important;
        margin-bottom: 4px !important;
    }

    .dashboard__area .col-md-3 .card-body small {
        font-size: 10px !important;
    }

    /* Progress circle smaller */
    #overallProgressCircle {
        width: 50px !important;
        height: 50px !important;
    }

    /* Chart height on mobile */
    #quizChart,
    #assessmentChart {
        height: 180px !important;
        max-height: 180px !important;
    }

    /* Chart cards row: stack on mobile */
    .dashboard__area .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Empty state cards: reduce padding */
    .dashboard__area .card-body.py-5 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* Instructor analytics stat cards */
    .dashboard__area .col-xl-3,
    .dashboard__area .col-sm-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ==========================================
   NOTIFICATION TOAST — MOBILE REPOSITIONING
   ========================================== */
@media (max-width: 991px) {
    /* Move toast to bottom (above the mobile nav bar) so it never covers the header */
    #liveNotifToast {
        top: auto !important;
        bottom: 74px !important;
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
        width: auto !important;
    }
}

/* ==========================================
   ALWAYS-FIXED HEADER ON MOBILE
   Header should never scroll off the top.
   The theme JS only fixes it at 245px scroll
   which causes it to look "cut off" on short pages.
   ========================================== */
@media (max-width: 991px) {
    /* Pin the header at the top permanently */
    #sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    }
    /* Spacer matches actual rendered header height (92px) */
    #header-fixed-height {
        display: block !important;
        height: 92px !important;
    }
    /* Hide the top info bar (address/phone) */
    .tg-header__top {
        display: none !important;
    }
    /* Dashboard section has margin-top:-170px to overlap the breadcrumb on desktop.
       On mobile the breadcrumb is 0-height, so reset to 0 to stop content going off-screen. */
    .dashboard__area {
        margin-top: 0 !important;
    }
}


/* ==========================================
   HERO IMAGE — RESPONSIVE REPOSITIONING
   Image fills available column width at every
   breakpoint; badges always visible and scale
   with the container.
   ========================================== */

/* Tablet and below — image stacks above text, full column width */
@media (max-width: 991px) {
    .banner-area .col-lg-7,
    .banner-area .col-md-9,
    .banner-area .col-sm-10 {
        display: block !important;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    /* Fill the column — badges are % positioned so they scale with it */
    .banner__images-six {
        display: block !important;
        max-width: 100% !important;
        width: 100%;
        margin: 0 auto 60px;
    }
    /* Keep all badges visible — override main.css and old mobile.css hide rules */
    .banner__images-six .banner__review,
    .banner__images-six .banner__courses,
    .banner__images-six .about__enrolled-two {
        display: flex !important;
    }
    .banner__images-six .about__enrolled-two {
        display: block !important;
    }
    /* Keep shape decorations */
    .banner__images-six .shape-wrap {
        display: block !important;
    }
    /* Override main.css display:none on review + courses at ≤767px */
    .banner__review  { display: flex !important; }
    .banner__courses { display: flex !important; }
    /* Scale badges down slightly for tablet */
    .banner__review,
    .banner__courses {
        padding: 10px 12px;
        gap: 6px;
    }
    .banner__review .icon,
    .banner__courses .icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .banner__review .title  { font-size: 16px; }
    .banner__review .title span { font-size: 12px; }
    .banner__courses .title { font-size: 18px; }
    .banner__courses .title span { font-size: 13px; }
    .banner__images-six .about__enrolled-two {
        padding: 10px 16px;
    }
}

/* Phone (≤576px) — badges scaled further, image still full width */
@media (max-width: 576px) {
    .banner__images-six {
        max-width: 100% !important;
        margin: 0 auto 50px !important;
    }
    .banner__images-six .main-img img {
        border-radius: 40px !important;
    }
    .banner__review,
    .banner__courses {
        padding: 8px 10px;
        gap: 4px;
    }
    .banner__review .icon,
    .banner__courses .icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .banner__review .title  { font-size: 13px; }
    .banner__review .title span { font-size: 11px; }
    .banner__courses .title { font-size: 15px; }
    .banner__courses .title span { font-size: 11px; }
    .banner__images-six .about__enrolled-two {
        padding: 8px 12px;
    }
    .banner__images-six .about__enrolled-two img {
        width: 60px;
        margin-bottom: 6px;
    }
}