/* ══ Адаптив ══
   Дизайн свёрстан инлайн-стилями под 1320px, поэтому переопределения идут
   через !important. Крупные шрифты и отступы уже плавные (clamp) — здесь
   только то, что требует смены раскладки. */

img,
video {
  max-width: 100%;
}

/* Планшет: карточки в ряд по четыре/три становятся парами */
@media (max-width: 900px) {
  .g-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Телефон: всё в одну колонку */
@media (max-width: 760px) {
  .g-stack,
  .g-cards {
    grid-template-columns: 1fr !important;
  }

  /* Шапка: логотип и «Позвонить» в строку, меню — второй строкой */
  .site-header {
    flex-wrap: wrap !important;
    gap: 12px !important;
    row-gap: 10px !important;
  }

  .site-nav {
    order: 3;
    width: 100%;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-top: 10px;
    border-top: 1px solid #e9e2d8;
  }

  /* Номер текстом прячем — рядом остаётся кнопка «Позвонить» */
  .site-header > div:last-of-type > a:first-child {
    display: none;
  }

  /* Картинки услуг: фиксированная высота из макета слишком велика */
  .g-stack > div[style*="height:280px"],
  .g-stack > div[style*="height:300px"] {
    height: 220px !important;
  }
}

@media (max-width: 420px) {
  .site-nav {
    font-size: 14px !important;
  }
}

/* ── Кнопка вызова чата ── */
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  background: #1b160f;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 16px 26px;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(27, 22, 15, .32);
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-fab:hover {
  background: #000;
}

.chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #8fbf7a;
  display: inline-block;
}

/* ── Панель чата ── */
.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 300;
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 520px;
  max-height: calc(100vh - 140px);
  background: #faf7f2;
  border: 1px solid #e9e2d8;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(27, 22, 15, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
}

.chat-panel[hidden] {
  display: none;
}

.chat-head {
  background: #1b160f;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Кружок с видео менеджера. Буква «М» — подложка на время загрузки. */
.chat-avatar {
  /* Видео вертикальное 720×1280, круг квадратный — часть кадра неизбежно
     обрезается. Сдвигаем окно вверх, иначе срезает голову.
     Меньше значение — выше кадр. */
  --avatar-focus: 15%;
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #f26f14;
  box-shadow: 0 0 0 2px rgba(242, 111, 20, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: 20px;
}

.chat-avatar video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--avatar-focus);
  opacity: 0;
  transition: opacity .4s ease;
}

.chat-avatar video.ready {
  opacity: 1;
}

.chat-head-text {
  flex: 1;
}

.chat-title {
  color: #faf7f2;
  font-weight: 800;
  font-size: 15px;
}

.chat-status {
  color: #8fbf7a;
  font-size: 12px;
  font-weight: 600;
}

.chat-x {
  background: none;
  border: 0;
  color: #a89b87;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}

.chat-x:hover {
  color: #faf7f2;
}

/* ── Лента сообщений ── */
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-row {
  display: flex;
}

.chat-row-user {
  justify-content: flex-end;
}

.chat-row-bot {
  justify-content: flex-start;
}

.bubble {
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px 15px;
}

.bubble-user {
  max-width: 86%;
  background: #f26f14;
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}

.bubble-bot {
  max-width: 88%;
  background: #fff;
  border: 1px solid #e9e2d8;
  color: #1b160f;
  border-radius: 14px 14px 14px 4px;
}

.bubble-typing {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #e9e2d8;
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  color: #8a7d68;
  font-size: 14px;
  font-weight: 600;
}

/* ── Быстрые вопросы ── */
.chat-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 18px 12px;
  flex-shrink: 0;
}

.chat-quick[hidden] {
  display: none;
}

.chat-quick button {
  background: #fff;
  border: 1px solid #e9e2d8;
  border-radius: 999px;
  padding: 9px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1b160f;
  cursor: pointer;
}

.chat-quick button:hover {
  border-color: #f26f14;
  color: #f26f14;
}

/* ── Поле ввода ── */
.chat-input {
  border-top: 1px solid #e9e2d8;
  background: #fff;
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-shrink: 0;
}

.chat-input textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid #e9e2d8;
  border-radius: 12px;
  padding: 12px 14px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #1b160f;
  background: #faf7f2;
  outline: none;
  max-height: 110px;
}

.chat-input textarea:focus {
  border-color: #f26f14;
}

.chat-input button {
  background: #f26f14;
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 13px 20px;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}

.chat-input button:hover:not(:disabled) {
  background: #d95f0a;
}

.chat-input button:disabled {
  opacity: .55;
  cursor: default;
}

@media (max-width: 640px) {
  .chat-panel {
    right: 12px;
    left: 12px;
    bottom: 88px;
    width: auto;
    max-width: none;
  }

  .chat-fab {
    right: 16px;
    bottom: 16px;
    padding: 14px 22px;
    font-size: 15px;
  }
}

/* ── Компактная форма обратного звонка ── */
.callback-card {
  max-width: 920px;
  margin: 0 auto 48px;
  padding: 24px;
  border: 1px solid #e9e2d8;
  border-radius: 18px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr);
  gap: 24px;
  align-items: end;
  font-family: 'Manrope', sans-serif;
  box-sizing: border-box;
}
.callback-card strong{display:block;font-family:'Unbounded',sans-serif;font-size:20px;margin-bottom:8px;color:#1b160f}
.callback-card span{display:block;color:#5c5344;line-height:1.5}
.callback-card label{display:block;font-weight:800;font-size:14px;margin-bottom:7px;color:#1b160f}
.callback-schedule{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(220px,1fr);gap:10px;margin-bottom:10px;align-items:end}
.callback-control label{margin-bottom:6px}
.callback-control select,.callback-control input{width:100%;height:48px;border:1px solid #cfc5b7;border-radius:10px;padding:0 14px;background:#fff;color:#1b160f;font:15px 'Manrope',sans-serif;box-sizing:border-box}
.callback-control select:focus-visible,.callback-control input:focus-visible{outline:3px solid rgba(242,111,20,.25);border-color:#f26f14}
.callback-row{display:flex;gap:10px}
.callback-row input{flex:1;min-width:0;height:48px;border:1px solid #cfc5b7;border-radius:10px;padding:0 14px;font:16px 'Manrope',sans-serif;box-sizing:border-box}
.callback-row input:focus-visible{outline:3px solid rgba(242,111,20,.25);border-color:#f26f14}
.callback-row button{min-height:48px;border:0;border-radius:10px;background:#f26f14;color:#fff;padding:0 20px;font:800 15px 'Manrope',sans-serif;cursor:pointer;transition:background .2s ease}
.callback-row button:hover:not(:disabled){background:#d95f0a}.callback-row button:disabled{opacity:.58;cursor:wait}
.callback-status{min-height:20px;margin:7px 0 0;font-size:14px}.callback-error{color:#b42318}.callback-success{color:#267247}
@media(max-width:760px){.callback-card{grid-template-columns:1fr;margin:0 16px 36px}.callback-schedule{grid-template-columns:1fr}.callback-row{flex-direction:column}.callback-row button{width:100%}}
@media(prefers-reduced-motion:reduce){.callback-row button{transition:none}}