/* ==========================================================================
   1. CSS Variables (:root)
   ========================================================================== */

   :root {
    /* Colors */
    --clr-primary: #003366;
    --clr-secondary: #006699;
    --clr-gradient-center: #004a8d;
    --clr-text: #676767;
    --clr-text-header-phone: #7d723c;
    --clr-text-footer: #ccc;
    --clr-white: #fff;
    --clr-bg-block: #fafafa;
    --clr-border: #ccc;
    --clr-border-dotted: #c8c8c8; /* Оставляем, вдруг понадобится */
    --clr-link-sidebar: #3198ff;
    --clr-button-bg: var(--clr-secondary);
    --clr-button-bg-hover: var(--clr-primary);
    --clr-heading-block-bg: #eeeeeec9;
    --clr-border-block-heading: #a6c6d4;

    /* Typography */
    --font-base: "Trebuchet MS", verdana, geneva, sans-serif;
    --base-font-size: 13px;
    --base-line-height: 1.6;

    /* Layout */
    --container-width: 960px;
    --container-padding: 15px;
    --mobile-padding: 15px;
    --sidebar-width: 220px;
    --content-gap: 30px;
}

/* ==========================================================================
   2. Reset & Base Styles
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; height: 100%; }
body { font-family: var(--font-base); font-size: var(--base-font-size); color: var(--clr-text); line-height: var(--base-line-height); background: var(--clr-white) url('../images/bk1.jpg') center center no-repeat fixed; background-size: cover; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; }
#wrapper { flex-grow: 1; display: flex; flex-direction: column; }
img { max-width: 100%; height: auto; display: block; vertical-align: middle; }
a { color: var(--clr-secondary); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; }
a:hover { text-decoration: underline; color: var(--clr-primary); }
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.75em; color: var(--clr-primary); font-weight: normal; line-height: 1.3; }
h1 { font-size: 20px; margin-top: 10px; margin-bottom: 10px; }
h2 { font-family: Arial, sans-serif; font-size: 15px; color: var(--clr-secondary); margin-top: 10px; margin-bottom: 3px; }
h3 { font-size: 16px; color: var(--clr-secondary); margin-top: 5px; margin-bottom: 5px; }
p { margin-bottom: 1em;  }
ul, ol { margin-bottom: 1em; list-style-position: inside; margin-left: 1.2em; }
ul { list-style-type: square; }
nav ul, .bottom-menu ul, .lang ul, .news-list,
#blocks-left .left-menu ul, #blocks-left .news-list-sidebar,
.bds .breadcrumb {
    margin: 0; padding: 0; list-style: none;
}

/* ==========================================================================
   3. Layout Structure
   ========================================================================== */

#all, #all-mainpage { max-width: var(--container-width); width: 100%; margin: 0 auto 30px auto; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
#all { background-color: var(--clr-white); }
#all-mainpage { background-color: var(--clr-white); background-image: url('../images/main-building.jpg'); background-repeat: no-repeat; background-position: center top; }
#header, #header-mainpage { padding-top: 15px; padding-bottom: 10px; padding-left: 0; padding-right: 0; border-bottom: 3px solid var(--clr-primary); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 100; }
#main, #main-page { padding: 20px var(--container-padding); flex-grow: 1; }
#footer { max-width: var(--container-width); width: 100%; margin: 30px auto 0 auto; padding: 25px var(--container-padding); background-color: var(--clr-primary); color: var(--clr-text-footer); font-size: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px var(--content-gap); }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Header --- */
#logo { flex-shrink: 0; padding-left: var(--container-padding); margin-right: 15px; }
#logo img { width: 197px; height: 88px; display: block; }
.header-right-column { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; padding-right: var(--container-padding); }
.header-top-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: stretch; gap: 20px; width: 100%; }
.header-top-row > div { display: flex; align-items: center; justify-content: center; padding: 5px 15px; border-left: 8px solid var(--clr-primary); background-color: var(--clr-heading-block-bg); flex-shrink: 0; }
.lang { order: 1; } .lang ul { display: flex; align-items: baseline; } .lang ul li { line-height: 1; } .lang ul li + li::before { content: "|"; margin: 0 1em; color: var(--clr-text); } .lang ul li a, .lang ul li.active span { font-size: 16px; text-decoration: none; display: inline-block; vertical-align: baseline; transition: color 0.2s; } .lang ul li a { color: var(--clr-text); font-weight: normal; } .lang ul li a:hover { color: var(--clr-primary); text-decoration: underline; } .lang ul li.active span { color: var(--clr-primary); font-weight: bold; cursor: default; }
.video { order: 2; padding: 5px 20px; font-size: 16px; line-height: 1.2; text-align: center; } .video a { color: var(--clr-primary); text-align: center; line-height: 1.2; } .video a:hover { text-decoration: underline; color: var(--clr-secondary); }
.phone { order: 3; font-size: 28px; color: var(--clr-text-header-phone); font-weight: bold; white-space: nowrap; } .phone-small { font-size: 22px; color: var(--clr-primary); margin-left: 0.2em; }

/* --- Top Navigation Menu --- */
#topmenu { width: 100%; order: 3; margin-top: 15px; background: linear-gradient(to right, var(--clr-primary), var(--clr-gradient-center), var(--clr-primary)); }
#topmenu .wrapper { max-width: var(--container-width); width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }
#topmenu ul { display: flex; justify-content: center; flex-wrap: wrap; }
#topmenu ul li a { color: var(--clr-white); padding: 10px 15px; display: block; font-size: 16px; white-space: nowrap; text-decoration: none; }
#topmenu ul li a:hover, #topmenu ul li a:focus { background-color: rgba(255, 255, 255, 0.1); text-decoration: none; }
#topmenu ul li.active a { background-color: var(--clr-white); color: var(--clr-primary); }

/* --- Mobile Buttons --- */
.mobile-menu-button { display: none; /* Shown in MQ */ }
.mobile-sidebar-button { display: none; /* Shown in MQ */ }

/* --- Main Content (Inner Pages) --- */
#main { display: flex; flex-wrap: wrap; gap: var(--content-gap); position: relative; }
#blocks-left { flex: 0 0 var(--sidebar-width); }
#content { flex: 1 1 calc(100% - var(--sidebar-width) - var(--content-gap)); min-width: 0; }

/* --- Sidebar Components --- */
#blocks-left .left-menu { margin-bottom: 25px; }
#blocks-left .left-menu ul li { border-bottom: 1px dotted var(--clr-primary); }
#blocks-left .left-menu ul li a { color: var(--clr-primary); display: block; padding: 6px 0; font-size: 0.95rem; text-decoration: none; }
#blocks-left .left-menu ul li a:hover, #blocks-left .left-menu ul li a:focus { color: var(--clr-secondary); }
#blocks-left .left-menu ul li.active > a { font-weight: bold; color: var(--clr-secondary); }

#blocks-left .sidebar-block { margin-bottom: 20px; border: 1px solid var(--clr-border); border-left: 7px solid var(--clr-primary); background: var(--clr-bg-block); padding: 15px; list-style: none !important; }
#blocks-left .sidebar-block h3, #blocks-left #lastnews-page h3 { font-size: 1rem; font-weight: bold; color: var(--clr-primary); margin: -15px -15px 15px -15px; padding: 8px 15px; background-color: var(--clr-heading-block-bg); border-bottom: 1px dotted var(--clr-border-block-heading); }
#blocks-left .sidebar-block p { text-align: left; padding-top: 0; margin-bottom: 0.5em; }
#blocks-left .sidebar-block a { color: var(--clr-link-sidebar); }
#blocks-left .sidebar-block a:hover { color: var(--clr-secondary); }
#blocks-left .blocksphone-page { font-size: 1.2rem; color: var(--clr-secondary); }
#blocks-left .blocksphone-small-page { font-size: 0.9rem; color: var(--clr-secondary); }
#blocks-left .booking-page.sidebar-block p {
  margin: 0;
  padding: 0;
  /* Если он все равно занимает место из-за высоты строки: */
  line-height: 0;
  font-size: 0; /* Может помочь скрыть его полностью */
  /* Или даже: */
  /* display: none; */ /* Если он точно не нужен для отображения */
}
/* --- News List Styles (MAIN PAGE + SIDEBAR) --- */
/* Layout LI on MAIN PAGE */
.news-list li { flex: 1 1 30%; min-width: 250px; display: flex; flex-direction: column; }
/* Layout LI in SIDEBAR */
#blocks-left .news-list-sidebar li {
    display: block;
    /* border-bottom: 1px dotted var(--clr-primary); -- REMOVED */
    padding-bottom: 0; /* Reset padding */
    margin-bottom: 20px; /* INCREASED margin for separation */
}
#blocks-left .news-list-sidebar li:last-child {
    /* border-bottom: none; -- REMOVED */
    margin-bottom: 0; /* Remove margin from last */
    /* padding-bottom: 0; -- Already 0 */
}
/* COMMON LI appearance */
.news-list li, #blocks-left .news-list-sidebar li { font-size: 0.9rem; color: var(--clr-text); text-align: left; background: none; border: none; padding: 0; /* Other resets ok */ }
/* COMMON H3 */
.news-list li h3, #blocks-left .news-list-sidebar li h3 { margin: 0 0 5px 0; font-size: 1rem; font-weight: bold; color: var(--clr-primary); line-height: 1.3; background: none; border: none; padding: 0; }
/* COMMON H3 Link */
.news-list li h3 a, #blocks-left .news-list-sidebar li h3 a { color: inherit;  }
.news-list li h3 a:hover, .news-list li h3 a:focus, #blocks-left .news-list-sidebar li h3 a:hover, #blocks-left .news-list-sidebar li h3 a:focus { color: var(--clr-secondary); text-decoration: none; }
/* COMMON Date */
.news-list li .date, #blocks-left .news-list-sidebar li .date { font-size: 0.8rem; color: #888; margin-bottom: 8px; display: block; }
/* COMMON Text + TRUNCATION */
.news-list li .news-introtext, .news-list li p, #blocks-left .news-list-sidebar li .news-introtext, #blocks-left .news-list-sidebar li p { margin: 0; text-align: left; margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; }
/* Specific flex properties for main page text */
.news-list li .news-introtext, .news-list li p { flex-grow: 1; margin-top: auto; }

