/* KARETA UI-r52 — app reference background + client home/services + floating dock.
   Scope: client-facing app shell, services-app-page, #bottom-nav.
   Rules: CSS-only visual layer; no API/DB/route changes. */
:root{
  --r52-bg:#eef0f2;
  --r52-page:#ffffff;
  --r52-soft:#f3f3f4;
  --r52-soft-2:#f8f8f9;
  --r52-line:#e7e8eb;
  --r52-text:#090b10;
  --r52-muted:#707782;
  --r52-orange:#ffb000;
  --r52-orange-2:#ff9800;
  --r52-radius:18px;
  --r52-radius-lg:24px;
  --r52-shadow:0 16px 42px rgba(15,23,42,.08);
  --r52-shadow-soft:0 8px 24px rgba(15,23,42,.055);
}

/* Global client background resonance */
body[data-role="client"],
body.kareta-page-services,
body.kareta-page-home{
  background:var(--r52-bg) !important;
}

/* Services home as white app card like the reference */
.services-app-page{
  background:var(--r52-bg) !important;
  color:var(--r52-text) !important;
  padding:clamp(10px,2vw,24px) clamp(10px,2vw,24px) calc(98px + env(safe-area-inset-bottom,0px)) !important;
  min-height:100dvh !important;
}
.services-app-phone{
  width:min(100%, 1040px) !important;
  max-width:1040px !important;
  min-height:calc(100dvh - 130px) !important;
  margin:0 auto !important;
  padding:clamp(18px,3vw,36px) !important;
  background:var(--r52-page) !important;
  border:1px solid rgba(15,23,42,.05) !important;
  border-radius:var(--r52-radius-lg) !important;
  box-shadow:var(--r52-shadow) !important;
  overflow:hidden !important;
}
.services-app-home-head{
  padding:0 !important;
}
.services-app-topline{
  margin:0 0 clamp(20px,3vw,34px) !important;
}
.services-app-logo{
  font-size:clamp(21px,2.2vw,28px) !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
}
.services-app-logo span{
  color:var(--r52-orange) !important;
}
.services-app-icon-btn{
  background:var(--r52-soft) !important;
  border:1px solid rgba(15,23,42,.04) !important;
  color:#0f1720 !important;
  box-shadow:none !important;
}
.services-app-title{
  max-width:370px !important;
  margin:0 !important;
  color:var(--r52-text) !important;
  font-size:clamp(42px,6.2vw,70px) !important;
  line-height:.94 !important;
  font-weight:950 !important;
  letter-spacing:-.07em !important;
}
.services-app-search{
  margin-top:clamp(20px,3vw,38px) !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 52px !important;
  gap:8px !important;
  max-width:430px !important;
}
.services-app-search input{
  height:52px !important;
  border:0 !important;
  border-radius:12px !important;
  background:var(--r52-soft) !important;
  color:var(--r52-text) !important;
  font-size:15px !important;
  padding:0 16px 0 42px !important;
}
.services-app-search button{
  width:52px !important;
  height:52px !important;
  border-radius:12px !important;
  background:var(--r52-orange) !important;
  color:#111 !important;
  border:0 !important;
  box-shadow:0 10px 22px rgba(255,176,0,.22) !important;
}

/* Service category tiles */
.services-app-tile-grid,
.services-app-categories,
.services-app-home-grid{
  gap:14px !important;
}
.services-app-tile,
.services-app-cat-card,
.services-app-category-card{
  min-height:118px !important;
  border:0 !important;
  border-radius:14px !important;
  background:var(--r52-soft) !important;
  color:var(--r52-text) !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:column !important;
  gap:12px !important;
  text-align:center !important;
  overflow:hidden !important;
}
.services-app-tile :where(.services-app-tile-ico,.services-app-tile-icon,svg),
.services-app-cat-card :where(.services-app-tile-ico,.services-app-tile-icon,svg){
  color:#171a20 !important;
  stroke:#171a20 !important;
  fill:none !important;
}
.services-app-tile-title,
.services-app-tile b,
.services-app-cat-title{
  color:#111318 !important;
  font-size:15px !important;
  font-weight:900 !important;
  line-height:1.18 !important;
  letter-spacing:-.03em !important;
  text-align:center !important;
}

