/* KARETA r62e — #services grid/search/button/logo cleanup.
   Scope: https://kareta.kz/#services only.
   Base: r62d. No service worker/API/DB/business logic changes. */

body.kareta-page-services,
body.kr-route-services,
#app.kr-route-services{
  background:#eef0f2 !important;
}

.services-app-page--home{
  background:#eef0f2 !important;
  min-height:100dvh !important;
  overflow-x:hidden !important;
}

/* Main phone/tablet shell */
.services-app-page--home .services-app-phone{
  width:min(100%, 1040px) !important;
  max-width:1040px !important;
  margin:0 auto !important;
  padding:clamp(16px,3vw,34px) !important;
  border-radius:clamp(0px,2vw,28px) !important;
  background:#fff !important;
  box-shadow:0 16px 42px rgba(15,23,42,.08) !important;
  border:1px solid rgba(15,23,42,.055) !important;
  overflow:hidden !important;
}

/* Header/logo */
.services-app-page--home .services-app-home-head{
  padding:0 !important;
  margin:0 0 16px !important;
}

.services-app-page--home .services-app-topline{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-width:0 !important;
  margin:0 0 clamp(16px,2.5vw,26px) !important;
}

.services-app-page--home .services-app-logo,
.services-app-page--home .services-app-logo span{
  display:none !important;
}

.services-app-page--home .services-app-logo-img{
  display:block !important;
  width:auto !important;
  height:clamp(46px,6vw,66px) !important;
  max-width:min(220px,65vw) !important;
  object-fit:contain !important;
  object-position:left center !important;
  flex:0 1 auto !important;
}

.services-app-page--home .services-app-icon-btn{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border:1px solid #e7e8eb !important;
  border-radius:14px !important;
  background:#f4f4f5 !important;
  color:#111318 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.services-app-page--home .services-app-icon-btn svg{
  width:21px !important;
  height:21px !important;
  stroke:currentColor !important;
}

/* Title */
.services-app-page--home .services-app-home-head h1{
  max-width:620px !important;
  margin:0 !important;
  color:#080b10 !important;
  font-size:clamp(34px,6.2vw,68px) !important;
  line-height:.96 !important;
  font-weight:950 !important;
  letter-spacing:-.075em !important;
}

/* Search: fixed grid, no floating/overlap from older CSS */
.services-app-page--home .services-app-search{
  width:100% !important;
  max-width:520px !important;
  height:50px !important;
  margin:clamp(18px,3vw,30px) 0 clamp(16px,2.6vw,24px) !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) 50px !important;
  align-items:center !important;
  gap:0 !important;
  border:1px solid #e7e8eb !important;
  border-radius:16px !important;
  background:#f4f4f5 !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

.services-app-page--home .services-app-search > span{
  width:42px !important;
  height:50px !important;
  min-width:42px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#9ca3af !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.services-app-page--home .services-app-search svg{
  width:18px !important;
  height:18px !important;
  stroke:currentColor !important;
  fill:none !important;
}

.services-app-page--home .services-app-search input{
  min-width:0 !important;
  width:100% !important;
  height:50px !important;
  margin:0 !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#111318 !important;
  font-size:15px !important;
  font-weight:750 !important;
  box-shadow:none !important;
}

.services-app-page--home .services-app-search input::placeholder{
  color:#8b929d !important;
  opacity:1 !important;
}

.services-app-page--home .services-app-search button{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:#ffb000 !important;
  color:#111 !important;
  box-shadow:0 10px 22px rgba(255,176,0,.20) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Emergency buttons */
.services-app-page--home .services-app-emergency-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 0 14px !important;
}

.services-app-page--home .services-app-emergency-row button{
  min-width:0 !important;
  min-height:42px !important;
  padding:0 9px !important;
  border:1px solid #e7e8eb !important;
  border-radius:14px !important;
  background:#fff !important;
  color:#111318 !important;
  box-shadow:0 6px 16px rgba(15,23,42,.035) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  overflow:hidden !important;
}