/* --- "All News" Button --- */
.lastnewsbutton { margin-top: 15px; clear: both; text-align: left; }
.lastnewsbutton a { display: inline-block; padding: 4px 15px; background: var(--clr-button-bg); color: var(--clr-white); border-radius: 2px; text-decoration: none; font-size: 0.9rem; transition: background-color 0.2s ease; }
.lastnewsbutton a:hover, .lastnewsbutton a:focus { background: var(--clr-button-bg-hover); color: var(--clr-white); text-decoration: none; }
#blocks-left #lastnews-page .lastnewsbutton a { background: var(--clr-button-bg); color: var(--clr-white); } /* Ensure sidebar styles */
#blocks-left #lastnews-page .lastnewsbutton a:hover, #blocks-left #lastnews-page .lastnewsbutton a:focus { background: var(--clr-button-bg-hover); color: var(--clr-white); }

/* --- Breadcrumbs --- */
.bds { margin-top: 25px; padding-top: 10px; border-top: 1px dotted var(--clr-border-dotted); font-size: 12px; color: #999; }
.bds nav { margin-bottom: 0; }
.bds .breadcrumb { margin-bottom: 0; }
.bds .breadcrumb-item { display: inline-block; }
.bds .breadcrumb-item + .breadcrumb-item::before { display: inline-block; padding-right: .5rem; padding-left: .5rem; color: #6c757d; content: "/"; }
.bds .breadcrumb-item a { color: var(--clr-secondary); }
.bds .breadcrumb-item a:hover { color: var(--clr-primary); text-decoration: underline; }
.bds .breadcrumb-item.active { color: var(--clr-text); font-weight: normal; }

/* --- Homepage Specific Components --- */
.main-page-layout { display: flex; flex-wrap: wrap; gap: var(--content-gap); align-items: flex-start; margin-bottom: 30px; }
#main-content { flex: 0 1 23%; min-width: 180px; max-width: 23%; }
#main-content p { text-align: left; }
.main-page-image { flex: 1 1 65%; min-width: 300px; }
#lastnews { margin-top: 30px; margin-bottom: 30px; }
#lastnews h1 { border-bottom: 1px dotted var(--clr-border-dotted); padding-bottom: 10px; margin-bottom: 20px; font-size: 1.5rem; color: var(--clr-primary); }
.news-list { display: flex; flex-wrap: wrap; gap: var(--content-gap) 20px; margin-bottom: 20px; }
#lastnews .lastnewsbutton { text-align: left; }

/* --- Bottom Blocks (#blocks) --- */
#blocks { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 20px; margin-bottom: 20px; }
#blocks .block-item { flex: 1 1 30%; min-width: 260px; border: 1px solid var(--clr-border); border-left: 7px solid var(--clr-primary); background-color: var(--clr-bg-block); display: flex; flex-direction: column; overflow: hidden; }
#blocks .block-item h3 { font-size: 1rem; font-weight: bold; color: var(--clr-primary); margin: 0; padding: 8px 15px; background-color: var(--clr-heading-block-bg); border-bottom: 1px dotted var(--clr-border-block-heading); flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
#blocks .block-item h3 .block-icon { color: var(--clr-secondary); font-size: 1.1em; line-height: 1; }
#blocks .block-item .block-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; font-size: 0.9rem; line-height: 1.5; }
#blocks .block-item .block-content p { text-align: left; margin: 0 0 0.5em 0; padding: 0; }
#blocks .block-item .block-content p:last-child { margin-bottom: 0; }
#blocks .block-item .block-content p i { margin-right: 5px; color: var(--clr-secondary); }
#blocks .block-item a { color: var(--clr-secondary); }
#blocks .block-item a:hover { color: var(--clr-primary); }
#blocks .rent .blocksphone { font-size: 1.5em; color: var(--clr-primary); font-weight: bold; line-height: 1.2; }
#blocks .rent .blocksphone-small { font-size: 1.1em; color: var(--clr-primary); display: block; }
#blocks .booking .block-content.content-centered { justify-content: center; align-items: center; text-align: center; }
#blocks .booking .button-like { display: inline-block; padding: 8px 20px; background-color: var(--clr-button-bg); color: var(--clr-white); border-radius: 2px; text-decoration: none; transition: background-color 0.3s; margin-top: 10px; }
#blocks .booking .button-like:hover, #blocks .booking .button-like:focus { background-color: var(--clr-button-bg-hover); color: var(--clr-white); text-decoration: none; }
#blocks .location .block-content { padding: 0; }
#blocks .location .map-container { width: 100%; height: 150px; line-height: 0; overflow: hidden; }
#blocks .location iframe { width: 100%; height: 100%; border: 0; }

/* --- Footer --- */
#footer .footer-info { order: 1; flex: 0 1 auto; }
#footer .footer-logo { margin-bottom: 10px; }
#footer .footer-logo img { max-width: 110px; height: auto; }
#footer .footer-address { font-size: 11px; color: #D0D0D0; line-height: 1.6; }
#footer .bottom-menu { order: 2; }
#footer .bottom-menu ul { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 15px; }
#footer .bottom-menu ul li a { color: var(--clr-white); font-size: 12px; text-decoration: none; }
#footer .bottom-menu ul li a:hover, #footer .bottom-menu ul li a:focus { text-decoration: underline; }
#footer .copyright_text { order: 3; flex: 0 1 auto; font-size: 11px; line-height: 1.6; text-align: right; color: #D0D0D0; margin-left: auto; }


/* ==========================================================================
   5. Media Queries (Responsive Design)
   ========================================================================== */

/* --- Tablet --- */
@media (max-width: 991px) {
    #blocks-left { flex-basis: 30%; width: 30%; }
    #content { flex-basis: calc(70% - var(--content-gap)); width: calc(70% - var(--content-gap)); }
    #blocks { gap: 15px; }
    #blocks .block-item { flex-basis: calc(50% - 7.5px); min-width: 240px; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
    h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.15rem; }
    #all, #all-mainpage { max-width: none; box-shadow: none; margin-bottom: 15px; padding-left: 0; padding-right: 0; }
    #all-mainpage { background-image: none !important; margin-bottom: 30px; }
    #main, #main-page { padding: 15px var(--mobile-padding); }

    /* Mobile Header */
    #header, #header-mainpage { flex-direction: column; align-items: center; border-bottom: none; padding-top: 15px; padding-bottom: 10px; }
    #logo { order: 0; padding-left: var(--mobile-padding); padding-right: var(--mobile-padding); margin-right: 0; margin-bottom: 15px; width: auto; display: flex; justify-content: center; }
    .header-right-column { order: 1; margin-left: 0; width: 100%; align-items: stretch; gap: 8px; padding-left: var(--mobile-padding); padding-right: var(--mobile-padding); }
    .header-top-row { justify-content: center; gap: 8px; }
    .header-top-row > div { flex: 1; padding: 10px; font-size: 0.9rem; border-left-width: 5px; white-space: normal; text-align: center; min-height: 40px; min-width: 80px; }
    .phone { font-size: 1rem; font-weight: bold; } .phone-small { display: none; } .lang ul { justify-content: center; } .lang ul li a, .lang ul li.active span { font-size: 0.9rem; }

    /* Mobile Top Menu Button */
    .mobile-menu-button {
        order: 2; display: flex; align-items: center; justify-content: space-between;
        background: linear-gradient(to right, var(--clr-primary), var(--clr-gradient-center), var(--clr-primary));
        color: white; border: none; padding: 10px 20px; cursor: pointer; width: 100%;
        margin-top: 15px; position: relative; z-index: 101; min-height: 44px;
        box-sizing: border-box; font-size: 1rem; text-align: left;
        transition: background-color 0.3s ease;
    }
    .mobile-menu-button::after {
        content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
        font-size: 1rem; line-height: 1; display: inline-block; transition: transform 0.3s ease;
    }
    .mobile-menu-button.is-active::after { transform: rotate(180deg); }

    /* Mobile Top Menu Dropdown */
    #topmenu {
        order: 3; margin-top: 0; width: 100%;
        overflow: hidden; max-height: 0;
        /* === ИСПРАВЛЕНИЕ: Добавляем visibility для предотвращения "прыжка" === */
        visibility: hidden;
        transition: max-height 0.4s ease-in-out, visibility 0s linear 0.4s; /* Плавная высота + мгновенное скрытие/показ visibility */
    }
    #topmenu.is-open {
        max-height: 100vh;
        visibility: visible; /* Показываем */
        transition-delay: 0s; /* Убираем задержку для visibility при открытии */
    }
    /* === ИСПРАВЛЕНИЕ: flex-direction ТОЛЬКО для мобильных === */
    #topmenu .wrapper { max-width: none; padding-left: 0; padding-right: 0; }
    #topmenu ul { flex-direction: column; align-items: stretch; } /* На мобильных всегда колонка */
    #topmenu ul li a { text-align: center; padding: 12px var(--mobile-padding); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
    #topmenu ul li:last-child a { border-bottom: none; }

    /* --- Mobile Sidebar & Content Layout --- */
    #main { flex-direction: column; gap: 0; }

    /* Button to toggle sidebar */
    .mobile-sidebar-button {
        display: flex; order: 1; width: 100%; padding: 10px var(--mobile-padding);
        background-color: var(--clr-primary); color: var(--clr-white);
        border: none; border-radius: 2px; cursor: pointer; font-size: 0.95rem;
        text-align: center; align-items: center; justify-content: center; gap: 8px;
    }
    .mobile-sidebar-button .fa-solid { font-size: 1.1em; line-height: 1; }

    /* Sidebar visibility & animation */
    #blocks-left {
        width: 100%; flex-basis: auto; order: 2;
        max-height: 0; overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding-top 0.4s ease-in-out, padding-bottom 0.4s ease-in-out; /* Добавляем padding в transition */
        background-color: var(--clr-bg-block);
        margin-bottom: 0;
        padding-top: 0; /* Убираем верхний padding в закрытом состоянии */
        padding-bottom: 0; /* Убираем нижний padding в закрытом состоянии */
        border: none; /* Убираем рамку в закрытом состоянии */
    }
    #blocks-left.sidebar-is-open {
        max-height: 2000px; /* Или больше, если контент очень длинный */
        margin-bottom: 15px;
        padding-top: 15px; /* Возвращаем верхний padding */
        padding-bottom: 1px; /* Небольшой padding снизу */
    }

     /* Sidebar Internal Padding */
     /* Применяем отступы к дочерним блокам, КРОМЕ H3 */
     #blocks-left > div:not(.sidebar-block), /* Для .left-menu */
     #blocks-left .sidebar-block > *:not(h3) { /* Для всего внутри .sidebar-block, кроме H3 */
        padding-left: var(--mobile-padding);
        padding-right: var(--mobile-padding);
     }
     /* Стили для заголовков H3 внутри .sidebar-block */
     #blocks-left .sidebar-block h3,
     #blocks-left #lastnews-page h3 {
        /* Отрицательные margin остаются для фона */
        margin-left: -15px; margin-right: -15px;
        /* Внутренние отступы для текста заголовка */
        padding-left: 15px; padding-right: 15px;
        /* Остальные стили h3 остаются */
        font-size: 1rem; font-weight: bold; color: var(--clr-primary); margin-top: -15px; margin-bottom: 15px; padding-top: 8px; padding-bottom: 8px; background-color: var(--clr-heading-block-bg); border-bottom: 1px dotted var(--clr-border-block-heading);
     }
      /* Убираем общий padding у .sidebar-block, т.к. он применен к детям */
     #blocks-left .sidebar-block {
        padding-top: 15px; /* Оставлен только верхний */
         /* Остальные стили .sidebar-block */
         margin-bottom: 20px; border: 1px solid var(--clr-border); border-left: 7px solid var(--clr-primary); background: var(--clr-bg-block); list-style: none !important;
     }
     /* Отступы для параграфов внутри .sidebar-block */
     #blocks-left .sidebar-block > p { margin-bottom: 0.5em; }
     /* Отступы для кнопки "Все новости" */
      #blocks-left #lastnews-page .lastnewsbutton {
         padding-bottom: 15px; text-align: center;
         /* padding-left/right уже применены через *:not(h3) */
      }
       /* Отступы для ссылок левого меню */
       #blocks-left .left-menu { padding-bottom: 15px; }
       #blocks-left .left-menu ul li a { padding: 6px var(--mobile-padding); display: block; } /* Применяем padding к ссылке */


    /* Content */
    #content { width: 100%; flex-basis: auto; order: 3; }

    /* Other Mobile Styles */
    .main-page-layout { flex-direction: column; gap: 20px; } #main-content { flex-basis: auto; width: 100%; max-width: 100%; margin-left: 0; } #main-content p { text-align: left; } .main-page-image { flex-basis: auto; width: 100%; }
    #lastnews { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } #lastnews h1 { font-size: 1.3rem; }
    #blocks { gap: 15px; padding-left: 0; padding-right: 0; } #blocks .block-item { flex-basis: 100%; max-width: 100%; min-width: unset; } #blocks .block-item .block-content { padding: 15px; font-size: 0.9rem; } #blocks .block-item h3 { margin: 0; padding: 10px 15px; font-size: 1.1rem; } #blocks .block-item h3 .block-icon { font-size: 1.05em; } #blocks .booking .large-block-icon { font-size: 3em; margin-bottom: 15px; } #blocks .booking .button-like { padding: 8px 18px; font-size: 0.9rem; } #blocks .location .map-container { height: 180px; } #blocks .rent .blocksphone { font-size: 1.4em; } #blocks .rent .blocksphone-small { font-size: 1.05em; }

    /* Mobile Footer */
    #footer { flex-direction: column; align-items: center; gap: 25px; padding: 25px var(--mobile-padding); }
    #footer .footer-info, #footer .bottom-menu, #footer .copyright_text { order: 0; flex-basis: auto; width: 100%; max-width: 450px; text-align: center; margin-left: auto; margin-right: auto; }
    #footer .footer-info { /* text-align applied */ }
    #footer .footer-logo { margin-bottom: 10px; /* text-align applies */ }
    #footer .footer-address { /* centered by parent */ }
    #footer .bottom-menu ul { justify-content: center; gap: 10px 15px; }
    #footer .bottom-menu ul li a { font-size: 13px; }
    #footer .copyright_text { color: #B0B0B0; line-height: 1.5; }
    #footer .autor {
      text-align: center;
      margin-top: 5px; /* Примерный отступ */
      width: 100%; /* Для блочного элемента */
 }
}