/* Quick buttons: SOS / tow / lawyer */
.services-app-quick,
.services-app-actions,
.services-app-home-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:clamp(22px,3vw,36px) !important;
}
.services-app-quick button,
.services-app-action-btn,
.services-app-home-actions button{
  min-height:40px !important;
  min-width:128px !important;
  padding:0 16px !important;
  border-radius:10px !important;
  border:1px solid var(--r52-line) !important;
  background:#fff !important;
  color:#161a22 !important;
  box-shadow:0 6px 16px rgba(15,23,42,.035) !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}

/* Nearby card/list */
.services-app-nearby,
.services-app-near,
.services-app-shops,
.services-app-list{
  min-width:0 !important;
}
.services-app-section-title,
.services-app-nearby-title,
.services-app-list-title{
  color:var(--r52-text) !important;
  font-size:clamp(18px,2vw,22px) !important;
  font-weight:900 !important;
  letter-spacing:-.04em !important;
}
.services-app-shop-card,
.services-app-list-card,
.services-app-nearby-card{
  min-height:96px !important;
  border-radius:16px !important;
  border:1px solid var(--r52-line) !important;
  background:#fff !important;
  box-shadow:var(--r52-shadow-soft) !important;
  padding:14px !important;
  overflow:hidden !important;
}
.services-app-shop-card :where(h3,b,strong),
.services-app-list-card :where(h3,b,strong){
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  color:var(--r52-text) !important;
}
.services-app-shop-card :where(p,small,span),
.services-app-list-card :where(p,small,span){
  color:var(--r52-muted) !important;
  line-height:1.28 !important;
}

/* Tablet / desktop composition */
@media (min-width:768px){
  .services-app-page{
    padding:clamp(18px,3vw,34px) clamp(18px,3vw,44px) calc(112px + env(safe-area-inset-bottom,0px)) !important;
  }
  .services-app-phone{
    border-radius:28px !important;
    padding:clamp(26px,3.2vw,42px) !important;
  }
  .services-app-home-head{
    display:grid !important;
    grid-template-columns:minmax(280px, .85fr) minmax(360px, 1.15fr) !important;
    align-items:start !important;
    gap:clamp(28px,4vw,62px) !important;
  }
  .services-app-title{
    max-width:420px !important;
  }
  .services-app-search{
    max-width:470px !important;
  }
  .services-app-tile-grid,
  .services-app-categories,
  .services-app-home-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  .services-app-tile,
  .services-app-cat-card,
  .services-app-category-card{
    min-height:128px !important;
  }
  .services-app-home-main,
  .services-app-main,
  .services-app-body{
    margin-top:clamp(28px,4vw,48px) !important;
  }
}

@media (min-width:1024px){
  .services-app-phone{
    max-width:1120px !important;
    min-height:650px !important;
  }
  .services-app-title{
    font-size:68px !important;
  }
  .services-app-tile-grid,
  .services-app-categories,
  .services-app-home-grid{
    gap:16px !important;
  }
  .services-app-tile,
  .services-app-cat-card,
  .services-app-category-card{
    min-height:132px !important;
  }
}

