/* =================== */
/* ОБЩИЕ СТИЛИ САЙТА   */
/* =================== */
body {
  background: linear-gradient(
    to bottom,
    #5E6830 0%,   /* Твой первый цвет — оливковый */
    #ece7d4 100%  /* Второй — бежевый */
  );
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* =================== */
/* ХЕДЕР               */
/* =================== */
.main-header {
  position: relative;
  width: 100%;
  min-height: 480px;
  background: url('/wp-content/themes/myglamping/assets/1.webp') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 2px 28px rgba(0,0,0,0.11);
  margin-bottom: 28px;
  border-radius: 0 0 64px 64px;
  overflow: hidden;
}
.main-header::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(38, 54, 40, 0.16);
  z-index: 1;
  border-radius: 0 0 64px 64px;
}
.logo-block {
  margin-top: 24px;
  margin-bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.logo-block img {
  height: 104px;
  border-radius: 18px;
  background: transparent;
  box-shadow: 0 2px 12px rgba(31,45,26,0.10);
  padding: 0;
  margin-bottom: 3px;
}
.logo-text {
  color: #fff;
  font-size: 1.16rem;
  font-weight: 600;
  text-shadow: 0 3px 12px rgba(40,64,34,0.18);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.header-title {
  z-index: 2;
  text-align: center;
  margin-bottom: 32px;
  font-size: 3.8rem;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}
.header-title .first-line {
  color: #fff;
  display: block;
  margin-bottom: 7px;
  text-shadow: 0 4px 24px rgba(40,64,34,0.36);
}
.header-title .second-line {
  color: #D8EC77;
  display: block;
  text-shadow: 0 2px 18px rgba(143,255,110,0.13);
}
.header-btns {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  z-index: 2;
  justify-content: center;
}
.header-btn {
  background: #D8EC77;
  color: #23491a;
  border: none;
  border-radius: 32px;
  padding: 14px 38px;
  text-decoration: none;
  font-size: 1.16rem;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(31, 45, 26, 0.09);
  transition: background 0.2s, color 0.2s, border 0.2s;
  letter-spacing: 0.03em;
}
.header-btn:hover {
  background: #e5f3a8;
  color: #11280d;
}
.header-btn.contact {
  background: rgba(216,236,119,0.11);
  color: #D8EC77;
  border: 2px solid #D8EC77;
  backdrop-filter: blur(9px);
  border-radius: 32px;
  box-shadow: 0 2px 12px rgba(31,45,26,0.08);
}
.header-btn.contact:hover {
  background: rgba(216,236,119,0.23);
  border-color: #e5f3a8;
  color: #D8EC77;
}

/* ================ */
/* Header Topbar    */
/* ================ */
.header-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 22px 36px 0 36px;
  position: absolute;
  top: 0; left: 0;
  z-index: 10;
}
.burger {
  width: 40px; height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  gap: 7px;
}
.burger span {
  display: block;
  height: 4px;
  background: #D8EC77;
  border-radius: 3px;
  width: 100%;
  transition: .2s;
}
.burger.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}
.lang-switcher {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
  position: relative;
  right: 0;
}
.lang-switcher .lang {
  font-weight: 700;
  color: #D8EC77;
  opacity: 0.75;
  text-decoration: none;
  letter-spacing: 0.07em;
  font-size: 1.09rem;
  transition: opacity 0.18s, color 0.17s;
  padding: 2px 7px;
  border-radius: 7px;
  white-space: nowrap;
  max-width: 44px;
  text-align: center;
}
.lang-switcher .lang.active,
.lang-switcher .lang:hover {
  background: #D8EC77;
  color: #3a421e;
  opacity: 1;
  text-decoration: none;
}
.lang-switcher .lang:last-child {
  margin-right: 40px; /* Чтоб RU не уходил за край */
}

/* =================== */
/* МОБИЛЬНОЕ МЕНЮ      */
/* =================== */
.menu-overlay {
  display: none;
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(34,38,14,0.30);
  z-index: 98;
  transition: opacity 0.25s;
  opacity: 0;
  pointer-events: none;
}
.menu-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: all;
}
/* body.menu-open {
  overflow: hidden !important;
} */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: 52vw;
  max-width: 420px;
  min-width: 180px;
  height: 100vh;
  background: #D8EC77;
  box-shadow: -4px 0 26px rgba(88,99,54,0.15);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 99;
  padding: 38px 40px 32px 34px;
  border-radius: 0 0 0 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.42,0,.58,1), opacity 0.26s;
}
.mobile-menu.active {
  transform: translateX(0);
  opacity: 1;
}
.mobile-menu a {
  font-size: 1.18rem;
  color: #23310f;
  margin-bottom: 20px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.18s;
  border-radius: 8px;
  padding: 6px 2px;
}
.mobile-menu a:hover {
  background: #fafdde;
  color: #63761a;
}
.close-menu {
  background: none;
  border: none;
  color: #23310f;
  font-size: 2.3rem;
  font-weight: 800;
  position: absolute;
  top: 10px; right: 18px;
  cursor: pointer;
  opacity: 0.7;
  z-index: 222;
  transition: opacity 0.19s;
}
.close-menu:hover {
  opacity: 1;
}

/* =================== */
/* ФОРМА "СВЯЗАТЬСЯ"   */
/* =================== */
.contact-modal {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(48, 54, 27, 0.01);
  z-index: 2222;
  justify-content: center;
  align-items: center;
  transition: opacity 0.35s cubic-bezier(.48,0,.53,1), background 0.33s cubic-bezier(.48,0,.53,1);
  display: flex;
}
.contact-modal.active {
  opacity: 1;
  pointer-events: all;
  background: rgba(48, 54, 27, 0.23);
}
.fade-in-form {
  opacity: 0;
  transform: scale(0.9) translateY(60px);
  transition: opacity 0.45s cubic-bezier(.61,0,.4,1), transform 0.45s cubic-bezier(.61,0,.4,1);
}
.contact-modal.active .fade-in-form {
  opacity: 1;
  transform: none;
}
.contact-modal .modal-content {
  background: rgba(249, 255, 230, 0.18); /* прозрачность */
  border-radius: 22px;
  box-shadow: 0 7px 46px rgba(88,99,54,0.17);
  border: 2.5px solid #D8EC77;
  padding: 38px 27px 28px 27px;
  min-width: 340px;
  max-width: 95vw;
  width: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}
