/* /vopros/ «Вопрос педиатру онлайн» (31.10): форма вопроса прямо под первым экраном.
   Никита 31.10: это не окошко посреди страницы, а та же форма в масштабе страницы; у врачей кружок «i» с профилем */
.vop-forma{scroll-margin-top:90px}
.vop-forma .v2-ask-vstroena{position:relative;max-width:none;margin:0;padding:22px 16px 18px;background:#f4f6f0;border:0;border-radius:20px}
.vop-forma .v2-ask-vstroena .v2-row{margin:22px -16px -18px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#f4f6f0;border-radius:0 0 20px 20px}
.vop-forma .v2-vrach{padding-right:40px}
.vop-forma .v2-vrach input{inset:0}
.v2-info{position:absolute;top:50%;right:10px;transform:translateY(-50%);z-index:1;display:grid;place-items:center;width:24px;height:24px;padding:0;border:1.5px solid #607055;border-radius:50%;background:#fff;color:#2e3b30;font:italic 600 13px/1 Georgia,"Times New Roman",serif;cursor:pointer}
.v2-info:hover,.v2-info:focus-visible{background:#2e3b30;color:#fff;outline:none}
.vop-info{width:min(560px,calc(100vw - 32px))}
.vop-info h2,.vop-info__t{margin:0 40px 12px 0;font-size:24px}
.vop-info .vrach-profil a{color:#2e3b30;text-decoration:underline;text-underline-offset:3px}
.vop-esli .op-sit{margin-top:28px}

@media(min-width:900px){
  .vop-forma .v2-ask-vstroena{padding:52px 60px 48px;border-radius:24px}
  .vop-forma .v2-ask-vstroena h2,.vop-forma .v2-ask-vstroena .v2-ask-h{margin-bottom:18px;font-size:46px;line-height:1.08;letter-spacing:-.035em}
  .vop-forma .v2-progress{max-width:560px;font-size:17px;margin-bottom:14px}
  .vop-forma .v2-progress i{height:6px}
  .vop-forma .field-label{margin-top:26px;font-size:18px}
  .vop-forma .v2-vrachi{gap:14px;margin:12px 0 10px}
  .vop-forma .v2-vrach{gap:14px;padding:14px 44px 14px 14px;border-radius:16px}
  .vop-forma .v2-vrach img{width:66px;height:78px;border-radius:12px}
  .vop-forma .v2-vrach b{font-size:17px}
  .vop-forma .v2-vrach small{margin-top:3px;font-size:14.5px;line-height:1.35}
  .vop-forma .v2-vrach--vse{padding:18px 22px}
  .vop-forma .v2-vrach__lica img{width:46px;height:46px;margin-left:-12px}
  .vop-forma .v2-vrach__lica img:first-child{margin-left:0}
  .v2-info{right:12px;width:28px;height:28px;font-size:15px}
  .vop-forma .v2-ask-modal input:not([type=radio]):not([type=checkbox]),.vop-forma .v2-ask-modal select{padding:16px 18px;font-size:18px!important;border-radius:12px}
  .vop-forma .v2-ask-modal textarea{min-height:150px;padding:16px 18px;font-size:18px!important;border-radius:12px}
  .vop-forma .v2-file{margin-top:18px}
  .vop-forma .v2-file__btn{height:52px;padding:0 20px;font-size:16.5px}
  .vop-forma .v2-file__name{font-size:15px}
  .vop-forma .modal-submit{width:auto;min-width:340px;height:58px;margin-top:28px;font-size:17px}
  .vop-forma .v2-formats{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
  .vop-forma .v2-format{padding:24px 24px 20px;border-radius:18px}
  .vop-forma .v2-format__top b,.vop-forma .v2-format__top em{font-size:22px}
  .vop-forma .v2-format ul{font-size:16px;gap:8px}
  .vop-forma .v2-check{font-size:16px}
  .vop-forma .v2-ask-vstroena .v2-row{position:static;max-width:560px;margin:30px 0 0;padding:0;background:none;box-shadow:none}
  .vop-forma .v2-row .button{height:58px;font-size:17px}
  .vop-esli .op-sit{grid-template-columns:1fr 1fr;column-gap:56px;row-gap:16px}
}
/* логотип сервиса у Виктории: сердце со стетоскопом, как в значке сайта */
.v2-osnov{display:inline-block;width:18px;height:18px;margin-left:6px;vertical-align:-3px;background:url(/favicon.svg) center/contain no-repeat}
/* Никита 31.10: сердечко у Виктории не сдвигает имя, стоит значком в углу фото; имена у всех врачей с одной высоты */
.vop-forma .v2-vrach{align-items:flex-start}
.vop-forma .v2-osnov--foto{position:absolute;left:46px;top:46px;width:22px;height:22px;margin:0;border-radius:50%;background-color:#fff;background-size:16px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
@media(min-width:900px){.vop-forma .v2-osnov--foto{left:66px;top:76px;width:28px;height:28px;background-size:20px}}
/* Никита 31.10: у Виктории длинная подпись, её карточка на две колонки; врачи по три в ряд, чтобы длинные слова вроде «дерматовенеролог» не заходили под кружок «i» */
.vop-forma .v2-vrach:has(input[value=pediatr]){grid-column:1/-1}
@media(min-width:900px){
  .vop-forma .v2-vrachi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vop-forma .v2-vrach:has(input[value=pediatr]) small{max-width:600px}
}
@media(min-width:1181px){
  .vop-forma .v2-vrachi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vop-forma .v2-vrach:has(input[value=pediatr]){grid-column:span 2}
}
/* Никита 31.10: фото на первом экране было выше текста, а до формы оставался большой разрыв; фото по высоте с текстом, форма ближе */
@media(min-width:900px){.op-vop .vop-forma{margin-top:80px}}
@media(min-width:1100px){
  .op-vop .op-hero{grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
  .op-vop .op-hero__t{max-width:570px}
}
@media(min-width:600px) and (max-width:900px){.op-vop .op-ekran{max-width:520px}}
/* Никита 31.10: первый экран прилипал к шапке */
.op-vop .op-hero{margin-top:32px}
@media(min-width:900px){.op-vop .op-hero{margin-top:64px}}
/* шаги формы не h2 (маркетинг 31.10): на странице тот же вид, что у заголовков блоков */
.vop-forma .v2-ask-vstroena .v2-ask-h{margin:0 0 26px;font-size:28px;line-height:1.12}
@media(min-width:900px){.vop-forma .v2-ask-vstroena .v2-ask-h{margin:0 0 18px;font-size:46px;line-height:1.08;letter-spacing:-.035em}}
/* Никита 31.10: шаги 2 и 3 окном на весь экран, страница под ним не видна и не прокручивается */
html.vop-oknom,html.vop-oknom body{overflow:hidden}
html.vop-oknom .vop-forma{position:fixed;inset:0;z-index:1000;margin:0!important;padding:0;max-width:none;background:#fff;overflow-y:auto;overscroll-behavior:contain}
html.vop-oknom .vop-forma .v2-ask-vstroena{min-height:100%;border-radius:0}
html.vop-oknom .vop-forma .v2-ask-vstroena .v2-row{border-radius:0}
@media(min-width:761px){
  html.vop-oknom .vop-forma{padding:40px 24px}
  html.vop-oknom .vop-forma .v2-ask-vstroena{max-width:860px;min-height:0;margin:0 auto;border-radius:24px}
}
/* Никита 03.11: где в форме только свои врачи страницы (лактостаз, дерматолог), карточки делят ширину поровну, по числу врачей */
@media(min-width:900px){
  .vop-forma .v2-vrachi--svoi .v2-vrach:has(input[value=pediatr]){grid-column:auto}
  .vop-forma .v2-vrachi--svoi.v2-vrachi--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vop-forma .v2-vrachi--svoi.v2-vrachi--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}