/* Phones remain app-like and full width */
@media (max-width:767px){
  .services-app-page{
    padding:0 0 calc(92px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important;
  }
  .services-app-phone{
    width:100% !important;
    max-width:none !important;
    min-height:100dvh !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:18px 16px 22px !important;
  }
  .services-app-title{
    font-size:42px !important;
    max-width:310px !important;
  }
  .services-app-search{
    grid-template-columns:minmax(0,1fr) 46px !important;
    max-width:none !important;
  }
  .services-app-search input,
  .services-app-search button{
    height:46px !important;
  }
  .services-app-tile-grid,
  .services-app-categories,
  .services-app-home-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .services-app-tile,
  .services-app-cat-card,
  .services-app-category-card{
    min-height:104px !important;
  }
}

/* Bottom nav: floating dock like reference */
#bottom-nav{
  display:flex !important;
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:clamp(10px,2vw,24px) !important;
  transform:translateX(-50%) !important;
  width:min(calc(100vw - 28px), 430px) !important;
  max-width:430px !important;
  min-height:auto !important;
  height:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:var(--z-bottom-nav,80) !important;
}
#bottom-nav .bnav-inner{
  width:100% !important;
  min-height:72px !important;
  height:72px !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:0 !important;
  padding:8px 12px !important;
  border:1px solid rgba(15,23,42,.06) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 14px 38px rgba(15,23,42,.12) !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.2) !important;
  overflow:hidden !important;
}
#bottom-nav .bnav-item{
  min-width:0 !important;
  width:auto !important;
  min-height:54px !important;
  height:54px !important;
  padding:4px 2px !important;
  border-radius:12px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  color:#6f747d !important;
  text-align:center !important;
  overflow:hidden !important;
}
#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;
  box-shadow:none !important;
  color:currentColor !important;
}
#bottom-nav .bnav-svg{
  width:22px !important;
  height:22px !important;
  color:currentColor !important;
  stroke:currentColor !important;
}
#bottom-nav .bnav-icon{
  font-size:21px !important;
  line-height:1 !important;
  color:currentColor !important;
}
#bottom-nav .bnav-label{
  max-width:100% !important;
  color:currentColor !important;
  font-size:10.5px !important;
  line-height:1.05 !important;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#bottom-nav .bnav-item.active,
#bottom-nav .bnav-item.is-active{
  color:var(--r52-orange-2) !important;
  background:transparent !important;
}
#bottom-nav .bnav-item.active .bnav-icon-wrap,
#bottom-nav .bnav-item.is-active .bnav-icon-wrap{
  color:var(--r52-orange-2) !important;
  background:transparent !important;
  box-shadow:none !important;
}
#bottom-nav .bnav-badge{
  top:2px !important;
  right:10px !important;
  background:var(--r52-orange) !important;
  color:#111 !important;
}

/* Tablet/PC dock width */
@media (min-width:768px){
  #bottom-nav{
    width:min(74vw, 760px) !important;
    max-width:760px !important;
    bottom:clamp(20px,3vw,34px) !important;
  }
  #bottom-nav .bnav-inner{
    min-height:78px !important;
    height:78px !important;
    border-radius:18px !important;
    padding:9px 28px !important;
  }
  #bottom-nav .bnav-item{
    min-height:60px !important;
    height:60px !important;
  }
  #bottom-nav .bnav-svg{
    width:24px !important;
    height:24px !important;
  }
  #bottom-nav .bnav-label{
    font-size:12px !important;
  }
}
@media (min-width:1024px){
  #bottom-nav{
    width:min(66vw, 820px) !important;
    max-width:820px !important;
  }
  #bottom-nav .bnav-inner{
    border-radius:20px !important;
    padding-inline:34px !important;
  }
}
@media (min-width:1280px){
  #bottom-nav{
    width:min(58vw, 860px) !important;
    max-width:860px !important;
  }
}

/* If a role has more than 5 items, keep layout safe without overlap. */
#bottom-nav .bnav-inner[data-count="6"],
#bottom-nav .bnav-inner[data-count="7"]{
  grid-template-columns:repeat(auto-fit,minmax(64px,1fr)) !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
#bottom-nav .bnav-inner[data-count="6"]::-webkit-scrollbar,
#bottom-nav .bnav-inner[data-count="7"]::-webkit-scrollbar{display:none !important;}

/* Content breathing room above floating dock */
#app{
  padding-bottom:calc(98px + env(safe-area-inset-bottom,0px)) !important;
}
@media (min-width:768px){
  #app{
    padding-bottom:calc(118px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* Text-overlap guards for reference pass */
.services-app-page :where(h1,h2,h3,p,span,small,b,strong,button,label),
#bottom-nav :where(span,div,button){
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}