.contact-modal h2 {
  color: #4C571B;
  font-weight: 800;
  margin-bottom: 22px;
}
.close-modal {
  position: absolute;
  top: 13px; right: 18px;
  background: none;
  border: none;
  font-size: 2.2rem;
  color: #C7D842;
  cursor: pointer;
  opacity: 0.7;
  z-index: 22;
  transition: opacity 0.19s;
}
.close-modal:hover { opacity: 1; }
.form-group {
  width: 100%;
  margin-bottom: 19px;
  position: relative;
}
.form-group input,
.country-select select {
  width: 100%;
  border: 2px solid #D8EC77;
  border-radius: 13px;
  padding: 13px 17px;
  font-size: 1.07rem;
  outline: none;
  background: #fff;
  color: #2B3812;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s;
}
.form-group input:focus,
.country-select select:focus {
  border-color: #BAD124;
}
.phone-group {
  display: flex;
  gap: 8px;
}
.country-select {
  min-width: 95px;
  max-width: 123px;
  flex: 0 0 auto;
}
.country-select select {
  cursor: pointer;
  font-size: 1.08rem;
  padding-left: 12px;
}
.submit-btn {
  display: block;
  margin: 18px auto 0 auto;
  background: #D8EC77;
  color: #333a1d;
  font-weight: 700;
  border: none;
  border-radius: 11px;
  padding: 14px 42px;
  font-size: 1.13rem;
  box-shadow: 0 3px 16px rgba(104,119,46,0.08);
  transition: background 0.18s;
  cursor: pointer;
}
.submit-btn:hover {
  background: #c4e36a;
}

@media (max-width: 600px) {
  .contact-modal .modal-content {
    width: 85vw !important;
    max-width: 95vw !important;
    min-width: 0 !important;
    padding: 13px 4vw 19px 4vw !important;
    border-radius: 17px !important;
  }
}
/* ========================= */
/* FIX: intl-tel-input в модалке */
/* ========================= */

/* Всегда поверх всех модалок! */
.iti__country-list {
  z-index: 99999 !important;
  position: absolute !important;
  max-height: 340px !important; /* Можно уменьшить, если нужно */
  overflow-y: auto !important;
  font-size: 1.04rem !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 7px 42px rgba(51,61,12,0.19);
}

@media (max-width: 600px) {
  .iti__country-list {
    max-height: 210px !important;
    font-size: 1rem !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: 99vw !important;
    min-width: 0 !important;
    border-radius: 13px !important;
  }
}




/* =============== */
/* АНИМАЦИИ        */
/* =============== */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.76s cubic-bezier(.61,0,.4,1), transform 0.76s cubic-bezier(.61,0,.4,1);
}
body.page-loaded .fade-in {
  opacity: 1;
  transform: none;
}
body.page-loaded .logo-block { transition-delay: 0.14s; }
body.page-loaded .logo-text   { transition-delay: 0.23s; }
body.page-loaded .header-title { transition-delay: 0.33s; }
body.page-loaded .header-btns  { transition-delay: 0.43s; }
body.page-loaded .header-topbar { transition-delay: 0.09s; }

/* =============== */
/* MEDIA QUERIES   */
/* =============== */
@media (max-width: 900px) {
  .main-header {
    min-height: 310px;
    border-radius: 0 0 38px 38px;
    padding-bottom: 14px;
  }
  .logo-block img { height: 62px; }
  .logo-text { font-size: 0.98rem; }
  .header-title { font-size: 1.36rem; }
  .header-btns { gap: 10px; }
  .header-btn, .header-btn.contact {
    padding: 10px 18vw; font-size: 1.01rem;
  }
}
@media (max-width: 700px) {
  .header-topbar {padding: 13px 6vw 0 5vw;}
  .lang-switcher {gap: 5px;}
  .lang-switcher .lang {font-size: 0.96rem; max-width: 34px;}
  .lang-switcher .lang:last-child {margin-right: 25px;}
  .mobile-menu {
    width: 58vw;
    max-width: 94vw;
    border-radius: 0 0 0 22px;
    padding: 68px 10px 18px 10px;
  }
}
@media (max-width: 550px) {
  .main-header {
    min-height: 170px;
    border-radius: 0 0 13px 13px;
    padding-bottom: 8px;
  }
  .logo-block img { height: 38px;}
  .logo-text { font-size: 0.78rem; }
  .header-title {
    font-size: 1.7rem;
    line-height: 1.12;
  }
  .header-btns { flex-direction: column; gap: 18px; }
  .header-btn, .header-btn.contact {
    padding: 22px 13vw;
    font-size: 1.28rem;
    font-weight: 700;
    border-radius: 42px;
    padding: 12px 13vw !important;   /* На мобиле чуть больше горизонтально */
    font-size: 1.07rem !important;
    border-radius: 32px !important;
  }
  .modal-content {
    min-width: 0;
    width: 94vw;
    padding: 21px 8px 18px 8px;
  }
  .submit-btn {
    width: 100%;
    padding: 13px 0;
    font-size: 1.09rem;
  }
  .close-modal {
    right: 40px;
  }

}




/* === О НАС — ABOUT BLOCK === */
.about-block {
  background: #ece7d4;
  border-radius: 32px;
  margin: 48px auto 0 auto;
  max-width: 1080px;
  box-shadow: 0 3px 28px rgba(58,72,29,0.10);
  padding: 36px 38px 32px 38px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-block-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
}

