/* ============================================================
   DESKTOP BOOKING FORM — .sec-booking/.booking-*, shared by
   index.html and about.html verbatim. Responsive behavior lives
   here too since it doesn't diverge between the two pages.
   ============================================================ */
/* width:100% нужен из-за align-items:center у колонки-обёртки страницы —
   без него секция сжималась по содержимому и «плавала» по ширине */
.sec-booking { padding: 0; width: 100%; background: var(--c-bg); }
/* когда .wrap висит на самой секции, горизонтальные поля страницы даёт
   она сама; на главной и в статьях .wrap лежит внутри — там дублировать
   отступ нельзя, поэтому правило привязано к сочетанию классов */
.sec-booking.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.booking-inner { display: flex; gap: clamp(48px, 8vw, 156px); align-items: flex-end; }
.booking-col--form { flex: 1 1 0; min-width: 0; max-width: 768px; display: flex; flex-direction: column; gap: clamp(40px, 4vw, 64px); }
.booking-col--map { flex: 0 0 clamp(320px, 33vw, 636px); display: flex; flex-direction: column; gap: 24px; }
.booking-text { display: flex; flex-direction: column; gap: 48px; }
.booking-heading { font-size: clamp(28px, 3.4vw, 64px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; margin: 0; font-style: normal; }
.booking-desc { font-size: clamp(15px, 1.04vw, 20px); font-weight: 300; color: var(--c-text); letter-spacing: -0.04em; line-height: 1.2; font-style: normal; max-width: 758px; }
.booking-form { flex: 1; display: flex; flex-direction: column; gap: 0; }
.booking-row { display: flex; gap: clamp(16px, 1.25vw, 24px); }
.contacts-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--c-text); }
.contacts-bar p, .contacts-bar a { font-size: clamp(14px, 0.94vw, 18px); font-weight: 400; color: var(--c-text); letter-spacing: -0.02em; line-height: 1.2; font-style: normal; text-decoration: none; }
.contacts-bar a:hover { opacity: 0.75; }
.booking-map { display: block; position: relative; border-radius: 16px; overflow: hidden; height: clamp(240px, 24vw, 340px); }
.booking-map iframe { width: 100%; height: 100%; border: none; display: block; }
.booking-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(10px, 0.83vw, 16px); }
.booking-field label { font-size: clamp(13px, 0.83vw, 16px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; display: block; font-style: normal; padding: 0; }
.booking-field input {
  background: var(--c-bg); border: none; border-bottom: 1px solid rgba(48,54,46,0.25);
  padding: clamp(14px, 1.25vw, 24px) clamp(8px, 0.52vw, 10px) clamp(14px, 1.25vw, 24px) clamp(14px, 1.25vw, 24px);
  font-size: clamp(16px, 1.25vw, 24px); font-weight: 400; color: var(--c-text);
  letter-spacing: -0.04em; font-family: var(--f); width: 100%; font-style: normal; outline: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.booking-field input::placeholder { color: rgba(48,54,46,0.5); }
.booking-field input:focus { border-bottom-color: var(--c-accent); outline: none; }
.booking-svc-field { display: flex; flex-direction: column; gap: clamp(10px, 0.83vw, 16px); margin-top: clamp(20px, 1.9vw, 36px); }
.booking-svc-label { font-size: clamp(13px, 0.83vw, 16px); font-weight: 400; color: var(--c-text); letter-spacing: -0.04em; display: block; font-style: normal; padding: 0; }
.booking-svc-wrap { position: relative; border-bottom: 1px solid rgba(48,54,46,0.25); }
.booking-svc-sel {
  appearance: none; -webkit-appearance: none; background: var(--c-bg); border: none; width: 100%;
  padding: clamp(14px, 1.25vw, 24px) 40px clamp(14px, 1.25vw, 24px) clamp(14px, 1.25vw, 24px);
  font-size: clamp(16px, 1.25vw, 24px); font-weight: 400; color: rgba(48,54,46,0.5);
  letter-spacing: -0.04em; font-family: var(--f); cursor: pointer; outline: none; font-style: normal;
}
.booking-svc-sel option { color: var(--c-text); font-weight: 400; }
.booking-svc-wrap svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.booking-submit {
  background: var(--c-accent); color: #fdfcf8; border: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 8px; padding: clamp(14px, 1.25vw, 24px) clamp(10px, 0.52vw, 10px) clamp(14px, 1.25vw, 24px) clamp(12px, 0.94vw, 18px);
  font-size: clamp(16px, 1.25vw, 24px); font-weight: 400; letter-spacing: -0.04em; font-family: var(--f);
  cursor: pointer; width: 100%; font-style: normal; margin-top: 24px;
  transition: background 0.2s, transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.booking-submit svg { width: 20px; height: 20px; flex-shrink: 0; }
.booking-submit:hover { background: #6A7C64; }
@keyframes fieldShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.booking-field__err { font-size: 13px; font-weight: 400; color: #c94444; letter-spacing: -0.01em; line-height: 1; font-style: normal; margin-top: 8px; display: none; font-family: var(--f); }
.booking-svc-field .booking-field__err { font-size: 13px; color: #c94444; margin-top: 8px; display: none; font-family: var(--f); font-style: normal; }
.booking-field.has-error .booking-field__err, .booking-svc-field.has-error .booking-field__err { display: block; }
.booking-field.has-error input { border-bottom-color: #c94444; animation: fieldShake 0.38s ease; }
.booking-svc-field.has-error .booking-svc-wrap { border-bottom-color: #c94444; animation: fieldShake 0.38s ease; }
.booking-field.has-ok input { border-bottom-color: var(--c-accent); }

@media (max-width: 1023px) { .booking-inner { gap: 60px; } .booking-text { flex: 0 0 280px; } }
@media (max-width: 900px) { .booking-inner { flex-direction: column; align-items: stretch; } .booking-col--map { flex: 1 1 auto; } }
@media (max-width: 767px) { .booking-inner { flex-direction: column; gap: 36px; } .booking-text { flex: none; width: 100%; } .booking-row { flex-direction: column; } .booking-heading { font-size: clamp(28px, 8vw, 48px); } }