:root{--primary-color: #ff9800;--primary-light: #ffe0b2;--secondary-color: #ffd54f;--success-color: #43a047;--success-light: #c8e6c9;--warning-color: #fbc02d;--warning-light: #fff9c4;--danger-color: #e53935;--danger-light: #ffcdd2;--dark-color: #3e2723;--light-color: #fffde7;--gray-200: #f5f5f5;--gray-400: #bdbdbd;--gray-600: #757575;--border-radius: 16px;--border-radius-lg: 24px;--box-shadow: 0 4px 16px 0 rgba(255, 152, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--box-shadow-lg: 0 10px 24px 0 rgba(255, 152, 0, .15), 0 4px 6px -2px rgba(0, 0, 0, .05)}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#fff,#fffde7 10%);color:var(--dark-color)}.tracker-header{width:100%;background:#fff;color:#ff9800;padding:2.5rem 1.5rem 1.5rem;border-bottom:none;border-radius:0 0 32px 32px;box-shadow:0 8px 32px #ffa8001a,0 1.5px 4px -1px #0000000a;text-align:center;margin-bottom:1.5rem;position:relative}.tracker-header:after{content:"";display:block;position:absolute;left:50%;transform:translate(-50%);bottom:-8px;width:90%;height:5px;border-radius:0 0 12px 12px;background:linear-gradient(90deg,#ff9800,#ffd54f);box-shadow:0 2px 8px #ffa8001a;z-index:1}.tracker-header h1{font-size:2.7rem;font-weight:800;margin-bottom:.5rem;letter-spacing:1.5px}.tracker-header p{font-size:1.25rem;font-weight:400;margin-bottom:0}.tracker-container{height:80vh;display:flex;flex-direction:column;position:relative;background:#fff;border-radius:32px;box-shadow:0 8px 32px #ffa8001a,0 1.5px 4px -1px #0000000a;margin-bottom:2rem}#map{flex:1;width:100%;z-index:1;border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;box-shadow:var(--box-shadow)}.map-controls{position:absolute;top:24px;right:24px;display:flex;flex-direction:column;gap:16px;z-index:1100}.control-btn{width:48px;height:48px;border-radius:50%;background:var(--primary-light);box-shadow:var(--box-shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:all .2s;color:var(--primary-color);font-size:1.3rem}.control-btn:hover{box-shadow:var(--box-shadow-lg);background:var(--primary-color);color:#fff;transform:scale(1.1)}.bottom-sheet{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(90deg,#fffde7,#ffe0b2);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-lg);height:60px;transition:all .3s ease;z-index:1000;display:flex;flex-direction:column;overflow:hidden}.bottom-sheet.open{height:32vh}.sheet-header{padding:28px;display:flex;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.drag-handle{width:44px;height:5px;background-color:var(--gray-400);border-radius:2.5px;transition:all .2s}.sheet-header:hover .drag-handle{background-color:var(--primary-color);transform:scaleX(1.2)}.sheet-content{flex:1;overflow-y:auto;padding:0 20px 20px}.sheet-title{font-size:20px;font-weight:700;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;color:#ff5722}.sheet-title span:first-child{display:flex;align-items:center;gap:10px}.bus-list{display:flex;flex-direction:column;gap:18px;padding-bottom:8px}.bus-card{background:#fff;border-radius:24px;padding:18px 18px 14px;box-shadow:0 4px 16px #ffa8001a,0 2px 4px -1px #0000000f;border:1px solid #f5f5f5;position:relative;overflow:hidden}.bus-card:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(180deg,#ff9800,#ffd54f)}.bus-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.bus-number{font-size:20px;font-weight:800;color:var(--primary-color);display:flex;align-items:center;gap:10px}.bus-status{padding:7px 14px;border-radius:22px;font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:5px}.status-on-time{background:linear-gradient(90deg,#43a047,#c8e6c9);color:#fff}.status-delayed{background:linear-gradient(90deg,#fbc02d,#fff9c4);color:#3e2723}.status-arrived{background:linear-gradient(90deg,#ff9800,#ffd54f);color:#fff}.status-full{background:linear-gradient(90deg,#e53935,#ffcdd2);color:#fff}.bus-details{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.detail-row{display:flex;justify-content:space-between}.detail-item{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--gray-600)}.detail-item i{width:22px;text-align:center}.seat-info{display:flex;align-items:center;gap:14px;font-size:15px}.seat-indicator{display:flex;align-items:center;gap:5px}.seat-total{color:var(--primary-color);font-weight:700}.seat-occupied{color:var(--danger-color);font-weight:700}.seat-available{color:var(--success-color);font-weight:700}.progress-container{width:100%;height:7px;background-color:var(--gray-200);border-radius:3.5px;margin-top:4px;overflow:hidden}.progress-bar{height:100%;background:linear-gradient(90deg,#ff9800,#ffd54f);border-radius:3.5px;transition:width .3s}.bus-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--gray-200)}.stop-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary-color);margin-right:7px;vertical-align:middle}.user-marker{width:32px;height:32px;border-radius:50%;background:#26a69a;box-shadow:0 2px 8px #26a69a2e;display:flex;align-items:center;justify-content:center;border:3px solid #fff}.user-marker-inner{display:flex;align-items:center;justify-content:center}.eta{font-size:17px;font-weight:700;color:var(--dark-color);display:flex;align-items:center;gap:7px}.action-btn{background:linear-gradient(90deg,#ff9800,#ffd54f);color:#fff;border:none;border-radius:999px;padding:10px 28px;font-weight:700;font-size:1.08rem;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:0 2px 8px #ffa8001a;transition:all .2s}.action-btn:hover{background:linear-gradient(90deg,#ffd54f,#ff9800);color:#fff;transform:translateY(-1px) scale(1.05);box-shadow:0 4px 16px #ffa80026}.blur-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1040;background:#0000002e;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:opacity .3s;opacity:1;pointer-events:auto}.blur-overlay.hide{opacity:0;pointer-events:none}@media (max-width: 640px){.offcanvas-end{width:85vw!important;max-width:340px;min-width:220px;border-top-left-radius:18px;border-bottom-left-radius:18px}}@media (min-width: 641px){.offcanvas-end{width:400px!important;max-width:420px;border-top-left-radius:24px;border-bottom-left-radius:24px}}.offcanvas{max-height:100vh;overflow-y:auto}@media (max-width: 640px){.tracker-header{padding:1.5rem .5rem 1rem;font-size:1.2rem}.tracker-container{border-radius:0}.bottom-sheet{border-top-left-radius:16px;border-top-right-radius:16px}.bus-details{flex-direction:column;gap:8px}.map-controls{top:12px;right:12px;gap:8px}.control-btn{width:36px;height:36px;font-size:14px}}.hide{display:none!important}.custom-offcanvas{background:#fff;color:#3e2723;border-left:0;box-shadow:-5px 0 15px #ffa8001f;z-index:99999}.custom-offcanvas-header{background:#ff9800;color:#fff;border-bottom:1px solid #ffd54f;padding:1rem 1rem .7rem}.custom-offcanvas-body{padding:1rem .5rem;min-height:300px}.custom-offcanvas-body .accordion-button:not(.collapsed){box-shadow:unset!important;background-color:#ff9800cc;color:#fff}.custom-offcanvas-body .badge.bg-secondary{background-color:#ff9800!important;color:#fff}.custom-offcanvas-body .accordion-button:not(.collapsed) .badge.bg-secondary{background-color:#fff!important;color:#ff9800}.accordion-button:focus{box-shadow:none!important}.custom-offcanvas-body .accordion-item{border:1px solid rgb(255,152,0,.8)!important;border-radius:5px!important}.accordion-button:not(.collapsed):after{filter:brightness(0) invert(1)}.bus-card-modern{background:#fff;border-radius:18px;box-shadow:0 2px 8px #ffa8001a;border:1px solid #ffe0b2;display:flex;align-items:center;gap:12px;margin-bottom:16px;transition:box-shadow .18s,transform .12s;position:relative;padding:.8rem .9rem}.bus-card-modern:hover{box-shadow:0 6px 18px #ffa8002e;border-color:#ff9800}.bus-icon-bubble{background:#ff9800;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #ffa8001a;margin-right:0;font-size:1.3rem;color:#fff;border:2px solid #fffbe6}.bus-card-details{flex:1;display:flex;flex-direction:column;gap:4px;width:100%}.bus-card-title{font-size:1.08rem;font-weight:700;color:#ff9800;margin-bottom:2px;display:flex;align-items:center;gap:6px}.bus-card-route{font-size:.98rem;color:#3e2723;font-weight:500;margin-bottom:2px}.bus-card-assigned{font-size:.93rem;color:#757575}.bus-status-badge{position:absolute;top:10px;right:12px;padding:3px 12px;border-radius:12px;font-size:.89rem;font-weight:700;color:#fff;min-width:48px;min-height:22px;background:#43a047;box-shadow:0 1px 4px #43a0471a;letter-spacing:.5px;border:none;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:box-shadow .12s,background .12s;z-index:2}.bus-status-badge.active{background:#43a047}.bus-status-badge.delayed{background:#fbc02d;color:#3e2723}.bus-status-badge.arrived{background:#ff9800}.bus-status-badge.full{background:#e53935}.bus-status-badge.inactive{background:#bdbdbd}.bus-status-badge:hover{box-shadow:0 2px 8px #ffa80021;filter:brightness(1.08)}@media (max-width: 640px){.custom-offcanvas{border-top-left-radius:16px;border-bottom-left-radius:16px;background:#fff}.custom-offcanvas-header{padding:.8rem .7rem .6rem;font-size:1.1rem}.custom-offcanvas-body{padding:.7rem .3rem}.bus-card-modern{flex-direction:row;align-items:center;gap:10px;padding:.7rem .6rem;border-radius:14px;margin-bottom:12px}.bus-icon-bubble{width:32px;height:32px;font-size:1.1rem;margin-right:0}.bus-card-title{font-size:1rem;gap:4px}.bus-card-route{font-size:.93rem}.bus-card-assigned{font-size:.89rem}.bus-status-badge{top:8px;right:10px;padding:2px 10px;border-radius:10px;font-size:.82rem;min-width:38px;min-height:18px}}.bus-direction-indicator{position:relative;z-index:9999999}.bus-direction-indicator img{opacity:0}.bus-direction-indicator.bus-forward img{filter:unset;opacity:1}.bus-direction-indicator.bus-return img{filter:hue-rotate(180deg) saturate(520%) brightness(90%) contrast(150%);opacity:1}.bus-direction-indicator.bus-out img{filter:grayscale(100%) brightness(90%) contrast(120%);opacity:.7}