.about-title {
  color: #5e6830;
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

.about-subtitle {
  color: #5e6830;
  font-size: 1.04rem;
  font-weight: 500;
  max-width: 540px;
  text-align: left;
  margin-top: 5px;
}

.about-divider {
  height: 1px;
  width: 80%;
  background: #5e6830;
  border-radius: 6px;
  margin: 0 auto;
  opacity: 0.65;
  display: block;
}

.about-content {
  display: flex;
  gap: 34px;
  align-items: flex-start;
  justify-content: space-between;
}

.about-photo {
  flex: 0 0 270px;
  max-width: 290px;
  min-width: 170px;
  aspect-ratio: 1 / 1;
  border-radius: 28px;    /* Ещё круглее! */
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(80,95,32,0.10);
  background: #c9c49e;
  transition: border-radius 0.2s;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 19px;
}

.about-text {
  color: #425014;
  font-size: 1.13rem;
  line-height: 1.56;
  font-weight: 400;
  margin-bottom: 12px;
}

.about-btn {
  display: inline-block;
  padding: 14px 42px;           /* чуть больше паддинг */
  background: #5e6830;
  color: #fff;
  border-radius: 42px;          /* Супер круглая! */
  font-size: 1.13rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 14px rgba(80,95,32,0.13);
  transition: background 0.22s, color 0.22s, border-radius 0.2s;
  margin-top: 8px;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

/* ======= Адаптив ======= */
@media (max-width: 900px) {
  .about-block {
    padding: 20px 8vw 24px 8vw;
    border-radius: 19px;
  }
  .about-content { gap: 14px; }
  .about-photo { max-width: 140px; min-width: 90px; border-radius: 18px;}
}

@media (max-width: 700px) {
  .about-block {
    padding: 12px 2vw 17px 2vw;
    border-radius: 14px;
    gap: 13px;
    max-width: 91vw;    /* Не вся ширина! */
    margin: 19px auto 0 auto;
  }
  .about-block-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .about-title { font-size: 1.26rem; }
  .about-subtitle { font-size: 0.91rem; text-align: left; max-width: 100%; }
  .about-divider { width: 100%; }
  .about-content {
    flex-direction: column;
    gap: 10px;
  }
  /* меняем порядок: сначала описание, потом фото */
  .about-desc {
    order: 1;
    width: 100%;
    align-items: flex-start;
  }
  .about-photo {
    order: 2;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    border-radius: 18px;
    margin-top: 12px;
  }
  .about-btn {
    width: 100%;
    min-width: 0;
    padding: 13px 0;
    font-size: 1.01rem;
    border-radius: 28px;
    margin-top: 10px;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
  }
}





/* === Модалка бронирования с плавной анимацией === */
.booking-modal {
  /* Модалка всегда во flex, просто прозрачная и вне клика */
  display: flex;
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(44,54,20,0.17);
  z-index: 2224;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(.48,0,.53,1);
}

.booking-modal.active {
  opacity: 1;
  pointer-events: all;
}

/* Контент модалки */
.booking-modal-content {
  background: rgba(249,255,230,0.85);
  backdrop-filter: blur(17px);
  border: 2.5px solid #D8EC77;
  border-radius: 22px;
  box-shadow: 0 7px 46px rgba(88,99,54,0.17);
  padding: 36px 28px 27px 28px;
  min-width: 330px;
  max-width: 96vw;
  width: 380px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
    max-height: 95vh;
  overflow-y: auto;

  /* Анимация появления самого окна */
  opacity: 0;
  transform: scale(0.98) translateY(70px);
  transition: opacity 0.48s cubic-bezier(.48,0,.53,1), transform 0.48s cubic-bezier(.48,0,.53,1);
}
.booking-modal.active .booking-modal-content {
  opacity: 1;
  transform: none;
}

/* --- Крестик закрытия --- */
.close-modal {
  position: absolute;
  top: 10px;
  right: 18px;
  background: none;
  border: none;
  font-size: 2.4rem;
  color: #C7D842;
  cursor: pointer;
  opacity: 0.7;
  z-index: 22;
  transition: opacity 0.19s;
}
.close-modal:hover { opacity: 1; }

/* --- Титул и блоки выбора --- */
.booking-title {
  font-size: 1.22rem;
  color: #4C571B;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}

.booking-options {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-bottom: 34px;
}
.booking-option {
  background: #ece7d4;
  color: #5e6830;
  border-radius: 18px;
  border: 2px solid #D8EC77;
  padding: 18px 18px 13px 18px;
  font-size: 1.09rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, border 0.16s;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 135px;
  width: 140px;
  position: relative;
  user-select: none;
}
.booking-option input[type="checkbox"] { display: none; }
.booking-option .icon { margin-bottom: 9px; }
.booking-option input:checked + .icon { background: #D8EC77; border-color: #89a842; }
.booking-option input:checked + .icon::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 7px; height: 13px;
  border: solid #445b1b;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(41deg);
}
.booking-option[disabled], .booking-option input:disabled + .icon {
  opacity: 0.45;
  background: #e0e5bd;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Кнопки --- */
.booking-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.booking-btn {
  background: #D8EC77;
  color: #333a1d;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  padding: 13px 54px;
  font-size: 1.13rem;
  box-shadow: 0 3px 16px rgba(104,119,46,0.09);
  transition: background 0.18s, opacity 0.21s;
  cursor: pointer;
  opacity: 0.8;
}
.booking-btn:disabled { opacity: 0.48; cursor: not-allowed; }

.option-img {
  display: block;
  width: 165px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1.5px solid #d6dbb2;
}
.option-title {
  margin-top: 2px;
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #5e6830;
  text-align: center;
}

/* Подсказка */
.booking-info-hint {
  color: #6b7b3b;
  background: #ece7d4;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 0.96rem;
  margin: 7px 0 13px 0;
  display: flex;
  align-items: center;
  gap: 5px;  
  box-shadow: 0 1.5px 7px rgba(88,99,54,0.06);
  line-height: 1.2;
  min-height: unset;
}
.booking-info-hint span {
  font-size: 1.18em;
  font-weight: 600;
  color: #D8EC77;
}

/* --- Адаптив --- */
@media (max-width: 600px) {
  .booking-modal-content {
    min-width: 0;
    width: 98vw;
    padding: 17px 4vw 19px 4vw;
  }
    .booking-info-hint {
    font-size: 0.90rem;
    padding: 5px 7px;
    margin-bottom: 9px;
  }
  .booking-title {font-size: 1rem;}
  .booking-option {padding: 14px 7vw; font-size: 1.08rem;}
  .option-img { width: 100px; height: 66px; }
  .booking-options { gap: 11px; }
  .booking-option { min-width: 96px; width: 100px; padding: 9px 4px 6px 4px; }
}

/* --- Только анимация, никаких лишних fade-modal не нужно --- */




.step-hidden { display:none; }


.booking-calendar-block {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 27px;
  background: #ece7d4;
  border-radius: 16px;
  padding: 22px 14px;
  box-shadow: 0 2px 14px rgba(88,99,54,0.06);
}
.booking-calendar-block .option-img {
  width: 120px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
}
@media (max-width: 600px) {
  .booking-calendar-block {flex-direction: column; align-items: center;border-radius: 72px;}
  .booking-calendar-block .option-img {
    margin-bottom: 13px;
    

  }
}




/* === Красивое инпут-поле для календаря === */
.flatpickr-input, 
input[type="text"][id^="calendar-"] {
  background: #F9FFE6;
  border: 2px solid #D8EC77;
  border-radius: 9px;
  font-size: 0.93rem;
  padding: 4px 10px;
  color: #4C571B;
  font-family: inherit;
  outline: none;
  box-shadow: 0 1px 8px rgba(104, 119, 46, 0.08);
  transition: border-color 0.18s, box-shadow 0.13s;
  width: 255px;    /* ширину уменьшил */
  margin-bottom: 5px;
  cursor: pointer;
  height: 28px;   /* меньше высота */
  margin-left: 0; /* если нужен левый отступ, поставь например margin-left: 0 или 8px */
  display: inline-block;
}

.flatpickr-input:focus, 
input[type="text"][id^="calendar-"]:focus {
  border-color: #BAD124;
  box-shadow: 0 2px 14px rgba(104, 119, 46, 0.13);
}

.flatpickr-input::placeholder,
input[type="text"][id^="calendar-"]::placeholder {
  color: #b8c479;
  opacity: 1;
  font-size: 0.95em;
}

.booking-modal-content, .booking-step2 {
  background: rgba(249, 255, 230, 0.17);
  border: 2.5px solid #D8EC77;
  border-radius: 22px;
  box-shadow: 0 7px 46px rgba(88,99,54,0.17);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 32px 22px 22px 22px;
  max-width: 420px;
  width: 92vw;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transition: opacity 0.3s, background 0.3s;
}
@media (max-width: 600px) {
  .booking-modal-content, .booking-step2 {
    width: 90vw;
    max-width: 90vw;
    padding: 14px 5vw 18px 5vw;
    min-width: 0;
  }
  .booking-modal{
        width: 90vw;
    max-width: 90vw;
        padding: 14px 5vw 18px 5vw;
    min-width: 0;
  }
}
.booking-modal {
  background: rgba(44,54,20,0.22);
}
.booking-btn {
  background: #D8EC77;
  color: #333a1d;
  border: none;
  border-radius: 16px;
  padding: 11px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 7px;
  box-shadow: 0 3px 16px rgba(104,119,46,0.10);
  transition: background 0.18s, opacity 0.21s;
  cursor: pointer;
  opacity: 0.9;
}
.booking-btn:disabled {
  opacity: 0.5;
}

.booking-calendar-block > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

@media (max-width: 600px) {
  #calendar-sauna,
  #sauna-time {
    width: 70%;
    min-width: 140px;
    font-size: 0.96rem;
  }
}

.guests-field {
  margin-top: 10px;
  margin-bottom: 2px;
}
.guests-field label {
  color: #4C571B;
  font-size: 1em;
  font-weight: 600;
}
.guests-field select {
  width: 56px;
  padding: 4px 7px;
  font-size: 1em;
  border: 2px solid #D8EC77;
  border-radius: 7px;
  margin-left: 6px;
  background: #fff;
}
@media (max-width: 600px) {
  .guests-field { margin-top: 7px; }
  .guests-field label { font-size: 0.95em; }
  .guests-field select { width: 49px; padding: 3px 4px; }
  .step-close-button{
  position: absolute;
  top: -10px;
  right: 10px;
  }
  
}
.flatpickr-day.disabled, .flatpickr-day.flatpickr-disabled {
  background: #fae4e4 !important;   /* светло-красный фон */
  color: #c54141 !important;        /* красный текст */
  border-radius: 7px !important;
  opacity: 1 !important;            /* не делаем прозрачными */
  cursor: not-allowed !important;
}

.booking-modal-content {
  /* убираем старое! */
  
  background: #4C571B !important;      /* болотный фон */
  /* backdrop-filter: none;    убираем блюр если был */
}

.booking-title {
  color: #D8EC77 !important;    /* салатовый цвет */
}

.booking-modal-content, .booking-step2 {
  max-width: 600px;  /* стало шире */
  width: 98vw;
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

.booking-summary-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 1.07rem;
  color: #4C571B;
  margin-bottom: 12px;
}
.booking-summary-table td {
  padding: 7px 8px 7px 0;
  vertical-align: top;
  border-radius: 10px;
  background: #f7fadd;
  font-weight: 500;
}
.booking-summary-table td:first-child {
  font-weight: 700;
  color: #D8EC77;
  background: transparent;
  min-width: 105px;
  width: 40%;
}
.booking-summary-table td b {
  color: #5e6830;
  font-weight: 700;
}
@media (max-width: 600px) {
  .booking-summary-table { font-size: 0.98rem; }
  .booking-summary-table td { padding: 5px 5px 5px 0; }
}


.booking-confirm-row {
  margin: 18px 0 7px 0;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.confirm-checkbox {
  display: flex;
  align-items: center;
  font-size: 0.97rem;
  color: #D8EC77;
  font-weight: 500;
  gap: 8px;
}

.confirm-checkbox input[type="checkbox"] {
  accent-color: #D8EC77; /* салатовый */
  width: 18px;
  height: 18px;
  margin-right: 7px;
}

.confirm-checkbox .rules-link {
  color: #5e6830;      /* болотный */
  text-decoration: underline;
  transition: color 0.2s;
}
.confirm-checkbox .rules-link:hover {
  color: #c2d674;
}

/* Мобила: делаем в столбик с красивым переносом */
@media (max-width: 600px) {
  .booking-confirm-row {
    justify-content: flex-start;
  }
  .confirm-checkbox {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.99rem;
  }
  .confirm-checkbox input[type="checkbox"] {
    margin-bottom: 5px;
    margin-right: 0;
  }
}

.sauna-times-wrap {
  margin-top: 9px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}
.sauna-time-select {
  width: 180px;
  padding: 5px 10px;
  border: 2px solid #D8EC77;
  border-radius: 8px;
  font-size: 1.04em;
  background: #fff;
  color: #4C571B;
  margin-bottom: 3px;
}
@media (max-width: 600px) {
  .sauna-time-select { width: 94vw; max-width: 250px; }
}
.booking-option {
  background: #ece7d4;
  color: #5e6830;
  border-radius: 18px;
  border: 2px solid #D8EC77;
  padding: 18px 18px 13px 18px;
  font-size: 1.09rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, border 0.16s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 135px;
  width: 140px;
  position: relative;
  user-select: none;
  box-shadow: none;
}

.booking-option input[type="checkbox"] { display: none; }

/* --- Выделение при выборе --- */
.booking-option.selected {
  background: #D8EC77;
  border-color: #BAD124;
  box-shadow: 0 0 0 4px #eafdc3;
  color: #334613;
  transition: box-shadow 0.18s, background 0.14s, border 0.13s;
}

/* --- Недоступные (disabled) объекты --- */
.booking-option.disabled,
.booking-option input:disabled + .icon {
  opacity: 0.48;
  background: #e0e5bd;
  border-color: #bdc599;
  color: #b8bb95;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.13) blur(0.5px);
}


.form-error {
  position: relative;
  background: linear-gradient(90deg,#fff7f7 95%,#ffecec 100%);
  color: #c54141;
  border: none;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(197,65,65,0.10);
  padding: 0 18px 0 26px;
  margin-bottom: 18px;
  font-size: 1.07rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 410px;
  min-width: 0;
  width: 100%;
  text-align: center;
  transition: opacity 0.3s;
  opacity: 1;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.form-error::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 9px 0 0 9px;
  background: linear-gradient(180deg,#ff4e4e,#f0b6b6 95%);
}
.form-error span {
  margin-left: 8px;
  margin-right: 2px;
  font-size: 1.3em;
}

@media (max-width: 600px) {
  .form-error {
    font-size: 0.97rem;
    padding: 8px 4px 8px 14px;
    max-width: 70vw;
    min-height: 34px;
  }
  .form-error::before { width: 3.5px; }
}






/* ==== GALLEY BLOCK ==== */
.gallery-block {
  background: #ece7d4;
  border-radius: 26px;
  width: 90%;
  max-width: 1080px;
  margin: 48px auto;      /* auto по бокам! */
  padding: 32px 36px 38px 36px;
  box-shadow: 0 3px 28px rgba(58,72,29,0.09);
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
.gallery-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.gallery-title {
  color: #4C571B;  /* болотный */
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  text-align: left;    /* выравнивание влево */
  margin-left: 0;      /* обязательно без auto! */
  margin-bottom: 7px;
}
.gallery-divider {
  width: 80%;
  
  height: 1px;
  background: #4C571B;
  opacity: 0.7;
  border-radius: 6px;
  margin: 0 auto 2px auto;
  display: block;
}
.gallery-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 18px rgba(80,95,32,0.09);
  min-height: 250px;
}
.gallery-slides {
  display: flex;
  transition: transform 0.55s cubic-bezier(.44,0,.51,1);
  will-change: transform;
}
.gallery-slides img {
  width: 100%;
  min-width: 100%;
  object-fit: cover;
  border-radius: 16px;
  user-select: none;
  pointer-events: none;
  height: 390px;
  transition: filter 0.23s;
}
.carousel-slide img,
.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Вместо cover — так фото всегда видно полностью! */
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(80,95,32,0.13);
  display: block;
  background: #fff;  /* Можно убрать, если не надо */
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(76,87,27,0.10);
  border: none;
  border-radius: 50%;
  color: #4C571B;
  font-size: 2.3rem;
  width: 48px; height: 48px;
  cursor: pointer;
  z-index: 12;
  transition: background 0.19s;
}

.gallery-prev { left: 11px; }
.gallery-next { right: 11px; }
.gallery-dots {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}
.gallery-dot {
  width: 12px;
  height: 12px;
  background: #bad124;
  border-radius: 50%;
  opacity: 0.32;
  transition: opacity 0.22s;
  cursor: pointer;
}
.gallery-dot.active {
  opacity: 1;
  background: #4C571B;
}

/* === Adaptive === */
@media (max-width: 800px) {
    .gallery-block {
    width: 96vw;
    max-width: 99vw;
    padding: 10px 2vw 16px 2vw;
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
  }
  .gallery-slides img { height: 210px; }
}
@media (max-width: 540px) {
  .gallery-title { font-size: 1.25rem; }
      .gallery-block {
    width: 90vw;
    max-width: 99vw;
    padding: 10px 2vw 16px 2vw;
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
  }
  .gallery-slides img { border-radius: 9px; height: 140px; }
  .gallery-arrow { font-size: 1.5rem; width: 32px; height: 32px; }
  .gallery-divider { width: 90%; }
}
.carousel-slide,
.gallery-image {
  width: 100%;
  max-width: 600px;
  height: 260px;          /* Или 40vw, или auto + min-height */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  .carousel-slide,
  .gallery-image {
    aspect-ratio: 16/9;     /* Или меньше — чтобы на мобиле не было огромных пустот */
    max-height: 210px;
  }
}
@media (max-width: 800px) {
  .gallery-block {
   width: 90vw;
   max-width:95vw;
    padding: 10px 2vw 16px 2vw;
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
  }
  .gallery-carousel {
    aspect-ratio: 16/11;
    max-width: 100vw;
    min-height: unset;
    height: auto;
  }
  .gallery-slides img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 9px;
    background: #4C571B;
    max-height: 210px;
  }
}


.house-block-w {
  /* background: #4C571B; */
  padding: 44px 0 32px 0;
  display: flex;
  justify-content: center;
  
}
.house-block {
  width: 74vw;
  max-width: 1100px;
  background: #ece7d4;
  border-radius: 24px;
  box-shadow: 0 2px 18px rgba(80,95,32,0.09);
  padding: 38px 38px 24px 38px;
  margin: 0 auto;
  color: #4C571B;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.house-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 22px;
}
.house-title {
  font-size: 2.1rem;
  font-weight: bold;
  color: #4C571B;
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: .02em;
}
.house-tabs {
  display: flex;
  gap: 14px;
}
.house-tab {
  padding: 8px 21px;
  background: #4C571B;
  color: #ece7d4;
  border: none;
  border-radius: 20px;
  font-size: 1.06rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .22s, color .2s;
  border: 2px solid #4C571B;
}
.house-tab.active {
  background: #ece7d4;
  color: #4C571B;
  border: 2px solid #D8EC77;
}
.house-content {
  display: flex;
  gap: 38px;
  align-items: flex-start;
  margin-bottom: 4px;
}
.house-info {
  flex: 1 1 0%;
  padding-top: 8px;
}
.house-desc {
  font-size: 1.09rem;
  color: #4C571B;
  line-height: 1.57;
  margin: 0;
}
.house-preview {
  flex: 1 1 0%;
  min-width: 320px;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.house-img-wrap {
  background: #ece7d4;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  width: 100%;
  box-shadow: 0 2px 24px rgba(76,87,27,0.15);
}
.house-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}
.house-label {
  position: absolute;
  bottom: 17px;
  left: 19px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(60,60,60,0.18);
  font-size: 1.04rem;
  font-weight: 500;
}
.house-label-title {
  font-weight: bold;
  letter-spacing: .04em;
  font-size: 1.09rem;
}
.house-label-subtitle {
  font-weight: 500;
  color: #D8EC77;
  font-size: 1.05rem;
}
.house-booking-btn {
  position: absolute;
  bottom: 21px;
  right: 21px;
  background: #D8EC77;
  color: #4C571B;
  font-weight: 600;
  border: none;
  border-radius: 21px;
  padding: 8px 20px;
  font-size: 1.04rem;
  box-shadow: 0 1px 8px rgba(80,95,32,0.13);
  cursor: pointer;
  transition: background .16s;
}
.house-booking-btn:hover { background: #b6cf4e; }
.house-features {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 7px;
}
.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #4C571B;
  font-size: 1rem;
  min-width: 90px;
}
.feature svg {
  width: 33px;
  height: 33px;
}
.feature span {
  font-size: 0.93rem;
  font-weight: 500;
  color: #4C571B;
}
/* Адаптив */
@media (max-width: 950px) {
  .house-block { padding: 18px 4vw 16px 4vw; }
  .house-content { flex-direction: column; gap: 14px;}
  .house-preview { max-width: 99vw; min-width: 0; align-items: center; width: 100%;}
  .house-img { height: 220px; }
  .house-header { flex-direction: column; align-items: flex-start; gap: 11px;}
  .house-features { gap: 14px; }
}
@media (max-width: 600px) {
  .house-block { width: 99vw; border-radius: 12px; padding: 6vw 2vw 6vw 2vw;}
  .house-header, .house-content, .house-features { width: 100%; max-width: 100vw; }
  .house-title { font-size: 1.07rem; }
  .house-img { height: 135px; border-radius: 9px; }
  .house-img-wrap { border-radius: 9px; }
  .feature { min-width: 57px; font-size: 0.83rem;}
  .feature svg { width: 21px; height: 21px; }
}
@media (max-width: 540px) {
  .house-block { width: 93vw; max-width: 99vw; }
  .house-img { height: 54vw; min-height: 155px; max-height: 240px; }
  .house-booking-btn { font-size: 0.79rem; padding: 4px 8px; right: 7px; bottom: 8px; }
  .feature { min-width: 36px; font-size: 0.72rem;}
  .feature svg { width: 16px; height: 16px; }
    .house-booking-btn {
    font-size: 0.79rem;
    padding: 4px 6px;
    min-width: 0;
    max-width: 120px;
    white-space: normal;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    right: 5px;
    left: auto;
  }
}

.feature i.bi {
  color: #4C571B;   /* болотный */
  font-size: 1.7rem;
  margin-right: 10px;
  vertical-align: middle;
}
.feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.09rem;
  margin-bottom: 8px;
}
/* --- Сетка 3x3 на мобиле --- */
@media (max-width: 700px) {
  .house-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 4px;
    margin-top: 18px;
  }
  .feature {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    font-size: 0.91rem;         /* чуть меньше */
    min-width: unset;
    margin-bottom: 0;
    padding: 10px 2px 8px 2px;  /* больше отступов */
    height: 60px;               /* фиксированная высота для лучшего выравнивания */
    word-break: break-word;
  }
  .feature span {
    margin-top: 4px;
    font-size: 0.85rem;         /* ещё чуть меньше текст */
    line-height: 1.14;
    font-weight: 400;
    max-width: 100%;            /* чтобы не вылезал */
    display: block;
  }
  .feature i {
    font-size: 1.4rem;
  }
}



.faq-block {
  background: #4C571B;
  border-radius: 26px;
  margin: 32px auto 0 auto;
  padding: 32px 32px 24px 32px;
  width: 96%;
  max-width: 1200px;
  box-sizing: border-box;
  color: #fff;
  box-shadow: 0 2px 22px rgba(80,95,32,0.07);
}

.faq-title {
  color: #D8EC77;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 18px;
  text-align: left;
  letter-spacing: 1.5px;
}

.faq-list {
  width: 100%;
}

.faq-item {
  border-bottom: 1.1px solid #e0e6bd;
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.14rem;
  padding: 18px 0 18px 0;
  font-family: inherit;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.17s;
}

.faq-question .faq-toggle {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: #D8EC77;
  margin-left: 12px;
  transition: transform 0.22s;
}

.faq-item.open .faq-question .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  font-size: 1.03rem;
  color: #f4f8e3;
  padding: 0 0 18px 0;
  line-height: 1.6;
  max-width: 800px;
}

.faq-item.open .faq-answer {
  display: block;
  animation: fadeInFaq 0.4s;
}

@keyframes fadeInFaq {
  from { opacity: 0; transform: translateY(-8px);}
  to { opacity: 1; transform: translateY(0);}
}

/* ——— Adaptive ——— */
@media (max-width: 800px) {
  .faq-block {
    padding: 20px 6vw 14px 6vw;
    width: 97vw;
    max-width: 99vw;
    border-radius: 14px;
  }
  .faq-title {
    font-size: 1.23rem;
    margin-bottom: 10px;
  }
  .faq-question { font-size: 0.99rem; padding: 13px 0 13px 0; }
  .faq-answer { font-size: 0.96rem; padding-bottom: 13px;}
}

.booking-divider {
  width: 80%;
  height: 2px;
  background: #4C571B;   /* болотный */
  border-radius: 2px;
  margin: 18px auto 24px auto;  /* сверху/снизу — по вкусу */
}

.footer-section {
  width: 100vw;

  padding: 45px 0 0 0;
  box-sizing: border-box;
  margin: 0;
  min-height: 440px;
  margin-top: 40px;
}

.footer-content {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 10px;
}

.footer-title {
  color: #4C571B;
  font-size: 2.1rem;
  margin-bottom: 50px;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  margin-top: 0;
  padding-top: 18px;    /* Поднять выше */
  text-align: left;     /* Если нужно слева */
 
}

/* Линия под заголовком */
.footer-divider {
  margin: 0 auto 25px auto;
  height: 2px;
  width: 80%;
  background: #4C571B;
  border-radius: 2px;
  opacity: 0.25;
}

.footer-map-wrap {
  position: relative;
  width: 100%;
  min-height: 330px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 26px;
  background: #f8f6ed;
  box-shadow: 0 4px 16px rgba(80,95,32,0.12);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

/* Контактный блок — на компе поверх карты */
.footer-contact-info {
  position: absolute;
  top: 22px;
  left: 28px;
  background: #f5efd9;
  border-radius: 14px;
  padding: 18px 20px 16px 20px;
  box-shadow: 0 4px 22px rgba(80,95,32,0.06);
  color: #494A2B;
  font-size: 1.13rem;
  font-family: 'Montserrat', Arial, sans-serif;
  max-width: 310px;
  min-width: 180px;
  opacity: 0.98;
  z-index: 1;
}

.footer-map {
  width: 100%;
  height: 350px;
  min-height: 260px;
  border: 0;
  display: block;
  border-radius: 18px;
}

.footer-dev {
  margin-top: 15px;
  color: #4C571B;
  text-align: center;
  font-size: 1.06rem;
  font-family: 'Montserrat', Arial, sans-serif;
  letter-spacing: 0.02em;
  opacity: 0.95;
}

/* --- Адаптив --- */
@media (max-width: 850px) {
  .footer-content {
    max-width: 99vw;
    padding: 0 2vw;
  }
  .footer-contact-info {
    font-size: 1rem;
    left: 8px; top: 10px;
    padding: 10px 7px 8px 9px;
    border-radius: 7px;
    max-width: 180px;
  }
  .footer-map-wrap, .footer-map { border-radius: 10px; }
}

@media (max-width: 700px) {
  .footer-map-wrap {
    display: block;
    min-height: unset;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
    position: static;
    margin-bottom: 20px;
  }
  .footer-contact-info {
    position: static;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(80,95,32,0.09);
    left: 0; top: 0;
    width: 100%;
    max-width: none;
    border-radius: 13px;
    background: #f5efd9;
    z-index: 0;
  }
  .footer-map {
    width: 100%;
    height: 210px;
    min-height: 110px;
    margin: 0 auto;
    border-radius: 13px;
    display: block;
  }
  .footer-title { font-size: 1.22rem; margin-bottom: 25px;margin-left: 20px; }
}

/* На совсем маленьких экранах ещё чуть меньше */
@media (max-width: 420px) {
  .footer-map { height: 120px; }
  .footer-contact-info { font-size: 0.92rem; }
}

@media (max-width: 700px) {
  .footer-map {
    height: 270px;     /* Больше чем было */
    min-height: 180px;
  }
  .footer-contact-info {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  padding: 0 16px;
}
}
@media (max-width: 430px) {
  .footer-map {
    height: 185px;
    min-height: 110px;
  }
}

.booking-back-btn {
  margin: 12px auto 0 auto;
  display: block;
  background: #ece7d4;
  color: #4C571B;
  border: 1px solid #4C571B;
  border-radius: 8px;
  padding: 10px 32px;
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s;
}
.booking-back-btn:hover {
  background: #D8EC77;
}


.show-prices-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  background: #e9f6bb;
  color: #4C571B;
  border: none;
  border-radius: 8px;
  padding: 3.5px 13px 3.5px 9px;
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(60,80,30,0.09);
  transition: background 0.15s, box-shadow 0.14s, transform 0.10s;
  outline: none;
}
.show-prices-btn:hover {
  background: #d8ec77;
  color: #28320c;
}
.show-prices-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(60,80,30,0.08);
}
.show-prices-btn:focus {
  outline: 2px solid #bad124;
}
.show-prices-btn svg {
  display: inline-block;
  margin-bottom: -1px;
}