/* --- Extra Small Screens --- */
@media (max-width: 480px) {
    html { font-size: 14px; }
    #logo img { max-width: 150px; height: auto; }
    .header-top-row > div { font-size: 0.85rem; padding: 8px; min-height: 36px; }
    .phone { font-size: 0.9rem; }
    .news-list { gap: 15px 0; margin-bottom: 15px; } .news-list li { flex-basis: 100%; min-width: unset; }
    #blocks .block-item .block-content { padding: 12px; } #blocks .block-item h3 { font-size: 1.05rem; padding: 8px 12px; } #blocks .location .map-container { height: 160px; } #blocks .rent .blocksphone { font-size: 1.3em; } #blocks .rent .blocksphone-small { font-size: 1em; }
    #footer { gap: 20px; padding-top: 20px; padding-bottom: 20px; } #footer .bottom-menu ul { gap: 8px 10px; } #footer .bottom-menu ul li a { font-size: 12px; }
    .mobile-sidebar-button { font-size: 0.9rem; padding: 8px var(--mobile-padding); }
}

/* ==========================================================================
   6. Utilities & Print (Optional)
   ========================================================================== */
/* ==========================================================================
   Стили КОНКРЕТНО для контента страницы Бизнес-центра (v2)
   ========================================================================== */

/* Колонки */
.bc-page-layout-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
    margin-top: 15px;
    margin-bottom: 25px;
  }
  .bc-page-column-main {
    flex: 2;
    min-width: 300px;
  }
  .bc-page-column-sidebar {
    flex: 1;
    min-width: 240px;
  }
  
  /* Заголовки H2 ВНУТРИ колонок */
  .bc-page-layout-columns h2 {
    font-size: 1.3em;
    font-weight: normal;
    color: #444;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd; /* Линия под заголовками */
  }
  .bc-page-layout-columns h2:first-of-type {
     margin-top: 0;
  }
  
  /* Параграфы с уникальным классом */
  .bc-page-paragraph {
      margin-bottom: 1em; /* Отступ для обычных параграфов */
      line-height: 1.6; /* Убедимся, что интервал применился */
  }
  
  
  /* Место для картинки */
  .bc-page-image-placeholder {
    border: 1px dashed #ccc;
    background-color: #f8f8f8;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #aaa;
    font-size: 0.9em;
    overflow: hidden;
    text-align: center;
  }
  .bc-page-image-placeholder img {
      display: block;  max-width: 100%; max-height: 100%;
      width: auto; height: auto; margin: 0 auto;
  }
  .bc-page-image-placeholder:has(img) p { display: none; }
  
  /* Характеристики */
  .bc-page-specs { margin-top: 10px; }
  .bc-page-specs p { /* Стили для параграфов внутри характеристик */
    font-size: 1em;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #555;
  }
  .bc-page-specs strong {
    font-weight: bold; color: #333;
    display: inline-block; margin-right: 5px;
  }
  
  /* Списки UL ВНУТРИ основной колонки */
  .bc-page-column-main ul {
      list-style: disc; margin-left: 20px;
      margin-bottom: 1em; padding-left: 0;
  }
  .bc-page-column-main ul li { margin-bottom: 5px; }
  
  
  /* Ссылки */
  .bc-page-layout-columns a,
  .bc-page-bottom-links a { /* Ссылки в колонках и нижние */
    color: #0056b3;
  }
  /* Общее правило для наведения на все ссылки в контенте */
  #content a:hover { text-decoration: none; }
  
  
  /* Ссылки внизу страницы */
  .bc-page-bottom-links {
    margin-top: 20px;
    padding-top: 15px;
    /* border-top: 1px solid #ccc; */ /* <<< ЛИНИЯ УБРАНА */
    text-align: center;
    font-size: 0.9em;
    color: #666;
    line-height: 1.7;
  }
  .bc-page-link-separator {
      margin: 0 5px;
      color: #ccc;
  }
  
  
  /* Адаптивность */
  @media (max-width: 767px) {
    .bc-page-layout-columns { display: block; }
    .bc-page-column-main,
    .bc-page-column-sidebar {
      min-width: auto; margin-bottom: 20px; flex-basis: auto;
    }
  
    /* Выравнивание нижних ссылок на мобильных */
    .bc-page-bottom-links a {
        display: block; /* Ссылки друг под другом */
        margin: 8px auto; /* Отступы сверху/снизу */
        text-align: center;
    }
    .bc-page-link-separator {
        display: none; /* Скрываем разделитель "|" */
    }
    .bc-page-bottom-links {
         padding-top: 5px; /* Уменьшим отступ сверху */
         margin-top: 10px;
    }
  }
  

