/*
 * mobile.css — Unified Mobile-App Responsive System
 * Shaqra University / Mehany Platform
 * Breakpoints: 640px (mobile), 960px (tablet)
 * Strategy: mobile-first progressive enhancement
 * "Mobile app feel" — sticky header, bottom nav, touch targets, safe areas
 */

/* ═══════════════════════════════════════════════
   0. GLOBAL MOBILE BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
    /* Prevent font size inflation on iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    /* Prevent horizontal overflow on all pages */
    overflow-x: hidden;
    max-width: 100vw;
}

/* Safe area support (notch / home indicator) */
@supports (padding: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ═══════════════════════════════════════════════
   1. HEADER — STICKY + COMPACT ON MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {

    /* ── Sticky clean header ── */
    header.p-3 {
        position: sticky !important;
        top: 0;
        z-index: 1050;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
        padding: 8px 14px !important;
    }
    header .wrapper { max-width: 100%; padding: 0 !important; }
    header .navbar  { padding: 0 !important; flex-wrap: nowrap !important; gap: 8px; }

    /* Logo — smaller on mobile */
    header .navbar-brand:first-of-type img { width: 130px !important; height: auto !important; }

    /* Hide: second logo (Vision 2030), search bar, account name text */
    header .navbar-brand:last-of-type      { display: none !important; }
    header .search-bar.desktop-search      { display: none !important; }
    header .avatar_name                    { display: none !important; }
    header .desktop-account-info-padding .nav-link { padding: 4px !important; }

    /* ── Hamburger ── */
    header .navbar-toggler {
        border: none !important;
        padding: 8px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #E6F1EE !important;
        order: -1;   /* RTL: left side */
        flex-shrink: 0;
    }
    header .navbar-toggler:focus-visible { outline: 3px solid #005C4B; }
    header .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23005C4B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        width: 22px; height: 22px;
    }

    /* ── Slide-in drawer (right side for RTL) ── */
    header .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: min(300px, 82vw) !important;
        height: 100vh !important;
        background: #fff !important;
        z-index: 2000 !important;
        box-shadow: -6px 0 28px rgba(0,0,0,0.18) !important;
        padding: 20px 18px 80px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(110%) !important;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
        display: block !important;
        visibility: hidden !important;
        flex-basis: auto !important;
    }
    header .navbar-collapse.show {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    /* Drawer close button at top */
    header .navbar-collapse::before {
        content: '✕';
        display: block;
        text-align: left;
        font-size: 1.1rem;
        color: #6B7280;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #F3F4F6;
    }

    /* Drawer nav links */
    header .navbar-nav {
        flex-direction: column !important;
        gap: 2px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    header .navbar-nav .nav-item { width: 100%; }
    header .navbar-nav .nav-link {
        display: flex !important;
        align-items: center !important;
        padding: 13px 14px !important;
        min-height: 50px !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #374151 !important;
        white-space: normal !important;
        transition: background 0.15s;
    }
    header .navbar-nav .nav-link:hover,
    header .navbar-nav .nav-link.active {
        background: #E6F1EE !important;
        color: #005C4B !important;
    }

    /* Dropdown inside drawer */
    header .dropdown-menu {
        position: static !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        background: #F9FAFB !important;
        border-radius: 8px !important;
        padding: 4px 0 !important;
        margin: 4px 0 4px 12px !important;
        display: none;
    }
    header .dropdown-menu.show { display: block !important; }
    header .dropdown-item {
        padding: 11px 14px !important;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
        white-space: normal !important;
    }

    /* Auth buttons in drawer — stack vertically */
    header .d-flex.align-items-center {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    header .d-flex.align-items-center > .button {
        min-height: 42px !important;
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
    }

    /* Dark overlay when drawer is open */
    body.dga-drawer-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.50);
        z-index: 1999;
        backdrop-filter: blur(2px);
        cursor: pointer;
    }

    /* Make sure drawer clears the bottom tab bar */
    header .navbar-collapse {
        padding-bottom: 110px !important;
    }

    /* Drawer close affordance — replace cosmetic ::before with a real header */
    header .navbar-collapse::before {
        content: '✕  إغلاق';
        display: block;
        text-align: left;
        font-size: 0.88rem;
        font-weight: 600;
        color: #6B7280;
        margin-bottom: 12px;
        padding: 6px 10px 12px;
        border-bottom: 1px solid #F3F4F6;
        cursor: pointer;
    }

    /* When a dropdown is open inside the drawer, indicate it */
    header .nav-item.dropdown .dropdown-toggle::after {
        margin-right: auto;
        transition: transform 0.2s;
    }
    header .nav-item.dropdown .dropdown-menu.show {
        animation: dgaDrawerSub 0.22s ease both;
    }
    @keyframes dgaDrawerSub {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* On mobile: hide ALL top bars — only show the main nav header */
@media (max-width: 960px) {
    .dga-gov-bar  { display: none !important; }
    .dga-a11y-bar { display: none !important; }
    .dga-topbar   { display: none !important; }
}

/* ═══════════════════════════════════════════════
   2. MOBILE BOTTOM NAVIGATION BAR (app feel)
═══════════════════════════════════════════════ */
@media (max-width: 960px) {

    /* Spacer so content clears the bottom nav */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

    .dga-mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1100;
        background: #fff;
        border-top: 1px solid #E5E7EB;
        display: flex;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }
    .dga-mobile-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 8px 4px;
        min-height: 56px;
        text-decoration: none !important;
        color: #6B7280;
        font-size: 0.7rem;
        font-weight: 600;
        transition: color 0.15s, background 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .dga-mobile-nav a svg { width: 22px; height: 22px; }
    .dga-mobile-nav a:hover,
    .dga-mobile-nav a.active {
        color: #005C4B;
        background: #F0F9F7;
    }
    /* Gold highlight on center CTA */
    .dga-mobile-nav a.dga-nav-cta {
        color: #003D31;
        background: #C1996C;
        border-radius: 16px 16px 0 0;
        margin: -8px 4px 0;
        padding-top: 16px;
    }
    .dga-mobile-nav a.dga-nav-cta:hover { background: #A07A4F; }
    .dga-mobile-nav a.dga-nav-cta svg { color: #003D31; }
}

/* Hide bottom nav on desktop */
@media (min-width: 961px) {
    .dga-mobile-nav { display: none !important; }
}

/* ═══════════════════════════════════════════════
   3. HOME PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* Hero — single column, reduced height */
    .dga-hero { min-height: 460px !important; }
    .dga-hero-content {
        grid-template-columns: 1fr !important;
        padding: 48px 20px 32px !important;
        gap: 24px !important;
        text-align: center;
    }
    .dga-hero-visual { display: none !important; }
    .dga-hero-text h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
    .dga-hero-text p { font-size: 1rem !important; margin: 0 auto 20px !important; }
    .dga-hero-actions { justify-content: center !important; }
    .dga-hero-stats { justify-content: center !important; gap: 20px !important; }

    /* Stats strip */
    .dga-stats-grid {
        gap: 0 !important;
        padding: 0 !important;
    }
    .dga-stat-item {
        flex: 1;
        padding: 16px 8px;
        border-left: 1px solid #E5E7EB;
    }
    .dga-stat-item:last-child { border-left: none; }
    .dga-stat-number { font-size: 1.4rem !important; }
    .dga-stat-label { font-size: 0.75rem !important; }

    /* Sections */
    .dga-section { padding: 36px 0 !important; }
    .dga-container { padding: 0 16px !important; }
    .dga-section-header { margin-bottom: 24px !important; }
    .dga-section-header h2 { font-size: 1.3rem !important; }
    .dga-section-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Category pills — horizontal scroll */
    .dga-categories {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        justify-content: flex-start !important;
        gap: 8px !important;
        scrollbar-width: none;
    }
    .dga-categories::-webkit-scrollbar { display: none; }
    .dga-category-pill { flex-shrink: 0; padding: 8px 14px; font-size: 0.82rem; }

    /* Course cards — 2 columns on tablet, 1 on phone */
    .dga-courses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Features — 2 columns */
    .dga-features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

    /* CTA banner */
    .dga-cta-banner { padding: 36px 20px !important; border-radius: 12px !important; }
    .dga-cta-banner h2 { font-size: 1.2rem !important; }
    .dga-cta-actions { flex-direction: column !important; align-items: center !important; }
    .dga-cta-actions .dga-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    /* Single column cards on small phones */
    .dga-courses-grid { grid-template-columns: 1fr !important; }
    .dga-features-grid { grid-template-columns: 1fr !important; }

    /* Hero text tighter */
    .dga-hero-content { padding: 36px 16px 24px !important; }
    .dga-hero-actions { flex-direction: column !important; width: 100%; }
    .dga-hero-actions .dga-btn { width: 100%; justify-content: center; }

    /* Stats strip — 2x2 grid */
    .dga-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
    }
    .dga-stat-item {
        border-bottom: 1px solid #E5E7EB;
        border-left: 1px solid #E5E7EB;
    }
    .dga-stat-item:nth-child(2n) { border-left: none; }
    .dga-stat-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ═══════════════════════════════════════════════
   4. HEADER INNER PAGES (breadcrumb hero)
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .dga-page-hero { padding: 32px 16px 28px !important; min-height: auto !important; }
    .dga-page-title { font-size: 1.4rem !important; }
    .dga-page-sub { font-size: 0.9rem !important; }
    .dga-breadcrumb { font-size: 0.8rem !important; }

    /* Inner page hero (innerPagesHead) */
    .sec.bg_gradient { padding: 24px 16px !important; }
    .sec.bg_gradient h1 { font-size: 1.3rem !important; }
}

/* ═══════════════════════════════════════════════
   5. FAQ PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .dga-faq-item summary {
        padding: 16px 14px !important;
        font-size: 0.95rem !important;
    }
    .dga-faq-body {
        padding: 0 14px 16px !important;
        font-size: 0.9rem !important;
    }
    .dga-faq-cta { padding: 24px 20px !important; }
}

/* ═══════════════════════════════════════════════
   6. CONTACT PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .dga-contact-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .dga-form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dga-form-group input,
    .dga-form-group textarea,
    .dga-form-group select {
        font-size: 1rem !important;   /* prevent iOS zoom on focus */
        min-height: 48px;
    }
    .dga-contact-card { padding: 16px !important; }
    .dga-contact-social .dga-social { gap: 16px !important; }
    .dga-social-link { width: 44px !important; height: 44px !important; }
}