.price-list-modal {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(76,87,27,0.13);
  z-index: 9999; display: none; align-items: center; justify-content: center;
}
.price-list-modal.active { display: flex; }
.price-list-content {
  background: #fff;
  border-radius: 18px;
  min-width: 280px;
  padding: 27px 24px 21px 24px;
  box-shadow: 0 4px 28px rgba(60,80,30,0.15);
  text-align: left;
  position: relative;
}
.price-list-content h3 {
  font-size: 1.18rem; color: #4C571B; margin-bottom: 17px; font-weight: 600;
  text-align: center;
}
.price-list-content ul { list-style: none; margin: 0; padding: 0; }
.price-list-content li { margin: 8px 0; font-size: 1.07rem; }
.price-list-content .pl-suffix { color: #bad124; font-size: .97em; margin-left: 7px; }
.price-list-content .sub-list { margin: 4px 0 0 16px; font-size: 1em; }
.close-pricelist {
  position: absolute; right: 13px; top: 13px; font-size: 1.5rem; color: #b9c644;
  cursor: pointer; font-weight: bold; transition: color .17s;
}
.close-pricelist:hover { color: #4C571B; }

.header-btn {
  display: block;
  text-align: center;
}
@media (max-width: 600px) {
  .booking-modal-content {
    max-height: 75vh !important;   /* Было 90vh или 85vh — сделаем ниже */
    overflow-y: auto !important;
  }
}
@media (max-width: 600px) {
  .contact-modal,
  .booking-modal {
    align-items: flex-start;
    padding-top: 22px; /* можешь сделать больше/меньше — как тебе визуально больше нравится */
  }
}


.header-topbar {
  padding: 22px 36px 0 36px;
}
.header-topbar {
  padding: 22px 14px 0 14px;
}
.burger {
 
  margin-right: 30px;   /* Или проверь этот */
}



@media (min-width: 900px) {
.about-block {
  width: 100%;
  max-width: 1080px;      /* Широкий! Можно даже 1200px если хочешь */
  margin: 48px auto;
  aspect-ratio: 2 / 1;    /* Ближе к прямоугольнику, если надо не квадрат */
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 3px 28px rgba(58,72,29,0.10);
  border-radius: 38px;
  padding: 60px 60px;
  background: #ece7d4;
}

.about-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 60px;  /* побольше отступ между фото и описанием */
}

.about-photo {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 450px;    /* Сделай фото пошире если нужно */
  height: 420px;
  border-radius: 28px;
  overflow: hidden;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-desc {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end; /* кнопка вправо */
  height: 100%;
}

.about-text {
  margin-bottom: 34px;
  text-align: left;
}

.about-btn {
  align-self: flex-end;
  min-width: 210px;
  font-size: 1.19rem;
  padding: 18px 42px;
  border-radius: 30px;
}
}



@media (min-width: 900px) {
  .gallery-block {
    width: 100%;
    max-width: 1080px;
    margin: 48px auto;
    aspect-ratio: 2 / 1;
    background: #ece7d4;
    border-radius: 38px;
    padding: 60px 60px;
    box-shadow: 0 3px 28px rgba(58,72,29,0.10);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }
.gallery-carousel {
    width: 100%;
    height: 520px;         /* Больше высоты! */
    min-height: 420px;
    max-width: 100%;
    border-radius: 38px;
    margin-bottom: 24px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gallery-slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Чуть-чуть обрезает, но зато всё всегда заполнено */
    border-radius: 38px;
    background: #fff;
    display: block;
    transition: object-fit .2s;
  }
  .gallery-arrow {
    font-size: 2.7rem;
    width: 58px;
    height: 58px;
    border-radius: 50%;
  }
  .gallery-dot {
    width: 16px;
    height: 16px;
  }
}
@media (min-width: 900px) {
  .gallery-carousel {
    background: #4C571B; /* тёмно-зелёный или любой, какой под сайт */
  }
  .gallery-slides img {
    background: #4C571B;
  }
}
@media (min-width: 900px) {
  .gallery-slides img {
    width: 100%;
    height: 520px; /* или сколько тебе нужно по высоте */
    object-fit: cover;    /* главное! */
    object-position: center center; /* по центру */
    display: block;
    background: #4C571B; /* чтобы если что - фон не белый */
  }
}
.gallery-slides img {
  pointer-events: all !important;
  z-index: 10 !important;
}
.gallery-modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  z-index: 9999999;
  cursor: pointer;
  transition: filter 0.18s;
  box-shadow: 0 4px 18px rgba(76,87,27,0.15);
  border-radius: 50%;
}
.gallery-modal-arrow svg circle {
  transition: fill 0.18s;
}
.gallery-modal-arrow:hover svg circle {
  /* fill: #D8EC77; */
  opacity: 1;
}
.gallery-arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  transition: box-shadow 0.18s;
  outline: none;
}
.gallery-prev { left: 32px; }
.gallery-next { right: 32px; }

