/* SERVICES-APP-PHONE-r38
   Scope: .services-app-page / .services-app-phone only.
   Goal: адаптация services-app-phone под телефоны, планшеты и wide preview без изменения JS/API flow.
*/
.services-app-page{
  --svc-phone-max:430px;
  --svc-pad-x:16px;
  --svc-card-radius:10px;
  --svc-gap:10px;
}
.services-app-phone{
  width:min(var(--svc-phone-max), 100%);
  max-width:var(--svc-phone-max);
  margin-inline:auto;
}
.services-app-page .services-app-phone{
  overflow-x:hidden;
}
.services-app-search input,
.services-app-textarea,
.services-app-field,
.services-app-submit,
.services-app-bottom-cta{
  min-font-size:16px;
}

/* Телефоны: полный экран без горизонтального переполнения */
@media (max-width:767px){
  .services-app-page{
    --svc-phone-max:100%;
    --svc-pad-x:clamp(12px,4vw,18px);
    padding-inline:0;
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    background:#fff;
  }
  .services-app-phone{
    width:100%;
    max-width:none;
    padding-left:var(--svc-pad-x);
    padding-right:var(--svc-pad-x);
    border-radius:0;
    box-shadow:none;
  }
  .services-app-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(8px,2.6vw,12px);
  }
  .services-app-tile{
    min-height:clamp(68px,20vw,84px);
    border-radius:12px;
  }
  .services-app-list-card,
  .services-app-shop-card,
  .services-app-selected-card,
  .services-app-field,
  .services-app-textarea{
    border-radius:12px;
  }
  .services-app-search,
  .services-app-search input,
  .services-app-search > span,
  .services-app-search button{
    height:42px;
  }
  .services-app-search input,
  .services-app-textarea{
    font-size:16px;
  }
  .services-app-submit,
  .services-app-bottom-cta{
    min-height:48px;
    height:auto;
    font-size:15px;
    border-radius:12px;
  }
}

/* Узкие телефоны: не давить карточки */
@media (max-width:374px){
  .services-app-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .services-app-tile{
    min-height:74px;
  }
  .services-app-home-head h1{
    font-size:20px;
  }
  .services-app-list-card{
    grid-template-columns:44px minmax(0,1fr) 18px;
    gap:10px;
    padding:10px;
  }
  .services-app-list-icon{width:42px;height:42px;}
}

/* Планшеты portrait: расширяем phone-контейнер, но сохраняем app-вид */
@media (min-width:768px){
  .services-app-page{
    --svc-phone-max:min(720px, calc(100vw - 48px));
    --svc-pad-x:clamp(24px,4vw,34px);
    min-height:calc(100dvh - var(--nav-h,0px));
    padding:clamp(18px,3vw,34px) 0 calc(98px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#fafafa 0%,#f2f3f5 100%);
  }
  .services-app-phone{
    width:var(--svc-phone-max);
    max-width:var(--svc-phone-max);
    padding:clamp(26px,3.4vw,34px) var(--svc-pad-x) clamp(28px,3vw,36px);
    border-radius:32px;
    border:1px solid rgba(15,23,42,.06);
    box-shadow:0 28px 90px rgba(15,23,42,.13);
  }
  .services-app-home-head{
    padding-bottom:18px;
  }
  .services-app-topline{
    margin-bottom:24px;
  }
  .services-app-logo{
    font-size:28px;
  }
  .services-app-icon-btn{
    width:44px;
    height:44px;
    border-radius:16px;
    background:#f5f5f5;
  }
  .services-app-home-head h1{
    max-width:560px;
    font-size:clamp(28px,4vw,38px);
    line-height:1.06;
  }
  .services-app-search{
    grid-template-columns:30px minmax(0,1fr) 52px;
    height:52px;
    margin:16px 0 24px;
  }
  .services-app-search > span,
  .services-app-search input,
  .services-app-search button{
    height:52px;
  }
  .services-app-search input{
    font-size:16px;
    padding-inline:14px;
  }
  .services-app-search button{
    width:52px;
    border-radius:16px;
  }
  .services-app-search > span{
    border-radius:16px 0 0 16px;
  }
  .services-app-search input{
    border-radius:0 16px 16px 0;
  }
  .services-app-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:26px;
  }
  .services-app-tile{
    min-height:112px;
    border-radius:20px;
    gap:12px;
    padding:16px 10px;
  }
  .services-app-tile__icon{
    width:42px;
    height:42px;
  }
  .services-app-tile svg{
    width:36px;
    height:36px;
  }
  .services-app-tile__label{
    font-size:14px;
    line-height:1.18;
  }
  .services-app-section-row{
    margin-bottom:14px;
  }
  .services-app-section-row b{
    font-size:18px;
  }
  .services-app-section-row button{
    font-size:14px;
  }
  .services-app-shop-card{
    min-height:104px;
    grid-template-columns:84px minmax(0,1fr) 34px;
    gap:16px;
    padding:14px;
    border-radius:20px;
  }
  .services-app-shop-photo{
    width:84px;
    height:84px;
    border-radius:16px;
  }
  .services-app-shop-body strong{font-size:18px;}
  .services-app-shop-body em{font-size:14px;}
  .services-app-shop-body small{font-size:13px;}
  .services-app-heart{font-size:28px;}
  .services-app-nav-head{
    height:52px;
    margin-bottom:18px;
    gap:16px;
  }
  .services-app-nav-head button{
    width:44px;
    height:44px;
    border-radius:16px;
    background:#f5f5f5;
  }
  .services-app-nav-head h1{
    font-size:26px;
  }
  .services-app-chips{
    gap:10px;
    padding-bottom:20px;
  }
  .services-app-chips button{
    border-radius:14px;
    font-size:14px;
    padding:11px 18px;
  }
  .services-app-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    padding-bottom:90px;
  }
  .services-app-list-card{
    min-height:108px;
    grid-template-columns:62px minmax(0,1fr) 24px;
    gap:14px;
    padding:16px;
    border-radius:20px;
  }
  .services-app-list-icon{
    width:58px;
    height:58px;
  }
  .services-app-list-icon svg{width:42px;height:42px;}
  .services-app-list-body strong{font-size:16px;}
  .services-app-list-body em{font-size:13px;}
  .services-app-list-body b{font-size:14px;}
  .services-app-bottom-cta,
  .services-app-submit{
    min-height:56px;
    height:auto;
    border-radius:16px;
    font-size:16px;
  }
  .services-app-bottom-cta{
    bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .services-app-form{
    gap:12px;
  }
  .services-app-form-label{
    font-size:14px;
    margin:10px 0 -4px;
  }
  .services-app-selected-card{
    min-height:82px;
    border-radius:18px;
    padding:16px;
  }
  .services-app-selected-card span{width:52px;height:52px;}
  .services-app-selected-card b{font-size:16px;}
  .services-app-selected-card em{font-size:15px;}
  .services-app-field{
    min-height:52px;
    height:auto;
    border-radius:16px;
    padding:0 16px;
  }
  .services-app-field span{font-size:15px;}
  .services-app-textarea{
    min-height:132px;
    border-radius:18px;
    padding:16px;
    font-size:16px;
  }
  .services-app-form-note{
    font-size:13px;
  }
}

