/* ==========================================================================
   mobile.css - المنظومة الاحترافية الشاملة لتجربة تطبيق الهاتف الذكي (v7.0)
   معهد بلاغة آية - يغطي: البوابة العامة، بوابة الطالب، بوابة المعلم، الإدارة المركزية، والسبورات التفاعلية
   تحويل كل جزء وكل أيقونة إلى تجربة تطبيق هاتف أصلي (Native Mobile App UX/UI) دون أي تزاحم
========================================================================== */

/* --------------------------------------------------------------------------
   0. قواعد التأسيس العامة للهواتف والتطبيق المستقل (PWA Standalone Rules)
-------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    max-width: 100vw;
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body:not(.whiteboard-active) {
    max-width: 100vw;
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y pinch-zoom;
}

img, video, iframe, canvas, svg {
    max-width: 100%;
}

/* ضمان الشكل الدائري النقي 100% لكافة شعارات وأيقونات المعهد في جميع البوابات */
.lively-logo,
.portal-circular-emblem,
.balagha-toast-logo,
.pwa-app-icon-showcase,
.pwa-app-icon-showcase img,
.offline-logo,
.offline-logo img,
.hub-logo-img,
.card-logo-wrapper,
.card-logo-img,
.brt-avatar-circle,
.brt-avatar-circle img,
.bpb-logo-circle,
.bpb-logo-circle img {
    border-radius: 50% !important;
}

/* إخفاء شريط التنقل السفلي على شاشات الكمبيوتر واللابتوب */
.app-bottom-nav,
.student-bottom-nav,
.teacher-bottom-nav,
.admin-bottom-nav {
    display: none;
}

/* ==========================================================================
   1. التجاوب للشاشات المتوسطة والتابلت (أقل من 991px)
========================================================================== */
@media (max-width: 991px) {
    .container,
    .dashboard-container,
    .main-content,
    .hub-container,
    .wizard-container,
    .about-container,
    .form-container,
    .profile-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* القائمة الجانبية الموحدة للطالب والمعلم */
    .sidebar {
        position: fixed !important;
        right: -295px !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        width: 280px !important;
        max-width: 84vw !important;
        z-index: 100020 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.35) !important;
        transform: none !important;
    }
    .sidebar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .sidebar.open {
        right: 0 !important;
        transform: none !important;
    }

    .sidebar-overlay {
        display: none !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.62) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 100015 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .sidebar-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .top-navbar,
    .header-container {
        padding: 9px 14px !important;
    }

    .menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 11px !important;
        background: #FAF5FF !important;
        border: 1.5px solid #E9D5FF !important;
        color: #2D0854 !important;
        font-size: 17px !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* تجاوب هيدر الإدارة المركزية (admin.php) */
    .admin-header-bar {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .admin-brand {
        order: 1 !important;
        font-size: 14.5px !important;
        gap: 8px !important;
    }
    .admin-header-actions {
        order: 2 !important;
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .admin-header-bar nav {
        order: 3 !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        margin: 4px -14px -6px -14px !important;
        padding: 4px 14px 6px 14px !important;
    }
    .admin-header-bar nav::-webkit-scrollbar {
        display: none !important;
    }
    .admin-nav-hubs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: max-content !important;
    }
    .hub-link {
        white-space: nowrap !important;
        padding: 7px 13px !important;
        font-size: 12.5px !important;
        border: 1px solid rgba(251, 192, 45, 0.28) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #F8FAFC !important;
        border-radius: 99px !important;
    }
    .hub-link.active {
        background: linear-gradient(135deg, #FBC02D 0%, #F59E0B 100%) !important;
        color: #2D0854 !important;
        border-color: #FBC02D !important;
    }
    .hub-dropdown-menu {
        position: fixed !important;
        top: 108px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        max-height: 72vh !important;
        overflow-y: auto !important;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25) !important;
        z-index: 10001 !important;
    }

    /* شبكة البينتو الإدارية */
    .admin-main-content {
        padding: 16px 12px !important;
    }
    .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .bento-grid > *,
    .bento-card {
        grid-column: 1 / -1 !important;
        padding: 18px 14px !important;
    }

    /* تخطيط الدردشة الموحد (المعلم، الطالب، الإدارة، رادار المحادثات) */
    .wa-sup-wrapper,
    .chat-wrapper,
    .chat-layout,
    .radar-grid-desktop {
        flex-direction: column !important;
        display: flex !important;
        height: auto !important;
        min-height: calc(100dvh - 155px) !important;
    }
    .wa-sup-sidebar,
    .chat-sidebar,
    .chat-contacts-sidebar,
    .radar-sidebar-panel {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 210px !important;
        border-left: none !important;
        border-bottom: 1.5px solid #E2E8F0 !important;
        flex-shrink: 0 !important;
    }
    .wa-sup-chat,
    .chat-box-area,
    .radar-main-chat {
        width: 100% !important;
        height: 60dvh !important;
        min-height: 360px !important;
    }
}

