#map{width:100%!important;height:500px!important;max-height:500px!important;min-height:450px!important;position:relative;background:#f8fafc;border-radius:12px;overflow:hidden!important;box-shadow:0 4px 20px #0000001a}#mapModal #map{height:100%!important;max-height:100%!important;min-height:100%!important;border-radius:0;transition:all .4s cubic-bezier(.4,0,.2,1);will-change:auto;transform:translateZ(0);backface-visibility:hidden}.filters-sidebar-full{height:100%;max-height:100vh;overflow-y:auto;overflow-x:hidden;padding:0;background:#f8fafc;border-right:1px solid #e2e8f0;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;min-width:300px;max-width:350px;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9;will-change:transform,opacity;transform:translateZ(0);backface-visibility:hidden;contain:layout style paint}.filters-sidebar-full::-webkit-scrollbar{width:10px}.filters-sidebar-full::-webkit-scrollbar-track{background:linear-gradient(180deg,#f1f5f9,#e2e8f0);border-radius:5px;margin:5px;box-shadow:inset 0 0 3px #0000001a}.filters-sidebar-full::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#cbd5e1,#94a3b8);border-radius:5px;border:2px solid #f1f5f9;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.filters-sidebar-full::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#94a3b8,#64748b);transform:scale(1.05);box-shadow:0 3px 6px #00000026}.filters-sidebar-full::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,#64748b,#475569)}.map-filters{padding:20px 15px 20px 20px;min-height:calc(100vh - 60px);display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.filter-section{margin-right:10px;padding-right:5px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}.filter-section:last-child{border-bottom:none;margin-bottom:30px}.toggle-filters-btn{position:absolute;top:20px;right:20px;z-index:1001;background:#fff;border:2px solid #059669;border-radius:8px;padding:12px 16px;cursor:pointer;box-shadow:0 4px 12px #00000026;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;color:#059669;font-size:14px;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);will-change:transform,background-color;transform:translateZ(0);backface-visibility:hidden}.toggle-filters-btn:hover{background:#059669;color:#fff;transform:translateY(-2px) translateZ(0);box-shadow:0 6px 20px #0596694d}.toggle-filters-btn .icon{transition:transform .4s cubic-bezier(.4,0,.2,1);font-size:16px}.toggle-filters-btn.filters-hidden .icon{transform:rotate(180deg)}.mapboxgl-map{font-family:Cairo,Arial,sans-serif;position:relative!important;width:100%!important;height:100%!important;border-radius:12px}#mapModal .mapboxgl-map{border-radius:0!important}.mapboxgl-canvas-container,.mapboxgl-canvas{position:relative!important;width:100%!important;height:100%!important;border-radius:12px}#mapModal .mapboxgl-canvas-container,#mapModal .mapboxgl-canvas{border-radius:0!important}.marker-inner-scaler,.user-inner-scaler{width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:transform .2s ease;transform-origin:center center}.teacher-marker-fixed{width:40px!important;height:40px!important;cursor:pointer!important;position:absolute!important;z-index:100!important;pointer-events:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:none!important;outline:none!important;transform:translate(-50%,-50%)!important;transform-origin:center center!important;will-change:auto;backface-visibility:hidden}.teacher-marker-fixed:hover{z-index:1000!important}.teacher-marker-fixed:active{transform:translate(-50%,-50%)!important}.marker-content-fixed{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:auto!important;transform-origin:center center}.marker-icon-fixed{font-size:26px!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));transition:all .2s ease;line-height:1;pointer-events:auto!important;position:relative;z-index:10;transform-origin:center center}.marker-pulse-fixed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#10b981;opacity:0;z-index:1;transform-origin:center center}.marker-pulse-fixed.active{animation:pulseFixed 2s infinite ease-in-out}@keyframes pulseFixed{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.8);opacity:.2}to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}.user-marker-fixed{width:35px!important;height:35px!important;cursor:pointer!important;position:absolute!important;z-index:200!important;pointer-events:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:none!important;transform:translate(-50%,-50%)!important;transform-origin:center center!important}.user-marker-content-fixed{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:auto!important}.user-icon-fixed{font-size:24px!important;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));transition:all .2s ease;color:#dc2626!important}.user-pulse-fixed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#dc2626;animation:userPulseFixed 2s infinite ease-in-out;z-index:1}@keyframes userPulseFixed{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}.teacher-marker-fixed *,.user-marker-fixed *{will-change:auto;backface-visibility:hidden}.mapboxgl-marker{will-change:auto}.teacher-marker{width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;border:none;outline:none;transition:transform .2s ease,z-index .1s ease;transform-origin:center center;z-index:100}.teacher-marker:hover{transform:scale(1.2);z-index:1000}.teacher-marker:active{transform:scale(.95)}.marker-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.marker-icon{font-size:26px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));transition:all .2s ease;line-height:1;pointer-events:auto;position:relative;z-index:10}.marker-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#10b981;opacity:0;z-index:1}.marker-pulse.active{animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.8);opacity:.2}to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}.user-marker{width:35px;height:35px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;border:none;z-index:200}.user-marker-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.user-icon{font-size:24px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));transition:all .2s ease;color:#dc2626}.user-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#dc2626;animation:userPulse 2s infinite ease-in-out;z-index:1}@keyframes userPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}.teacher-popup-container .mapboxgl-popup-content{background:#fff;border-radius:12px;box-shadow:0 8px 25px #00000026;padding:0;max-width:280px!important;min-width:260px!important;width:270px!important;font-family:Cairo,Arial,sans-serif;border:1px solid #e2e8f0;animation:popupFadeIn .3s ease-out;overflow:hidden!important;box-sizing:border-box!important;word-wrap:break-word!important;direction:rtl!important;text-align:right!important}@keyframes popupFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.teacher-popup{padding:20px;direction:rtl;text-align:right}.popup-header{border-bottom:1px solid #f1f5f9;padding-bottom:12px;margin-bottom:16px}.popup-header h3{margin:0 0 8px;font-size:18px;font-weight:600;color:#1f2937;line-height:1.3}.popup-header .status{display:inline-block;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500}.status.online{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.status.offline{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.distance-info{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin:12px 0;text-align:center;font-size:13px;color:#374151}.popup-details{margin:16px 0}.detail-item{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:#4b5563;direction:rtl;text-align:right}.detail-item .icon{font-size:14px;width:16px;flex-shrink:0}.detail-item .text{flex:1}.popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9}.popup-actions button{padding:8px 12px;border:none;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.popup-actions button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.popup-actions button:hover:before{left:100%}.btn-primary{background:#059669;color:#fff;box-shadow:0 2px 4px #05966933}.btn-primary:hover{background:#047857;transform:translateY(-1px);box-shadow:0 4px 8px #0596694d}.btn-secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.btn-secondary:hover{background:#e5e7eb;transform:translateY(-1px)}.btn-success{background:#10b981;color:#fff;box-shadow:0 2px 4px #10b98133}.btn-success:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.teacher-popup-container .mapboxgl-popup-close-button{position:absolute;top:8px;left:8px;width:24px;height:24px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#6b7280;cursor:pointer;transition:all .2s ease}.teacher-popup-container .mapboxgl-popup-close-button:hover{background:#e5e7eb;color:#374151;transform:scale(1.1)}.teacher-popup-container .mapboxgl-popup-tip{border-top-color:#fff!important;border-width:8px 8px 0 8px!important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.map-toast{position:fixed;top:20px;right:20px;background:#fff;padding:12px 16px;border-radius:8px;box-shadow:0 4px 12px #00000026;border:1px solid #e2e8f0;z-index:10000;font-family:Cairo,Arial,sans-serif;font-size:14px;color:#374151;max-width:300px;opacity:0;transform:translate(100%);transition:all .3s ease}.map-toast.show{opacity:1;transform:translate(0)}.map-toast.info{border-right:4px solid #3b82f6}.map-toast.success{border-right:4px solid #10b981}.map-toast.error{border-right:4px solid #ef4444}.map-toast.warning{border-right:4px solid #f59e0b}.map-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:30px;border-radius:12px;box-shadow:0 8px 25px #00000026;text-align:center;max-width:400px;border:1px solid #fecaca;animation:errorShake .5s ease-in-out}@keyframes errorShake{0%,to{transform:translate(-50%,-50%) translate(0)}25%{transform:translate(-50%,-50%) translate(-5px)}75%{transform:translate(-50%,-50%) translate(5px)}}.error-icon{font-size:48px;color:#ef4444;margin-bottom:16px}.map-error h3{margin:0 0 12px;color:#991b1b;font-size:18px;font-weight:600}.map-error p{margin:0 0 20px;color:#6b7280;font-size:14px;line-height:1.5}.reload-btn{background:#ef4444;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.reload-btn:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 8px #ef44444d}.mapboxgl-ctrl-group{background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;border:1px solid #e2e8f0;overflow:hidden}.mapboxgl-ctrl button{background:#fff;border:none;width:32px;height:32px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.mapboxgl-ctrl button:hover{background:#f8fafc;transform:scale(1.05)}.mapboxgl-ctrl button:not(:last-child){border-bottom:1px solid #f1f5f9}.mapboxgl-ctrl-scale{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #e2e8f0;border-radius:6px;padding:4px 8px;font-size:11px;color:#374151;font-weight:500;box-shadow:0 2px 8px #0000001a}@media (max-width: 768px){#map{height:400px!important;max-height:400px!important;min-height:350px!important;border-radius:8px}.teacher-marker{width:35px;height:35px}.marker-icon{font-size:22px}.user-marker{width:30px;height:30px}.user-icon{font-size:20px}.teacher-popup-container .mapboxgl-popup-content{max-width:280px;min-width:250px}.teacher-popup{padding:16px}.popup-actions button{padding:8px 10px;font-size:11px}.map-toast{top:10px;right:10px;max-width:250px;font-size:13px}.map-toast.show{transform:translate(0)}}@media (max-width: 480px){#map{height:350px!important;max-height:350px!important;border-radius:6px}.teacher-marker{width:32px;height:32px}.marker-icon{font-size:20px}.user-marker{width:28px;height:28px}.user-icon{font-size:18px}.teacher-popup-container .mapboxgl-popup-content{max-width:260px;min-width:230px}.teacher-popup{padding:14px}.popup-header h3{font-size:16px}.map-error{margin:20px;padding:20px}.error-icon{font-size:40px}.map-error h3{font-size:16px}}.teacher-marker.loading{animation:markerLoading 1.5s infinite ease-in-out}@keyframes markerLoading{0%,to{opacity:1}50%{opacity:.5}}*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.teacher-marker:focus,.user-marker:focus,.popup-actions button:focus{outline:2px solid #059669;outline-offset:2px}.mapboxgl-popup[dir=rtl] .mapboxgl-popup-content{text-align:right;direction:rtl}.teacher-marker,.user-marker,.marker-pulse,.filters-sidebar-full,.map-container-full,.toggle-filters-btn{will-change:auto;backface-visibility:hidden;transform:translateZ(0)}.teacher-marker-simple{width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;border:none;outline:none;transition:transform .15s ease;z-index:100}.teacher-marker-simple:hover{transform:scale(1.1)}.marker-content-simple{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.marker-icon-simple{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transition:filter .15s ease}.marker-pulse-simple{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#10b981;opacity:0;z-index:1}.marker-pulse-simple.active{animation:pulseSimple 2s infinite ease-in-out}@keyframes pulseSimple{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.user-marker-simple{width:35px;height:35px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;border:none;z-index:200}.user-content-simple{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.user-icon-simple{font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));color:#dc2626}.user-pulse-simple{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#dc2626;animation:userPulseSimple 2s infinite ease-in-out;z-index:1}@keyframes userPulseSimple{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}.teacher-marker-robust{width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;border:none;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:100;position:relative}.teacher-marker-robust:hover{transform:scale(1.15);z-index:1000}.marker-content-robust{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:auto}.marker-icon-robust{font-size:26px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));transition:all .2s ease;line-height:1;position:relative;z-index:10}.marker-pulse-robust{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#10b981;opacity:0;z-index:1}.marker-pulse-robust.active{animation:pulseRobust 2s infinite ease-in-out}@keyframes pulseRobust{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.8);opacity:.2}to{transform:translate(-50%,-50%) scale(2.2);opacity:0}}.teacher-marker-robust.online .marker-icon-robust{color:#10b981}.teacher-marker-robust.offline .marker-icon-robust{color:#6b7280}.teacher-marker-robust.online .marker-pulse-robust{background:#10b981}.teacher-marker-robust.offline .marker-pulse-robust{background:#6b7280;display:none}.toggle-filters-btn{outline:none;-webkit-user-select:none;user-select:none}.toggle-filters-btn:focus{outline:2px solid #059669;outline-offset:2px}.toggle-filters-btn:active{transform:translateY(-1px) translateZ(0) scale(.98)}.filters-sidebar-full.hidden{pointer-events:none}.map-container-full{contain:layout style paint}@media (max-width: 768px){.toggle-filters-btn{padding:8px 12px;font-size:12px}.filters-sidebar-full{max-width:280px;min-width:260px}.filters-sidebar-full.hidden{transform:translate(100%) translateZ(0)}}.filter-select:focus,.action-buttons button:focus{outline:2px solid #059669;outline-offset:2px;box-shadow:0 0 0 3px #0596691a}.filters-sidebar-full{scroll-padding-top:20px;scroll-padding-bottom:20px}.modal-fullscreen-custom,.filters-sidebar-full,.map-container-full{contain:layout style paint}.filters-sidebar-full,.map-container-full,.toggle-filters-btn{will-change:auto;transform:translateZ(0);backface-visibility:hidden}#map-loading{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.filters-sidebar-full{padding-bottom:20px}.map-filters:after{content:"";display:block;height:20px}.route-info-popup .mapboxgl-popup-content{background:#fffffff2!important;border:2px solid #4285f4!important;border-radius:8px!important;padding:8px 12px!important;font-family:Cairo,Arial,sans-serif!important;box-shadow:0 4px 12px #4285f44d!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;min-width:140px!important;max-width:200px!important;width:auto!important;text-align:center!important;direction:rtl!important;overflow:hidden!important;word-wrap:break-word!important;box-sizing:border-box!important}.route-info-popup .mapboxgl-popup-close-button{display:none!important}.route-info-popup .mapboxgl-popup-tip{border-top-color:#4285f4!important;border-width:6px 6px 0 6px!important}.route-info-popup .mapboxgl-popup-content div{line-height:1.3!important;margin:0!important}.route-info-popup .mapboxgl-popup-content div:first-child{margin-bottom:2px!important}.map-control-buttons{position:absolute;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px}.map-control-btn{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;gap:6px;min-width:120px;justify-content:center}.map-control-btn:hover{background:#f8fafc;border-color:#cbd5e1;box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.map-control-btn:active{transform:translateY(0)}.map-control-btn i{font-size:14px}.map-control-btn span{white-space:nowrap}html[lang=ar] .map-control-buttons{right:auto;left:20px}@media (max-width: 768px){.map-control-buttons{top:10px;right:10px;gap:8px}html[lang=ar] .map-control-buttons{right:auto;left:10px}.map-control-btn{padding:6px 10px;font-size:11px;min-width:100px}.map-control-btn span{display:none}.map-control-btn i{font-size:16px}}.map-control-btn.loading{opacity:.7;cursor:not-allowed}.map-control-btn.loading i{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.map-control-btn.success{background:#10b981;color:#fff;border-color:#10b981}.map-control-btn.error{background:#ef4444;color:#fff;border-color:#ef4444}