.engineering-systems__title {
  font-size: 1.8em; /* Размер заголовка вкладки */
  color: #333;
  margin-bottom: 25px;
  padding-bottom: 10px;
  text-align: left; /* или center, если предпочитаете */
}

/* Стили для каждого элемента системы */
.engineering-systems__item, .engineering-system {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ddd; /* Разделитель между элементами */
}

.engineering-systems__item:last-child, .engineering-system:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none; /* Убираем разделитель у последнего элемента */
}

.engineering-system__name {
  font-size: 1.3em;
  margin-bottom: 8px;
  font-weight: 600; /* Полужирный */
}

.engineering-system__description {
  font-size: 1em;
  line-height: 1.6;
  color: #555;
  /* Или можно использовать display: flex для выравнивания названия и описания в строку с иконкой */
}

/* --- Location Page Styles (Расположение) --- */
.location-tab {
  max-width: 1140px; /* Максимальная ширина контейнера, или ширина вашего основного контента */
  margin: 20px auto;   /* Отступы сверху/снизу и центрирование */
}

.location-tab__address {
  font-size: 1.1em;    /* Размер шрифта для текстового описания */
  line-height: 1.7;
  color: #333;         /* Цвет текста */
  margin-bottom: 25px; /* Отступ под текстом перед картой */
  padding: 15px;
  background-color: #f9f9f9; /* Легкий фон для текстового блока, если нужно выделить */
  border-radius: 0 4px 4px 0;
}

.location-tab__map-wrapper {
  position: relative; /* Необходимо для абсолютного позиционирования iframe */
  overflow: hidden;
  width: 100%;        /* Карта на всю ширину контейнера */
  /* Вариант 1: Адаптивная высота с сохранением пропорций (например, 4:3) */
  /* padding-top: 75%;  (height / width * 100). (450 / 800 * 100 = 56.25% для более широкой карты) */
                      /* (600 / 800 * 100 = 75% для более квадратной) */
                      /* Подберите значение под желаемые пропорции карты. На скриншоте она довольно высокая. */
  /* Вариант 2: Фиксированная высота карты */
  height: 550px; /* Задайте нужную высоту. Судя по скриншоту, карта довольно высокая. */
  /* Если используете фиксированную высоту, padding-top не нужен (или padding-top:0;) */

  border-radius: 4px; /* Небольшое скругление для контейнера карты */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Более заметная тень для карты */
}

.location-tab__map-wrapper iframe {
  /* Если используется Вариант 1 (padding-top для адаптивной высоты): */
  /* position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; */

  /* Если используется Вариант 2 (фиксированная высота для .location-tab__map-wrapper): */
  width: 100%;
  height: 100%; /* Растягивается на высоту родителя (550px в данном примере) */
  
  border: 0; /* Убираем стандартную рамку iframe */
}

/* Адаптивность, если нужна */
@media (max-width: 767px) {
  .location-tab__address {
      font-size: 1em;
      padding: 10px;
      border-left-width: 3px;
  }
  .location-tab__map-wrapper {
      /* Можно изменить высоту карты для мобильных */
      height: 400px;
  }
}

/* Стили для страницы "Инфраструктура" */

/* --- Общие стили для страницы Инфраструктура --- */
.infrastructure-page {
  font-family: Arial, sans-serif; /* Замените на ваш основной шрифт */
  font-size: 13px;                /* Базовый размер шрифта */
  color: #333;
  line-height: 1.6;
  max-width: 960px;               /* Или ширина контентной части вашего сайта */
  margin: 20px auto;              /* Отступы сверху/снизу и центрирование */
}

/* --- Секции инфраструктуры (Внутренняя, Внешняя) --- */
.infrastructure-section {
  margin-bottom: 30px; /* Отступ между основной внутренней и внешней секциями */
}

.infrastructure-section--internal {
  /* Специфичные стили для внутренней инфраструктуры, если нужны */
}


.infrastructure-section--external {
  /* Специфичные стили для внешней инфраструктуры, если нужны */
  margin-top: 40px; /* Больший отступ сверху для секции внешней инфраструктуры */
}

.infrastructure-section__title { /* Для H2: "Внутренняя инфраструктура объекта", "Внешняя..." */
  font-size: 18px;       /* Размер для основных заголовков секций */
  color: #0055A0;       /* Синий цвет, как в примере */
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0; /* Разделительная линия под заголовком секции */
}

/* --- Подсекции (для Внутренней инфраструктуры) --- */
.infrastructure-subsection {
  margin-bottom: 20px; /* Отступ между подсекциями (1-й этаж, цокольный этаж) */
}

.infrastructure-subsection__title { /* Для H3: "На 1-м этаже...", "На цокольном..." */
  font-size: 14px;          /* Размер для подзаголовков */
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
}

/* --- Списки --- */
.infrastructure-subsection__list,
.infrastructure-section__list { /* Общие стили для всех списков на странице */
  list-style: none;
  padding-left: 0;
  margin-bottom: 10px; /* Небольшой отступ под списком */
}

.infrastructure-subsection__list-item,
.infrastructure-section__list-item { /* Общие стили для всех элементов списка */
  padding-left: 20px;     /* Отступ для кастомного маркера */
  position: relative;
  margin-bottom: 6px;     /* Отступ между элементами списка */
  color: #444;           /* Цвет текста в списках */
}

/* Кастомные маркеры (синие квадратики) */
.infrastructure-subsection__list-item::before,
.infrastructure-section__list-item::before {
  content: "";
  position: absolute;
  left: 5px;              /* Позиция квадратика */
  top: 6px;               /* Вертикальное выравнивание квадратика */
  width: 6px;
  height: 6px;
  background-color: #0055A0; /* Синий цвет маркера */
}

/* --- Параграфы --- */
.infrastructure-section__paragraph {
  font-size: 13px;
  color: #333;
  line-height: 1.7;
  margin-top: 15px; /* Отступ сверху для параграфов */
  margin-bottom: 15px; /* Отступ снизу для параграфов */
}

/* --- Выделенные блоки (если будут нужны, адаптируем из примера) --- */
/* Если вы захотите использовать блоки как .office-sales-highlighted-block,
   можно создать похожий класс .infrastructure-highlighted-block */
