@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//hostel.hotel-gora.com.ua/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=8.0.6") format("woff2");
}

:root {
	--wd-text-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 300;
	--wd-text-color: #767676;
	--wd-text-font-size: 16px;
	--wd-title-font: "Cormorant", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: rgb(165,175,135);
	--wd-entities-title-font: "Cormorant", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Cormorant", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lexend", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 300;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 16px;
	--wd-primary-color: rgb(165,175,135);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(165,175,135);
	--btn-accented-bgcolor-hover: rgb(150,159,123);
	--btn-font-weight: 400;
	--btn-transform: capitalize;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 800px;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: #0a0a0a;
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(0,0,0);
	background-image: none;
}
html .wd-nav-mobile > li > a {
	text-transform: capitalize;
}
.page .wd-page-content {
	background-color: rgb(0,0,0);
	background-image: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1239px) {
.platform-Windows .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 1222px) {
html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-content-layout {
  padding-block: 0px !important;
}
/* Тільки в попапах Popup Maker + CF7 */
#pum-26169 .wpcf7,
.pum-container .wpcf7 {
  --field-bg: #fff;
  --field-text: #111827;
  --field-border: #d1d5db;
  --label: #1f2937;
  --muted: #6b7280;
  --focus: rgba(79,70,229,.35);
}

/* Базові поля */
#pum-26169 .wpcf7 input[type="text"],
#pum-26169 .wpcf7 input[type="tel"],
#pum-26169 .wpcf7 input[type="date"],
#pum-26169 .wpcf7 input[type="number"],
#pum-26169 .wpcf7 select,
#pum-26169 .wpcf7 textarea {
  background: var(--field-bg) !important;
  color: var(--field-text) !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 10px !important;
  padding: 12px 12px !important;
  width: 100%;
  box-shadow: none !important;
  outline: none !important;
}

/* Фокус */
#pum-26169 .wpcf7 input:focus,
#pum-26169 .wpcf7 select:focus,
#pum-26169 .wpcf7 textarea:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px var(--focus) !important;
}

/* Лейбли та допоміжний текст */
#pum-26169 .booking-form label { 
  display:block; 
  color: var(--label) !important; 
  margin: 0 0 6px;
  font-weight: 500;
}

/* Плейсхолдери світліші */
#pum-26169 .wpcf7 ::placeholder { color: var(--muted) !important; opacity: 1; }

/* Кнопка */
#pum-26169 .wpcf7 input[type="submit"]{
  background:#4f46e5 !important; color:#fff !important; 
  border:0 !important; padding:12px 18px !important; 
  border-radius:10px !important; cursor:pointer;
}
#pum-26169 .wpcf7 input[type="submit"]:hover{ filter:brightness(1.07) }

/* Повідомлення про помилки CF7 */
#pum-26169 .wpcf7-not-valid-tip { 
  color:#b91c1c !important; 
  font-size:.9rem; margin-top:6px; 
}
/* тільки ваш попап */
#pum-26169 .wpcf7 select {
  background:#fff !important;
  color:#111 !important;
  border:1px solid #d1d5db !important;
}
/* список опцій у випадайці */
#pum-26169 .wpcf7 select option {
  background:#fff !important;
  color:#111 !important;
}
/* на деяких темах темний режим перефарбовує — вимикаємо */
@media (prefers-color-scheme: dark){
  #pum-26169 .wpcf7 select,
  #pum-26169 .wpcf7 select option { background:#fff !important; color:#111 !important; }
}
/* Попап завжди поверх сторінки */
.pum-overlay { background: rgba(0,0,0,.65) !important; z-index: 999998 !important; }
.pum.pum-active { z-index: 999999 !important; }

/* Форсимо світлу тему для нативних контролів (випадайка теж) */
.pum.pum-active, .pum.pum-active * { color-scheme: light !important; }

