/* =============================================================================
   RESP — Responsive Styles | أنماط التجاوب
   =============================================================================
   Sections:
     • TABL  — Tablet breakpoints (max-width: 1100px)
     • MOBL  — Mobile breakpoints (max-width: 768px)
     • TINY  — Small mobile (max-width: 380px)
     • PERF  — Performance optimizations (disable effects on mobile)
     • TOUC  — Touch device optimizations
     • REDU  — Reduced motion preferences
   =============================================================================
   Related: All other CSS files (overrides for mobile)
   ============================================================================= */

/* =============================================================================
   TABL — Tablet Breakpoints | نقاط توقف التابلت
   ============================================================================= */
@media (max-width: 1100px) {
    .card{flex:0 0 calc((100% - 1.6rem) / 2)}
    .footer-top{grid-template-columns:1fr 1fr}
    .hero-line{display:none}
}

/* =============================================================================
   MOBL — Mobile Breakpoints | نقاط توقف الجوال
   ============================================================================= */
@media (max-width: 768px) {
    /* PERF: disable backdrop-filter on mobile for performance */
    .navbar,.dropdown,.card,.promo-section,.shop-sidebar,.course-card,.exam-card,.med-card,.ent-card,.teacher-card,.pkg-card,.product-card,.auth-box,.theme-toggle-btn,.toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

    /* NAV — Mobile Navigation | التنقل للجوال */
    .navbar{padding:.6rem 1rem;height:62px;flex-wrap:nowrap;gap:0;justify-content:space-between;align-items:center;background:var(--nav-bg);border-bottom:1px solid var(--border-color)}
    .nav-toggle{display:flex!important;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border-color);background:rgba(255,255,255,0.03);flex-shrink:0;color:var(--text-secondary);font-size:1rem}
    .nav-links,#desktopSearch{display:none!important}
    .nav-logo{display:flex;flex-direction:row;align-items:center;gap:.5rem;flex-shrink:0}
    .logo-icon{width:28px;height:28px;font-size:.7rem;flex-shrink:0}
    .nav-name{font-size:1rem;line-height:1;white-space:nowrap}
    .nav-name span{display:none}
    .nav-actions{display:flex;align-items:center;gap:.3rem;flex-shrink:0}
    .btn-register{display:flex;align-items:center;gap:.2rem;padding:.3rem .6rem;border-radius:var(--radius-full);border:none;background:transparent;color:var(--text-secondary);font-size:.65rem;font-weight:500;white-space:nowrap}
    .btn-register span{display:inline}
    .btn-register i{font-size:.6rem}
    .btn-login{display:flex;align-items:center;gap:.2rem;padding:.3rem .7rem;border-radius:var(--radius-full);background:var(--gradient-primary);color:#0F172A;border:none;font-size:.65rem;font-weight:700;white-space:nowrap;box-shadow:none}
    .btn-login span{display:inline}
    .btn-login i{font-size:.6rem;color:#0F172A}
    .nav-links.open{display:flex!important;flex-direction:column;width:100%;padding:.5rem 0 .8rem;border-top:1px solid var(--border-color);margin-top:.3rem;background:var(--bg-glass)}
    .nav-links.open .nav-link{padding:.6rem .5rem}
    .nav-links.open .dropdown{position:static;opacity:1;pointer-events:all;transform:none;box-shadow:none;border:none;background:rgba(255,255,255,0.02);margin:.3rem 0 0 1rem;backdrop-filter:none}

    /* HERO — Mobile Hero | البانر للجوال */
    .hero{min-height:100svh}
    .hero-bg{background-position:60% center}
    .hero-content{padding:3rem 1.4rem 5rem}
    .hero-title{font-size:clamp(2.4rem,11vw,3.8rem)}
    .hero-desc{font-size:.9rem}
    .hero-line{display:none}
    .scroll-indicator{left:1.4rem;bottom:1.8rem;font-size:.55rem}
    .scroll-line{display:none}
    .hero-ctas{gap:.7rem}
    .hero-cta-primary,.hero-cta-secondary{font-size:.8rem;padding:.7rem 1.4rem}

    /* LAYT — Mobile Layout | التخطيط للجوال */
    .main-content{padding:3rem 1.2rem}
    .card{flex:0 0 82vw;padding:1.8rem 1.4rem}
    .arrow-prev{left:-8px}
    .arrow-next{right:-8px}
    .carousel-arrow{width:38px;height:38px;font-size:.8rem}

    /* PROM — Mobile Promo | العرض للجوال */
    .promo-section{flex-direction:column;text-align:center;margin:2rem 1.2rem;padding:2.5rem 1.5rem}
    .promo-title{font-size:1.4rem}
    .promo-btn{width:100%;justify-content:center}

    /* FOOT — Mobile Footer | التذييل للجوال */
    .footer-top{grid-template-columns:1fr;padding:2rem 1.4rem 1.5rem;gap:.5rem}
    .footer-bottom{flex-direction:column;text-align:center;padding:1.2rem 1.4rem}
    .footer-seo-links{justify-content:center}

    /* OVL — Mobile Overlays | التراكبات للجوال */
    .overlay-header{padding:1rem 1.2rem}
    .overlay-body{padding:1rem}
    .teacher-grid{grid-template-columns:1fr;gap:1rem}
    .course-grid{grid-template-columns:1fr;gap:1rem}
    .packages-grid{grid-template-columns:1fr}
    .exams-grid{grid-template-columns:1fr;gap:1rem}
    .medical-grid{grid-template-columns:1fr}
    .entertain-grid{grid-template-columns:1fr}

    /* SHOP — Mobile Shop | المتجر للجوال */
    #shopOverlay .overlay-body{padding-left:0!important;padding-right:.6rem!important;padding-top:.9rem!important}
    .shop-layout{gap:.4rem}
    .shop-sidebar{width:auto!important;min-width:32px!important;padding:.3rem 0!important}
    .shop-cat{padding:.45rem .1rem;gap:.1rem;border-radius:6px}
    .shop-cat i{font-size:1rem}
    .shop-cat span{font-size:.45rem}
    .shop-topbar{gap:.5rem;margin-bottom:.8rem}
    .shop-search{padding:.4rem .7rem;border-radius:var(--radius-sm)}
    .shop-search input{font-size:.78rem}
    .shop-filter-btn{padding:.4rem .6rem;font-size:.72rem;gap:.25rem}
    .shop-products{grid-template-columns:repeat(2,1fr)!important;gap:.7rem}
    .product-img{height:120px}
    .product-add{width:30px;height:30px;font-size:.9rem;bottom:6px;right:6px}
    .product-info{padding:.7rem .6rem}
    .product-name{font-size:.8rem;margin-bottom:.2rem;line-height:1.3}

    /* CONT — Mobile Content | المحتوى للجوال */
    .course-card,.exam-card,.med-card,.ent-card{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.2rem}
    .course-card .course-btn{width:100%}
    .med-btn{width:100%;min-width:unset}
    .ent-btn{width:100%}
    .pkg-card{padding:1.4rem}
    .pkg-header{min-width:unset;width:100%}
    .pkg-features{width:100%}
    .pkg-btn{width:100%;min-width:unset;text-align:center}

    /* MODAL — Mobile Modals | النوافذ المنبثقة للجوال */
    .teacher-detail-box{width:calc(100% - 2rem);max-width:100%}
    .td-header{flex-wrap:wrap;gap:1rem;padding:1.2rem}
    .td-body{padding:1.2rem}
    .td-label{width:80px}

    /* TOST — Mobile Toast | التوست للجوال */
    .toast-container{bottom:1rem;max-width:calc(100% - 2rem)}
    .toast{min-width:unset;width:100%;max-width:100%;padding:.7rem 1rem;font-size:.8rem}

    /* AUTH — Mobile Auth | المصادقة للجوال */
    .auth-box{margin:1rem;padding:1.8rem 1.4rem;max-width:100%;width:calc(100% - 2rem)}
    .cart-panel{width:100%;left:-100%}
    .cart-panel.open{left:0}

    /* NAVU — Mobile Nav User | مستخدم التنقل للجوال */
    .nav-user{padding:.2rem .5rem .2rem .2rem;gap:.3rem}
    .nav-user-name{max-width:60px;font-size:.7rem}
    .nav-logout{padding:.25rem .5rem;font-size:.7rem}

    /* THSW — Mobile Theme Switcher | مبدل السمات للجوال */
    .theme-switcher{left:1rem;bottom:1.2rem}
    .theme-toggle-btn{width:38px;height:38px;font-size:.95rem}
    .back-top{right:1rem;bottom:1.2rem;width:38px;height:38px;font-size:.85rem}
    .cart-btn{right:1rem;bottom:1.2rem;width:44px;height:44px;font-size:1rem}
    .cart-badge{width:18px;height:18px;font-size:.55rem}

    /* CONF — Mobile Confirmation | التأكيد للجوال */
    .confirmation-modal-box{padding:2rem 1.5rem;margin:1rem;max-width:100%}
    .confirmation-title{font-size:1.4rem}
    .confirmation-icon{font-size:2.5rem}

    /* ADBN — Mobile Ad Banner | الإعلان للجوال */
    .ad-banner{width:120px;height:120px;margin-left:-30px;padding:.5rem;border-width:2px}
    .ad-logo{width:40px}
    .ad-text-main{font-size:.45rem}
    .ad-text-brand{font-size:.7rem}
    .ad-text-tagline{font-size:.35rem}
    .ad-wa-link{font-size:.4rem;padding:.1rem .4rem}
    .ad-banner-close{width:22px;height:22px;top:-6px;right:-6px;font-size:.6rem}
}

/* =============================================================================
   TINY — Small Mobile | شاشات الجوال الصغيرة
   ============================================================================= */
@media (max-width: 380px) {
    .teacher-grid{grid-template-columns:1fr}
    .course-grid{grid-template-columns:1fr}
    .exams-grid{grid-template-columns:1fr}
    .shop-products{grid-template-columns:repeat(2,1fr)!important;gap:.5rem}
    .shop-layout{gap:.25rem}
    .shop-sidebar{width:auto!important;min-width:28px!important;padding:.2rem 0!important}
    .shop-cat{padding:.35rem .05rem}
    .shop-cat i{font-size:.8rem}
    .shop-cat span{display:none}
    .product-img{height:100px}
    .promo-section{margin:1.5rem .6rem;padding:1.8rem 1rem}
    .navbar{padding:.4rem .6rem}
    .hero-content{padding:2.5rem .9rem 4rem}
    .overlay-header{padding:.8rem .9rem}
    .overlay-body{padding:.6rem}
    .ad-banner{width:100px;height:100px;margin-left:-25px;padding:.5rem}
    .ad-logo{width:32px}
    .ad-text-main{font-size:.4rem}
    .ad-text-brand{font-size:.6rem}
    .ad-text-tagline{font-size:.3rem}
    .ad-wa-link{font-size:.35rem;padding:.08rem .3rem}
}

/* =============================================================================
   PERF — Mobile Performance Pass | تحسينات الأداء للجوال
   ============================================================================= */
@media (max-width: 768px) {
    .hero-badge,.hero-cta-secondary,.card-tag,.coming-tag,.overlay-header,.auth-modal,.teacher-detail-modal,.product-detail-modal,.confirmation-modal-wrapper,.cart-panel,.nav-search{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
    .particles{display:none}
    .logo-icon::after{animation:none}
}

/* =============================================================================
   TOUC — Touch Device Optimizations | تحسينات أجهزة اللمس
   ============================================================================= */
@media (hover: none) {
    .nav-logo:hover .logo-icon,.hero-cta-primary:hover,.hero-cta-secondary:hover,.promo-btn:hover,.pkg-btn:hover,.course-btn:hover,.med-btn:hover,.ent-btn:hover{transform:none!important}
}

/* =============================================================================
   REDU — Reduced Motion Preferences | تفضيلات الحركة المخفضة
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}