.services-app-page--home .services-app-emergency-row button span{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.services-app-page--home .services-app-emergency-row button b{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

/* 3x3 services grid with no overlap */
.services-app-page--home .services-app-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 0 clamp(18px,3vw,30px) !important;
  align-items:stretch !important;
}

.services-app-page--home .services-app-grid .services-app-tile{
  min-width:0 !important;
  width:100% !important;
  min-height:clamp(92px,13vw,132px) !important;
  padding:clamp(10px,1.8vw,16px) 8px !important;
  border:0 !important;
  border-radius:16px !important;
  background:#f4f4f5 !important;
  color:#111318 !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(8px,1.4vw,12px) !important;
  text-align:center !important;
  overflow:hidden !important;
  position:relative !important;
}

.services-app-page--home .services-app-grid .services-app-tile__icon{
  width:clamp(38px,5.8vw,54px) !important;
  height:clamp(38px,5.8vw,54px) !important;
  min-width:clamp(38px,5.8vw,54px) !important;
  min-height:clamp(38px,5.8vw,54px) !important;
  border-radius:15px !important;
  background:#fff !important;
  color:#111318 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 6px 16px rgba(15,23,42,.035) !important;
  overflow:hidden !important;
}

.services-app-page--home .services-app-grid .services-app-tile:nth-child(9) .services-app-tile__icon{
  background:#ffb000 !important;
  color:#111 !important;
  box-shadow:0 10px 22px rgba(255,176,0,.20) !important;
}

.services-app-page--home .services-app-grid .services-app-tile__icon svg{
  width:clamp(21px,3vw,28px) !important;
  height:clamp(21px,3vw,28px) !important;
  stroke:currentColor !important;
  fill:none !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.services-app-page--home .services-app-grid .services-app-tile__label{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  color:#111318 !important;
  font-size:clamp(11px,1.7vw,15px) !important;
  line-height:1.12 !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  text-align:center !important;
  white-space:normal !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  text-overflow:ellipsis !important;
}

/* Nearby block */
.services-app-page--home .services-app-nearby{
  min-width:0 !important;
  margin-top:0 !important;
}

.services-app-page--home .services-app-section-row{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin:0 0 10px !important;
}

.services-app-page--home .services-app-section-row b{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#080b10 !important;
  font-size:18px !important;
  font-weight:950 !important;
}

.services-app-page--home .services-app-section-row button{
  flex:0 0 auto !important;
  min-height:34px !important;
  padding:0 10px !important;
  border:1px solid #e7e8eb !important;
  border-radius:12px !important;
  background:#fff !important;
  color:#111318 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

/* Tablet layout */
@media (min-width:768px){
  .services-app-page--home{
    padding:clamp(18px,3vw,38px) clamp(18px,3vw,48px) calc(116px + env(safe-area-inset-bottom,0px)) !important;
  }

  .services-app-page--home .services-app-phone{
    min-height:640px !important;
  }

  .services-app-page--home .services-app-home-head{
    display:block !important;
  }

  .services-app-page--home .services-app-grid{
    gap:14px !important;
  }

  .services-app-page--home .services-app-grid .services-app-tile{
    border-radius:18px !important;
  }
}

/* Phone layout */
@media (max-width:767px){
  .services-app-page--home{
    padding:0 0 calc(90px + env(safe-area-inset-bottom,0px)) !important;
    background:#fff !important;
  }

  .services-app-page--home .services-app-phone{
    width:100% !important;
    min-height:100dvh !important;
    padding:16px 14px 22px !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .services-app-page--home .services-app-logo-img{
    height:44px !important;
    max-width:170px !important;
  }

  .services-app-page--home .services-app-home-head h1{
    font-size:clamp(32px,9.5vw,42px) !important;
  }

  .services-app-page--home .services-app-grid{
    gap:9px !important;
  }

  .services-app-page--home .services-app-grid .services-app-tile{
    min-height:94px !important;
    padding:10px 6px !important;
  }
}

/* Very narrow phones */
@media (max-width:360px){
  .services-app-page--home .services-app-phone{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .services-app-page--home .services-app-search{
    grid-template-columns:36px minmax(0,1fr) 44px !important;
    height:46px !important;
  }

  .services-app-page--home .services-app-search > span,
  .services-app-page--home .services-app-search input,
  .services-app-page--home .services-app-search button{
    height:46px !important;
  }

  .services-app-page--home .services-app-search button{
    width:44px !important;
    min-width:44px !important;
  }

  .services-app-page--home .services-app-emergency-row{
    gap:7px !important;
  }

  .services-app-page--home .services-app-emergency-row button b{
    font-size:11px !important;
  }

  .services-app-page--home .services-app-grid{
    gap:7px !important;
  }

  .services-app-page--home .services-app-grid .services-app-tile{
    min-height:88px !important;
    border-radius:14px !important;
  }

  .services-app-page--home .services-app-grid .services-app-tile__label{
    font-size:10.5px !important;
  }
}