/* Большие планшеты и desktop-preview: убираем узкую колонку, но не растягиваем бесконтрольно */
@media (min-width:1024px){
  .services-app-page{
    --svc-phone-max:min(1040px, calc(100vw - 72px));
    padding-top:clamp(28px,4vh,48px);
  }
  .services-app-phone{
    display:block;
    padding:36px 38px 40px;
    border-radius:36px;
  }
  .services-app-page--home .services-app-phone{
    display:grid;
    grid-template-columns:minmax(280px,.78fr) minmax(460px,1fr);
    grid-template-areas:
      "head grid"
      "search grid"
      "emergency nearby";
    column-gap:34px;
    row-gap:18px;
    align-items:start;
  }
  .services-app-page--home .services-app-home-head{grid-area:head;}
  .services-app-page--home .services-app-search{grid-area:search;margin:0;}
  .services-app-page--home .services-app-emergency-row{grid-area:emergency;}
  .services-app-page--home .services-app-grid{grid-area:grid;margin:0;grid-template-columns:repeat(3,minmax(0,1fr));}
  .services-app-page--home .services-app-empty{grid-column:2;}
  .services-app-page--home .services-app-nearby{grid-area:nearby;margin-top:0;}
  .services-app-page--category .services-app-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .services-app-page--request .services-app-phone{
    max-width:min(860px, calc(100vw - 72px));
  }
  .services-app-page--request .services-app-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 16px;
  }
  .services-app-page--request .services-app-form-label,
  .services-app-page--request .services-app-selected-card,
  .services-app-page--request .services-app-textarea,
  .services-app-page--request .services-app-submit,
  .services-app-page--request .services-app-form-note{
    grid-column:1 / -1;
  }
  .services-app-page--confirm .services-app-phone{
    max-width:min(760px, calc(100vw - 72px));
  }
}

/* Landscape tablets / low height: меньше вертикальных пустот */
@media (min-width:768px) and (max-height:820px){
  .services-app-page{
    padding-top:14px;
  }
  .services-app-phone{
    padding-top:22px;
    padding-bottom:24px;
  }
  .services-app-home-head h1{
    font-size:clamp(24px,3vw,32px);
  }
  .services-app-grid{
    gap:10px;
  }
  .services-app-tile{
    min-height:92px;
  }
  .services-app-list-card{
    min-height:92px;
  }
  .services-app-textarea{
    min-height:104px;
  }
}