/* --- Основной контейнер --- */
.custom-room-layout {
    font-family: 'Playfair Display', serif; /* Шрифт заголовков (подобрать похожий) */
    background-color: #f7f4ef; /* Бежевый фон как на макете */
    padding: 40px 20px;
    color: #333;
}

/* --- Заголовок --- */
.room-header {
    text-align: center;
    margin-bottom: 30px;
}

.room-title {
    font-size: 3rem;
    font-weight: 400;
    color: #333;
    margin: 0;
}

/* --- Секция Галереи и Кнопки --- */
.room-visual-section {
    max-width: 1200px;
    margin: 0 auto 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.room-gallery-wrapper {
    width: 100%;
    margin-bottom: 30px;
    /* Здесь стили зависят от того, какой скрипт галереи использует Solidres.
       В идеале галерея должна сама выстраивать сетку. 
       Если галерея стандартная, она займет 100% ширины. */
}

/* --- Кнопка "Забронировать" --- */
.room-action-area {
    width: 100%;
    display: flex;
    justify-content: flex-end; /* Кнопка справа или по центру */
}

/* Если нужно выровнять кнопку как на макете (под сеткой фото справа) */
@media (min-width: 992px) {
    .room-action-area {
        justify-content: center;
    }
}

.btn-book-custom {
    display: inline-block;
    background-color: #d17d46; /* Оранжевый/Терракотовый цвет */
    color: #fff !important;
    padding: 15px 40px;
    font-size: 1.1rem;
    text-transform: uppercase;
    border-radius: 30px; /* Закругленные края */
    text-decoration: none;
    transition: background 0.3s ease;
    box-shadow: 0 4px 15px rgba(209, 125, 70, 0.4);
    border: none;
    font-family: sans-serif;
    letter-spacing: 1px;
}

.btn-book-custom:hover {
    background-color: #b56632;
    color: #fff;
}

/* --- Сетка деталей (3 колонки снизу) --- */
.room-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    border-top: 1px solid rgba(0,0,0,0.05); /* Легкая линия разделитель, если нужно */
    padding-top: 40px;
}

@media (min-width: 768px) {
    .room-details-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на десктопе */
    }
}

/* Элементы колонок */
.detail-col {
    padding: 0 15px;
}

.col-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.col-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin: 0;
    color: #333;
}

/* Иконки в заголовках колонок */
.icon-accent {
    font-size: 24px;
    color: #d17d46;
    border: 1px solid #d17d46;
    padding: 8px;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Контент внутри колонок */
.col-content {
    font-family: sans-serif; /* Обычный шрифт для текста */
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

.col-content p {
    margin-bottom: 10px;
}

/* Список удобств (иконка + текст) */
.amenities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.amenity-item i {
    font-size: 1.2rem;
    color: #333;
}
/* --- ЖЕЛЕЗОБЕТОННЫЙ ФИКС ХЕДЕРА --- */

/* 1. Фон секции (Используем ID + Класс для приоритета) */
#sp-header.sr-header-dark {
    background: #1c1814 !important; /* Темный цвет */
    background: linear-gradient(to bottom, #1c1814 0%, #2c2824 100%) !important;
    color: #fff !important;
    padding: 0 !important; /* Убираем лишние отступы секции */
    position: relative;
    z-index: 999;
}

/* 2. Выравнивание сетки (Убираем ступеньку) */
/* Мы обращаемся к .row внутри нашего хедера */
#sp-header.sr-header-dark > .container > .row,
#sp-header.sr-header-dark > .container-fluid > .row {
    display: flex !important;
    align-items: center !important; /* Центрирует Лого и Меню по вертикали */
    justify-content: space-between !important;
    min-height: 80px; /* Фиксируем высоту шапки */
}



/* 4. Меню (Справа, Белое, CAPS) */
#sp-header.sr-header-dark .sp-megamenu-parent {
    float: right !important;
    margin: 0 !important;
}

#sp-header.sr-header-dark .sp-megamenu-parent > li > a,
#sp-header.sr-header-dark .sp-megamenu-parent > li > span {
    color: #fff !important; /* Белый цвет */
    text-transform: uppercase !important; /* ЗАГЛАВНЫЕ */
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 80px !important; /* Равно высоте хедера = идеальный центр */
    padding: 0 15px !important;
}

