@font-face {
     font-family: 'Bookman Old Style';
     src: url('fonts/BookmanSyr.eot');
     src: url('fonts/BookmanSyr.woff2');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
     /* Оптимизация загрузки */
 }

 .roomsBlock {
     margin-top: 100px !important;
 }

 @media (min-width: 768px) {
     .footerContactContainerMobile {
         display: none;
     }

     .addressContainerMobile {
         display: none
     }

     .howSearchContainerMobile {
         display: none
     }

     .blockMapAddressText1Mobile {
         display: none
     }

     .blockMapAddressText2Mobile {
         display: none
     }

     .blockMapHowSearchText1Mobile {
         display: none
     }

     .blockMapHowSearchText2Mobile {
         display: none
     }

     .containerMobileForAddress1Search {
         display: none
     }

 }

 /* Мобильные стили (320px) */
 @media (max-width: 767px) {

     /* Важные базовые стили */
     html,
     body {
         width: 100%;
         overflow-x: hidden;
         position: relative;
     }

     main {
         flex: 1;
         text-align: -webkit-center;
     }

     .formBlock {
         display: none !important;
     }

     .roomsBlock {
         margin-top: 65px !important;
     }

     .relaxBannerTextContainer {
         margin: 20px !important;
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
         z-index: 1;
     }

     .selectLabel {
         font-size: 12px !important;
         color: #2B2B2B;
     }

     .selectValue {
         font-size: 16px !important;
         text-align: start;
     }

     /* стили для номеров */
     .roomsBlock {
         margin-top: 65px;
         width: 100% !important;
         /* Общая ширина контейнера */
         height: auto;
         display: flex;
         gap: 15px;
         /* Промежуток между элементами */
         flex-wrap: wrap;
     }

     .roomItem {
         width: 100% !important;
         /* Ширина одного элемента */
         height: auto !important;
         flex-shrink: 0;
         /* Запрещаем сжатие элементов */
         border-radius: 30px;
         background-color: #FFFFFF;
         padding: 0px 0px !important;
         display: flex;
         flex-direction: column;
         align-items: start !important;
         gap: 10px;
     }

     .roomImg {
         width: 100% !important;
         height: 217px !important;
         border-radius: 20px !important;
         object-fit: cover;
         /* Важно: сохраняет пропорции и заполняет весь блок */
         object-position: center;
         /* Центрируем изображение */
         display: block;
         /* Убираем лишние отступы у img */
     }

     .roomInfoContainer {
         margin-left: 22px;
         width: 204px !important;
         margin-bottom: 0px !important;
         margin-top: 20px !important;
     }

     ul {
         padding: 0;
         margin-left: 25px;
     }

     .roomText1 {
         width: 204px;
         font-size: 16px !important;
         font-weight: 700 !important;
         font-family: 'PT Sans', sans-serif !important;
         color: #2B2B2B !important;
         text-align: left;
     }

     .roomText2 {
         font-size: 14px !important;
         font-weight: 400 !important;
         font-family: 'PT Sans', sans-serif !important;
         color: #000000 !important;
         text-align: start;
     }

     .roomText3 {
         width: 160px;
         font-size: 14px !important;
         font-weight: 400 !important;
         font-family: 'PT Sans', sans-serif !important;
         color: #000000 !important;
         text-align: left;
     }

     .roomPrice {
         font-size: 16px !important;
         font-weight: 700 !important;
         font-family: 'PT Sans', sans-serif !important;
         color: #2B2B2B !important;
     }

     .roomMoreInfoButton {
         display: none !important;
     }

     .roomBookingButton {
         width: 87% !important;
         font-size: 14px !important;
         font-weight: 700 !important;
         height: 43px !important;
         border-radius: 10px !important;
         margin-bottom: 10% !important;
         margin-left: 22px;
         margin-top: 20px;
     }

     .roomBookingButtonTop {
         margin-top: 20px !important;
         width: 280px !important;
         font-size: 14px !important;
         font-weight: 700 !important;
         height: 43px !important;
         border-radius: 10px !important;
         background-color: #272F07;
         color: #FFFFFF;
         font-family: 'PT Sans', sans-serif;
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
     }

     .selectLabel {
         color: #2B2B2B !important;
         font-weight: 700 !important;
         text-align: start;
     }

     /* Стили для календаря */
     .flatpickr-calendar {
         position: absolute !important;
         left: 0 !important;
         top: 100% !important;
         z-index: 10000 !important;
         width: auto !important;
         min-width: 300px !important;
         max-width: 100% !important;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }

     .flatpickr-calendar {
         position: absolute !important;
         left: 0 !important;
         width: 100% !important;
         z-index: 1002 !important;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         background: #fff !important;
         border-radius: 8px !important;
     }
 }