.infrastructure-highlighted-block {
  background-color: #F0F5FA;
  padding: 15px 20px;
  margin-top: 25px;
  border-radius: 4px;
}

/* --- Адаптивность --- */
@media (max-width: 768px) {
  .infrastructure-section__title {
    font-size: 17px;
  }
  .infrastructure-subsection__title {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .infrastructure-page {
    padding: 15px 10px; /* Уменьшаем боковые отступы для контейнера */
  }
  .infrastructure-section__title {
    font-size: 16px;
  }
  .infrastructure-subsection__list-item,
  .infrastructure-section__list-item {
    padding-left: 18px; /* Немного уменьшить отступ для маркера */
  }
  .infrastructure-subsection__list-item::before,
  .infrastructure-section__list-item::before {
    left: 3px;
    top: 7px;
    width: 5px;
    height: 5px;
  }
}

/* Общие стили для страницы аренды */
.rental-office-page {
  font-family: Arial, sans-serif; /* Замените на шрифт с вашего сайта, если он другой */
  font-size: 13px; /* Базовый размер шрифта, судя по скриншоту */
  color: #333;
  line-height: 1.5;
  max-width: 960px; /* Или ширина контентной части вашего сайта */
  margin: 0 auto;
}

/* Вступительный текст */
.rental-office-intro p {
  margin-bottom: 25px;
}

/* Блок "Сегодня сдаются" */
.rental-available-now {
  position: relative; /* Для позиционирования ссылки "Подробнее" */
  border-top: 1px solid #D9D9D9;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.rental-available-now__title {
  font-size: 12px; /* Меньше основного текста, как на скриншоте */
  font-weight: bold;
  color: #CF0000; /* Красный цвет */
  margin: 0 0 8px 0;
  text-transform: uppercase; /* Все буквы заглавные */
}

.rental-available-now__list {
  margin-bottom: 10px;
}

.rental-available-now__item {
  font-size: 18px; /* Крупный шрифт для площадей */
  font-weight: bold;
  color: #0055A0; /* Синий цвет */
  margin-right: 15px;
}

.rental-available-now__details-link {
  position: absolute;
  right: 0;
  top: 15px; /* Выравнивание с началом блока */
  font-size: 12px;
  color: #666;

  line-height: 1.3;
  text-align: right;
}
.rental-available-now__details-link:hover {
  color: #0055A0;
}

/* Блок "Краткие условия аренды" */
.rental-short-terms {
  position: relative;
  border-top: 2px solid #0055A0; /* Синяя толстая линия */
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.rental-short-terms__title {
  font-size: 12px;
  font-weight: bold;
  color: #0055A0; /* Синий цвет */
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.rental-short-terms__content p {
  font-size: 13px;
  margin: 0 0 5px 0;
}

.rental-short-terms__price-link {
  position: absolute;
  right: 0;
  top: 15px;
  font-size: 12px;
  color: #666;

  line-height: 1.3;
  text-align: right;
}
.rental-short-terms__price-link:hover {
  color: #0055A0;
}

/* Примечание по оборудованию */
.rental-customization-note p {
  margin-bottom: 25px;
}

/* Блок "Преимущества" */
.rental-advantages {
  background-color: #F0F5FA; /* Светло-голубой фон */
  padding: 15px 20px;
  margin-bottom: 25px;
}

.rental-advantages__title {
  font-size: 12px;
  font-weight: bold;
  color: #0055A0; /* Синий цвет */
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

.rental-advantages__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.rental-advantages__item {
  margin-bottom: 7px;
  padding-left: 15px; /* Отступ для тире */
  position: relative; /* Для позиционирования тире */
}

.rental-advantages__item::before {
  content: "–"; /* Тире */
  position: absolute;
  left: 0;
  top: 0; /* Или настройте вертикальное выравнивание тире */
  color: #0055A0; /* Синий цвет тире */
}

.rental-advantages__item a {
  color: #666;

}
.rental-advantages__item a:hover {
  color: #0055A0;
}

/* Детали договора и управляющей компании */
.rental-agreement-details p {
  margin-bottom: 10px;
}
.rental-agreement-details p:last-child {
  margin-bottom: 25px;
}
.rental-agreement-details a {
  color: #666;

  font-weight: bold; /* Договор выделен жирным */
}
.rental-agreement-details a:hover {
  color: #0055A0;
}


/* Контактная информация */
.rental-contact-information p {
  margin-bottom: 5px; /* Меньший отступ между строками контактов */
}
.rental-contact-information p:last-child {
  margin-bottom: 25px;
}

.rental-contact-information a {
  color: #0055A0; /* Синий цвет ссылок */
  text-decoration: none;
}
/* Ссылки внизу страницы (Подробнее о БЦ | Продажа) */
.rental-page-links {
  border-top: 1px solid #D9D9D9;
  padding-top: 15px;
  margin-bottom: 10px;
  text-align: right; /* Выравнивание по правому краю */
}

.rental-page-links__item {
  font-size: 12px;
  color: #0055A0;

}
.rental-page-links__item:hover {
  text-decoration: none;
}
.rental-page-links__divider {
  color: #999;
  margin: 0 5px;
}

/* Хлебные крошки */
.rental-breadcrumbs {
  font-size: 12px;
  color: #666;
  text-align: left; /* Или как у вас на сайте */
}

.rental-breadcrumbs__item {
  color: #0055A0;

}
.rental-breadcrumbs__item:hover {
  text-decoration: none;
}

/* Адаптивность (базовые точки) */
@media (max-width: 768px) {
  .rental-available-now__details-link,
  .rental-short-terms__price-link {
    position: static; /* Убираем абсолютное позиционирование на мобильных */
    display: block;
    text-align: left;
    margin-top: 10px;
  }

  .rental-available-now__item {
    display: block; /* Каждый элемент площади на новой строке */
    margin-right: 0;
    margin-bottom: 5px;
  }
  .rental-page-links {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .rental-office-page {
    padding: 0;
    font-size: 12px; /* Можно еще уменьшить базовый шрифт */
  }

  .rental-available-now__item {
    font-size: 16px; /* Уменьшаем большие цифры площадей */
  }

  .rental-advantages {
    padding: 10px 15px;
  }
}

/* Общие стили для страницы продажи офисов */
.office-sales-page {
  font-family: Arial, sans-serif; /* Замените на ваш основной шрифт */
  font-size: 13px; /* Базовый размер шрифта, как на скриншоте */
  color: #333;
  line-height: 1.6;
  max-width: 960px; /* Или ширина контентной части вашего сайта */
  margin: 0 auto;
}

/* Заголовок страницы H1 */
.office-sales-page__title {
  font-size: 22px; /* Размер заголовка, как на скриншоте */
  color: #0055A0; /* Синий цвет */
  margin-bottom: 10px; /* Уменьшенный отступ снизу */
  font-weight: bold;
}

/* Общие стили для секций контента */
.office-sales-page__section {
  margin-bottom: 20px;
}

/* Вступительная секция */
.office-sales-intro__greeting {
  font-weight: bold;
  margin-bottom: 10px;
}

/* Секция "Сегодня в продаже" */
.office-sales-available__title {
  font-size: 14px; /* Размер подзаголовка */
  color: #333;
  font-weight: bold;
  margin-bottom: 8px;
}

.office-sales-available__list,
.office-sales-min-area__list,
.office-sales-advantages__list {
  list-style: none;
  padding-left: 0;
}

.office-sales-available__item,
.office-sales-min-area__item,
.office-sales-advantages__item {
  padding-left: 20px; /* Отступ для маркера */
  position: relative;
  margin-bottom: 5px;
  color: #444; /* Цвет текста в списках */
}

/* Кастомные маркеры (квадратики, как на скриншоте) */
.office-sales-available__item::before,
.office-sales-min-area__item::before,
.office-sales-advantages__item::before {
  content: "";
  position: absolute;
  left: 5px; /* Позиция квадратика */
  top: 6px; /* Вертикальное выравнивание квадратика */
  width: 6px;
  height: 6px;
  background-color: #0055A0; /* Синий цвет маркера */
}

/* Выделенные блоки (для "Минимальная продаваемая площадь" и "Преимущества") */
.office-sales-highlighted-block {
  background-color: #F0F5FA; /* Светло-голубой фон, как на предыдущих страницах */
  padding: 15px 20px;
  margin-top: 25px; /* Дополнительный отступ сверху для выделенных блоков */
}

.office-sales-min-area__title,
.office-sales-advantages__title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Контактная информация */
.office-sales-contact p {
  font-size: 13px;
  color: #333;
  line-height: 1.7;
  margin-top: 25px; /* Отступ сверху перед контактной информацией */
}

.office-sales-contact a {
  color: #0055A0; /* Синий цвет ссылок */
}
.office-sales-contact a:hover {
  text-decoration: none;
}

/* Ссылки внизу страницы и хлебные крошки (если нужны) */
/* Скопируйте стили из .rental-cost-page__links и .rental-cost-page__breadcrumbs,
   заменив .rental-cost-page на .office-sales-page, если решите их добавить */

.office-sales-page__links {
  border-top: 1px solid #D9D9D9;
  padding-top: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
  text-align: center;
}

.office-sales-page__link-item {
  font-size: 13px;
  color: #0055A0;
}
.office-sales-page__link-item:hover {
  text-decoration: none;
}
.office-sales-page__link-divider {
  color: #999;
  margin: 0 10px;
}

.office-sales-page__breadcrumbs {
  font-size: 12px;
  color: #666;
  text-align: left;
  margin-top: 20px;
}

.office-sales-page__breadcrumb-item {
  color: #0055A0;
}
.office-sales-page__breadcrumb-item:hover {
  text-decoration: none;
}


/* Адаптивность (базовые точки) */
@media (max-width: 768px) {
  .office-sales-page__title {
    font-size: 20px;
  }

  .office-sales-available__title,
  .office-sales-min-area__title,
  .office-sales-advantages__title {
    font-size: 13px; /* Чуть меньше на планшетах */
  }

  .office-sales-highlighted-block {
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .office-sales-page {
    padding: 15px;
  }

  .office-sales-page__title {
    font-size: 18px;
  }

  .office-sales-available__item,
  .office-sales-min-area__item,
  .office-sales-advantages__item {
    padding-left: 18px; /* Немного уменьшить отступ для маркера */
  }

  .office-sales-available__item::before,
  .office-sales-min-area__item::before,
  .office-sales-advantages__item::before {
    left: 3px;
    top: 7px; /* Может потребоваться подстройка */
    width: 5px;
    height: 5px;
  }

  /* Пример для ссылок внизу, если они добавлены */
  .office-sales-page__links {
    margin-top: 20px;
    padding-top: 15px;
  }
  .office-sales-page__link-item,
  .office-sales-page__link-divider {
    display: block;
    margin-bottom: 5px;
  }
  .office-sales-page__link-divider {
    display: none;
  }
}


/* Стили для нижних ссылок (остаются как вы указали) */
.bc-page-bottom-links {
  border-top: 1px solid #D9D9D9;
  padding-top: 20px;
  margin-top: 30px;
  margin-bottom: 10px;
  text-align: center;
}

.bc-page-bottom-links a {
  font-size: 13px;
  color: #0055A0;
}
.bc-page-bottom-links a:hover {
  text-decoration: none;
}

.bc-page-link-separator {
  color: #999;
  margin: 0 10px;
}


/* Кастомизация стилей Lightbox2 (если необходимо) */
/* Эти стили будут ПЕРЕОПРЕДЕЛЯТЬ стандартные стили lightbox.min.css,
   поэтому добавляйте их ПОСЛЕ подключения lightbox.min.css или используйте более специфичные селекторы */

body.lb-disable-scrolling { /* Чтобы фон не прокручивался, когда лайтбокс открыт */
  overflow: hidden;
}

.lightboxOverlay {
  background-color: rgba(0, 0, 0, 0.85); /* Более темный фон, как на скриншоте */
}

.lightbox {
  /* Позволяет позиционировать заголовок и кнопку закрытия внутри этого контейнера */
  /* По умолчанию Lightbox2 позиционирует элементы относительно окна */
  /* Если стандартное позиционирование устраивает, этот блок можно не менять */
}

.lb-outerContainer {
  background-color: #ffffff; /* Белый фон для контейнера изображения */
  border-radius: 4px; /* Небольшое скругление углов */
  /* На вашем скриншоте контейнер довольно широкий, lightbox сам подстроит ширину под изображение */
}

.lb-dataContainer {
  padding: 15px 20px; /* Отступы для заголовка/подписи */
  /* На вашем скриншоте подписи нет прямо под картинкой, а заголовок вверху */
  /* Lightbox2 по умолчанию показывает подпись (data-title) внизу. */
  /* Чтобы заголовок был вверху, как на скриншоте, потребуется более глубокая кастомизация HTML структуры лайтбокса или другой плагин. */
  /* Пока оставим стандартное поведение Lightbox2 для подписи */
}

.lb-caption { /* Это текст из data-title */
  font-size: 16px; /* Размер заголовка в лайтбоксе */
  font-weight: bold;
  text-align: left; /* Выравнивание заголовка по левому краю, как на скриншоте */
  padding-bottom: 10px; /* Отступ снизу, если есть номер изображения */
}

.lb-number { /* "image 1 of 4", можно скрыть, если не нужно */
  display: none; /* Скрываем "image x of y", т.к. на скриншоте этого нет */
}

.lb-close { /* Кнопка закрытия */
  /* На вашем скриншоте это "X" в круге */
  /* Стандартная кнопка Lightbox2 - это просто "X" */
  /* Для точного воспроизведения кнопки со скриншота может понадобиться заменить ее изображение или использовать псевдоэлементы */
  opacity: 0.8;
  transition: opacity 0.2s;
  /* Позиционирование из lightbox.min.css обычно хорошее, но можно переопределить */
  /* top: 15px; */
  /* right: 15px; */
}
.lb-close:hover {
  opacity: 1;
}

/* --- Общие стили страницы Контакты --- */
.contact-page-container {
  max-width: 1140px; /* Максимальная ширина контейнера */
  margin: 20px auto; /* Отступы сверху/снизу и центрирование */
}

.contact-content-wrapper {
  display: flex;
  flex-wrap: wrap;   /* Разрешить перенос колонок на маленьких экранах */
  gap: 30px;         /* Пространство между левой и правой колонками */
}

.contact-info-form-column {
  flex: 1;             /* Колонка занимает доступное пространство */
  min-width: 320px;    /* Минимальная ширина перед переносом */
  order: 1;            /* Порядок на мобильных (если нужно) */
}

.contact-map-column {
  flex: 1;
  min-width: 320px;
  order: 2;
}

/* --- Стили для секции с детальной информацией --- */
.contact-details h2,
.contact-department h3 {
  font-size: 1.6em; /* Размер подзаголовка "Бизнес-центр CityHall" */
  color: #2c3e50;   /* Темно-серый цвет для заголовков */
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ecf0f1; /* Мягкий разделитель */
}

.contact-department h3 {
  font-size: 1.3em; /* Размер подзаголовка "Отдел аренды..." */
  margin-top: 30px; /* Отступ сверху для блока отдела аренды */
  margin-bottom: 15px;
  color: #34495e;
  border-bottom: none; /* Убираем нижнюю границу для этого подзаголовка */
}

.contact-line {
  display: flex;
  align-items: flex-start; /* Выравнивание по верху, если текст в contact-value многострочный */
  margin-bottom: 12px; /* Отступ между строками контактов */
  line-height: 1.7;
  color: #555; /* Основной цвет текста контактов */
}

.icon-contact {
  font-size: 1.1em; /* Размер иконки */
  color: #006699;   /* Основной цвет иконок (например, синий) */
  margin-right: 12px;/* Отступ справа от иконки */
  width: 22px;       /* Фиксированная ширина для выравнивания */
  text-align: center;
  flex-shrink: 0;    /* Иконка не будет сжиматься */
  margin-top: 4px;   /* Небольшая коррекция для вертикального выравнивания с текстом */
}

.contact-label {
  font-weight: 600;  /* Полужирное начертание для меток типа "E-mail:" */
  margin-right: 8px;
  flex-shrink: 0;
  color: #34495e;
}

.contact-value {
  flex-grow: 1; /* Занимает оставшееся пространство */
}

.contact-value a {
  color: #2980b9;   /* Цвет ссылок в контактах */
  text-decoration: none;
}

.contact-value a:hover {
  text-decoration: underline;
  color: #1abc9c; /* Цвет ссылок при наведении */
}

.phone-line .contact-value a {
  white-space: nowrap; /* Предотвратить разрыв одного номера телефона */
  margin-right: 8px;   /* Отступ между номерами, если они в одну строку */
}
.phone-line .contact-value a:last-child {
  margin-right: 0;
}


/* --- Стили для секции формы обратной связи --- */
.contact-form-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid #ecf0f1; /* Разделитель перед формой */
}

.contact-form-section h2 {
  font-size: 1.6em;
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: left; /* Выравнивание заголовка формы */
}

.contact-form .form-group {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500; /* Средняя жирность для меток полей */
  color: #555;
  font-size: 0.95em;
}

.contact-form .required-asterisk {
  color: #e74c3c; /* Красный цвет для звездочки */
  margin-left: 2px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 12px 15px; /* Увеличенные отступы для более "воздушного" вида */
  border: 1px solid #bdc3c7; /* Более мягкая граница */
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1em;
  color: #333;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
  border-color: #006699; /* Цвет границы при фокусе */
  box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25); /* Мягкая тень при фокусе */
  outline: none;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px; /* Минимальная высота для текстового поля */
}

.contact-form .error-message { /* Сообщения об ошибках FormIt */
  display: block;
  color: #e74c3c;
  font-size: 0.85em;
  margin-top: 5px;
}

.validation_error_message, /* Общее сообщение об ошибке валидации от FormIt */
div.form-success-message { /* Сообщение об успехе от FormIt */
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  text-align: left;
}
.validation_error_message {
  background-color: #fbeaea;
  color: #c0392b;
  border: 1px solid #e74c3c;
}
div.form-success-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}


.contact-form .submit-button {
  background-color: #006699; /* Синий цвет кнопки */
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.contact-form .submit-button:hover {
  background-color: #2980b9; /* Более темный синий при наведении */
  transform: translateY(-1px);
}
.contact-form .submit-button:active {
  transform: translateY(0px);
}


/* --- Стили для карты --- */
.contact-map-column {
  display: flex; /* Чтобы карта занимала всю высоту, если нужно или для выравнивания */
  flex-direction: column;
}
.map-responsive-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 75%; /* Соотношение сторон 4:3. (height/width * 100). (450/600 * 100 = 75%) */
                   /* Если хотите карту повыше, уменьшите padding-top, например 50% или 60% */
                   /* Или установите фиксированную высоту, если адаптивность по высоте не нужна: */
                   /* height: 450px; padding-top: 0; */
  border-radius: 4px; /* Небольшое скругление для контейнера карты */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.map-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Адаптивность --- */
@media (max-width: 991px) { /* Планшеты и ниже */
  .contact-info-form-column {
      order: 1; /* Форма и инфо остаются первыми */
  }
  .contact-map-column {
      order: 2;   /* Карта идет после */
      margin-top: 30px; /* Добавляем отступ сверху для карты, когда она под инфо */
  }
  .map-responsive-wrapper {
       /* Можно изменить padding-top или задать фиксированную высоту для планшетов/мобильных */
       /* Например, сделать карту более квадратной или фиксированной высоты: */
       /* padding-top: 75%;  */
       height: 400px; /* Фиксированная высота для карты на мобильных */
       padding-top: 0; /* Убираем padding-top, если используем фиксированную высоту */
  }
  .map-responsive-wrapper iframe {
      position: static; /* یا 'relative', если используем фиксированную высоту для родителя */
      height: 100%; /* Растягиваем на высоту родителя (400px) */
  }
}

@media (max-width: 767px) { /* Мобильные телефоны */
  .contact-details h2,
  .contact-form-section h2 {
      font-size: 1.4em;
  }
  .contact-department h3 {
      font-size: 1.2em;
  }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form textarea,
  .contact-form .submit-button {
      font-size: 0.95em; /* Чуть меньше шрифт на мобильных для полей и кнопки */
  }
  .contact-form .submit-button {
      padding: 10px 20px;
      width: 100%; /* Кнопка на всю ширину */
  }
}

/* --- News Archive Page Styles (Список новостей) --- */
.news-archive-page {
  max-width: 960px; /* Или ширина вашего контента */
  margin: 20px auto;
}

.news-list-item {
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e0e0e0; /* Разделитель между новостями */
}

.news-list-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.news-list-item__title {
  font-size: 16px; /* Размер заголовка новости в списке */
  margin-top: 0;
  margin-bottom: 8px;
}

.news-list-item__title a {
  color: #0055A0; /* Синий цвет заголовка, как на скриншоте */
  text-decoration: none;
  font-weight: bold; /* Заголовки часто делают жирными */
}

.news-list-item__title a:hover {
  text-decoration: underline;
}

.news-list-item__introtext {
  font-size: 13px;
  line-height: 1.6;
  color: #333; /* Основной цвет текста аннотации */
  margin-bottom: 10px;
}

.news-list-item__meta {
  font-size: 12px; /* Меньший шрифт для даты и "Подробнее" */
  color: #555;    /* Серый цвет для мета-информации */
}

.news-list-item__date {
  /* Стили для даты, если нужны (например, отступ справа) */
  margin-right: 5px;
}

.news-list-item__readmore {
  color: #0055A0; /* Синий цвет для ссылки "Подробнее" */
  text-decoration: none;
  font-weight: normal; /* Обычный вес, т.к. дата рядом */
}

.news-list-item__readmore:hover {
  text-decoration: underline;
}

.news-empty {
  text-align: center;
  padding: 20px;
  font-style: italic;
  color: #777;
}

/* --- Стили пагинации для новостей (могут быть уже заданы от галереи) --- */
.news-pagination {
    text-align: center; /* Центрирование блока пагинации */
    margin-top: 30px;
    padding-bottom: 20px;
}

.news-pagination .pagination-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Для центрирования */
}

.news-pagination .pagination-list li {
    display: inline-block;
    margin: 0 2px;
}

.news-pagination .pagination-list li a,
.news-pagination .pagination-list li span { /* span для текущей страницы или неактивных ссылок */
    display: block;
    padding: 6px 10px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #0055A0;
    background-color: #fff;
    border-radius: 3px;
}

.news-pagination .pagination-list li a:hover {
    background-color: #f0f5fa;
    border-color: #0055A0;
}

.news-pagination .pagination-list li.active span { /* Класс для активной (текущей) страницы */
    background-color: #0055A0;
    color: white;
    border-color: #0055A0;
    cursor: default;
}

.news-pagination .pagination-list li.disabled span { /* Класс для неактивных стрелок (например, "назад" на первой странице) */
    color: #aaa;
    pointer-events: none;
    border-color: #ddd;
}

/* Стили для навигации Предыдущая/Следующая */
.news-navigation {
  margin-top: 30px; /* Отступ сверху от основного контента */
  padding-top: 20px;
  padding-bottom: 20px; /* Добавим отступ снизу перед крошками */
  border-top: 1px solid #eee; /* Разделитель сверху */
  border-bottom: 1px solid #eee; /* Разделитель снизу (можно убрать, если не нужно) */
  /* --- Центрирование контейнера --- */
  text-align: center;
}

/* Обертка от pdoNeighbors - нам не нужны flex свойства для простого центрирования */
.news-prev-next-wrapper {
    /* Если тут были display: flex и justify-content: space-between - убираем или комментируем */
    display: inline-block; /* Чтобы внутренние отступы ссылок работали */
    font-size: 0.95em;
}

/* Стили для самих ссылок ("Предыдущая", "Следующая") */
.news-prev,
.news-next {
    display: inline-block; /* Чтобы они были в строку и margin работал */
    margin: 0 15px; /* Отступы между ссылками, если обе существуют */
}

.news-prev a,
.news-next a {
  color: #0055A0;
  text-decoration: none;
  padding: 8px 15px; /* Немного увеличим горизонтальный padding */
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap; /* Чтобы текст ссылки не переносился */
}

.news-prev a:hover,
.news-next a:hover {
  background-color: #e9ecef;
  border-color: #bbb;
  text-decoration: none;
}

.single-news-page .news-meta-single {
  font-size: 0.9em;
  color: #6c757d;
  /* --- Отступы и разделитель --- */
  margin-bottom: 25px;  /* Увеличим отступ ПОСЛЕ разделительной линии */
  padding-bottom: 15px; /* Отступ ПЕРЕД разделительной линией */
  border-bottom: 1px solid #e0e0e0; /* Разделительная линия под датой */
  /* --- Конец изменений --- */
}

/* Убедитесь, что иконка календаря тоже на месте */
.single-news-page .news-date-single .fa-regular {
  margin-right: 5px;
}

.floor-plans-gallery {
  display: grid; /* Используем Grid для раскладки */
  /* Укажите желаемое количество колонок: */
  grid-template-columns: repeat(2, 1fr); /* Например, 2 колонки */ 
  /* или 3 колонки: grid-template-columns: repeat(3, 1fr); */
  /* или адаптивное количество: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
  gap: 25px; /* Промежуток между планами */
  margin-bottom: 30px; 
}

.floor-plans-gallery__item {
  border: 1px solid #eee;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden; 
  text-align: center; /* Центрируем ссылку/картинку внутри элемента, если нужно */
}

.floor-plans-gallery__link {
  display: block; /* или inline-block */
  line-height: 0; 
  transition: opacity 0.3s ease;
}
.floor-plans-gallery__link:hover {
    opacity: 0.85; 
}


.floor-plans-gallery__thumbnail {
  display: block;
  width: 100%;     
  height: auto;    
  max-width: 100%; 
  border-bottom: none; 
}

/* ... (стили для .bc-page-bottom-links остаются) ... */

/* Адаптивность для галереи планов */
@media (max-width: 767px) {
  .floor-plans-gallery {
    /* Одна колонка на мобильных */
    grid-template-columns: 1fr; 
    gap: 20px;
  }
}

/* Адаптивность для планшетов (если нужно, например, оставить 2 колонки) */
@media (min-width: 768px) and (max-width: 991px) {
  .floor-plans-gallery {
     /* Можно оставить 2 колонки или изменить */
     /* grid-template-columns: repeat(2, 1fr); */
  }
}

/* --- Общие стили для секции фотогалереи --- */
.photo-gallery-section {
  padding: 20px 0; /* Внешние отступы для всей секции галереи */
}

.photo-gallery-container {
  max-width: 1200px; /* Максимальная ширина контейнера галереи */
  margin: 0 auto;    /* Центрирование контейнера */
  padding: 0 15px;   /* Боковые отступы для контейнера на случай узких экранов */
}

/* --- Стили для сетки изображений --- */
.gallery-grid {
  display: grid;
  /* Адаптивная сетка: создаст столько колонок, сколько поместится,
     с минимальной шириной 250px и максимальной 1fr (равные доли доступного пространства) */
     grid-template-columns: repeat(3, 1fr);  /* Если вы хотите строго определенное количество колонок, например 3: */
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 15px; /* Расстояние между ячейками галереи */
}

/* --- Стили для отдельных элементов (ячеек) галереи --- */
.gallery-item {
  background-color: #fff; /* Фон ячейки */
  border: 1px solid #ddd; /* Рамка вокруг каждой ячейки */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Легкая тень для объема */
  box-sizing: border-box; /* Учитывает padding и border в общей ширине/высоте */

  /* --- Ключевые свойства для ячеек одинакового размера --- */
  /* Установите желаемое соотношение сторон. Например: 16/9, 4/3, 1/1 (квадрат) */
  /* На вашем скриншоте изображения похожи на пропорцию 4:3 */
  aspect-ratio: 4 / 3;   /* <<-- ИЗМЕНИТЕ ЗДЕСЬ, ЕСЛИ НУЖНО ДРУГОЕ СООТНОШЕНИЕ СТОРОН */
  overflow: hidden;     /* Обрезает изображение, если оно не соответствует пропорциям ячейки */

  display: flex;        /* Для выравнивания содержимого (ссылки/изображения) */
  align-items: center;  /* Вертикальное выравнивание */
  justify-content: center; /* Горизонтальное выравнивание */
}

.gallery-item a {
  display: block; /* Ссылка должна занимать всю ячейку */
  width: 100%;
  height: 100%;
  line-height: 0; /* Убирает возможное лишнее пространство */
}

.gallery-item img {
  display: block;
  width: 100%;  /* Изображение растягивается на всю ширину родительской ссылки */
  height: 100%; /* Изображение растягивается на всю высоту родительской ссылки */

  /* Масштабирует изображение с сохранением пропорций, чтобы заполнить контейнер.
     Лишнее будет обрезано. */
  object-fit: cover;

  /* Определяет, какая часть изображения будет видима при обрезке. 'center' (по умолчанию) обычно подходит. */
  object-position: center;
}

/* --- Стили для пагинации --- */
.gallery-pagination {
  margin-top: 30px; /* Отступ сверху для блока пагинации */
  text-align: center; /* Центрирование элементов пагинации */
}

.pagination-list {
  list-style: none; /* Убираем маркеры списка */
  padding: 0;
  margin: 0;
  display: inline-block; /* Позволяет центрировать список как блочный элемент */
}

.pagination-list li {
  display: inline; /* Отображаем элементы списка в одну строку */
  margin: 0 3px;   /* Небольшой отступ между элементами пагинации */
}

.pagination-list li a,
.pagination-list li span { /* Общие стили для ссылок и текущей страницы */
  padding: 8px 12px; /* Внутренние отступы */
  border: 1px solid #eee; /* Светлая рамка */
  text-decoration: none; /* Убираем подчеркивание у ссылок */
  color: #337ab7;      /* Цвет текста ссылок (стандартный синий) */
  background-color: #fff; /* Белый фон */
  border-radius: 4px;  /* Скругление углов */
  transition: background-color 0.2s, color 0.2s; /* Плавный переход для hover-эффекта */
}

.pagination-list li a:hover {
  background-color: #eee; /* Фон при наведении */
  color: #23527c;      /* Цвет текста при наведении */
}

.pagination-list li span.current { /* Стили для активной/текущей страницы */
  background-color: #337ab7; /* Фон активного элемента */
  color: white;              /* Белый цвет текста */
  border-color: #337ab7;     /* Цвет рамки совпадает с фоном */
  cursor: default;           /* Стандартный курсор (не ссылка) */
}

/* --- Сообщение, если галерея пуста --- */
.gallery-empty {
  text-align: center; /* Текст по центру */
  padding: 30px 15px; /* Внутренние отступы */
  color: #777;       /* Серый цвет текста */
  font-size: 1.1em;   /* Немного увеличенный размер шрифта */
}

.available-spaces-section {
  /* Стили для общего контейнера, если нужны */
}

.floors-list .floor-entry {
  display: flex;
  flex-wrap: wrap; /* Позволит переносить блоки, если нужно */
  align-items: flex-start; /* Выравнивание по верху, если блоки разной высоты */
  padding: 15px 0;
}

.floors-list .floor-entry:last-child .floor-separator {
  display: none; /* Не показывать последний разделитель */
}

.floor-details {
  flex: 0 0 200px; /* Фиксированная ширина для блока с названием этажа. Подберите. */
  /* Или flex-basis: 200px; */
  margin-right: 20px;
}

.floor-title {
  font-size: 1.1em; /* Примерно 16-18px */
  font-weight: bold;
  color: #003366;
  margin-top: 0;
  margin-bottom: 5px;
}

.floor-status {
  font-size: 0.9em; /* Примерно 13-14px */
  color: #555;
  margin-top: 0;
  margin-bottom: 5px;
}

.floor-areas {
  flex: 1 1 auto; /* Занимает оставшееся доступное пространство */
  /* min-width: 150px; /* Минимальная ширина, чтобы не сжимался слишком сильно */
}

.areas-list {
  font-size: 1.1em; /* Такой же как floor-title для площадей */
  font-weight: normal;
  color: #333;
  margin-top: 0;
  margin-bottom: 5px;
}

.areas-list span { /* Если вы решите оборачивать каждую площадь в span */
  margin-right: 15px; /* Отступ между площадями */
}

.floor-plan-link {
  /* Если нужно разместить ссылку на план отдельно или стилизовать */
  /* flex-basis: 100%; /* Если ссылка должна быть на новой строке под площадями */
  /* margin-top: 5px; */
}

.floor-plan-link p,
.floor-additional-info p {
  font-size: 0.9em;
  color: #555;
  margin-top: 0;
  margin-bottom: 5px;
}

.floor-plan-link a {
  color: #007bff; /* Стандартный цвет ссылок */
  text-decoration: underline;
}

.floor-separator {
  border: 0;
  border-top: 1px solid #e0e0e0; /* Стиль разделителя, как на оригинале */
  margin: 0; /* Убираем стандартные отступы hr */
  width: 100%;
}

@media (min-width: 768px) {
  .floors-list .floor-entry {
      text-align: left; /* ===> Возвращаем выравнивание по левому краю для десктопа */
      /* Если хотите, чтобы блоки этажа и площадей были на одной линии, но с разной шириной: */
      /* flex-wrap: nowrap; /* Предотвращаем перенос блоков */
  }

  .floor-details {
      flex: 0 0 220px; /* ===> ИЗМЕНЕНО: Фиксированная ширина для блока с названием этажа, подберите */
      margin-right: 20px; /* Отступ справа от блока этажа */
      margin-bottom: 0; /* Убираем отступ снизу, так как элементы в ряд */
      /* text-align: left; /* Уже унаследовано от .floor-entry (в этом медиа-запросе) */
  }

  .floor-areas {
      flex: 1 1 auto; /* ===> Занимает оставшееся пространство */
      /* text-align: left; /* Уже унаследовано от .floor-entry (в этом медиа-запросе) */
  }

  /* Если вы хотите, чтобы текст внутри .areas-list (сами цифры м²) тоже был по левому краю на десктопе */
  .areas-list {
      /* text-align: left; /* Если нужно */
  }
}
.alert.alert-success {
    color: #155724; /* Темно-зеленый цвет текста */
    background-color: #d4edda; /* Светло-зеленый фон */
    border-color: #c3e6cb; /* Зеленая рамка */
    padding: 15px; /* Внутренние отступы */
    margin-bottom: 20px; /* Нижний отступ */
    border: 1px solid transparent; /* Стиль рамки */
    border-radius: 4px; /* Скругление углов */
    font-family: Arial, sans-serif; /* Пример шрифта, измените на свой */
}

.alert.alert-success strong {
    color: #0c3b12; /* Более темный зеленый для жирного текста (заголовка сообщения) */
}

.main-facility-title {
    font-weight: 900; /* Или другое значение: bold, 800 и т.д. */
}
.responsive-video-container {
    position: relative;
    overflow: hidden;
    width: 100%; /* Makes the container take the full width of its parent */
    padding-top: 56.25%; /* Aspect ratio 16:9 (height / width = 9 / 16 = 0.5625) */
}

.responsive-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* It's good practice to ensure no border from iframe itself */
}