.gallery-arrow svg {
  display: block;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(30,40,22,0.18);
  transition: box-shadow 0.18s;
}
.gallery-arrow:hover svg {
  box-shadow: 0 4px 18px rgba(76,87,27,0.21);
}

@media (min-width: 900px) {
  .house-features {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 в ряд */
    grid-auto-rows: auto;
    gap: 20px 10px;
    align-items: start;
    justify-items: center;
    max-width: 700px; /* по желанию шире/уже */
    margin: 0;
    margin-top: 40px;
   transform: translateX(-30px); 
  }
  .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15.5px;
    color: #2c3220;
    text-align: center;
    padding: 0 2px;
    position: relative; /* для сдвига иконки */
  }
  .feature i {
    font-size: 2.5em;
    margin-bottom: 7px;
    color: #4C571B;
    display: block;
    text-align: center;
    width: 100%;
    transition: transform 0.1s;
  }
  .feature span {
    display: block;
    font-size: 1em;
    line-height: 1.25;
    margin-top: 0;
    text-align: center;
  }
  /* Сдвигаем именно нужные иконки */
  .feature-tv i,
  .feature-wifi i,
  .feature-kitchen i {
    transform: translateX(5px); /* подбери величину, например 5px */
  }
 .house-block {
  max-width: 1150px;     /* ширина как у других секций */
  width: 100%;
  margin: 0 auto;
  padding: 40px 32px;
  position: relative;
















}

}
@media (max-width: 720px) {
  .feature-tv i,
  .feature-wifi i,
  .feature-kitchen i {
    transform: translateX(3px); /* подбери величину, например 5px */
  }
}

