/* ALIWAY MAPS — Desktop Visual Re-alignment V2
   Visual authority: docs/design-reference/approved-web-reference.png
   Presentation only. No provider, routing, GPS, persistence, Guardian or Product Flow semantics live here. */

:root{
  --v2-shell:#020912;
  --v2-panel:#031322;
  --v2-panel-2:#061b2e;
  --v2-panel-3:#08243a;
  --v2-line:#0d4f7e;
  --v2-line-hot:#149dff;
  --v2-blue:#087dff;
  --v2-cyan:#15c8ff;
  --v2-text:#f4f8fd;
  --v2-muted:#9cb4c8;
  --v2-top:64px;
  --v2-footer:62px;
  --v2-side:176px;
  --v2-rail:336px;
  --v2-gap:6px;
  --v2-pad:6px;
}

/* Desktop is the visual-acceptance target. Mobile keeps its separately approved composition. */
@media (min-width:1181px){
  html,body{height:100%;overflow:hidden;background:var(--v2-shell)}
  body{font-size:14px}

  .app-shell{
    width:100vw;height:100vh;min-height:760px;
    display:grid;
    grid-template-columns:var(--v2-side) minmax(0,1fr) var(--v2-rail);
    grid-template-rows:var(--v2-top) minmax(0,1fr) var(--v2-footer);
    gap:var(--v2-gap);padding:var(--v2-pad);
    background:radial-gradient(circle at 52% -8%,rgba(5,101,190,.16),transparent 34%),#020912;
  }

  /* TOP BAR — broad brand area, centered search, compact global actions like the approved reference. */
  .topbar{
    grid-column:1/-1;grid-row:1;
    min-height:var(--v2-top);height:var(--v2-top);
    display:grid;grid-template-columns:300px minmax(440px,1fr) auto;align-items:center;
    gap:12px;padding:6px 10px;border:1px solid var(--v2-line);border-radius:12px;
    background:linear-gradient(180deg,rgba(3,18,31,.99),rgba(2,12,22,.99));
    box-shadow:0 8px 28px rgba(0,0,0,.34);backdrop-filter:none;z-index:50;
  }
  .brand{height:52px;gap:10px;padding:0 3px;min-width:0}
  .brand-mark{width:50px;height:50px;flex:0 0 50px;border:0;color:transparent;font-size:0;background:transparent url("../assets/approved-brand-mark-v1.png") center/contain no-repeat;box-shadow:0 0 20px rgba(20,145,255,.26)}
  .brand-copy strong{font-size:21px;line-height:1;letter-spacing:.02em;color:#f8fbff}
  .brand-copy small{font-size:9px;margin-top:3px;color:#b9cbd9;white-space:nowrap}

  .search-wrap{height:46px;grid-template-columns:minmax(0,1fr) 120px;gap:7px;align-items:stretch}
  .search-wrap input{height:46px;border-radius:12px;padding:0 92px 0 43px;background:#041827;border:1px solid #17628f;color:#eff9ff;font-size:12px;box-shadow:inset 0 0 0 1px rgba(12,98,157,.10)}
  .search-wrap input::placeholder{color:#a7b9c8}
  .search-icon{top:12px;inset-inline-start:14px;font-size:20px;color:#d9e8f4}
  .filter-btn{top:5px;inset-inline-end:128px;width:36px;height:36px;padding:0;border-radius:8px;color:#a7c1d6}
  .search-btn{height:46px;min-width:120px;border-radius:12px;background:linear-gradient(180deg,#149fff,#0878ee);box-shadow:0 0 14px rgba(8,132,255,.28)}

  .top-actions{gap:7px;align-items:center;min-width:max-content;white-space:nowrap}
  .top-actions>.icon-btn,.top-actions>.ghost,.top-actions>.primary{height:40px;padding:0 13px;border-radius:10px}
  .top-actions .trial{background:linear-gradient(180deg,#10b9ff,#0b91ff);color:#021321;border:1px solid #52d4ff;font-weight:850}
  .language-control{height:40px;min-width:80px;gap:5px;padding:0 6px 0 8px;border:1px solid #164c75;border-radius:10px;background:#03131f}
  .language-globe{font-size:16px;filter:saturate(.8)}
  .language-control select{height:36px;min-width:44px;padding:0 16px 0 3px!important;font-size:11px;font-weight:800;color:#f3f9fd;background:transparent!important;border:0!important}
  .pro-nav-launch{height:40px!important;padding:0 13px!important;border-radius:10px!important;border:1px solid #2baeff!important;background:linear-gradient(180deg,#0b5f9e,#08385e)!important;color:#f2fbff!important;font-size:11px!important;font-weight:800!important;box-shadow:0 0 13px rgba(20,156,255,.20)!important}

  /* LEFT NAV — slim, dense, high-contrast reference rail. */
  .sidebar{grid-column:1;grid-row:2;height:auto;min-height:0;padding:5px;border-radius:11px;border:1px solid var(--v2-line);background:rgba(2,12,22,.99);box-shadow:none;overflow:auto;scrollbar-width:thin}
  .sidebar nav{gap:1px}.nav-link{min-height:35px;padding:7px 8px;border-radius:8px;gap:8px;color:#c5d4df}.nav-link b{font-size:10px;font-weight:650}.nav-link.active{background:linear-gradient(90deg,#0b68c4,#0b8eff);color:#fff;box-shadow:inset 0 0 0 1px rgba(112,207,255,.20)}
  .pro-card{margin-top:8px;padding:10px;border-radius:10px;background:linear-gradient(180deg,#2a2411,#141718);border-color:#8d6c21}.pro-title{font-size:11px}.pro-card p,.pro-card li{font-size:8px;line-height:1.55}.pro-card ul{margin:6px 0 0;padding-inline-start:15px}

  /* CENTER — transport strip, hero map, product information cards. */
  .main-stage{grid-column:2;grid-row:2;height:auto;min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
  .transport-strip{flex:0 0 56px;height:56px;min-height:56px;padding:5px;gap:4px;border-radius:10px;border:1px solid var(--v2-line);background:#02101d;box-shadow:none;overflow-x:auto;overflow-y:hidden}
  .transport-mode{min-width:64px;height:44px;padding:4px 5px;border-radius:8px;border:1px solid #123e61;background:#041929;color:#d9e6ef;font-size:8px;line-height:1.1}.transport-mode.active{background:linear-gradient(180deg,#159cff,#0875ef);border-color:#63d4ff;box-shadow:0 0 14px rgba(0,140,255,.24)}.mode-icon{font-size:15px;margin-bottom:2px}

  #view-home.active{display:grid;grid-template-rows:minmax(390px,1fr) 210px;gap:6px;min-height:0;height:calc(100% - 62px);overflow:hidden}
  .map-stage{height:100%;min-height:390px;max-height:none;border-radius:10px;border:1px solid #0d507e;background:#03111d;box-shadow:0 8px 28px rgba(0,0,0,.30);overflow:hidden}
  .map-root{background:#031424 url("../assets/approved-map-hero-v2.png") center center/cover no-repeat!important}
  .map-root .prototype-world-map{display:none!important}
  .map-headline{display:none!important}
  /* The approved reference map crop already contains decorative map controls. Avoid a second visual stack. */
  .map-controls{display:none!important}
  .map-provider-badge{inset-inline-start:12px;inset-inline-end:auto;bottom:12px;max-width:260px;padding:8px 10px;border-radius:8px;background:rgba(2,13,23,.94);border:1px solid #126296;color:#cfe2f1;font-size:9px;box-shadow:0 5px 18px rgba(0,0,0,.28)}

  .service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;min-height:0;height:210px}
  .service-card{height:210px;min-height:0;padding:10px;border-radius:10px;border:1px solid #0d4c78;background:linear-gradient(180deg,#061d31,#03131f);box-shadow:none;overflow:hidden}
  .service-card h3{font-size:11px;margin:2px 0 6px}.service-card p{font-size:8px;line-height:1.45}.service-icon{width:30px;height:30px;border-radius:8px}

  /* RIGHT RAIL — destination/context card + real existing route composer, visually aligned with the reference. */
  .detail-panel{grid-column:3;grid-row:2;height:auto;min-height:0;padding:6px;border-radius:11px;border:1px solid var(--v2-line);background:#020e19;box-shadow:none;overflow:hidden;position:relative}
  .visual-destination-card{border:1px solid #0d4f7e;border-radius:10px;overflow:hidden;background:#041523;box-shadow:0 6px 20px rgba(0,0,0,.24)}
  .visual-destination-media{height:112px;background:#03111d url("../assets/approved-destination-visual-v2.png") center/cover no-repeat;border-bottom:1px solid #0d4f7e}
  .visual-destination-card .context-card{height:78px;margin:0;padding:10px 11px;border:0;border-radius:0;background:linear-gradient(180deg,#061c2e,#041421);overflow:hidden}
  .visual-destination-card .context-card .eyebrow{font-size:8px}.visual-destination-card .context-card h2{font-size:14px;line-height:1.18;margin:5px 0}.visual-destination-card .context-card p{font-size:8px;line-height:1.45;margin:0;color:#9fb6c8}
  .detail-panel>.provider-summary,.detail-panel>.integrity-note{display:none!important}

  .visual-route-tabbar{height:46px;margin-top:6px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;border:1px solid #0d4f7e;border-radius:9px;background:#031421;overflow:hidden}
  .visual-route-tabbar span{height:44px;display:grid;place-items:center;color:#a7bdce;font-size:14px;border-inline-end:1px solid rgba(13,79,126,.45);position:relative}.visual-route-tabbar span:last-child{border-inline-end:0}.visual-route-tabbar span.active{color:#20c6ff;background:#051c2e}.visual-route-tabbar span.active::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:2px;background:#12c8ff;border-radius:99px}

  #view-home.active .route-composer{
    position:fixed;z-index:38;
    inset-inline-end:12px;left:auto;right:auto;top:calc(var(--v2-pad) + var(--v2-top) + var(--v2-gap) + 246px);bottom:auto;transform:none;
    width:306px;max-height:calc(100vh - var(--v2-footer) - 318px);overflow:auto;
    padding:10px;border-radius:10px;border:1px solid #0d79bc;background:rgba(2,14,25,.992);backdrop-filter:none;box-shadow:0 10px 26px rgba(0,0,0,.38);
  }
  #view-home.active #routeComposerTitle{position:static!important;width:auto!important;height:auto!important;margin:0 0 8px!important;clip:auto!important;white-space:normal!important;overflow:visible!important;font-size:12px!important;color:#f3f8fd!important;letter-spacing:.01em}
  #view-home.active .route-fields{display:flex;flex-direction:column;gap:7px}
  #view-home.active .route-fields label{min-height:42px;padding-inline:9px;border-radius:8px;border:1px solid #155986;background:#061c30;color:#eff8ff}
  #view-home.active .route-fields input{height:40px;padding:8px 6px;color:#eff8ff;font-size:10px}.route-fields input::placeholder{color:#9fb5c7}
  #view-home.active .swap-btn{width:36px;height:32px;align-self:flex-end;border-radius:8px;border:1px solid #164e77;background:#061827}
  #view-home.active .route-fields .primary{width:100%;height:42px;border-radius:8px;background:linear-gradient(180deg,#159fff,#0876ed)}
  #view-home.active .route-options{gap:5px;margin-top:8px}.chip{padding:5px 7px;font-size:8px}
  #view-home.active .provider-state{margin-top:8px;padding:9px;border-radius:8px;font-size:8px;line-height:1.4}

  /* FOOTER — same compositional weight as the approved reference, without unverified market/store claims. */
  .visual-footer{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:320px 1fr 260px;align-items:center;gap:16px;min-height:var(--v2-footer);padding:5px 14px;border:1px solid var(--v2-line);border-radius:10px;background:#020d18;color:#eaf5fc;box-shadow:0 -4px 18px rgba(0,0,0,.22)}
  .visual-footer-brand{display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}.visual-footer-mark{grid-row:1/3;width:42px;height:42px;background:url("../assets/approved-brand-mark-v1.png") center/contain no-repeat}.visual-footer-brand strong{font-size:17px}.visual-footer-brand small{font-size:8px;color:#a7bdce}
  .visual-footer-scope{display:flex;justify-content:center;gap:10px;align-items:center;font-size:9px;color:#c3d4e0}.visual-footer-scope i{font-style:normal;color:#35aefe}.visual-footer-status{justify-self:end;padding:8px 11px;border:1px solid #164e76;border-radius:8px;color:#9fc5df;font-size:9px;background:#031522}

  /* PRO NAV — isolated, full central+rail workspace; never overlays Home map/route composition. */
  .app-shell:has(.main-stage.pro-nav-open){grid-template-columns:var(--v2-side) minmax(0,1fr);grid-template-rows:var(--v2-top) minmax(0,1fr) var(--v2-footer)}
  .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;grid-row:2;height:auto!important;max-height:none!important;min-height:0!important;overflow:hidden}
  .main-stage.pro-nav-open>.transport-strip,.main-stage.pro-nav-open>.view{display:none!important}
  .main-stage.pro-nav-open>.pro-nav-browser{display:flex!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0;padding:0;overflow:hidden}
  .pro-nav-browser-shell{height:100%;border-radius:11px;border:1px solid #0f5b8d;background:#031321;overflow:hidden}
  .pro-nav-browser-head{padding:13px 16px;background:#041727;border-bottom:1px solid #0e4e79}.pro-nav-browser-head h2{font-size:20px}.pro-nav-browser-head p{font-size:10px}
  .pro-nav-browser-body{padding:14px;gap:11px;background:linear-gradient(180deg,#031321,#020f1a);overflow:auto;scrollbar-gutter:stable}.pro-nav-grid{grid-template-columns:repeat(3,minmax(180px,1fr));gap:8px}.pro-nav-card{padding:10px;border-radius:9px}

  /* Hidden app views continue to use existing visual system without changing behavior. */
  .content-view{min-height:0;height:100%;border-radius:11px}

  /* RTL preserves the reference composition logically. */
  html[dir="rtl"] .app-shell{grid-template-columns:var(--v2-rail) minmax(0,1fr) var(--v2-side)}
  html[dir="rtl"] .sidebar{grid-column:3}html[dir="rtl"] .main-stage{grid-column:2}html[dir="rtl"] .detail-panel{grid-column:1}
  html[dir="rtl"] .topbar{grid-template-columns:300px minmax(440px,1fr) auto}
  html[dir="rtl"] .visual-footer{grid-template-columns:260px 1fr 320px}
  html[dir="rtl"] .visual-footer-brand{grid-column:3}html[dir="rtl"] .visual-footer-status{grid-column:1;grid-row:1;justify-self:start}
}

/* Preserve current DE/EN/AR translation foundation visually without pretending full-world language coverage exists yet. */
.language-control[data-global-language-foundation="pending"]::after{display:none}