/* Цвет активного пункта и ховера */
#sp-header.sr-header-dark .sp-megamenu-parent > li.active > a,
#sp-header.sr-header-dark .sp-megamenu-parent > li:hover > a {
    color: #a68b6a !important; /* Золотой */
}

/* 5. Исправление для мобильного меню (Гамбургер) */
#sp-header.sr-header-dark .offcanvas-init {
    color: #fff !important; /* Делаем иконку гамбургера белой */
    font-size: 24px;
    margin-top: 0 !important; /* Убираем отступ, если он есть */
}
/* --- 1. ИСПРАВЛЕНИЕ ПОЗИЦИИ ЛОГОТИПА --- */
/* Перебиваем ID #sp-logo, который задает absolute и top:95px */
#sp-header.sr-header-dark #sp-logo {
    position: static !important; /* Возвращаем элемент в общий поток */
    top: auto !important;        /* Сбрасываем отступ сверху */
    left: auto !important;
    margin: 0 !important;
    padding: 0 15px !important;  /* Небольшой отступ слева от края экрана */
    
    /* Центрирование внутри блока */
    display: flex !important;
    align-items: center !important;
    height: 100% !important;     /* Растягиваем на всю высоту хедера */
    z-index: 10 !important;
}

/* Гарантируем, что картинка внутри не имеет лишних отступов */
#sp-header.sr-header-dark #sp-logo .logo {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    background: none !important; /* Убираем старый фон, если остался */
}


/* --- 2. ГРАДИЕНТНЫЙ ФОН (Светлый -> Темный) --- */
#sp-header.sr-header-dark {
    /* 
       Логика градиента (to right - слева направо):
       0% - 20%: #ffffff (Белый) - зона логотипа
       20% - 50%: Переход от белого к темному
       50% - 100%: #1c1814 (Темный) - зона меню
    */
    background: linear-gradient(to right, #ffffff 0%, #ffffff 20%, #1c1814 50%, #1c1814 100%) !important;
    
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Тонкая линия снизу */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Тень, чтобы хедер отделился от контента */
    padding: 0 !important;
}


/* --- 3. ВЫРАВНИВАНИЕ СЕТКИ --- */
/* Гарантируем, что ряд (row) работает как Flex-контейнер */
#sp-header.sr-header-dark > .container > .row,
#sp-header.sr-header-dark > .container-fluid > .row {
    display: flex !important;
    align-items: center !important; /* Вертикальный центр */
    justify-content: space-between !important;
    min-height: 80px !important; /* Высота шапки */
}


/* --- 4. МЕНЮ (Остается белым, так как оно на темной стороне) --- */
#sp-header.sr-header-dark .sp-megamenu-parent > li > a {
    color: #fff !important;
    text-transform: uppercase !important;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 80px !important; /* Центровка текста по высоте */
}

/* Цвет активного пункта */
#sp-header.sr-header-dark .sp-megamenu-parent > li.active > a,
#sp-header.sr-header-dark .sp-megamenu-parent > li:hover > a {
    color: #a68b6a !important;
}
/* --- ФИНАЛЬНАЯ НАСТРОЙКА ЛОГОТИПА (Центр + Отступ) --- */

/* Настраиваем контейнер #sp-logo */
#sp-header.sr-header-dark #sp-logo {
    position: static !important;
    display: flex !important;
    align-items: center !important; /* Пытается центрировать математически */
    height: 80px !important;
    padding-left: 50px !important; /* Ваш отступ слева */
    margin: 0 !important;
    overflow: hidden; /* Обрезает всё, что торчит (на всякий случай) */
}

/* 2. Ссылка-обертка (Сжимаем её до размера картинки) */
#sp-header.sr-header-dark .logo {
    display: block !important; /* Или flex */
    height: auto !important;   /* ВАЖНО: Убираем 100%, чтобы не распирало */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important; /* Убираем лишние отступы от шрифта */
    background: none !important;
}

