/**
 * ACCMAA — تجاوب شامل · وضوح على كل الأجهزة
 * موبايل · تابلت · لابتوب · ديسكتوب — بدون بكسلة أو overflow
 */

/* ─── أساسيات الوضوح ─── */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

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

img {
    image-rendering: auto;
    object-fit: contain;
}

/* صور الخلفية والبطاقات — حادة بدون تشويش */
.has-card-bg::before,
.choice-visual-thumb img,
.pillar-hub-banner-img,
.instructor-card-banner img,
.hero-premium-scene,
.welcome-premium-scene {
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Font Awesome — واضح على الشاشات عالية الكثافة */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── منع خروج المحتوى عن الشاشة ─── */
.main-wrap,
#mainContent,
.main-inner,
.dash-landing,
.dash-member-premium,
.dash-admin-premium,
.modal-box,
.content-panel {
    max-width: 100%;
    box-sizing: border-box;
}

/* جداول ولوحات إدارة — تمرير أفقي نظيف */
.gov-table,
.data-table,
table {
    width: 100%;
    border-collapse: collapse;
}

.panel-premium,
.content-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── تابلت (1024px) ─── */
@media (max-width: 1024px) {
    .section-block { padding: 36px 24px; }
    .kpi-grid-pro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gift-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
    .choices-visual-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .contact-icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-form-grid { grid-template-columns: 1fr 1fr; }
    .portal-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gov-hub-premium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── موبايل + تابلت صغير (900px) ─── */
@media (max-width: 900px) {
    :root {
        --topbar-h: 64px;
        --topbar-h-guest: 96px;
    }

    /* إصلاح: الشريط الجانبي drawer بدل 100% عرض */
    body.member-mode,
    body.admin-mode {
        --sidebar-w: 0px !important;
    }

    body.sidebar-open.guest-mode::after {
        display: none !important;
    }

    body.guest-mode .sidebar,
    body.member-mode .sidebar,
    body.admin-mode .sidebar {
        width: min(300px, 88vw) !important;
        height: calc(100dvh - var(--utility-bar-h, 0px)) !important;
        position: fixed !important;
        top: var(--utility-bar-h, 0px) !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 600 !important;
        box-shadow: -12px 0 48px rgba(0, 0, 0, 0.28) !important;
    }

    body.sidebar-open.guest-mode .sidebar,
    body.sidebar-open.member-mode .sidebar,
    body.sidebar-open.admin-mode .sidebar {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 800 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
    }

    body.guest-mode .sidebar,
    body.member-mode .sidebar,
    body.admin-mode .sidebar {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .sidebar .logo-box {
        flex-shrink: 0;
        padding: 10px 8px 8px !important;
    }

    .sidebar .sidebar-logo.brand-logo--official {
        height: 52px !important;
        max-width: 85% !important;
    }

    .sidebar .logo-box small {
        font-size: 0.58rem !important;
        margin-top: 4px !important;
        line-height: 1.3;
    }

    .sidebar .icons-dock {
        flex-shrink: 0;
        padding: 6px !important;
        gap: 4px !important;
    }

    body.sidebar-open .sidebar .sections-panel {
        flex: 0 0 auto !important;
        min-height: auto !important;
        overflow-y: visible !important;
    }

    .sidebar .icon-btn .icon-bg-visual {
        transform: none !important;
        width: 30px !important;
        height: 30px !important;
    }

    .sidebar .icon-btn i { font-size: 0.9rem !important; }

    .sidebar .sections-panel {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain;
        padding: 8px 10px 16px !important;
    }

    body.sidebar-open.member-mode .sidebar,
    body.sidebar-open.admin-mode .sidebar {
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.sidebar-open.member-mode::after,
    body.sidebar-open.admin-mode::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(6, 31, 61, 0.45);
        z-index: 550;
        pointer-events: auto;
    }

    body.member-mode .main-wrap,
    body.admin-mode .main-wrap {
        margin-right: 0 !important;
        padding: 12px !important;
    }

    .topbar {
        right: 0 !important;
        padding: 8px 12px !important;
        gap: 8px !important;
    }

    .topbar-brand-name { font-size: 0.95rem !important; }
    .member-nav,
    body.guest-mode .mega-nav {
        justify-content: flex-start !important;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .member-nav::-webkit-scrollbar,
    body.guest-mode .mega-nav::-webkit-scrollbar { display: none; }

    .contact-admin-row {
        grid-template-columns: 1fr !important;
    }

    .admin-form-grid {
        grid-template-columns: 1fr !important;
    }

    .gov-command-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .gov-command-hero-actions .btn {
        width: 100%;
    }
}

/* ─── موبايل (640px) ─── */
@media (max-width: 640px) {
    .section-block { padding: 28px 16px; }
    .page-title { font-size: 1.35rem !important; line-height: 1.35; }
    .hero-premium h1,
    .welcome-premium h1 { font-size: 1.45rem !important; }

    .kpi-grid-pro,
    .kpi-grid-3,
    .member-stats-premium,
    .member-grid-premium {
        grid-template-columns: 1fr !important;
    }

    .gift-grid,
    .gift-grid-9,
    .universe-grid,
    .explore-grid,
    .choices-visual-grid,
    .contact-icon-grid {
        grid-template-columns: 1fr !important;
    }

    .choice-visual-tile { min-height: auto; }
    .choice-visual-thumb { height: 160px; }

    .contact-icon-tile { min-height: 140px; padding: 20px 16px; }

    .gov-hub-premium,
    .admin-hub-grid,
    .portal-actions-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-quick-strip {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dash-quick-strip::-webkit-scrollbar { display: none; }
    .dash-quick-item { flex: 0 0 auto; min-width: 120px; }

    .module-chrome { padding: 16px 14px 0; border-radius: 12px; }
    .module-chrome-head { gap: 10px; }

    .cta-strip { margin: 0 16px 32px; padding: 28px 20px; }

    .access-renewal-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .access-renewal-banner__actions {
        margin-inline-start: 0;
        width: 100%;
    }

    /* أزرار ولمس — 44px حد أدنى (Apple HIG) */
    .btn,
    .mega-trigger,
    .mega-flat-link,
    .member-link,
    .icon-btn,
    .choice-visual-tile,
    .gift-card,
    .contact-icon-tile--active {
        min-height: 44px;
    }

    .topbar-menu-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .modal-box {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    .tpl-grid-2 { grid-template-columns: 1fr !important; }

    .instructor-card { min-width: 0; }
    .instructor-card-banner img { object-fit: cover; width: 100%; }

    .accmaa-social-bar-inner {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ─── شاشات صغيرة جداً (380px) ─── */
@media (max-width: 380px) {
    .topbar-brand-text-wrap { display: none; }
    .topbar-end .btn span:not(.cart-badge) { display: none; }
    .gift-card .g-icon.has-icon-bg { width: 56px; height: 56px; }
    .gift-card .g-icon.has-icon-bg i { font-size: 1.25rem; }
}

/* ─── ديسكتوب كبير — توسيط مريح ─── */
@media (min-width: 1400px) {
    .section-block { max-width: 1360px; }
    .dash-landing .main-inner { max-width: 1320px; margin-inline: auto; }
}

/* ─── ديسكتوب — أيقونات الهيدر واللوجو كاملة ─── */
@media (min-width: 769px) {
    body.guest-mode.premium-ui .topbar-premium {
        overflow: visible !important;
    }
    body.guest-mode .topbar-shell {
        padding-block: 10px;
    }
    body.guest-mode .topbar-row--swapped {
        min-height: 58px;
        align-items: center;
    }
    body.guest-mode .mega-flat-link--clean {
        padding: 10px 12px !important;
        align-items: center;
    }
    body.guest-mode .mega-nav-icon-wrap {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        border-radius: 11px;
        flex-shrink: 0;
        overflow: visible !important;
    }
    body.guest-mode .mega-nav-icon-wrap i.fas,
    body.guest-mode .mega-nav-icon-wrap i.fab {
        font-size: 0.95rem !important;
    }
    body.guest-mode .brand-logo--official.topbar-logo,
    body.guest-mode .topbar-logo.brand-logo--official {
        height: 52px !important;
        max-width: 140px !important;
        width: auto;
        object-fit: contain;
    }
    body.guest-mode .brand-logo-wrap--official {
        line-height: 0;
        flex-shrink: 0;
    }
}

/* ─── موبايل ضيف — هيدر نظيف + قائمة جانبية ─── */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }

    .accmaa-promo-bar { font-size: 0.7rem; }
    .promo-bar-inner { padding: 5px 8px; gap: 6px; }
    .promo-countdown { display: none; }
    .promo-discount-badge { font-size: 0.68rem; padding: 2px 8px; }
    .promo-msg { min-width: 0; font-size: 0.68rem; flex: 1 1 auto; }
    .promo-cta .btn { padding: 4px 10px; font-size: 0.68rem; }

    .accmaa-fx-bar {
        min-height: 28px;
        padding: 0 8px;
        font-size: 0.65rem;
        overflow: hidden;
    }
    .accmaa-fx-bar .fx-marquee-wrap {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .accmaa-fx-bar .fx-marquee-track {
        animation: fxScroll 26s linear infinite !important;
        display: flex !important;
        width: max-content !important;
    }
    .accmaa-fx-bar .fx-bar-label {
        max-width: 32%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .accmaa-fx-bar .fx-bar-label small { display: none; }
    .fx-updated { display: none; }

    body.guest-mode.premium-ui .topbar-premium {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }

    body.guest-mode.premium-ui .topbar-premium .topbar-visual-bg,
    body.guest-mode.premium-ui .topbar-header-slider {
        display: none !important;
    }

    body.guest-mode .topbar-shell { padding: 0 8px !important; }

    body.guest-mode .topbar-row--swapped {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        min-height: 52px !important;
    }

    body.guest-mode .topbar-row--swapped .topbar-start {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    body.guest-mode .topbar-row--swapped .topbar-tools {
        order: 1 !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        max-width: none !important;
    }

    body.guest-mode .topbar-row--swapped .mega-nav {
        display: none !important;
    }

    body.guest-mode .topbar-brand-link {
        padding: 2px 6px !important;
        max-width: 100% !important;
        justify-content: center !important;
    }

    body.guest-mode .topbar-tagline { display: none !important; }

    /* أدوات الهيدر — ظاهرة على الموبايل */
    body.guest-mode .topbar-lang-slot {
        display: flex !important;
        flex-shrink: 0;
    }
    body.guest-mode .topbar-lang-slot .lang-switch {
        gap: 2px;
    }
    body.guest-mode .topbar-lang-slot .lang-btn {
        padding: 4px 7px !important;
        font-size: 0.65rem !important;
        min-width: 0;
    }
    body.guest-mode #searchToggle {
        display: inline-flex !important;
        flex-shrink: 0;
    }
    body.guest-mode #notifWrap { display: none; }

    body.guest-mode .topbar-icon-btn.cart-btn {
        display: inline-flex !important;
        flex-shrink: 0;
    }

    body.guest-mode .topbar-row--swapped .topbar-tools {
        order: 1 !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        max-width: none !important;
    }

    body.guest-mode .topbar-row--swapped .topbar-start {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 38% !important;
    }

    body.guest-mode .user-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        flex-shrink: 0;
    }

    body.guest-mode .user-bar .cart-btn { order: -1; }

    body.guest-mode .user-bar .btn-outline { display: none; }
    body.guest-mode .user-bar .btn-gold {
        padding: 0 !important;
        min-width: 36px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 0 !important;
        border-radius: 10px !important;
    }
    body.guest-mode .user-bar .btn-gold::before {
        content: '\\f2f6';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.85rem;
    }

    body.guest-mode .topbar-menu-pill {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 8px !important;
    }
    body.guest-mode .topbar-menu-pill span { display: none; }

    body.guest-mode .main-wrap {
        margin-top: var(--header-stack-h, 108px) !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        min-height: calc(100dvh - var(--header-stack-h, 108px)) !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body.guest-mode.premium-ui .main-wrap {
        background-attachment: scroll !important;
    }

    body.guest-mode .hero-premium-inner {
        grid-template-columns: 1fr !important;
        padding: 28px 16px 20px !important;
        gap: 20px !important;
    }

    body.guest-mode .hero-photo-mini-grid {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    body.guest-mode .hero-photo-cinema {
        min-height: auto !important;
    }

    body.guest-mode .hero-photo-slide img {
        animation: none !important;
        transform: none !important;
    }

    .topbar-premium::after { animation: none; }

    .has-icon-bg,
    .accmaa-icon-shell,
    .mega-nav-icon-wrap {
        flex-shrink: 0;
        backface-visibility: visible;
        transform: none;
    }

    .mega-nav-icon-wrap i.fas,
    .mega-nav-icon-wrap i.fab,
    .has-icon-bg > i {
        font-size: 0.8rem !important;
        -webkit-font-smoothing: antialiased;
    }

    /* قفل تمرير الخلفية عند القائمة */
    html.accmaa-sidebar-lock,
    body.accmaa-sidebar-lock {
        overflow: hidden !important;
        height: 100% !important;
    }
    body.accmaa-sidebar-lock .sidebar {
        touch-action: pan-y;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .accmaa-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 750;
        background: rgba(6, 31, 61, 0.5);
        -webkit-tap-highlight-color: transparent;
    }
    .accmaa-sidebar-overlay.is-visible { display: block; }

    /* شريط التواصل السفلي — مضغوط */
    .accmaa-social-bar {
        border-top-width: 1px;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    }
    .accmaa-social-bar-inner {
        padding: 5px 8px !important;
        gap: 6px !important;
    }
    .accmaa-social-bar-label {
        font-size: 0.68rem !important;
    }
    .accmaa-social-chip {
        padding: 3px 6px !important;
        gap: 4px !important;
        font-size: 0.65rem !important;
    }
    .accmaa-social-chip i {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.65rem !important;
    }
    body.has-social-bar {
        padding-bottom: 40px !important;
    }
    body.guest-mode .main-wrap {
        padding-bottom: 44px !important;
    }

    /* الداشبورد والصفحات */
    body.guest-mode .dash-landing,
    body.guest-mode .dash-member-premium,
    body.guest-mode .dash-admin-premium {
        padding: 0 0 12px !important;
    }
    body.guest-mode .section-block {
        padding: 24px 14px !important;
    }
    body.guest-mode .choices-visual-grid {
        gap: 12px !important;
    }
    body.guest-mode .choice-visual-tile {
        border-radius: 14px !important;
    }
}

@media (max-width: 480px) {
    .accmaa-fx-bar {
        display: flex !important;
        overflow: hidden !important;
        flex-wrap: nowrap;
        gap: 6px;
    }
    .accmaa-fx-bar .fx-marquee-wrap {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .accmaa-fx-bar .fx-marquee-track {
        animation: fxScroll 22s linear infinite !important;
        flex-wrap: nowrap;
        width: max-content !important;
    }
    .accmaa-fx-bar .fx-tick-item { flex-shrink: 0; }
    .accmaa-promo-bar .promo-bar-inner { justify-content: space-between; }
    .accmaa-promo-bar .promo-msg { max-width: 52%; }

    body.guest-mode .topbar-row--swapped {
        min-height: 46px !important;
    }

    body.guest-mode .main-wrap {
        margin-top: var(--header-stack-h, 92px) !important;
    }

    body.guest-mode .hero-premium,
    body.guest-mode .hero-guest {
        padding: 20px 12px 32px !important;
        min-height: auto !important;
    }
    body.guest-mode .topbar-logo.brand-logo--official {
        height: 30px !important;
        max-width: 82px;
    }
    body.guest-mode .user-bar .btn-gold span { display: none; }
    body.guest-mode .user-bar .btn-gold::before {
        content: 'ابدأ';
        font-weight: 700;
    }
}

/* ─── تقليل الحركة ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .accmaa-fx-bar .fx-marquee-track:not(.fx-marquee-track--js) {
        animation-duration: 35s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ─── طباعة ─── */
@media print {
    .sidebar, .topbar, .accmaa-utility-stack, .accmaa-social-bar,
    #accmaaFileProtocolWarn { display: none !important; }
    .main-wrap { margin: 0 !important; }
    body { background: #fff; }
}