.house-tab {
  background: #fff;
  color: #4C571B;

}
.house-tab.active {
  background: #4C571B;
  color: #fff;
  border-color: #4C571B;
}

@media (min-width: 900px) {
  .footer-map-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 42px;
    margin-top: 24px;
    margin-bottom: 16px;
  }
  .footer-contact-info {
    flex: 1 1 300px;
    max-width: 370px;
    font-size: 1.1rem;
    line-height: 1.6;
    background: #f9fbe7;
    padding: 26px 34px 26px 28px;
    border-radius: 22px;
    box-shadow: 0 2px 12px rgba(60,70,44,0.08);
  }
  .footer-map {
    flex: 2 1 500px;
    min-width: 350px;
    max-width: 700px;
    height: 340px !important;
    border-radius: 22px;
    box-shadow: 0 2px 16px rgba(70,70,55,0.13);
    border: none;
    margin: 0;
  }
}
@media (max-width: 899px) {
  .footer-map-wrap {
    display: block;
    margin-top: 18px;
  }
  .footer-contact-info {
    max-width: 100%;
    padding: 18px 14px;
    margin-bottom: 18px;
    border-radius: 12px;
  }
  .footer-map {
    width: 100%;
    height: 220px !important;
    min-width: 0;
    border-radius: 10px;
  }
}
@media (min-width: 801px) {
.footer-map-wrap {
  display: flex;
  align-items: flex-start;
  gap: 36px; /* расстояние между блоками */
  margin-top: 30px;
}

.footer-contact-info {
  min-width: 280px;
  max-width: 380px;
  font-size: 15px;
  line-height: 1.6;
}

.footer-map {
  width: 500px;
  height: 350px;   /* Сделай выше, как просил */
  min-width: 300px;
  border-radius: 15px;
  border: none;
  flex-shrink: 0;
}
}
@media (min-width: 801px) {
  .footer-map-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 44px !important;
    margin-top: 32px !important;
    width: 100% !important;
    padding: 0 !important;
    height: 600px;
    background-color:#ece7d4;
  }
  .footer-contact-info {
    padding-top: 20px !important;
    flex: 0 0 330px !important;
    max-width: 400px !important;
    min-width: 260px !important;
    box-sizing: border-box !important;
    margin-top: 49px !important;
    margin-left: 30px !important;
    padding: 0 !important;
    background: none !important;
    position: static !important;
    float: none !important;
    z-index: 1 !important;
    background-color: #ece7d4 !important;
    height: 500px !important;
     padding-top: 40px !important;
  }
  .footer-map {
      margin-right: 30px !important;
    margin-top: 49px !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 300px !important;
    height: 500px !important;
    max-width: 680px !important;
    border-radius: 18px !important;
    border: none !important;
    display: block !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    background: none !important;
    z-index: 1 !important;
  }
}