/* select і його option у світлих кольорах */
.pum.pum-active select { background:#fff !important; color:#111 !important;
  border:1px solid #d1d5db !important; }
.pum.pum-active select option { background:#fff !important; color:#111 !important; }

/* Кнопка закриття як "✕" у правому верхньому куті */
.pum.pum-active .pum-close{
  position:absolute !important; top:10px; right:10px;
  width:36px; height:36px; border-radius:10px;
  background:#fff !important; color:#111 !important;
  font-size:0 !important; line-height:36px; text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.pum.pum-active .pum-close:after{
  content:"✕"; font-size:18px; line-height:36px; display:block;
}
.pum.pum-active .pum-close:hover{ filter:brightness(.95); }
<script>
document.addEventListener('DOMContentLoaded', function () {

  function initBookingCalc() {
    const inEl  = document.getElementById('checkin');
    const outEl = document.getElementById('checkout');
    const nightsEl = document.getElementById('nights');

    if (!inEl || !outEl || !nightsEl) return;

    // Мінімальна дата — сьогодні
    const today = new Date();
    today.setHours(0,0,0,0);
    const todayStr = today.toISOString().split('T')[0];
    inEl.min = todayStr;
    outEl.min = todayStr;

    function syncDates() {
      if (inEl.value) {
        let checkInDate = new Date(inEl.value);
        checkInDate.setDate(checkInDate.getDate() + 1);
        const minOut = checkInDate.toISOString().split('T')[0];
        outEl.min = minOut;

        if (!outEl.value || new Date(outEl.value) <= new Date(inEl.value)) {
          outEl.value = minOut;
        }
      }
      calcNights();
    }

    function calcNights() {
      if (inEl.value && outEl.value) {
        const inDate = new Date(inEl.value);
        const outDate = new Date(outEl.value);
        if (outDate > inDate) {
          const diff = (outDate - inDate) / (1000 * 60 * 60 * 24);
          nightsEl.value = diff;
        } else {
          nightsEl.value = 0;
        }
      }
    }

    inEl.addEventListener('change', syncDates);
    outEl.addEventListener('change', calcNights);

    syncDates(); // одразу при запуску
  }

  // ініціалізація при відкритті попапа
  if (window.jQuery) {
    jQuery(document).on('pumAfterOpen', function () {
      initBookingCalc();
    });
  } else {
    initBookingCalc();
  }
});
</script>
/* Менший поп-ап (~70% ширини) */
.pum.pum-active .pum-container{
  max-width: min(70vw, 820px) !important; /* головний розмір */
  width: auto !important;
  margin: 0 auto !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.35) !important;
}

/* Заокруглюємо БЛОК з білим фоном (у різних темах це .pum-content) */
.pum.pum-active .pum-content{
  background: #fff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  padding: 22px 26px !important;
}

/* Якщо фон заданий на .pum-container — підстрахуємо теж */
.pum.pum-active .pum-container.pum-responsive{
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Мобільна адаптація */
@media (max-width: 680px){
  .pum.pum-active .pum-container{ max-width: 92vw !important; }
  .pum.pum-active .pum-content{ padding: 18px 16px !important; border-radius: 14px !important; }
}
/* Зменшуємо ширину попапа до ~70% екрана */
.pum.pum-active .pum-container.pum-responsive {
  width: 70% !important;        /* 70% ширини вікна */
  max-width: 820px !important;  /* але не більше 820px */
  margin: 0 auto !important;    /* по центру */
}

/* Для мобільних — ширше, щоб було зручно */
@media (max-width: 768px) {
  .pum.pum-active .pum-container.pum-responsive {
    width: 92% !important;
    max-width: none !important;
  }
}
<!-- SEO for Hostel -->
<title>Хостел «Гора» в Харькове — недорогое проживание, койко-места</title>
<meta name="description" content="Хостел «Гора» в Харькове: уютные койко-места, чистые номера, удобное расположение. Онлайн-бронирование, доступные цены.">

<meta property="og:title" content="Хостел «Гора» в Харькове — койко-места">
<meta property="og:description" content="Недорогое проживание в хостеле «Гора»: койко-места, удобства, онлайн-бронирование.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://hostel.hotel-gora.com.ua/">