/* KARETA r63 — bottom dock consistency + manual route close polish.
   Fixes dock active state, old nav leakage, label compression and route shell spacing. */

:root{
  --r63-bg:#eef0f2;
  --r63-page:#fff;
  --r63-line:#e7e8eb;
  --r63-text:#080b10;
  --r63-muted:#6f747d;
  --r63-orange:#ffb000;
  --r63-orange2:#ff9800;
}

/* Dock is one component across all redesigned routes. */
body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  bottom:clamp(8px,2vw,24px) !important;
  width:min(calc(100vw - 18px), 430px) !important;
  max-width:430px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  z-index:90 !important;
}

body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-inner{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  width:100% !important;
  min-height:72px !important;
  height:72px !important;
  padding:8px 10px !important;
  border:1px solid rgba(15,23,42,.07) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.95) !important;
  box-shadow:0 14px 38px rgba(15,23,42,.14) !important;
  overflow:hidden !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
}

/* Hide accidental extra visual nodes in dock without deleting logic. */
body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-inner > *:not(.bnav-item):not([data-bnav-item]):not(button):not(a){
  display:none !important;
}

body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-item,
body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-item-r63{
  min-width:0 !important;
  width:auto !important;
  height:56px !important;
  min-height:56px !important;
  padding:4px 1px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  color:var(--r63-muted) !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  text-align:center !important;
  overflow:hidden !important;
}

body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-item.active,
body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-item.is-active{
  color:var(--r63-orange2) !important;
  background:transparent !important;
}

body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-icon-wrap{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  border:0 !important;
  background:transparent !important;
  color:currentColor !important;
  box-shadow:none !important;
}

body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav :where(svg,.bnav-svg){
  width:22px !important;
  height:22px !important;
  stroke:currentColor !important;
  color:currentColor !important;
}

body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-label{
  max-width:100% !important;
  font-size:10px !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
  color:currentColor !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Tablet / PC dock */
@media (min-width:768px){
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav{
    width:min(calc(100vw - 56px), 760px) !important;
    max-width:760px !important;
    bottom:clamp(18px,3vw,34px) !important;
  }
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-inner{
    height:78px !important;
    min-height:78px !important;
    padding:9px 28px !important;
    border-radius:20px !important;
  }
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-item{
    height:60px !important;
    min-height:60px !important;
  }
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-label{
    font-size:12px !important;
  }
}
@media (min-width:1200px){
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav{
    width:min(58vw, 860px) !important;
    max-width:860px !important;
  }
}

/* Route content must never be hidden by the dock. */
body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #app > .page{
  padding-bottom:calc(124px + env(safe-area-inset-bottom,0px)) !important;
}
@media (min-width:768px){
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #app > .page{
    padding-bottom:calc(138px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* Active routes should not show two competing page headers under old CSS. */
body.kr-route-myorders .spa-page-hero + .spa-page-hero,
body.kr-route-messages .spa-page-hero + .spa-page-hero,
body.kr-route-parts .spa-page-hero + .spa-page-hero{
  display:none !important;
}

/* r63 final visual cleanup for manual pages: same background frame. */
body:is(.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts)
:where(#hero-myorders,#hero-messages,#hero-parts,.kr-screen--masters,.cab-pane > .container,.parts-reference-r61-container,.msng-page-content,.myorders-reference-r57 .container){
  background:#fff !important;
  border-color:rgba(15,23,42,.055) !important;
}

/* Remove accidental large top gaps from previous route/page layers. */
body:is(.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts)
:where(.spa-content,.msng-page-content-wrap,.parts-reference-r61-content){
  margin-top:0 !important;
}

/* Modal and messenger panel stay over dock. */
body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts)
:where(.modal,.modal-overlay,.cmodal-overlay,.owiz-overlay,#messenger-panel,.services-app-sheet,.drawer){
  z-index:140 !important;
}

/* Last mobile check */
@media (max-width:430px){
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav{
    width:calc(100vw - 14px) !important;
    bottom:7px !important;
  }
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-inner{
    height:66px !important;
    min-height:66px !important;
    padding:6px 7px !important;
    border-radius:16px !important;
  }
  body:is(.kr-route-services,.kr-route-myorders,.kr-route-messages,.kr-route-masters,.kr-route-cabinet,.kr-route-parts) #bottom-nav .bnav-label{
    font-size:9.2px !important;
  }
}