@media (min-width: 767px) and (max-width: 1224px) {
    .roomItem {
        width: 43% !important;
    }

    .roomsBlock {
        gap: 15px !important;
    }
}

 html,
 body {
     width: 100%;
     height: 100%;
     margin: 0;
 }

 body {
     display: flex;
     flex-direction: column;
     background-color: #F2F3ED;
 }

 .containerMarginHeaderMain {
     margin: 20px 56px;
     flex: 1;
     display: flex;
     flex-direction: column;

 }

 main {
     flex: 1;
 }

 .relaxBannerTextTwo {
     font-size: 20px;
     font-family: 'PT Sans', sans-serif;
     font-weight: 700;
     color: #FFFFFF;
 }

 .dateLabel {
     font-size: 14px;
     font-family: 'PT Sans', sans-serif;
     color: #888;
     /*  Серый цвет для текста "Заезд" и "Выезд" */
     margin-bottom: 5px;
 }

 .dateInput {
     font-size: 18px;
     font-family: 'PT Sans', sans-serif;
     border: none;
     background: none;
     outline: none;
     /* padding-right: 30px; /*  Место для иконки календаря */
     cursor: pointer;
     /*  Меняем курсор на руку */
 }

 /* Убираем нативную иконку календаря */
 .dateInput::-webkit-calendar-picker-indicator {
     display: none !important;
 }

 .dateInput {
     -moz-appearance: textfield;
     /* Для Firefox */
     appearance: none;
     /* Для современных браузеров */
 }

 .selectLabel {
     font-size: 14px;
     font-family: 'PT Sans', sans-serif;
     color: #888;
     margin-bottom: 5px;
 }

 .selectValue {
     font-size: 18px;
     font-family: 'PT Sans', sans-serif;
 }

 .selectArrow {
     position: absolute;
     top: 65%;
     right: 20px;
     transform: translateY(-50%);
     width: 16px;
     /*  Настройте размер стрелки */
     height: 16px;
     /* pointer-events: none;  Чтобы клики проходили сквозь стрелку */
 }

 .selectDropdownList {

     position: absolute;
     top: 100%;
     /* Сразу под контейнером */
     left: 0px;
     right: 0px;
     margin: 0;
     padding: 0;
     list-style: none;
     background: #fff;
     border-top: none;
     /* Убираем двойную границу */
     border-radius: 0 0 20px 20px;
     /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
     z-index: 100;
     overflow: hidden;
     /* Чтобы скругления работали */
     display: none;
 }

 /* стили для номеров */
 .roomsBlock {
     /* width: 1795px; */
     /* Общая ширина контейнера */
     width: 100%;
     height: auto;
     display: flex;
     justify-content: center;
     gap: 44px;
     /* Промежуток между элементами */
     flex-wrap: wrap;
 }

 .roomBookingButtonTop {
     display: none;
 }

 .roomItem {
     /* border: 1px solid #000; */
     width: 517px;
     /* Ширина одного элемента */
     height: 853px;
     flex-shrink: 0;
     /* Запрещаем сжатие элементов */
     border-radius: 30px;
     background-color: #FFFFFF;
     padding: 25px 25px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
 }

 .roomImg {
     width: 100%;
     height: 388px;
     border-radius: 40px;
     object-fit: cover;
     /* border: 1px solid #000; */
     cursor: pointer;
     user-select: none;
 }
 
 .roomInfoContainer {
     margin-top: 10%;
     margin-bottom: 10%;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: start;
 }

 .roomText1 {
     font-size: 28px;
     font-weight: 700;
     font-family: 'PT Sans', sans-serif;
     color: #2B2B2B;
     height: 65px;
     cursor: pointer;
     user-select: none;
 }

 .roomText2 {
     font-size: 20px;
     font-weight: 400;
     font-family: 'PT Sans', sans-serif;
     color: #000000;
 }

 .roomText3 {
     font-size: 20px;
     font-weight: 400;
     font-family: 'PT Sans', sans-serif;
     color: #000000;
 }

 .roomPrice {
     font-size: 28px;
     font-weight: 700;
     font-family: 'PT Sans', sans-serif;
     color: #2B2B2B;
 }

 .roomMoreInfoButton {
     width: 100%;
     height: 70px;
     border: 1px solid;
     border-color: #272F07;
     border-radius: 20px;
     color: #272F07;
     font-family: 'PT Sans', sans-serif;
     font-weight: 700;
     font-size: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     user-select: none;
     cursor: pointer;
     box-sizing: border-box;
 }

 .roomBookingButton {
     width: 100%;
     height: 70px;
     background-color: #272F07;
     color: #FFFFFF;
     font-family: 'PT Sans', sans-serif;
     font-weight: 700;
     font-size: 20px;
     border-radius: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 @media (max-width: 767px) {
     .formContainer .inputFlex {

         margin-top: 10px !important;
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
         margin-bottom: 0 !important;
         flex-direction: column !important;
         width: 100% !important;
         height: 100% !important;
         position: relative !important;
         z-index: 1 !important;
         gap: 10px !important;
     }

     .inputFlex .dateInputContainer,
     .inputFlex .selectContainer {
         width: 100% !important;
         height: 42px !important;
         display: flex !important;
         flex-direction: column !important;
         justify-content: center !important;
         gap: 0 !important;
         border-radius: 10px !important;
     }

     .dateInputContainer .dateLabel {
         font-family: 'PT Sans', sans-serif !important;
         font-weight: 700 !important;
         color: #2B2B2B !important;
         margin-bottom: 5px !important;
         font-size: 12px !important;
         text-align: start !important;
     }

     .inputFlex .dateInputContainer .dateInput {
         font-family: 'PT Sans', sans-serif !important;
         font-size: 16px !important;
         font-weight: 400 !important;
         color: #000000 !important;
         appearance: none !important;
         border: none !important;
         background: none !important;
         outline: none !important;
         cursor: pointer !important;
         pointer-events: none !important;
         background: transparent !important;
         position: relative !important;
         z-index: 1 !important;
     }

     .inputFlex .dateInputContainer .calendarIcon {
         position: absolute !important;
         right: 10px !important;
         top: 50% !important;
         transform: translateY(-50%) !important;
         width: 30px !important;
         height: 30px !important;
         object-fit: contain !important;
         cursor: pointer !important;
         width: 20px !important;
         height: 20px !important;
         z-index: 3 !important;
         filter: drop-shadow(0 0 0.5px #272F07) !important;
         margin-right: 9px !important;
     }
 }