/* ALIWAY MAPS — Windows Visual Acceptance V1
   Presentation only. The approved desktop reference is the visual authority.
   No provider, GPS, network, persistence, Guardian or Product Flow behavior lives here. */

:root{
  --visual-shell:#020912;
  --visual-panel:#041526;
  --visual-panel-2:#071d31;
  --visual-line:#0d4c7b;
  --visual-line-hot:#149dff;
  --visual-blue:#0b83ff;
  --visual-cyan:#42c8ff;
  --visual-text:#f3f8fd;
  --visual-muted:#9ab3c8;
}

/* Global language selector — single legacy mutation owner remains #languageSelect/app.js. */
.language-control{
  min-width:74px;height:40px;display:flex;align-items:center;gap:3px;
  border:1px solid #164a72;border-radius:11px;background:#03131f;padding-inline:8px 3px;
}
.language-globe{font-size:17px;line-height:1;color:#e9f7ff;opacity:.92}
.language-control select{
  min-width:44px;height:36px;padding:0 18px 0 5px!important;border:0!important;
  background:transparent!important;color:#f5fbff;font-weight:750;letter-spacing:.04em;
  appearance:auto;
}
.language-control select:focus-visible{outline:2px solid #6bc9ff;outline-offset:2px}

@media(min-width:1181px){
  body{background:var(--visual-shell);overflow:hidden}
  .app-shell{
    height:100vh;min-height:720px;
    grid-template-columns:178px minmax(0,1fr) 320px;
    grid-template-rows:70px minmax(0,1fr);
    gap:5px;padding:5px;
  }
  .topbar{
    min-height:70px;grid-template-columns:178px minmax(430px,1fr) auto;
    gap:10px;padding:7px 9px;border-radius:13px;
    background:rgba(2,12,22,.985);border-color:#0d4d7b;
    box-shadow:0 0 0 1px rgba(22,128,205,.08),0 10px 28px rgba(0,0,0,.35);
  }
  .brand{gap:7px;padding:0 2px;min-width:0}
  .brand-mark{
    width:55px;height:55px;flex:0 0 55px;border:0;color:transparent;font-size:0;
    background:#04111f url("../assets/approved-brand-mark-v1.png") center/cover no-repeat;
    box-shadow:0 0 22px rgba(24,149,255,.35);
  }
  .brand-copy strong{font-size:18px;line-height:1.05;letter-spacing:.02em}
  .brand-copy small{font-size:8px;line-height:1.1;color:#a9bed0;margin-top:2px}

  .search-wrap{grid-template-columns:minmax(0,1fr) 112px;gap:7px}
  .search-wrap input{height:46px;border-radius:12px;background:#041827;border-color:#176092;padding-inline-start:42px;padding-inline-end:88px;font-size:12px}
  .search-icon{top:13px;font-size:18px}.filter-btn{top:5px;inset-inline-end:120px}
  .search-btn{height:46px;min-width:112px;border-radius:12px;font-size:12px}
  .top-actions{gap:7px;min-width:max-content}
  .top-actions>.icon-btn,.top-actions>.ghost,.top-actions>.primary{height:40px;border-radius:11px;padding:9px 13px}
  .top-actions .trial{background:linear-gradient(135deg,#0c92ff,#10bcff);color:#fff}
  .pro-nav-launch{order:20;border:1px solid #2baeff!important;background:linear-gradient(180deg,#0d4f84,#07345a)!important;color:#e9f8ff!important;box-shadow:0 0 15px rgba(20,156,255,.20)}

  .sidebar,.detail-panel{height:calc(100vh - 80px);border-radius:12px;background:rgba(2,12,22,.985);border-color:#0d4b77;box-shadow:none}
  .sidebar{padding:5px}.sidebar nav{gap:1px}.nav-link{min-height:35px;padding:7px 8px;border-radius:8px}.nav-link b{font-size:10px}
  .nav-link.active{background:linear-gradient(90deg,#0d70d6,#0a91ff);box-shadow:inset 0 0 0 1px rgba(116,213,255,.24),0 0 14px rgba(0,130,255,.16)}
  .pro-card{margin-top:8px;padding:9px;border-radius:10px}.pro-card p,.pro-card li{font-size:8px}

  .main-stage{height:calc(100vh - 80px);gap:5px;overflow:hidden}
  .transport-strip{min-height:55px;padding:5px;border-radius:10px;background:rgba(2,13,24,.99);border-color:#0e4a74;box-shadow:none}
  .transport-mode{min-width:63px;height:44px;padding:5px;border-radius:8px;background:#041929;border-color:#123f63;font-size:8px}
  .transport-mode.active{background:linear-gradient(180deg,#159cff,#0875ef);border-color:#61d3ff;box-shadow:0 0 16px rgba(0,140,255,.28)}
  .mode-icon{font-size:15px;margin-bottom:1px}

  #view-home.active{display:grid;grid-template-rows:minmax(0,1fr) 100px;gap:5px;min-height:0;height:calc(100% - 60px)}
  .map-stage{
    min-height:0;height:100%;max-height:none;border-radius:10px;border-color:#0d4b78;
    background:#03111d;box-shadow:0 0 0 1px rgba(15,115,190,.08),0 12px 30px rgba(0,0,0,.28);
  }
  .map-root{
    background:#031424 url("../assets/approved-map-hero-v1.jpg") center center/cover no-repeat;
  }
  .map-root .prototype-world-map{display:none!important}
  .map-headline{display:none!important}
  .map-controls{inset-inline-start:12px;inset-inline-end:auto;top:12px;gap:6px}
  .map-controls button{width:38px;height:38px;border-radius:9px;background:rgba(3,18,31,.94);border-color:#1a6597;box-shadow:0 4px 16px rgba(0,0,0,.25)}
  .map-provider-badge{inset-inline-start:12px;inset-inline-end:auto;bottom:12px;max-width:230px;border-radius:9px;background:rgba(3,18,31,.93);border-color:#17618f;color:#ddecf8}

  /* Approved desktop puts route planning in the right rail, not over the map bottom. */
  #view-home.active .route-composer{
    position:fixed;z-index:30;inset-inline-end:10px;left:auto;right:auto;top:268px;bottom:auto;transform:none;
    width:300px;max-height:calc(100vh - 285px);overflow:auto;
    padding:10px;border-radius:11px;background:rgba(2,14,25,.985);border-color:#128ad1;
    box-shadow:0 12px 30px rgba(0,0,0,.40),0 0 0 1px rgba(18,138,209,.12);
  }
  #view-home.active .route-fields{display:flex;flex-direction:column;gap:7px}
  #view-home.active .route-fields label{min-height:43px;border-radius:8px;background:#061d31!important;border:1px solid #175b88!important;color:#eaf6ff!important}
  #view-home.active .route-fields input{color:#edf7ff!important;padding:10px 7px}
  #view-home.active .route-fields input::placeholder{color:#a7bfd2}
  #view-home.active .swap-btn{width:38px;height:34px;align-self:flex-end;border-radius:8px;background:#071c2d}
  #view-home.active .route-fields .primary{width:100%;min-height:42px;border-radius:8px}
  #view-home.active .route-options{gap:5px;margin-top:8px}.chip{padding:5px 8px;font-size:9px}
  #view-home.active .provider-state{font-size:9px;padding:9px;margin-top:8px}

  .service-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0;min-height:0}
  .service-card{min-height:95px;height:95px;padding:8px;border-radius:10px;background:linear-gradient(180deg,#061d31,#041422);border-color:#0e4b76}
  .service-card h3{font-size:10px}.service-card p{font-size:8px}.service-icon{width:30px;height:30px;border-radius:8px}

  .detail-panel{padding:6px;overflow:hidden}
  .detail-panel .context-card{height:166px;margin-bottom:7px;border-radius:10px;background:linear-gradient(180deg,rgba(11,49,79,.94),rgba(4,20,34,.98));border-color:#0e4c78;overflow:hidden}
  .detail-panel .context-card h2{font-size:15px;line-height:1.15;margin:7px 0}.detail-panel .context-card p{font-size:8px}
  .app-shell:has(#view-home.active) .detail-panel .provider-summary,
  .app-shell:has(#view-home.active) .detail-panel .integrity-note{visibility:hidden}

  /* PRO NAV owns the central + right content surface while open. */
  .app-shell:has(.main-stage.pro-nav-open){grid-template-columns:178px minmax(0,1fr)}
  .app-shell:has(.main-stage.pro-nav-open) .detail-panel{display:none!important}
  .app-shell:has(.main-stage.pro-nav-open) .main-stage{grid-column:2/-1;min-width:0}
  .main-stage.pro-nav-open{height:calc(100vh - 80px);max-height:calc(100vh - 80px);overflow:hidden}
  .main-stage.pro-nav-open>.pro-nav-browser{height:100%;max-height:100%;padding:0}
  .pro-nav-browser-shell{border-radius:12px;border-color:#0f5a8b;background:#031321;box-shadow:0 12px 30px rgba(0,0,0,.32)}
  .pro-nav-browser-head{padding:15px 17px;background:#041727;border-bottom-color:#0e4d78}
  .pro-nav-browser-head h2{font-size:22px}.pro-nav-browser-head p{font-size:11px;color:#9fb7ca}
  .pro-nav-browser-body{padding:16px;gap:12px;background:linear-gradient(180deg,#031321,#02101b)}
  .pro-nav-grid{grid-template-columns:repeat(3,minmax(190px,1fr));gap:9px}
  .pro-nav-card{border-radius:10px;padding:11px;background:#061c2f;border-color:#0e4b77}
}

@media(min-width:761px) and (max-width:1180px){
  .language-control{min-width:68px}.language-control select{min-width:39px}
  .map-root{background:#031424 url("../assets/approved-map-hero-v1.jpg") center/cover no-repeat}
  .map-root .prototype-world-map{display:none!important}.map-headline{display:none}
  .main-stage.pro-nav-open>.transport-strip,.main-stage.pro-nav-open>.view{display:none!important}
}

@media(max-width:760px){
  .language-control{height:38px;min-width:66px;padding-inline:6px 2px}
  .language-globe{font-size:15px}.language-control select{height:34px;min-width:38px;font-size:11px}
  /* Mobile keeps its separately approved composition; only the visual map source is aligned. */
  .map-root{background:#031424 url("../assets/approved-map-hero-v1.jpg") center/cover no-repeat}
  .map-root .prototype-world-map{display:none!important}
}

html[dir="rtl"] .language-control select{padding:0 5px 0 18px!important}
html[dir="rtl"] #view-home.active .route-composer{text-align:start}