/* ═══════════════════════════════════════════════
   7. COURSE DETAIL PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* Breadcrumb */
    .bread-crumb { font-size: 0.82rem; padding: 8px 16px; }

    /* Course header */
    .course_detail_header { flex-direction: column !important; }
    .course_detail { overflow-x: hidden; }

    /* Course title */
    .course_detail_title h1 { font-size: 1.3rem !important; line-height: 1.4 !important; }

    /* Price text */
    .course_detail h3 { font-size: 1.4rem !important; }

    /* Info boxes — horizontal scroll */
    .imagesBoxes {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        gap: 12px;
        padding: 12px;
    }
    .imagesBox { flex-shrink: 0; min-width: 80px; }

    /* Fixed buy button — mobile app style */
    .fixed-buttons {
        position: fixed !important;
        bottom: 64px !important;      /* above bottom nav */
        left: 0; right: 0;
        z-index: 1000;
        background: #fff;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #E5E7EB;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
        display: flex !important;
        gap: 10px;
    }
    .fixed-buttons .button_primary,
    .fixed-buttons .more_button {
        flex: 1;
        min-height: 48px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Section tabs (cntrl-btn) — horizontal scroll */
    .cntrls_btns {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        flex-wrap: nowrap !important;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .cntrls_btns::-webkit-scrollbar { display: none; }
    .cntrl-btn {
        flex-shrink: 0 !important;
        min-height: 42px !important;
        padding: 8px 16px !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    /* Lecture list */
    .courselectures .lecture_item {
        padding: 12px 14px !important;
        min-height: 52px;
    }

    /* Body adds bottom padding for fixed button */
    .course_detail_header ~ * { padding-bottom: 80px; }
}

/* ═══════════════════════════════════════════════
   8. COURSE LISTING / ALL COURSES — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* Sidebar filter — drawer on mobile */
    .dga-filter-card,
    .dga-filter-side {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        position: static !important;
    }
    /* Hide sidebar by default, show as top bar */
    .dga-filter-card { margin-bottom: 16px !important; }
    .dga-results-col { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* ═══════════════════════════════════════════════
   9. FOOTER — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    .dga-footer-main {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px 20px !important;
        padding: 40px 20px !important;
    }
    /* Brand column takes full width */
    .dga-footer-brand {
        grid-column: 1 / -1 !important;
        text-align: center;
    }
    .dga-footer-brand .dga-social { justify-content: center; }
    .dga-footer-trust { justify-content: center; }
    .dga-social-link { width: 40px; height: 40px; } /* larger touch target */

    /* Logos row */
    .dga-footer-logos { gap: 20px !important; padding: 16px !important; }
    .dga-footer-logos img { height: 32px !important; }

    /* Bottom bar */
    .dga-footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 20px 16px !important;
    }
    .dga-footer-copy { font-size: 0.8rem !important; line-height: 1.8; }
    .dga-footer-meta { justify-content: center !important; flex-wrap: wrap; }

    /* Cookie banner */
    .dga-cookie-banner { padding: 12px 16px !important; }
    .dga-cookie-inner { flex-direction: column !important; gap: 10px !important; }
    .dga-cookie-actions { width: 100%; justify-content: stretch; }
    .dga-cookie-actions button { flex: 1; }
}

@media (max-width: 640px) {
    .dga-footer-main {
        grid-template-columns: 1fr !important;
        padding: 32px 16px !important;
    }
    .dga-footer-col-title { font-size: 1rem !important; }
    .dga-footer-links li { margin-bottom: 6px; }
    .dga-footer-links a { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ═══════════════════════════════════════════════
   10. CART / CHECKOUT — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* Sidebar becomes top */
    .with_aside_flex { flex-direction: column !important; }
    .component_aside { width: 100% !important; max-width: 100% !important; position: static !important; }

    /* Cart table — cards layout */
    .cart_item {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        border: 1px solid #E5E7EB !important;
    }
    .cart_item img { width: 100% !important; height: 140px !important; object-fit: cover !important; border-radius: 8px; margin-bottom: 10px; }

    /* Checkout button — full width */
    .checkout_btn,
    .button_primary.go_to_cart {
        width: 100% !important;
        min-height: 52px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════
   11. FORMS — PREVENT iOS ZOOM + TOUCH TARGETS
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* iOS zooms in on inputs with font-size < 16px */
    input, select, textarea {
        font-size: 16px !important;
    }
    /* Touch-friendly form rows */
    .form_row { margin-bottom: 12px !important; }
    .input_with_icon { min-height: 52px !important; }
    .input_with_icon input {
        min-height: 52px !important;
        padding: 14px 44px !important;
    }

    /* Login / Register modal */
    .modal-dialog.modal-sm { margin: 0 !important; max-width: 100% !important; }
    .modal-dialog.modal-sm .modal-content {
        border-radius: 20px 20px 0 0 !important;
        min-height: 60vh;
    }
    .modal.fade .modal-dialog { transform: translateY(100%) !important; }
    .modal.show .modal-dialog { transform: translateY(0) !important; }

    /* Full-width submit buttons */
    .signin_btn, .signup_btn {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
}

/* ═══════════════════════════════════════════════
   12. GENERAL TOUCH TARGETS & TYPOGRAPHY
═══════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Enforce minimum touch targets on all interactive elements */
    a, button, [role="button"] {
        min-height: 36px;
        -webkit-tap-highlight-color: transparent;
    }

    /* Body typography — comfortable mobile reading */
    body { font-size: 15px; line-height: 1.7; }
    h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    h2 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
    h3 { font-size: clamp(1rem, 4vw, 1.2rem) !important; }
    p  { font-size: 0.95rem; }

    /* Prevent overflow from tables / iframes */
    table { width: 100% !important; display: block; overflow-x: auto; }
    iframe { max-width: 100% !important; }

    /* Scroll-to-top — above bottom nav */
    .dga-scroll-top { bottom: 76px !important; left: 12px !important; width: 40px !important; height: 40px !important; }

    /* Remove horizontal padding that causes overflow */
    .wrapper { padding-left: 16px !important; padding-right: 16px !important; }
    .container { padding-left: 16px !important; padding-right: 16px !important; }

    /* Page title sections */
    .page-title .container { padding: 20px 16px !important; }
    .page-title h1 { font-size: 1.3rem !important; }
}

/* ═══════════════════════════════════════════════
   13. SUBSCRIPTIONS PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Plan cards — single column */
    [style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
    /* Subscription plan pricing */
    [style*="font-size:var(--dga-font-size-4xl)"] {
        font-size: 2rem !important;
    }
}

/* ═══════════════════════════════════════════════
   14. MOBILE SEARCH MODAL — BOTTOM SHEET STYLE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    #searchmodal .modal-dialog {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
    }
    #searchmodal .modal-content {
        border-radius: 20px 20px 0 0 !important;
        background: #fff !important;
        border: none !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    #searchmodal .modal-body { padding: 20px 16px !important; }
    .m-search-modal form { display: flex; gap: 8px; }
    .mobile-search-input {
        background: #F9FAFB;
        border: 1.5px solid #E5E7EB;
        border-radius: 12px;
        min-height: 52px;
        display: flex;
        align-items: center;
        padding: 0 12px;
    }
    .mobile-search-input input {
        font-size: 16px !important;
        background: transparent;
        border: none !important;
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════
   15. PROFESSIONAL CERTIFICATES PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .dga-cert-grid,
    .dga-grid-4 { grid-template-columns: 1fr !important; gap: 12px !important; }
    .dga-hero-searchbar { flex-direction: row !important; padding: 6px !important; }
    .dga-hero-searchbar button { padding: 10px 14px !important; font-size: 0.85rem !important; }
}

/* ═══════════════════════════════════════════════
   16. INSTRUCTORS PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Instructor cards grid */
    .instructors-grid,
    .instructor_card_container { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .instructor_card { border-radius: 12px !important; }
    .instructor_card img { height: 140px !important; object-fit: cover !important; }
}
@media (max-width: 400px) {
    .instructors-grid,
    .instructor_card_container { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════
   17. LECTURE / PLAYER PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* Video area full width */
    .lecture_main_area { flex-direction: column !important; }
    .lecture_sidebar {
        width: 100% !important;
        max-height: 360px;
        overflow-y: auto;
        border-top: 1px solid #E5E7EB;
    }
    /* Video controls */
    .lecture_controls { padding: 10px 12px !important; font-size: 0.85rem !important; }

    /* Bottom padding for player above bottom nav */
    .main_content.lecture { padding-bottom: 80px !important; }
}

/* ═══════════════════════════════════════════════
   18. ACCOUNT PAGES (My Courses, Profile) — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Account sidebar → hidden on mobile, tabs instead */
    .account_sidebar { display: none !important; }
    .account_main { width: 100% !important; padding: 16px !important; }

    /* My courses cards */
    .mycourses_grid,
    .course_card_outter { width: 100% !important; margin-bottom: 12px !important; }
    .course_card { border-radius: 12px !important; }

    /* Profile edit form */
    .profile_form .form-group { margin-bottom: 16px !important; }
    .profile_form .btn { width: 100% !important; min-height: 48px !important; }
}

/* ═══════════════════════════════════════════════
   19. SUCCESS / FAIL PAYMENT PAGES — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .mycart-container { padding: 24px 16px !important; }
    .Summary { text-align: center; padding: 20px !important; }
    .Summary h2, .Summary h4 { font-size: 1.1rem !important; }
    .next-step { text-align: center !important; }
    .next-step .view-more-section { display: inline-flex; min-height: 48px; align-items: center; }
}

/* ═══════════════════════════════════════════════
   20. COURSE EXAM / QUIZ PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .exam_container { padding: 16px !important; }
    .quiz_question { font-size: 1rem !important; line-height: 1.6 !important; }
    .quiz_answer_item {
        min-height: 52px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
    }
    .exam_navigation { flex-direction: column !important; gap: 10px !important; }
    .exam_navigation .btn { width: 100% !important; min-height: 48px !important; }
}

/* ═══════════════════════════════════════════════
   21. VERIFY CERTIFICATE PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .dga-verify-form { padding: 20px 16px !important; }
    .dga-table { font-size: 0.85rem !important; }
    .dga-table th, .dga-table td { padding: 10px 8px !important; }
}

/* ═══════════════════════════════════════════════
   22. BLOG / NEWS CARDS — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .dga-blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
    .dga-blog-card { border-radius: 12px !important; }
}

/* ═══════════════════════════════════════════════
   23. SUBSCRIPTIONS PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Force plan cards to stack */
    .subscriptions_grid,
    .plans_grid { grid-template-columns: 1fr !important; max-width: 380px; margin: 0 auto; }

    /* Subscription feature list */
    .plan_features li {
        padding: 10px 0 !important;
        font-size: 0.9rem !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* Subscribe CTA */
    .plan_cta { width: 100% !important; min-height: 52px !important; border-radius: 12px !important; }
}

/* ═══════════════════════════════════════════════
   24. TRAINING DISCLOSURE PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .joininstructor-bg { min-height: 200px !important; }
    .parallax-content { padding: 20px 16px !important; }
    /* Service cards */
    .section_about { flex-direction: column !important; gap: 16px !important; }
    .list-group-item { padding: 14px 12px !important; border-radius: 10px !important; }
    .list-group-item h3 { font-size: 1rem !important; }
    /* FAQ accordion */
    .course-accordion .card-header { padding: 0 !important; }
    .course-accordion .btn-link { padding: 14px 16px !important; font-size: 0.9rem !important; min-height: 52px; }
}

/* ═══════════════════════════════════════════════
   25. CAREERS PAGE — MOBILE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .careers-content .card { border-radius: 12px !important; margin-bottom: 12px !important; }
    .careers-content .card-header { padding: 0 !important; }
    .careers-content .btn-link {
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }
    .careers-content .card-body { padding: 16px !important; }
    .careers-content img { border-radius: 8px !important; height: auto !important; max-height: 200px; object-fit: cover; }
}

/* ═══════════════════════════════════════════════
   26. MOBILE UTILITY — prevent content jump from
       sticky header and bottom nav
═══════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* All pages: content must clear sticky header (~60px) + bottom nav (64px) */
    .main_content,
    main,
    #main-content {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* WhatsApp FAB — above bottom nav */
    a.float {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: auto !important;
        width: 52px !important;
        height: 52px !important;
    }

    /* Scroll to top — above WhatsApp */
    .dga-scroll-top,
    .scroll-to-target {
        bottom: calc(144px + env(safe-area-inset-bottom, 0px)) !important;
        left: 16px !important;
        right: auto !important;
    }

    /* No horizontal scroll anywhere */
    .row { margin-left: 0 !important; margin-right: 0 !important; }
    .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* Legacy wrapper padding */
    .wrapper { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ═══════════════════════════════════════════════
   27. IPAD / TABLET (961px–1200px) — refinements
═══════════════════════════════════════════════ */
@media (min-width: 961px) and (max-width: 1200px) {
    header .navbar-brand:first-of-type img { width: 180px !important; }
    .dga-courses-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .dga-hero-content { gap: 32px !important; }
    .dga-footer-main { grid-template-columns: repeat(3, 1fr) !important; }
}