/* 3. Сама картинка (Поднимаем вверх) */
#sp-header.sr-header-dark .logo img,
#sp-header.sr-header-dark .logo-image {
    display: block !important;
    max-height: 50px !important; /* Размер лого */
    width: auto !important;
    
    /* === ВОТ ЭТО СВОЙСТВО ПОДНИМАЕТ ЛОГОТИП === */
    margin-top: -30px !important; 
    /* Попробуйте -5px, -10px или -15px, пока не встанет ровно */
    
    margin-bottom: 0 !important;
}
/* --- 5. МОБИЛЬНОЕ МЕНЮ (БУРГЕР - АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИЕ) --- */

/* 1. Делаем хедер "точкой отсчета" */
#sp-header.sr-header-dark {
    position: relative !important; /* Это важно! */
}

/* 2. Вырываем бургер из потока и ставим в правый угол */
body #sp-header.sr-header-dark #offcanvas-toggler {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important; /* Пусть остается 0, раз он такой упрямый */
    
    /* === СДВИГАЕМ ВЛЕВО ЧЕРЕЗ ОТСТУП === */
    margin-right: 25px !important; 
    /* Это свойство отодвинет кнопку от правого края на 25px.
       Меняйте это число, чтобы двигать влево/вправо. */
       
    height: 80px !important;
    width: 60px !important; /* Ограничим ширину области клика */
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    float: none !important;
}

/* 3. Настраиваем цвет и размер полосок (ОРАНЖЕВЫЙ) */
#sp-header.sr-header-dark .burger-icon span {
    background-color: #f1b05f !important; /* Золотистый цвет */
    height: 2px !important;
    width: 24px !important;
    display: block !important;
    margin-bottom: 6px !important;
    opacity: 1 !important;
    border-radius: 2px;
}

/* Убираем отступ у последней полоски */
#sp-header.sr-header-dark .burger-icon span:last-child {
    margin-bottom: 0 !important;
}

/* 4. Корректируем контейнер иконки */
#sp-header.sr-header-dark .burger-icon {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    
    /* === ИЗМЕНЯЙТЕ ЭТО ЗНАЧЕНИЕ === */
    margin-top: -35px !important; 
    /* -10px поднимет немного, -20px поднимет сильно */
    
    margin-bottom: 0 !important;
    width: auto !important;
    height: auto !important;
}