@media (min-width: 900px) {
  .footer-contact-info {
    font-size: 1.25rem;   /* это где-то 20px, можно больше */
    line-height: 1.6;
  }
  .footer-contact-info b {
    font-size: 1.17rem;   /* чуть больше для заголовков */
  }
}
/* .footer-contact-info { border: 2px solid red; }
.footer-map-wrap { border: 2px solid green; }
.footer-content { border: 2px solid blue; } */


.booking-summary-table td:nth-child(2) {
  padding-left: 38px;  /* Можешь сделать 24px, 32px — как надо */
}

@media (min-width: 900px) {
  .booking-calendar-block {
    display: flex;
    align-items: flex-end;
    gap: 18px;
  }
  .guests-field {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .guests-field label {
    width: 100%;
    display: flex;
    align-items: center;
  }
  .guests-field label span,
  .guests-field label {
    white-space: nowrap;
  }
  .guests-field select {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: none;
  }
  /* Чтобы вся строка выбора гостей (текст + селект) была по длине календаря */
  .booking-calendar-block input.flatpickr-input,
  .guests-field {
    width: 220px; /* или ту ширину, что у календаря! */
    max-width: 220px;
  }
}
@media (min-width: 900px) {
  #sauna-times-wrap .sauna-time-select {
    width: 220px;  /* ту же ширину что и календарь для сауны! */
    max-width: 220px;
    min-width: 0;
  }
}
body {
  background: url('/wp-content/themes/myglamping/assets/bodybg.png') no-repeat center center fixed;
  background-size: cover;
}

.site-content {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}