/* Mashwar v2.2 — design language shared between launch, garage, and route selection */
#garage-panel,#routes-panel{direction:rtl;text-align:right;padding:clamp(9px,2.5vh,24px);background:linear-gradient(130deg,rgba(4,18,30,.94),rgba(7,27,40,.84));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
#garage-panel .garage-shell,#routes-panel .routes-shell{width:min(960px,100%);height:min(94dvh,900px);max-height:none;padding:0;overflow:hidden;display:flex;flex-direction:column;flex-shrink:1;background:#0a2233;border:1px solid #92bdc442;border-radius:26px;box-shadow:0 24px 90px #00121fc7}
#garage-panel .garage-header,#routes-panel .routes-header{flex-shrink:0;padding:18px 23px 15px;background:linear-gradient(110deg,#103247,#0a2639);border-bottom:1px solid #ffffff16;display:flex;align-items:center;justify-content:space-between;gap:15px}
#garage-panel .screen22-eyebrow,#routes-panel .screen22-eyebrow{display:flex;gap:7px;align-items:center;color:#9de9d9;font-size:10px;font-weight:750;margin-bottom:7px}
#garage-panel .screen22-dot,#routes-panel .screen22-dot{width:7px;height:7px;border-radius:100%;background:#86e7cb;box-shadow:0 0 7px #83dbb1aa}
#garage-panel .garage-header h2,#routes-panel .routes-header h2{font-size:clamp(25px,4vw,32px);line-height:1.28;letter-spacing:-.4px;margin:0 0 5px;color:#f8fcff}
#garage-panel .garage-header h2 em,#routes-panel .routes-header h2 em{font-style:normal;color:#ffd28f}
#garage-panel .garage-header p,#routes-panel .routes-header p{font-size:11px;color:#aec7d0;margin:0;line-height:1.7}
#garage-panel .garage-wallet{border:1px solid #f4cb8d44;border-radius:15px;padding:9px 14px;background:#254354;color:#ffdc9c;min-width:91px}
#garage-panel .garage-wallet b{font-size:22px;line-height:1.15}
#garage-panel .garage-close,#routes-panel .routes-close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;background:#214354;border:1px solid #8caeb93e;border-radius:13px;font-size:18px;color:#fff;padding:0}
#garage-panel .garage-layout{display:flex;flex-direction:column;gap:17px;min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 23px 25px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#garage-panel .garage-fleet-wrap{min-width:0;flex-shrink:0}
#garage-panel .screen22-section-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
#garage-panel .screen22-section-label strong{font-size:14px;color:#f4fafc}
#garage-panel .screen22-section-label small{font-size:10px;color:#9db6c2}
#garage-panel .garage-fleet{display:flex;flex-direction:row;gap:10px;overflow-x:auto;overflow-y:hidden;padding:2px 1px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#355b6b transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#garage-panel .fleet-car{display:flex;flex-direction:column;gap:2px;justify-content:space-between;text-align:right;align-items:stretch;flex:0 0 182px;width:182px;min-width:0;min-height:157px;padding:11px;border-radius:17px;background:linear-gradient(155deg,#163849,#112f40);border:1px solid #4c788344;scroll-snap-align:start;transition:background .15s,transform .15s,border-color .15s}
#garage-panel .fleet-car.active{background:linear-gradient(165deg,#215360,#164351);border-color:#ffd398;box-shadow:inset 0 0 0 1px #f5c88141,0 6px 18px #0003}
#garage-panel .fleet-picture{height:66px;flex-shrink:0;display:grid;place-items:center;width:100%;overflow:hidden}
#garage-panel .fleet-picture svg{width:100%;height:70px;max-height:70px}
#garage-panel .fleet-info{width:100%}
#garage-panel .fleet-info strong{font-size:12px;line-height:1.4;color:#fbfeff;display:block}
#garage-panel .fleet-info small{display:none}
#garage-panel .fleet-info .fleet-tag{font-size:10px;font-weight:700;color:#cde4e6;margin-top:4px}
#garage-panel .fleet-car.active .fleet-tag{color:#ffdb9b}
#garage-panel .garage-detail{min-width:0;padding:16px;border-radius:19px;border:1px solid #ffffff1a;background:#0f2e40}
#garage-panel .garage-preview{height:178px;border-radius:16px;background:radial-gradient(ellipse at 50% 65%,#37647b,#152e42 70%);border:1px solid #64859730;overflow:hidden}
#garage-panel .garage-preview .n17-garage-hero{max-height:170px;object-fit:contain}
#garage-panel .garage-preview svg{max-height:168px;width:min(100%,530px)}
#garage-panel .garage-car-head{margin:15px 0;align-items:start}
#garage-panel .garage-car-head h3{font-size:21px;line-height:1.35}
#garage-panel .garage-car-head p{font-size:11px;line-height:1.7}
#garage-panel .garage-current{white-space:nowrap;background:#204b50;border-color:#4fba9d55;color:#b8efdb;font-size:10px;padding:7px 9px}
#garage-panel .performance-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:19px}
#garage-panel .perf-item{border-radius:13px;padding:12px;background:#173c4d;border:1px solid #ffffff0e;min-width:0}
#garage-panel .perf-track{height:6px;background:#0b2737}
#garage-panel .perf-track i{background:linear-gradient(90deg,#6ee4c3,#ffd693)}
#garage-panel .upgrade-heading{margin:13px 0 10px}
#garage-panel .upgrade-heading strong{font-size:14px;color:#f6fcff}
#garage-panel .upgrade-row{background:#133648;border-color:#ffffff18;border-radius:14px;padding:12px}
#garage-panel .upgrade-row button{border-radius:11px;min-height:40px;background:#f5c991;font-size:12px}
#garage-panel .upgrade-row button:not(:disabled):active{filter:brightness(.95)}
#garage-panel .garage-actionbar{flex-shrink:0;display:flex;gap:11px;align-items:center;padding:12px 22px calc(13px + env(safe-area-inset-bottom,0px));border-top:1px solid #7ea3af2b;background:linear-gradient(90deg,#0d3040,#0b2638)}
#garage-panel .garage-action-hint{flex:1;font-size:11px;color:#e9f5f5;line-height:1.4}
#garage-panel .garage-action-hint small{display:block;color:#9cbdc9;font-size:10px;margin-top:4px}
#garage-panel .garage-actionbar .garage-select{width:auto;min-width:162px;min-height:44px;background:linear-gradient(115deg,#fed69a,#e9a86a);color:#122b3a;border:0;border-radius:13px;padding:10px 16px;font-size:13px;font-weight:850;white-space:nowrap}
#garage-panel .garage-actionbar .garage-select:disabled{background:#365561;color:#d0e7e5;opacity:1}
#garage-panel .garage-actionbar .garage-return{min-height:43px;background:#163b4d;border-color:#75a3ae42;white-space:nowrap;font-size:12px;padding:9px 14px}
#garage-panel .garage-footer{padding:6px 22px;background:#0b2536;border-top:1px solid #ffffff0c;max-height:39px;min-height:0;overflow:auto}
#garage-panel .garage-footer span{font-size:9px;color:#7d9eaf;line-height:1.25}
#garage-panel :is(.fleet-car,.garage-select,.garage-close,.garage-return,.upgrade-row button):focus-visible,#routes-panel :is(button):focus-visible{outline:2px solid #ffd89b;outline-offset:2px}
/* Route modal */
#routes-panel .routes-shell{width:min(780px,100%)}
#routes-panel .routes-header{padding-bottom:16px}
#routes-panel .route-current{margin:15px 19px 12px;padding:11px 13px;border:1px solid #4c8b8170;background:linear-gradient(100deg,#214b4d,#17404a);border-radius:14px;display:flex;gap:11px;align-items:center;flex-shrink:0}
#routes-panel .route-current-mark{display:grid;place-items:center;flex:0 0 35px;height:35px;background:#2d6866;border-radius:11px;font-size:23px;color:#ffd292}
#routes-panel .route-current>div{flex:1}
#routes-panel .route-current small{display:block;color:#a1c9c4;font-size:10px}
#routes-panel .route-current strong{font-size:14px;color:white;display:block;margin-top:2px}
#routes-panel .route-current-lanes{white-space:nowrap;color:#ffda9f;font-size:11px;font-weight:700;background:#173d47;border-radius:9px;padding:6px 9px}
#routes-panel .route-filters{display:flex;gap:8px;overflow-x:auto;flex-shrink:0;padding:1px 19px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#routes-panel .route-filter{white-space:nowrap;flex-shrink:0;padding:9px 12px;min-height:37px;border-radius:999px;border:1px solid #3f6c795d;background:#12364a;color:#bed5de;font-size:11px;font-weight:700}
#routes-panel .route-filter.active{background:#f4ca94;color:#132d3b;border-color:#f4ca94}
#routes-panel .route-list-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:1px 19px 15px;-webkit-overflow-scrolling:touch}
#routes-panel .route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
#routes-panel .route-card{display:flex;gap:12px;align-items:center;position:relative;min-height:134px;border-radius:17px;background:#143648;border:1px solid #5d7d843e;padding:12px;text-align:right;color:#eef7fa;overflow:hidden;transition:border .12s,background .12s,transform .12s}
#routes-panel .route-card.selected{border-color:#ffd393;background:#214957;box-shadow:inset 0 0 0 1px #ffd39344}
#routes-panel .route-card[hidden]{display:none}
#routes-panel .route-scene{position:relative;width:101px;height:96px;flex:0 0 101px;overflow:hidden;isolation:isolate;display:block;border-radius:13px;background:linear-gradient(#668b9a 0 45%,#bda996 45% 100%)}
#routes-panel .route-scene-building{position:absolute;bottom:20%;width:100%;height:38%;background:repeating-linear-gradient(90deg,#6b6f71 0 15px,#b9a295 15px 31px,#819394 31px 47px,#dbc2a9 47px 63px);clip-path:polygon(0 20%,15% 20%,15% 0,33% 0,33% 30%,55% 30%,55% 10%,75% 10%,75% 38%,100% 38%,100% 100%,0 100%)}
#routes-panel .route-scene-road{position:absolute;bottom:-21%;left:25%;width:51%;height:76%;transform:perspective(80px) rotateX(30deg);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);background:#303c49;border-left:2px solid #f4ce96;border-right:2px solid #f4ce96}
#routes-panel .route-scene-marker{position:absolute;bottom:0;left:49%;height:52%;width:2px;background:repeating-linear-gradient(0deg,transparent 0 11px,#e9e5c5 11px 20px);transform:perspective(60px) rotateX(25deg);opacity:.9}
#routes-panel .route-card-ring .route-scene,#routes-panel .route-card-axis26 .route-scene{background:linear-gradient(#5b8395 0 65%,#859295 65% 100%)}
#routes-panel .route-card-ring .route-scene-building,#routes-panel .route-card-axis26 .route-scene-building{height:17%;bottom:18%;opacity:.7}
#routes-panel .route-card-faisal .route-scene,#routes-panel .route-card-haram .route-scene{background:linear-gradient(#b2a89c 0 53%,#be9987 53% 100%)}
#routes-panel .route-card-corniche .route-scene{background:linear-gradient(#739ca9 0 59%,#257993 59% 100%)}
#routes-panel .route-card-corniche .route-scene-building{height:15%;background:#24778d;bottom:7%;opacity:.8}
#routes-panel .route-card-service .route-scene{background:linear-gradient(#9caeaa 0 52%,#b6b1a2 52% 100%)}
#routes-panel .route-info{display:block;min-width:0;flex:1}
#routes-panel .route-info .route-category{font-size:10px;color:#a6d9d2;display:block;margin-bottom:6px;font-weight:600}
#routes-panel .route-info strong{font-size:14px;line-height:1.3;display:block;color:#fff;margin:0 0 5px}
#routes-panel .route-info small{font-size:10px;color:#a8bdc9;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#routes-panel .route-info em{font-style:normal;color:#ffce90;font-size:10px;font-weight:700;display:block;margin-top:5px}
#routes-panel .route-check{display:none;position:absolute;top:9px;left:9px;width:23px;height:23px;align-items:center;justify-content:center;border-radius:9px;background:#f6cd8c;color:#18384a;font-size:14px;font-weight:900}
#routes-panel .route-card.selected .route-check{display:flex}
#routes-panel .routes-foot{font-size:10px;color:#87a3b0;line-height:1.5;margin:15px 4px 0}
#routes-panel .routes-actionbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:9px;border-top:1px solid #ffffff18;padding:13px 19px calc(14px + env(safe-area-inset-bottom,0px));background:#0c283a}
#routes-panel .routes-actionbar>span{font-size:11px;color:#acc6d0}
#routes-panel #routes-done{border:0;border-radius:12px;background:linear-gradient(120deg,#f8d29a,#e9aa6b);padding:11px 23px;min-height:43px;color:#173446;font-weight:900;white-space:nowrap}
@media(max-width:710px){
  #garage-panel .garage-shell,#routes-panel .routes-shell{height:calc(100dvh - 17px);max-height:none;border-radius:21px}
  #garage-panel,#routes-panel{padding:8px}
  #garage-panel .garage-layout{padding:15px 14px 20px;gap:11px}
  #garage-panel .garage-header,#routes-panel .routes-header{padding:14px 15px 12px}
  #garage-panel .garage-header h2,#routes-panel .routes-header h2{font-size:25px}
  #garage-panel .garage-header p,#routes-panel .routes-header p{font-size:10px}
  #garage-panel .garage-fleet{gap:8px}
  #garage-panel .fleet-car{flex-basis:142px;width:142px;min-height:137px;padding:9px}
  #garage-panel .fleet-picture{height:58px}
  #garage-panel .garage-preview{height:142px}
  #garage-panel .garage-preview svg{max-height:136px}
  #garage-panel .garage-preview .n17-garage-hero{max-height:140px}
  #garage-panel .garage-detail{padding:11px}
  #garage-panel .garage-car-head h3{font-size:18px}
  #garage-panel .garage-car-head p{font-size:10px}
  #garage-panel .performance-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #garage-panel .perf-item{padding:9px}
  #garage-panel .upgrade-row{padding:10px}
  #garage-panel .garage-actionbar{padding:10px 13px calc(10px + env(safe-area-inset-bottom,0px));gap:7px}
  #garage-panel .garage-action-hint{display:none}
  #garage-panel .garage-actionbar .garage-select{flex:1;min-width:0}
  #garage-panel .garage-footer{max-height:22px;padding:3px 13px}
  #routes-panel .route-grid{grid-template-columns:1fr;gap:8px}
  #routes-panel .route-card{min-height:116px;padding:9px;gap:11px}
  #routes-panel .route-scene{width:105px;height:96px;flex-basis:105px}
  #routes-panel .route-current{margin:10px 12px 8px}
  #routes-panel .route-filters{padding:0 12px 12px}
  #routes-panel .route-list-scroll{padding:1px 12px 13px}
  #routes-panel .routes-actionbar{padding:11px 12px calc(10px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){#garage-panel .garage-wallet{min-width:68px;padding:6px 8px}#garage-panel .garage-header p{display:none}#garage-panel .garage-actionbar .garage-return{padding:8px 9px}#routes-panel .route-scene{flex-basis:85px;width:85px}#routes-panel .route-card{gap:8px}}
@media(prefers-reduced-motion:reduce){#garage-panel *,#routes-panel *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}