/* ==========================================================================
   2. التحويل الشامل لتجربة تطبيق الهاتف الاحترافي (أقل من 768px)
========================================================================== */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    body,
    .main-content {
        min-height: 100dvh !important;
    }

    body:has(.app-bottom-nav),
    body:has(.student-bottom-nav),
    body:has(.teacher-bottom-nav),
    body:has(.admin-bottom-nav),
    .dashboard-container,
    main {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* تأثيرات اللمس التفاعلية شبيهة بالتطبيقات الأصلية */
    .subject-card:active,
    .bento-shortcut-card:active,
    .tool-card:active,
    .option-card:active,
    .country-card-item:active,
    .modern-option-card:active,
    .stage-selector-card:active,
    .zikr-chip-btn:active,
    .gate-btn:active,
    .bento-tab:active,
    .nav-item:active,
    .student-nav-item:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease !important;
    }

    /* ضبط الأزرار وحقول الإدخال لمعيار اللمس ومنع التقريب التلقائي في iOS Safari */
    .btn,
    button:not(.slider-dot):not(.swiper-pagination-bullet):not(.btn-ctrl):not(.modal-close-x):not(.modal-close-round):not(.brt-close):not(.bpb-dismiss):not(.header-notif-quick-btn):not(.mobile-nav-toggle):not(.menu-toggle):not(.nav-item):not(.student-nav-item) {
        min-height: 42px;
        font-size: 14.5px;
    }
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        min-height: 42px;
        font-size: 16px !important;
    }

    /* ----------------------------------------------------------------------
       أ. الهيدر الموحد، شريط الأخبار، وشريط التنقل السفلي الزجاجي (header.php)
    ---------------------------------------------------------------------- */
    .top-news-bar {
        padding: 3px 10px !important;
        min-height: 28px !important;
        font-size: 11px !important;
    }
    .top-news-label {
        padding: 2px 8px !important;
        font-size: 10px !important;
        margin-left: 8px !important;
    }
    .urgent-banner {
        padding: 6px 12px !important;
        font-size: 11.5px !important;
    }

    .main-header {
        height: 60px !important;
        padding: 0 10px !important;
        gap: 6px !important;
    }
    .logo-wrapper,
    .logo-wrapper .logo {
        gap: 8px !important;
    }
    .lively-logo {
        width: 40px !important;
        height: 40px !important;
    }
    .main-nav {
        display: none !important;
    }
    .header-actions {
        gap: 6px !important;
    }
    .header-actions .header-btn-login,
    .header-actions .header-btn-gold,
    .header-actions .header-btn-logout,
    .header-actions .user-welcome-badge {
        display: none !important;
    }
    .mobile-nav-toggle {
        display: inline-flex !important;
    }

    /* زر الواتساب العائم فوق شريط التنقل السفلي */
    .floating-social {
        position: fixed !important;
        top: auto !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        z-index: 1045 !important;
    }
    .floating-social .whiteboard-float,
    .floating-social .facebook,
    .floating-social .youtube,
    .floating-social .social-icon:not(.whatsapp) {
        display: none !important;
    }
    .floating-social .social-icon.whatsapp {
        display: flex !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background: #25D366 !important;
        color: #ffffff !important;
        font-size: 24px !important;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45) !important;
    }

    /* زر الصعود للأعلى */
    .scroll-to-top.show {
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 17px !important;
    }

    /* شريط التنقل السفلي الموحد لجميع البوابات (App / Student / Teacher / Admin Bottom Bar) */
    .app-bottom-nav,
    .student-bottom-nav,
    .teacher-bottom-nav,
    .admin-bottom-nav {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        background: rgba(255, 255, 255, 0.97) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1.5px solid rgba(45, 8, 84, 0.09) !important;
        box-shadow: 0 -6px 24px rgba(26, 3, 48, 0.1) !important;
        z-index: 1050 !important;
    }

    .bottom-nav-container,
    .student-nav-container {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        height: 64px !important;
        max-width: 540px !important;
        margin: 0 auto !important;
        position: relative !important;
        padding: 0 4px !important;
    }

    .nav-item,
    .student-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        text-decoration: none !important;
        color: #64748B !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 5px 0 !important;
        min-height: unset !important;
        position: relative !important;
        transition: all 0.2s ease !important;
    }

    .nav-item.active::before,
    .student-nav-item.active:not(.student-nav-home)::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        width: 24px !important;
        height: 3px !important;
        border-radius: 0 0 4px 4px !important;
        background: #FBC02D !important;
    }

    .nav-item .nav-icon,
    .student-nav-item .student-nav-icon {
        font-size: 1.2rem !important;
        margin-bottom: 3px !important;
        line-height: 1 !important;
        transition: transform 0.2s ease, color 0.2s ease !important;
    }

    .nav-item .nav-label,
    .student-nav-item .student-nav-label {
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .nav-item.active,
    .nav-item:hover,
    .student-nav-item.active,
    .student-nav-item:hover {
        color: #2D0854 !important;
    }

    .nav-item.active .nav-icon,
    .student-nav-item.active .student-nav-icon {
        transform: translateY(-2px) !important;
        color: #2D0854 !important;
    }

    .nav-item-home,
    .student-nav-home {
        position: relative !important;
        top: -14px !important;
    }

    .nav-item-home .fab-home-btn,
    .student-nav-home .student-fab-btn {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #2D0854 0%, #380F6E 60%, #4A154B 100%) !important;
        color: #FBC02D !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.3rem !important;
        box-shadow: 0 6px 16px rgba(45, 8, 84, 0.35), 0 0 0 2px rgba(251, 192, 45, 0.45) !important;
        border: 3.5px solid #ffffff !important;
    }

    .nav-item-home .nav-label,
    .student-nav-home .student-nav-label {
        margin-top: 4px !important;
        color: #2D0854 !important;
        font-weight: 900 !important;
    }

    /* ----------------------------------------------------------------------
       ب. الصفحة الرئيسية (index.php) - تصميم تطبيق هاتف أنيق وغير مزدحم
    ---------------------------------------------------------------------- */
    .hero-section {
        padding: 16px 12px 75px !important;
    }
    .floating-hero-card {
        display: none !important;
    }
    .hero-top-slider-container {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 5.2 / 1 !important;
        min-height: 68px !important;
        max-height: 95px !important;
        border-radius: 14px !important;
        margin: 0 auto 14px !important;
        background: #1A0330 !important;
    }
    .hero-slide,
    .hero-slide.active {
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
    }
    .hero-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
        object-position: center center !important;
        border-radius: 12px !important;
    }
    .slider-dots-container {
        bottom: 5px !important;
        gap: 5px !important;
    }
    .slider-dot {
        width: 6px !important;
        height: 6px !important;
        min-height: unset !important;
    }
    .slider-dot.active {
        width: 18px !important;
    }
    .live-visitors-badge,
    .hero-badge {
        font-size: 11px !important;
        padding: 4px 12px !important;
        margin-bottom: 8px !important;
    }
    .hero-title {
        font-size: 1.65rem !important;
        line-height: 1.35 !important;
        margin-bottom: 10px !important;
    }
    .hero-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }
    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .hero-buttons .btn-main {
        width: 100% !important;
        padding: 12px 18px !important;
        font-size: 14.5px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* إحصائيات المعهد الزجاجية في الرئيسية (شبكة 2×2 كالتطبيقات) */
    .glass-stats-wrapper {
        margin: -45px auto -30px !important;
        padding: 0 12px !important;
    }
    .glass-stats-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 14px 12px !important;
        border-radius: 20px !important;
    }
    .glass-stat-box {
        min-width: 0 !important;
        padding: 8px 6px !important;
        background: #FAF8FE !important;
        border-radius: 14px !important;
        border: 1px solid #EFE8F8 !important;
    }
    .glass-stat-box::after {
        display: none !important;
    }
    .glass-stat-box i {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }
    .glass-stat-box h3 {
        font-size: 21px !important;
    }
    .glass-stat-box p {
        font-size: 11.5px !important;
        margin-top: 3px !important;
    }

    /* نجوم المعهد: شريط سحب أفقي ناعم كالتطبيقات */
    .stars-section {
        padding: 55px 12px 40px !important;
    }
    .stars-container-outer {
        padding: 14px 8px 20px !important;
        margin-top: 16px !important;
        scroll-snap-type: x mandatory !important;
    }
    .stars-flex-row {
        gap: 12px !important;
    }
    .star-item-card {
        width: 175px !important;
        min-width: 175px !important;
        padding: 22px 12px 16px !important;
        border-radius: 20px !important;
        scroll-snap-align: center !important;
    }
    .star-avatar-box {
        width: 68px !important;
        height: 68px !important;
        margin: 8px 0 10px !important;
    }
    .star-student-name {
        font-size: 14.5px !important;
    }

    /* المواد التعليمية: شبكة تطبيق ثنائية الأعمدة (2×5) لمنع التزاحم وطول الصفحة */
    .tracks-section {
        padding: 45px 12px 40px !important;
    }
    .subjects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    .subject-card {
        padding: 16px 10px 14px !important;
        border-radius: 18px !important;
    }
    .subject-card h3 {
        font-size: 15px !important;
        margin: 0 0 10px !important;
    }
    .subject-icon-wrap {
        width: 54px !important;
        height: 54px !important;
        border-radius: 15px !important;
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    .subject-card p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* المراحل، الأسئلة الشائعة، والآراء */
    .stages-section,
    .faq-section,
    .testimonials-section,
    .bottom-cta-section {
        padding: 40px 12px !important;
    }
    .stages-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 20px !important;
    }
    .stage-box {
        padding: 20px 16px !important;
        border-radius: 20px !important;
    }
    .section-title-3d,
    .section-title-dark {
        font-size: 1.45rem !important;
        margin-bottom: 14px !important;
    }
    .section-desc-dark {
        font-size: 0.92rem !important;
        margin-bottom: 20px !important;
    }
    .curriculums-pill-bar {
        padding: 10px 12px !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .curriculum-flag-item {
        font-size: 12.5px !important;
        background: rgba(255,255,255,0.06) !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
    }
    .platform-slogan-title {
        font-size: 19px !important;
    }
    .platform-slogan-steps {
        font-size: 13px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .faq-card-header {
        padding: 22px 14px !important;
    }
    .faq-card-header h2 {
        font-size: 1.4rem !important;
    }
    .faq-items-list {
        padding: 14px 12px !important;
    }
    .faq-accordion-header {
        padding: 13px 14px !important;
        font-size: 13.5px !important;
    }
    .faq-accordion-content {
        font-size: 13px !important;
        line-height: 1.75 !important;
    }
    .faq-card-footer {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px 14px !important;
        text-align: center !important;
    }
    .btn-faq-whatsapp {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
    .review-box {
        padding: 22px 16px !important;
        border-radius: 20px !important;
    }

    /* ----------------------------------------------------------------------
       ج. صفحات البوابة العامة (المناهج، الباقات، المعلمون، الألعاب، المدونة، الآراء)
    ---------------------------------------------------------------------- */
    .royal-hero-section,
    .packages-hero-banner,
    .about-header,
    .blog-hero,
    .games-hero,
    .page-header,
    .hero-banner {
        padding: 28px 14px 38px !important;
    }
    .royal-hero-section h1,
    .packages-hero-banner h1,
    .about-header h1,
    .blog-hero h1,
    .page-header h1,
    .hero-banner h1 {
        font-size: 1.5rem !important;
        line-height: 1.35 !important;
    }
    .royal-hero-section p,
    .packages-hero-banner p,
    .about-header p,
    .blog-hero p,
    .page-header p {
        font-size: 0.92rem !important;
    }

    /* شريط التصفية في curricula.php (شبكة 2×2 مدمجة بدون تزاحم) */
    .curricula-nav-bar {
        padding: 14px 12px !important;
        margin: -22px 10px 20px !important;
        border-radius: 16px !important;
    }
    .filter-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .filter-box label {
        font-size: 11.5px !important;
        margin-bottom: 4px !important;
    }
    .filter-select {
        padding: 8px 10px !important;
        font-size: 12.5px !important;
        min-height: 38px !important;
    }

    /* نافذة تشغيل الدورة التعليمية في curricula.php */
    .course-modal {
        padding: 6px !important;
    }
    .course-modal > div,
    .lms-layout {
        flex-direction: column !important;
        height: 92dvh !important;
        max-height: 92dvh !important;
        overflow-y: auto !important;
    }
    .lms-sidebar {
        min-width: 100% !important;
        width: 100% !important;
        max-height: 45dvh !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    .videos-grid,
    .books-grid,
    .worksheets-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* صفحة الباقات (packages.php) - خطوات وشبكة دول ثنائية الأعمدة كالتطبيقات */
    .stepper-wrapper {
        margin: -22px auto 14px !important;
        padding: 0 10px !important;
    }
    .stepper-container {
        padding: 10px 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        scrollbar-width: none !important;
    }
    .stepper-container::-webkit-scrollbar {
        display: none !important;
    }
    .step-item {
        font-size: 11px !important;
        white-space: nowrap !important;
        padding: 4px 6px !important;
        gap: 5px !important;
    }
    .step-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: 11.5px !important;
    }
    .step-section {
        padding: 16px 12px !important;
        border-radius: 18px !important;
    }
    #countries-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .country-card-item {
        padding: 8px 10px !important;
        min-height: 44px !important;
        border-radius: 11px !important;
    }
    .country-card-item .country-name {
        font-size: 12.5px !important;
    }
    .stages-tabs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .stage-selector-card {
        padding: 12px 8px !important;
    }
    .modern-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .final-package-card {
        padding: 18px 14px !important;
        border-radius: 18px !important;
    }
    .price-box {
        padding: 14px !important;
    }
    .price-amount {
        font-size: 28px !important;
    }

    /* صفحة الآراء (reviews.php) - إصلاح عرض السلايدر والأسهم على الهاتف */
    .reviews-swiper {
        padding: 20px 0 60px 0 !important;
    }
    .reviews-swiper .swiper-slide {
        width: calc(100vw - 44px) !important;
        max-width: 330px !important;
    }
    .reviews-swiper .swiper-button-next,
    .reviews-swiper .swiper-button-prev {
        width: 38px !important;
        height: 38px !important;
        top: 42% !important;
    }
    .reviews-swiper .swiper-button-next::after,
    .reviews-swiper .swiper-button-prev::after {
        font-size: 15px !important;
    }

    /* صفحات الألعاب، المدونة، المعلمين، من نحن، واجباتي، التحقق، التقديم، والامتحانات */
    .games-container,
    .posts-grid,
    .teachers-grid,
    .features-grid,
    .schedule-grid,
    .grid-2,
    .selection-grid,
    .why-list {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .teachers-grid {
        margin-top: -22px !important;
        padding: 0 12px !important;
    }
    .teacher-card {
        padding: 0 !important;
    }
    .teacher-card .teacher-card-body {
        padding: 0 16px 18px 16px !important;
    }
    .teacher-avatar-wrapper {
        width: 104px !important;
        height: 104px !important;
        margin: -52px auto 12px auto !important;
    }
    .single-article,
    .intro-card,
    .why-us-section,
    .feature-card,
    .form-section,
    .complete-card,
    .verify-card,
    .auth-card,
    .guest-hero-card,
    .exam-body,
    .exam-header,
    .empty-state-card {
        padding: 20px 15px !important;
        border-radius: 18px !important;
    }
    .profile-container {
        flex-direction: column !important;
        margin: 16px auto !important;
        gap: 14px !important;
    }
    .profile-sidebar,
    .profile-main {
        min-width: 100% !important;
        width: 100% !important;
        padding: 18px 14px !important;
        position: static !important;
    }
    .search-form,
    .phone-group {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .country-select,
    .phone-input,
    .search-btn,
    .search-input {
        width: 100% !important;
    }
    .t-modal-body {
        padding: 0 16px 20px 16px !important;
    }
    .t-bento-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* بوابة الدخول والتسجيل (login.php & register.php) */
    .split-container {
        flex-direction: column !important;
        min-height: 100dvh !important;
    }
    .form-section {
        padding: 20px 14px !important;
        width: 100% !important;
        min-height: auto !important;
    }
    .form-wrapper {
        max-width: 100% !important;
    }
    .image-section {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       د. بوابة الطالب (student_view.php & student_pages/*.php)
    ---------------------------------------------------------------------- */
    /* تحويل الهيدر العلوي للطالب والمعلم إلى شريط تطبيق هاتف مدمج من سطر واحد دون تزاحم */
    .top-navbar {
        flex-wrap: nowrap !important;
        padding: 8px 12px !important;
        min-height: 56px !important;
        gap: 8px !important;
    }
    .portal-topbar-brand {
        flex: 1 !important;
        min-width: 0 !important;
        gap: 8px !important;
    }
    .portal-circular-emblem {
        width: 34px !important;
        height: 34px !important;
    }
    .top-navbar-title {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .nav-actions-group {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    /* تحويل أزرار الهيدر الفرعية (وثيقة الانضمام، الموقع الرئيسي) إلى أيقونات تطبيق دائرية على الهاتف لمنع التزاحم */
    .portal-action-pill,
    .top-navbar .site-link {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
    }
    .portal-action-pill .nav-btn-text,
    .top-navbar .site-link .nav-btn-text {
        display: none !important;
    }
    .notif-btn,
    .btn-bell {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 50% !important;
        font-size: 16px !important;
    }

    /* نافذة الإشعارات المنسدلة على شاشات الهاتف */
    .notif-dropdown,
    .notif-popover-panel {
        position: fixed !important;
        top: 62px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 75dvh !important;
        z-index: 10005 !important;
        border-radius: 18px !important;
    }

    .approval-warning {
        flex-direction: column !important;
        text-align: center !important;
        padding: 14px !important;
    }

    /* كارت بروفايل الطالب في الرئيسية: 3 كبسولات إحصائية متجاورة كالتطبيقات */
    .profile-hero-card {
        padding: 18px 12px !important;
        border-radius: 20px !important;
    }
    .profile-hero-card img,
    .student-avatar-img {
        width: 88px !important;
        height: 88px !important;
        max-width: 88px !important;
        max-height: 88px !important;
        margin-bottom: 10px !important;
    }
    .profile-hero-card > div[style*="justify-content: center"] {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }
    .stat-pill-modern {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 10px 6px !important;
        gap: 6px !important;
        min-width: 0 !important;
        border-radius: 14px !important;
    }
    .stat-pill-modern h3 {
        font-size: 14.5px !important;
    }
    .stat-pill-modern span {
        font-size: 10.5px !important;
    }

    /* لوحة الشرف في رئيسية الطالب: سحب أفقي أو شبكة مدمجة */
    .top-students-grid {
        display: flex !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 6px !important;
        scroll-snap-type: x mandatory !important;
    }
    .honor-card {
        min-width: 135px !important;
        flex: 0 0 135px !important;
        scroll-snap-align: start !important;
        padding: 12px 10px !important;
    }

    /* شبكات صفحات الطالب */
    .stats-grid,
    .grid-cards,
    .cards-container,
    .bento-subjects-grid,
    .reports-kpi-grid,
    .reports-cards-grid,
    .tasks-grid,
    .fard-grid,
    .sunnah-grid,
    .history-stats-bar,
    .settings-form-grid,
    .profile-layout-grid,
    .palace-bento-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .bento-shortcuts-grid,
    .zikr-selection-grid,
    .kpi-cards-grid,
    .scores-pill-box {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* بوابات الأذكار وتبويبات الصلاة: شريط سحب أفقي من سطر واحد كالتطبيقات */
    .adhkar-gates-nav,
    .bento-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 8px !important;
        padding: 6px 4px !important;
        margin-bottom: 14px !important;
    }
    .adhkar-gates-nav::-webkit-scrollbar,
    .bento-tabs::-webkit-scrollbar {
        display: none !important;
    }
    .gate-btn,
    .bento-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 9px 14px !important;
        font-size: 12.5px !important;
        border-radius: 12px !important;
    }

    /* المصحف الشريف والورد القرآني (wird.php & quran_studio.php) */
    .wird-hero {
        padding: 16px 14px !important;
        border-radius: 18px !important;
        gap: 12px !important;
    }
    .wird-hero .hero-title {
        font-size: 19px !important;
    }
    .wird-hero .hero-desc {
        font-size: 12.5px !important;
    }
    .wird-hero .hero-side-stats {
        width: 100% !important;
    }
    .wird-hero .streak-box {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 8px 14px !important;
    }
    .hasanat-dashboard-royal {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }
    .hasanat-card-royal {
        padding: 12px 14px !important;
        border-radius: 16px !important;
    }
    .hasanat-icon-bubble-royal {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        font-size: 19px !important;
    }
    .hasanat-value-royal {
        font-size: 22px !important;
    }
    .mushaf-compact-dock,
    .wird-smart-toolbar,
    .wird-top-toolbar,
    .smart-studio-toolbar {
        padding: 10px 10px !important;
        border-radius: 16px !important;
        position: static !important;
    }
    .mushaf-top-bar,
    .mushaf-header-ribbon {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 13.5px !important;
    }
    .mushaf-surah-title {
        font-size: 16px !important;
        padding: 4px 14px !important;
    }
    .mushaf-sacred-viewport,
    .mushaf-pages-viewport {
        padding: 14px 12px !important;
        min-height: 320px !important;
    }
    .toolbar-balanced-row,
    .toolbar-flex-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .toolbar-sub-group,
    .toolbar-cluster {
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
    }

    /* ----------------------------------------------------------------------
       هـ. بوابة المعلم (teacher_view.php & teacher_pages/*.php)
    ---------------------------------------------------------------------- */
    /* إبقاء إحصائيات المعلم وأدواته السريعة في شبكة ثنائية (2×2) أنيقة كالتطبيقات */
    .stats-overview-grid,
    .quick-tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .stat-card-modern {
        padding: 12px 12px !important;
        gap: 10px !important;
        border-radius: 16px !important;
    }
    .stat-card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        border-radius: 11px !important;
    }
    .stat-card-value {
        font-size: 19px !important;
    }
    .stat-card-label {
        font-size: 11.5px !important;
    }
    .tool-card {
        padding: 14px 12px !important;
        border-radius: 16px !important;
        gap: 8px !important;
    }
    .tool-icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    .tool-info h4 {
        font-size: 14px !important;
    }
    .tool-info p {
        font-size: 11px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .wirds-cards-grid,
    .students-cards-grid,
    .tasks-view-grid,
    .form-grid,
    .form-grid-2col,
    .salary-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .wirds-filter-toolbar,
    .rep-archive-toolbar,
    .students-top-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .search-input-box {
        min-width: 100% !important;
        width: 100% !important;
    }
    .filter-tabs-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }
    .filter-tabs-bar::-webkit-scrollbar {
        display: none !important;
    }
    .filter-tab {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* تحويل جدول الحصص داخل بطاقة الطالب لدى المعلم إلى بطاقات موبايل مرتبة */
    .teacher-students-wrapper .classes-card-table,
    .teacher-students-wrapper .classes-card-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .teacher-students-wrapper .classes-card-table thead {
        display: none !important;
    }
    .teacher-students-wrapper .classes-card-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        background: #F8FAFC !important;
        border: 1.5px solid #E2E8F0 !important;
        border-right: 4px solid #2D0854 !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        gap: 8px !important;
    }
    .teacher-students-wrapper .classes-card-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
    }
    .teacher-students-wrapper .classes-card-table td:nth-child(1) {
        border-bottom: 1px dashed #CBD5E1 !important;
        padding-bottom: 6px !important;
    }
    .teacher-students-wrapper .classes-card-table td:nth-child(2)::before {
        content: "⏰ الموعد:";
        font-weight: 800;
        color: #475569;
        font-size: 12px;
    }
    .teacher-students-wrapper .classes-card-table td:nth-child(3)::before {
        content: "⏳ المدة:";
        font-weight: 800;
        color: #475569;
        font-size: 12px;
    }
    .teacher-students-wrapper .classes-card-table td:nth-child(4)::before {
        content: "👨‍🎓 دخول الطالب:";
        font-weight: 800;
        color: #475569;
        font-size: 12px;
    }
    .teacher-students-wrapper .classes-card-table td:nth-child(5)::before {
        content: "👨‍🏫 دخول المعلم:";
        font-weight: 800;
        color: #475569;
        font-size: 12px;
    }
    .teacher-students-wrapper .classes-card-table td:nth-child(7)::before {
        content: "📌 الحالة:";
        font-weight: 800;
        color: #475569;
        font-size: 12px;
    }
    .teacher-students-wrapper .classes-card-table td:nth-child(6) {
        order: 10 !important;
        padding-top: 8px !important;
        border-top: 1px dashed #CBD5E1 !important;
        justify-content: center !important;
    }

    .weekly-columns-wrapper,
    .monthly-calendar-wrapper,
    .salary-responsive-table {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ----------------------------------------------------------------------
       و. بوابة الإدارة المركزية (admin.php & admin_pages/*.php)
    ---------------------------------------------------------------------- */
    /* شبكة المؤشرات الأربعة في رئيسية الإدارة: 2×2 كالتطبيقات */
    .bento-fluid-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .bento-kpi-card {
        padding: 14px 12px !important;
        gap: 10px !important;
        border-radius: 16px !important;
    }
    .bento-kpi-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
    }
    .bento-kpi-card h3 {
        font-size: 20px !important;
    }
    .bento-kpi-card p {
        font-size: 11.5px !important;
    }

    .jr-adv-grid,
    .pm-grid,
    .pkg-kpi-grid,
    .country-pricing-matrix,
    .rep-kpi-grid,
    .teachers-cards-grid,
    .students-mini-grid,
    .kpi-deck,
    .mk-kpi-grid,
    .um-kpi-mini-grid,
    .bento-grid-main {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .broadcast-wrapper [style*="grid-template-columns"],
    .gamification-wrapper [style*="grid-template-columns"],
    .blog-manage-wrapper [style*="grid-template-columns"],
    .schedule-admin-wrapper [style*="grid-template-columns"],
    .settings-container [style*="grid-template-columns"],
    .pkg-manager-wrapper [style*="grid-template-columns"],
    .testimonials-wrapper [style*="grid-template-columns"],
    .academic-wrapper [style*="grid-template-columns"],
    .rep-monitor-wrapper [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .bento-header-card,
    .rep-hero-header,
    .pkg-header-hero,
    .settings-hero,
    .header-card,
    .lib-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 18px 14px !important;
        gap: 12px !important;
    }
    .header-stats {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    .um-toolbar-card,
    .mk-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* النوافذ المنبثقة (Modals) في جميع البوابات */
    .modal-content,
    .modal-box,
    .modal-card,
    .profile-modal-content,
    .admin-modal-card,
    .report-modal-window,
    .prayer-modal-card,
    .geo-modal-box,
    .slowdown-modal-box,
    .cart-modal-content,
    .t-modal-card {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        padding: 16px 14px !important;
        border-radius: 20px !important;
    }
    .modal-header,
    .pm-header {
        padding: 12px 14px !important;
    }
    .modal-body,
    .pm-body {
        padding: 14px !important;
    }
    .modal-footer {
        padding: 12px 14px !important;
        flex-wrap: wrap !important;
    }

    /* الجداول المتجاوبة في جميع البوابات */
    .table-responsive,
    .table-responsive-wrapper,
    .table-container-responsive,
    .admin-table-wrapper,
    .jr-table-wrap,
    .um-table-wrapper,
    .table-scroll-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 14px !important;
    }

    /* ----------------------------------------------------------------------
       ز. بوابة السبورات التفاعلية الذكية (whiteboard*.php)
    ---------------------------------------------------------------------- */
    .top-gold-strip {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
    .hub-topbar {
        padding: 10px 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .hub-logo-img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }
    .hub-hero-banner {
        padding: 20px 14px !important;
        border-radius: 18px !important;
    }
    .hub-hero-banner h2 {
        font-size: 1.35rem !important;
    }
    .boards-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* داخل السبورة الحية (العربية، الإنجليزية، الرياضيات، القرآن) - توافق كامل للتابلت والهواتف */
    body.royal-balagha-board .wb-header,
    .wb-header {
        height: auto !important;
        min-height: 54px !important;
        padding: 6px 10px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
    }
    /* منع قص القوائم المنسدلة العلوية (أوسمة التشجيع، الخلفيات، التصدير) داخل الهيدر القابل للتمرير */
    .wb-header .wb-dropdown-menu.show {
        position: fixed !important;
        top: 62px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(300px, 92vw) !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35) !important;
    }
    .wb-subject-subbar {
        top: 8px !important;
        width: 96vw !important;
        max-width: 96vw !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        justify-content: center !important;
        padding: 5px 8px !important;
        gap: 4px !important;
        border-radius: 14px !important;
    }
    .wb-dock-toolbar.wb-dock-slim {
        top: auto !important;
        bottom: 8px !important;
        right: 50% !important;
        left: auto !important;
        transform: translateX(50%) !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 96vw !important;
        padding: 5px 8px !important;
        gap: 4px !important;
        border-radius: 16px !important;
        z-index: 1200 !important;
    }
    .wb-dock-toolbar.wb-dock-slim .wb-dock-col {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    .wb-dock-toolbar.wb-dock-slim .wb-separator-h {
        display: none !important;
    }
    /* إظهار نوافذ الألوان والسماكة والأشكال والبطاقات فوق الشريط السفلي مباشرة دون قص */
    .wb-dock-toolbar .wb-dock-flyout.show {
        position: fixed !important;
        bottom: 72px !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        max-width: 94vw !important;
        max-height: 65vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.4) !important;
    }
    .wb-modal-card,
    .wb-quran-card,
    .wb-quran-board-card,
    .wb-quran-quiz-card,
    .royal-board-widget,
    .wb-study-card,
    .wb-interactive-ruler {
        max-width: calc(100vw - 20px) !important;
    }
    .wb-quran-board-card {
        width: min(620px, calc(100vw - 20px)) !important;
        left: max(10px, calc(50vw - min(310px, 46vw))) !important;
    }
}

/* ==========================================================================
   3. الشاشات فائقة الصغر (أقل من 480px)
========================================================================== */
@media (max-width: 480px) {
    .hero-title,
    h1 {
        font-size: 1.45rem !important;
        line-height: 1.35 !important;
    }

    .section-title,
    h2 {
        font-size: 1.2rem !important;
    }

    .btn-action,
    .submit-btn,
    .btn-submit {
        width: 100% !important;
    }

    .top-navbar-title {
        max-width: none !important;
        font-size: 12.5px !important;
    }
}

/* ==========================================================================
   تحديثات ضبط الهيدر وبطاقة الباقات واستوديو المصحف على الهواتف (v8.0)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* إخفاء السطر الفرعي الطويل في شريط البوابات العلوي لإظهار اسم المعلم/الطالب كاملاً دون قص */
    .portal-topbar-subtitle {
        display: none !important;
    }

    .top-navbar .portal-topbar-brand {
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .top-navbar .portal-circular-emblem {
        width: 32px !important;
        height: 32px !important;
    }

    .top-navbar-title,
    .top-navbar h3 {
        font-size: 14px !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .top-navbar .nav-actions-group {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    /* ضمان احتواء بطاقة الباقة النهائية بالكامل داخل شاشة الهاتف */
    .final-package-card {
        padding: 16px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .final-card-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .final-info-side,
    .price-box,
    .Interactive-discounts-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .promo-code-input-row {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .promo-code-input-row input {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .btn-apply-promo {
        width: 100% !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }

    .sessions-quick-pills {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .session-preset-btn {
        padding: 7px 4px !important;
        font-size: 11.5px !important;
        width: 100% !important;
        text-align: center !important;
    }

    .session-details-text {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px 6px !important;
        font-size: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   تحديثات شريط الترحيب العلوي والدردشة وتقارير المعلم (v8.2)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .top-navbar .portal-topbar-brand > div {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .top-navbar-title,
    .top-navbar h3 {
        font-size: 14px !important;
        max-width: none !important;
        width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .top-navbar-title span {
        display: inline !important;
    }
}