/* --- СКРЫВАЕМ БУРГЕР НА ДЕСКТОПЕ --- */
@media (min-width: 992px) {
    body #sp-header.sr-header-dark #offcanvas-toggler {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ==================================================================
   ИСПРАВЛЕНИЕ КАРТОЧКИ НОМЕРА (DARK THEME FIX)
   ================================================================== */

/* 1. Глобальный цвет текста внутри карточки */
.sr-room-card {
    color: #ccc !important; /* Весь текст светло-серый */
}

.sr-room-card h1, 
.sr-room-card h2, 
.sr-room-card h3, 
.sr-room-card h4, 
.sr-room-card h5, 
.sr-room-card h6 {
    color: #fff !important; /* Заголовки чисто белые */
}

/* 2. Описание и параграфы */
.sr-room-desc, 
.sr-room-desc p, 
.sr-room-desc span,
.sr-room-desc div {
    color: #aaa !important; /* Текст описания читаемый */
    background: transparent !important; /* Убираем белый фон, если скопировано из Word */
}

/* 3. Удобства (Facilities) - Исправляем иконки и текст */
.sr-room-facilities {
    margin-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

/* Заголовок "УСЛУГИ И ОСНАЩЕНИЕ" (если он выводится текстом) */
.sr-room-facilities strong,
.sr-room-facilities b {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

/* Сами иконки удобств */
.sr-room-facilities .fa,
.sr-room-facilities i {
    color: #a68b6a !important; /* ЗОЛОТОЙ ЦВЕТ ИКОНОК */
    font-size: 14px;
    width: 20px;
    text-align: center;
}

/* Текст удобства */
.sr-room-facilities span {
    color: #bbb !important;
    margin-right: 15px;
    display: inline-block;
    margin-bottom: 5px;
    font-size: 12px;
}

/* 4. Кнопки действий (Подробнее, Календарь, Скрыть тарифы) */
/* Делаем их контурными (Ghost buttons) */
.sr-room-right .btn-group .btn,
.sr-room-right .btn-secondary,
.sr-room-right .btn-default {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    color: #ccc !important;
    font-size: 12px !important;
    text-transform: uppercase;
    border-radius: 0 !important; /* Квадратные или чуть скругленные */
    margin-right: 5px;
    margin-bottom: 5px;
}

.sr-room-right .btn:hover {
    border-color: #a68b6a !important;
    color: #fff !important;
}

/* Иконки внутри кнопок */
.sr-room-right .btn i {
    color: #fff !important;
}

/* 5. Блок предупреждения "Нет тарифов" (Желтый блок на скрине) */
.sr-room-card .alert-warning {
    background-color: rgba(166, 139, 106, 0.15) !important; /* Прозрачный золотой/коричневый */
    border: 1px solid #a68b6a !important;
    color: #e0d0b8 !important; /* Светло-бежевый текст */
    border-radius: 4px;
    margin-top: 20px;
}

/* Ссылка внутри алерта ("Нажмите сюда") */
.sr-room-card .alert-warning a {
    color: #fff !important;
    text-decoration: underline;
    font-weight: bold;
}

/* 6. Характеристики номера (Площадь, Спальные места) */
/* Обычно это выводится как i.fa-home + текст */
.sr-room-desc .fa, 
.sr-room-desc i {
    color: #a68b6a !important; /* Если хотите золотой (рекомендую) */
    margin-right: 5px;
}

/* 7. Верхняя панель "Выберите категорию..." (над карточками) */
.alert-info, 
.well {
    background-color: #231f1b !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #ccc !important;
}
.alert-info .btn {
    background-color: #a68b6a !important;
    border: none;
    color: #fff;
}
/* --- Общие настройки секции футера --- */
.apsny-footer-section {
    color: #fff;
    padding: 50px 0;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/* Стили заголовков модулей (включая заголовок Меню Helix) */
.apsny-footer-section .sp-module-title,
.apsny-module-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 0; /* Убираем дефолтные линии хеликса если есть */
}

/* Золотая линия под заголовками */
.apsny-footer-section .sp-module-title::after,
.apsny-module-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #C19A6B;
}

/* Ссылки общие */
.apsny-footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}
.apsny-footer-section a:hover {
    color: #C19A6B;
}

/* --- ЛЕВАЯ КОЛОНКА (Лого + Контакты) --- */
.apsny-footer-logo img {
    max-width: 150px;
    height: auto;
    margin-bottom: 25px;
    /* Если лого черное, инвертируем в белое */
    filter: brightness(0) invert(1); 
}

.apsny-contact-item {
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
}

.apsny-label {
    color: #888;
    margin-right: 10px;
    min-width: 70px; /* Чтобы двоеточия были на одной линии */
}

/* --- ЦЕНТРАЛЬНАЯ КОЛОНКА (Меню Joomla / Helix) --- */
/* Helix обычно выводит меню как ul.nav или ul.menu внутри .sp-module-content */

.apsny-footer-section ul.nav,
.apsny-footer-section ul.menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.apsny-footer-section ul.nav li,
.apsny-footer-section ul.menu li {
    margin-bottom: 10px;
    padding-left: 15px;
    position: relative;
    display: block;
    border: none; /* Убираем границы если хеликс добавляет */
}

/* Стрелочка перед пунктом меню */
.apsny-footer-section ul.nav li::before,
.apsny-footer-section ul.menu li::before {
    content: '›';
    position: absolute;
    left: 0;
    top: 0;
    color: #C19A6B;
    font-size: 18px;
    line-height: 1.4;
}

.apsny-footer-section ul.nav li a,
.apsny-footer-section ul.menu li a {
    font-size: 15px;
    font-weight: 400;
    transition: transform 0.3s;
    display: inline-block;
}

.apsny-footer-section ul.nav li a:hover,
.apsny-footer-section ul.menu li a:hover {
    transform: translateX(5px);
    color: #fff;
    background: none; /* Убираем фон хеликса при наведении */
}

/* --- ПРАВАЯ КОЛОНКА (Мессенджеры) --- */
.apsny-socials {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.apsny-social-btn {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff !important; /* Принудительно белый */
    font-weight: 500;
    transition: all 0.3s ease;
}

.apsny-social-btn i {
    font-size: 20px;
    margin-right: 15px;
    width: 20px;
    text-align: center;
}

/* Hover эффекты кнопок */
.apsny-social-btn.whatsapp:hover {
    background: #25D366;
    border-color: #25D366;
    transform: translateY(-2px);
    color: #fff !important;
}

.apsny-social-btn.telegram:hover {
    background: #0088cc;
    border-color: #0088cc;
    transform: translateY(-2px);
    color: #fff !important;
}

/* Мобильная адаптация (Helix сам ставит колонки в стек, мы только ровняем текст) */
@media (max-width: 767px) {
    .apsny-footer-section {
        text-align: center;
    }
    
    .apsny-footer-section .sp-module-title::after,
    .apsny-module-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .apsny-contact-item {
        justify-content: center;
    }
    
    .apsny-footer-section ul.nav li,
    .apsny-footer-section ul.menu li {
        padding-left: 0;
    }
    
    .apsny-footer-section ul.nav li::before,
    .apsny-footer-section ul.menu li::before {
        display: none; /* Убираем стрелочки на мобильном */
    }
    
    .apsny-social-btn {
        justify-content: center;
    }
}
/* --- ВЫРАВНИВАНИЕ МОДУЛЯ ПО ЛЕВОМУ КРАЮ --- */
/* Сбрасываем выравнивание текста у самого контейнера модуля */
.apsny-footer-section .sp-module,
.apsny-footer-section .sp-module-content {
    text-align: left !important;
    align-items: flex-start !important;
}

/* --- НАСТРОЙКА СПИСКА МЕНЮ --- */
.apsny-footer-section .sp-module ul.nav,
.apsny-footer-section .sp-module ul.menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* FLEXBOX КОНФИГУРАЦИЯ */
    display: flex !important;
    flex-direction: column !important; /* Пункты идут сверху-вниз */
    flex-wrap: wrap !important;        /* Разрешаем перенос во второй столбец */
    
    /* ВЫРАВНИВАНИЕ (Ключевой момент) */
    align-items: flex-start !important;   /* Прижимает пункты ВЛЕВО внутри столбца */
    align-content: flex-start !important; /* Прижимает сами столбцы ВЛЕВО */
    text-align: left !important;          /* Выравнивание текста */
    
    /* ВЫСОТА */
    /* Используем фиксированную высоту или 100%, если соседние колонки растягивают футер */
    height: 100% !important; 
    /* Если 100% не срабатывает (футер схлопывается), раскомментируйте нижнюю строку и задайте высоту вручную: */
    /* height: 180px !important; */
    
    gap: 0 40px !important; /* 0px между строками (регулируем margin-ом), 40px между столбцами */
    width: 100%;
}

/* --- СТИЛИ ПУНКТОВ --- */
.apsny-footer-section .sp-module ul.nav > li,
.apsny-footer-section .sp-module ul.menu > li {
    margin: 0 0 12px 0 !important; /* Отступ снизу */
    padding: 0 !important;
    border: none !important;
    display: block !important;
    width: auto !important;
    max-width: 100%;
}

/* --- ССЫЛКИ --- */
.apsny-footer-section .sp-module ul.nav > li > a,
.apsny-footer-section .sp-module ul.menu > li > a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    line-height: 1.2 !important;
    transition: color 0.3s ease;
    display: inline-block; /* Важно для ссылок */
}

