/* Shared modal layout, independent of the home/practice/article template. */
#zayavka {
  --lead-space: 8px;
  --lead-viewport-height: 100vh;
  --lead-viewport-top: 0px;
  top: var(--lead-viewport-top);
  bottom: auto;
  height: var(--lead-viewport-height);
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: hidden;
  overscroll-behavior: contain;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (height: 100dvh) {
  #zayavka { --lead-viewport-height: 100dvh; }
}
#zayavka *, #zayavka *::before, #zayavka *::after { box-sizing: border-box; }
#zayavka .lead-modal__dialog {
  width: min(570px, 100%);
  max-width: 570px;
  min-width: 0;
  max-height: 100%;
  margin: auto;
  padding: 16px 18px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 12px;
}
#zayavka .lead-modal__close {
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  font: 28px/1 Arial, sans-serif;
  border: 0;
}
#zayavka .lead-modal__dialog h2 {
  max-width: calc(100% - 34px);
  margin: 0 0 var(--lead-space) !important;
  padding: 0;
  font-size: clamp(20px, 2.6vw, 24px) !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  word-spacing: normal;
  overflow-wrap: anywhere;
}
#zayavka .lead-modal__dialog h2::before,
#zayavka .lead-modal__dialog h2::after { display: none; }
#zayavka .lead-modal__sub {
  max-width: none;
  margin: 0 0 10px !important;
  padding: 0;
  font-size: 14px !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}
#zayavka #leadForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lead-space);
  margin: 0;
  padding: 0;
  min-width: 0;
}
#zayavka .lead-field { min-width: 0; margin: 0 !important; }
#zayavka .lead-field label {
  margin: 0 0 4px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}
#zayavka .lead-field :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 10px;
  font-size: 16px !important;
  line-height: 20px !important;
  letter-spacing: normal;
}
#zayavka .lead-field #leadSituation {
  height: 82px;
  min-height: 82px;
  resize: vertical;
}
#zayavka .lead-consent {
  display: flex;
  gap: 8px;
  margin: 0 !important;
  padding: 4px 0;
  min-height: 44px;
  font-size: 12px !important;
  line-height: 1.3 !important;
}
#zayavka .lead-consent span { min-width: 0; overflow-wrap: anywhere; }
#zayavka .lead-consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
#zayavka .lead-submit {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.25;
  white-space: normal;
}
#zayavka .lead-msg { margin: 0; padding: 10px; font-size: 14px; }
#zayavka :is(input, textarea, select, button, a):focus-visible {
  outline: 2px solid #9A8103;
  outline-offset: 2px;
}
@media (min-width: 600px) {
  #zayavka #leadForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #zayavka #leadForm > * { grid-column: 1 / -1; }
  #zayavka #leadForm > .lead-field--phone { grid-column: 1; }
  #zayavka #leadForm > .lead-field--email { grid-column: 2; }
}
@media (max-width: 430px), (max-height: 600px) {
  #zayavka .lead-modal__dialog { padding: 12px; }
  #zayavka .lead-modal__dialog h2 { font-size: 20px !important; }
}
/* Landscape phones use available width, rather than shrinking input text. */
@media (min-width: 700px) and (max-height: 500px) {
  #zayavka .lead-modal__dialog { width: min(800px, 100%); max-width: 800px; }
  #zayavka #leadForm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #zayavka #leadForm > .lead-field--name { grid-column: 1; grid-row: 1; }
  #zayavka #leadForm > .lead-field--phone { grid-column: 2; grid-row: 1; }
  #zayavka #leadForm > .lead-field--email { grid-column: 3; grid-row: 1; }
  #zayavka #leadForm > .lead-field--question { grid-column: 1 / 3; grid-row: 2 / 4; }
  #zayavka #leadForm > .lead-consent { grid-column: 3; grid-row: 2; }
  #zayavka #leadForm > .lead-submit { grid-column: 3; grid-row: 3; align-self: end; }
}