/* Убираем иконки шаблона */
.apsny-footer-section .sp-module ul.nav > li > a::before,
.apsny-footer-section .sp-module ul.menu > li > a::before,
.apsny-footer-section .sp-module ul.nav > li::before,
.apsny-footer-section .sp-module ul.menu > li::before {
    content: none !important;
    display: none !important;
}

/* Ховер */
.apsny-footer-section .sp-module ul.nav > li > a:hover,
.apsny-footer-section .sp-module ul.menu > li > a:hover {
    color: #C19A6B !important;
    transform: translateX(5px);
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ --- */
@media (max-width: 767px) {
    .apsny-footer-section .sp-module ul.nav,
    .apsny-footer-section .sp-module ul.menu {
        height: auto !important;
        align-items: center !important; /* На телефоне красиво по центру */
        align-content: center !important;
        text-align: center !important;
    }
}
/* --- ОБЩИЕ СТИЛИ МОЗАИКИ (Используются и в модуле, и в номере) --- */

.mosaic-container {
    display: grid;
    /* Адаптивная ширина колонок */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    /* Базовая высота ряда */
    grid-auto-rows: 100px;
    /* DENSE заполняет пустоты */
    grid-auto-flow: dense; 
    gap: 15px; /* Воздух */
    padding: 0; 
    margin-top: 30px;
}

.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #f0f0f0;
}

.mosaic-item:hover {
    z-index: 10;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.mosaic-item:hover img {
    transform: scale(1.05);
}

/* --- РАЗМЕРЫ СЕТКИ --- */
.mosaic-item.grid-w1-h1 { grid-column: span 1; grid-row: span 1; }
.mosaic-item.grid-w1-h2 { grid-column: span 1; grid-row: span 2; }
.mosaic-item.grid-w2-h1 { grid-column: span 2; grid-row: span 1; }
.mosaic-item.grid-w2-h2 { grid-column: span 2; grid-row: span 2; }
.mosaic-item.grid-w2-h3 { grid-column: span 2; grid-row: span 3; }

/* --- ОВЕРЛЕЙ С ЛУПОЙ --- */
.item-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    pointer-events: none;
}
.mosaic-item:hover .item-overlay {
    opacity: 1;
}

.mosaic-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- МОБИЛЬНАЯ ВЕРСИЯ --- */
@media (max-width: 768px) {
    .mosaic-container {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-auto-rows: 80px;
        gap: 8px;
    }
}
/* --- СТИЛЬНЫЙ БАННЕР БРОНИРОВАНИЯ (Без дат) --- */
/* --- СТИЛЬНЫЙ БАННЕР БРОНИРОВАНИЯ --- */
.booking-banner-wrapper {
    background: #fff;
    max-width: 1140px;
    
    /* ИСПРАВЛЕНИЕ: Делаем положительный отступ сверху */
    margin: 40px auto 60px; 
    
    position: relative;
    z-index: 10; /* Уровень слоя, чтобы не перекрывал выпадающее меню */
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border-bottom: 3px solid #C19A6B;
    overflow: hidden;
}

/* Остальные стили внутри можно оставить прежними, 
   но на всякий случай дублирую полный блок для удобства замены: */

.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 40px;
    gap: 30px;
}

/* ЛЕВАЯ ЧАСТЬ */
.banner-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.banner-icon {
    font-size: 32px;
    color: #C19A6B;
}

.banner-text h3 {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    font-family: 'Roboto', sans-serif;
}

.banner-text p {
    margin: 0;
    font-size: 14px;
    color: #777;
    font-weight: 400;
}

/* ПРАВАЯ ЧАСТЬ (Кнопка) */
.btn-banner-book {
    background: #C19A6B;
    color: #fff !important;
    text-decoration: none;
    padding: 15px 40px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-block;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(193, 154, 107, 0.3);
}

.btn-banner-book:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 992px) {
    .booking-banner-wrapper {
        margin: 20px auto; /* Обычный отступ на мобильных */
        border-radius: 0;
        box-shadow: none;
        border-bottom: none;
        background: #f9f9f9;
        padding: 10px;
    }
    
    .banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 20px;
    }
    
    .banner-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-banner-book {
        width: 100%;
        display: block;
        text-align: center;
    }
}


.banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 40px;
    gap: 30px;
}

/* ЛЕВАЯ ЧАСТЬ: Иконка и Текст */
.banner-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.banner-icon {
    font-size: 32px;
    color: #C19A6B;
}

.banner-text h3 {
    margin: 0 0 5px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    font-family: 'Roboto', sans-serif;
}

.banner-text p {
    margin: 0;
    font-size: 14px;
    color: #777;
    font-weight: 400;
}

/* ПРАВАЯ ЧАСТЬ: Кнопка */
.btn-banner-book {
    background: #C19A6B;
    color: #fff !important;
    text-decoration: none;
    padding: 15px 40px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 5px;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-block;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(193, 154, 107, 0.3);
}

.btn-banner-book:hover {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
    .booking-banner-wrapper {
        margin: 20px auto;
        border-radius: 0;
        box-shadow: none;
        border-bottom: none;
        background: #f9f9f9;
        padding: 10px;
    }
    
    .banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 20px;
    }
    
    .banner-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-banner-book {
        width: 100%;
        display: block;
    }
}