/* ===== ГЛОБАЛЬНЫЕ СТИЛИ ===== */

/* Подключение локального шрифта Tenor Sans */
@font-face {
    font-family: 'Tenor Sans';
    src: url('/static/fonts/TenorSans-Regular.ttf') format('truetype');
    /* Если есть woff2/woff – добавляйте их для лучшей поддержки браузеров */
    src: url('/static/fonts/TenorSans-Regular.woff') format('woff'),
         url('/static/fonts/TenorSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* улучшает производительность */
}

body {
    background-color: #e9e9de;
    font-family: "Tenor Sans", "Verdana", "Arial", sans-serif;
    font-size: 21px;
    color: #341b00;
    font-family: 'Tenor Sans', 'Verdana', 'Arial', sans-serif;
}

/* ===== НАВБАР ===== */
.navbar {
    background-color: #785f44 !important;
    min-height: 80px;
    
}
footer {
    background-color: #785f44 !important;
}
footer, footer * {
    color: #ffffff;
}

footer a {
    color: #ffffff ;
    text-decoration: underline;
    transition: color 0.2s ease;
}

footer a:hover {
    color: #ffffff ; 
    text-decoration: underline;  
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-family: "Tenor Sans", "Verdana", "Arial", sans-serif;
    color: #ffffff;
}
.navbar .nav-link {
    font-family: "Tenor Sans", "Verdana", "Arial", sans-serif;
    color: #ffffff;
}
.navbar-brand img:first-child { margin-right: 30px; }
.navbar-brand img:nth-child(2) { margin-top: 10px; }

.studio-title {
    font-family: 'Tenor Sans', 'Verdana', 'Arial', sans-serif;
    color: #ffffff;
    text-shadow: 
        -1px -1px 0 #00000080,
        1px -1px 0 #00000080,
        -1px 1px 0 #00000080,
        1px 1px 0 #00000080;
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 1;
    white-space: nowrap;
}

/* Кнопка-бургер (гамбургер) — светлая иконка */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5); /* светлая рамка */
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

/* АДМИН НАВИГАЦИОННАЯ ПАНЛЬ */
.custom-admin-nav {
    /* background-color: #785f44 !important; */ 
    background-color: #785f44 !important;
}

/* Фиксация админ-панели под основным навбаром */
.sticky-admin {
    position: sticky;
    top: 80px;   /* высота основного навбара (как в .navbar min-height) */
    z-index: 1020;
    background-color: #343a40; /* или ваш цвет */
}
/* На мобильных основный навбар ниже */
@media (max-width: 768px) {
    .sticky-admin {
        top: 56px; /* примерная высота навбара на мобильных (зависит от вашего дизайна) */
    }
}

/* ===== ЗАГОЛОВКИ ===== */
h1, h2, h4, h5 {
    font-family: 'Tenor Sans', 'Verdana', 'Arial', sans-serif;
    font-size: 35px;
    font-weight: 600;
}

h3 {
    font-family: 'Tenor Sans', 'Verdana', 'Arial', sans-serif;
    font-size: 30px;
    font-weight: 600;
}

h6 {
    font-family: 'Tenor Sans', 'Verdana', 'Arial', sans-serif;
    font-size: 27px;
    font-weight: 600;
}

/* ===== HERO ===== */
.hero {
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url('/static/images/hero-bg.jpg') center/cover no-repeat;
    color: white;
    padding: 10px 0;
    display: flex;
    align-items: center;
    min-height: 200px; /* минимальная высота, но может расти */
    margin-bottom: 45px;
    border-radius: 30px;      /* скругление углов */
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* тень */
}
.hero .btn-primary {
    background-color: #785f44;
    border-color: #785f44;
}
.hero .btn-primary:hover {
    background-color: #4d3c2b;
    border-color: #4d3c2b;
}

.hero .lead {
    text-align: center;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.hero-text {
    flex: 1;
    min-width: 280px;
    text-align: center;
}
.hero-video {
position: relative;
    top: 5px;          /* половина высоты навбара (80px/2) */
    left: 50px;
    width: auto;
    max-width: 300px;
    flex: 0 0 auto;
    }

    
@media (max-width: 768px) {
    .hero-video {
        position: static;   /* на мобильных видео остаётся в потоке под текстом */
        margin-top: 20px;
    }
    .hero-content {
        flex-direction: column;
    }
}

/* ===== КАРТОЧКИ УСЛУГ ===== */
#services .card {
    background-color: rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#services .card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

#services .card-body {
    padding-top: 0.5rem;
}

#services .card-title {
    font-family: "Tenor Sans", "Verdana", "Arial", sans-serif;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 0.5rem;
    }

#services .card-text {
    font-family: "Tenor Sans", "Verdana", "Arial", sans-serif;
    font-size: 22px;
    font-weight: 400;
}

.service-card {
    cursor: pointer;
}

/* Приведение текста услуг к заглавным буквам */ 
#services .card-title,
#services .card-text {
    text-transform: uppercase !important;
}

/* Преобразование заголовка в модальном окне в верхний регистр */
#modalServiceTitle {
    text-transform: uppercase !important;
}

/* Преобразование описания в модальном окне в верхний регистр */ 
#modalServiceDescription {
    text-transform: uppercase !important;
}


/* Выравнивание полного описания услуги по ширине */
.service-full-description  {
    text-align: justify;
}


/* ===== АКЦИИ (события) ===== */
.promo-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    border-radius: 10px;
}
.promo-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.promo-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
}
.promo-img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}
/*.badge.bg-danger {
    background-color: #ff7e5e !important;
}*/

/* Карточки событий — фиксированная высота и прокрутка текста */
/*#promotions .card {
    height: 480px;           */      /* задайте желаемую высоту */
   /* display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.5);
}*/

#promotions .card-body {
    flex: 1;                       /* занимает оставшееся место */
    overflow-y: auto;              /* вертикальная прокрутка */
    padding: 1rem;
}

/* Если нужно, чтобы изображение тоже имело фиксированный размер */
#promotions .promo-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

/* Для десктопа можно настроить скролл-бар более аккуратно (опционально) */
#promotions .card-body::-webkit-scrollbar {
    width: 6px;
}
#promotions .card-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
}
#promotions .card-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

/* Заголовок акции */
#promotions .card-title {
    font-size: 30px;
    font-weight: 400;
    color: #221700; /* можно изменить */
    margin-bottom: 0.5rem;
    text-align: center;
}

/* Описание акции */
#promotions .card-text {
    font-family: "Tenor Sans", "Verdana", "Arial", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #221700;
    text-align: left;
    margin-bottom: 0.1rem;
}

/* Бейдж скидки */
#promotions .badge {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Дата окончания */
#promotions .small {
    font-family: inherit;
    font-size: 0.8rem;
    color: #6c757d;
}

#promotions .card-title {
    margin-bottom: 0.75rem;
    text-align: center;
}

#promotions .card-text {
    text-align: justify;
    margin-bottom: 1rem;
}

/* Переопределяем высоту карточек акций */
/*#promotions .promo-card {
    height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
}
#promotions .promo-card .card-body {
    flex: 1;
    overflow-y: auto;
}*/

/* Принудительное центрирование заголовков акций */
#promotions .promo-card .card-title {
    text-align: center !important;
    width: 100%;  /* заставляет элемент растянуться на всю ширину родителя */
}

/* Убираем влияние h-100, если есть */
#promotions .h-100 {
    height: auto !important;
}
/* Фиксируем высоту изображения, если нужно */
/*#promotions .promo-img {
    height: 200px;
    object-fit: cover;
}
#promotions .promo-img-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* ГОРИЗОНТАЛЬНЫЕ КАРТОЧКИ СОБЫТИЙ */

.promo-card-horizontal {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
}
.promo-card-horizontal:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.promo-img-horizontal {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px; /* чтобы на мобильных было пропорционально */
}
/* Для мобильных: изображение сверху, текст снизу (стандартное поведение Bootstrap row g-0) */
@media (max-width: 767.98px) {
    .promo-img-horizontal {
        min-height: auto;
        max-height: 250px;
        width: 100%;
        object-fit: cover;
    }
    .promo-card-horizontal .card-body {
        padding: 1rem;
    }
}

/* ===== ГАЛЕРЕЯ ===== */
#gallery .row {
    --bs-gutter-x: 1.5rem;
}
#gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#gallery img:hover {
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.clickable-img {
    cursor: pointer;
}

/* ===== БЛОК "О СТУДИИ" ===== */
#about img {
    transition: transform 0.3s ease;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
}
#about img:hover {
    transform: scale(1.02);
}

#about p {
    text-align: justify;
}

/* ===== ДРУГИЕ ЭЛЕМЕНТЫ ===== */
.card {
    background-color: rgba(255, 255, 255, 0.5);
}
.rounded-soft {
    border-radius: 5px;
}

/* Центрирование контактов: иконки и текст по центру */
#contacts .row [class*="col-"] {
    text-align: center;
}

#contacts .bi {
    color: #785f44;
}

/* Отступ для якорей, чтобы они не прятались под навбаром */
section[id] {
    scroll-margin-top: 110px;  /* Подберите высоту вашего навбара + небольшой запас */
}

/* Если на разных экранах высота навбара меняется, можно использовать медиазапросы */
/*@media (max-width: 768px) {
    section[id] {
        
    }
}
*/

/* Принудительная фиксация высоты карточек акций */
#promotions .promo-card {
    height: 500px !important;        /* выберите нужную высоту */
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

#promotions .promo-card .card-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

/* Убираем влияние Bootstrap-класса h-100 */
#promotions .promo-card.h-100,
#promotions .h-100 {
    height: auto !important;
}

/* Фиксируем высоту изображения (если хотите, чтобы они были одинаковыми) */
#promotions .promo-img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

#promotions .promo-img-placeholder {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
}

/* Настройка скроллбара для аккуратности (опционально) */
#promotions .promo-card .card-body::-webkit-scrollbar {
    width: 6px;
}
#promotions .promo-card .card-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
#promotions .promo-card .card-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

/* Контакты */
#contacts .card {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Выравнивание заголовка «НАША СТУДИЯ» по центру */
#about h2 {
    text-align: center;
}


.service-card-image {
    width: 100%;
    height: 250px;          /* можно 200px, 300px – на ваш вкус */
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

/* КНОПКА Записаться */
.btn-navbar {
    background-color: #785f44;
    border-color: #785f44;
    color: #fff;
}
.btn-navbar:hover {
    background-color: #987856;
    border-color: #987856;
    color: #fff;
}

/* Кнопки на дашборде */
.btn-admin {
    background-color: #785f44;
    border-color: #785f44;
    color: #fff;
}
.btn-admin:hover {
    background-color: #987856;
    border-color: #987856;
    color: #fff;
}

/* Стили для чекбоксов */

/* Смена цвета галочек (чекбоксов) на цвет навбара */
.form-check-input:checked {
    background-color: #785f44 !important;
    border-color: #785f44 !important;
}

/* Эффект фокуса (обводка) */
.form-check-input:focus {
    border-color: #785f44 !important;
    box-shadow: 0 0 0 0.2rem rgba(120, 95, 68, 0.25) !important;
}

/* Цвет кнопки ОТМЕНА */
.btn-secondary {
    background-color: #6c757d; /* стандартный серый, можно заменить на любой */
    border-color: #6c757d;
}

.privacy-container h1 {
    text-align: center;
}
.privacy-container .content,
.privacy-container .content p,
.privacy-container .content li {
    text-align: justify;
}

/* ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ */

.privacy-container .table {
    margin-top: 1rem;
    font-size: 0.95rem;
    background-color: #e9e9de;
}
.privacy-container .table ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
    background-color: #e9e9de;
}
/* Стилизация ссылки на политику конфиденциальности */
.privacy-link {
    color: #785f44 !important;  /* цвет навбара (коричневый) */
    text-decoration: none !important;
    border-bottom: 1px dotted #785f44; /* опционально: пунктирное подчёркивание */
}
.privacy-link:hover {
    color: #4b3b2b !important;  /* цвет при наведении (зелёный) */
    border-bottom-color: #4b3b2b;
}
@media (max-width: 768px) {
    .privacy-container .table {
        font-size: 0.85rem;
    }
}

/* Стилизация чекбокса согласия – более заметный */
.form-check-input#contactConsent {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.1em;
    border: 2px solid #785f44;   /* коричневая рамка */
    background-color: #ffffff;    /* белый фон, но будет виден из-за рамки */
    cursor: pointer;
}
.form-check-input#contactConsent:checked {
    background-color: #785f44;    /* коричневый фон при выборе */
    border-color: #785f44;
}
.form-check-input#contactConsent:focus {
    box-shadow: 0 0 0 0.2rem rgba(120, 95, 68, 0.25); /* коричневое свечение */
    border-color: #785f44;
}

/* ===== СТРАНИЦА ВХОДА (LOGIN) ===== */
/* Фон страницы – такой же, как у всего сайта */
.login-page,
body:has(.login-form) {
    background-color: #e9e9de;
}

/* Карточка формы входа – полупрозрачная, как карточки услуг */
.login-form .card {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Заголовок формы */
.login-form .card-title {
    color: #221700;
    font-family: 'Tenor Sans', 'Verdana', 'Arial', sans-serif;
}

/* Кнопка входа – в стиле кнопки "Записаться" (зелёная) либо можно сделать коричневой */
.login-form .btn-primary {
    background-color: #785f44 !important;   /* зелёный, как кнопка в навбаре */
    border-color: #785f44 !important;
    font-family: 'Tenor Sans', 'Verdana', 'Arial', sans-serif;
    font-size: 18px;
    padding: 8px 20px;
}
.login-form .btn-primary:hover {
    background-color: #3d8a73 !important;
    border-color: #3d8a73 !important;
}

/* Если вы хотите коричневую кнопку (как навбар) – замените цвета на #785f44 и #987856 */
/* Поля ввода – чтобы не выделялись синим при фокусе */
.login-form .form-control:focus {
    border-color: #785f44;
    box-shadow: 0 0 0 0.2rem rgba(120, 95, 68, 0.25);
}

/* Ссылки на странице (если есть) */
.login-form a {
    color: #785f44;
    text-decoration: none;
}
.login-form a:hover {
    color: #4c3c2b;
    text-decoration: underline;
}

/* Квадратные превью сертификатов */
.cert-square {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* квадрат */
    overflow: hidden;
    border-radius: 10px; /* опционально */
    background: #f0f0f0;
}
.cert-square .cert-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* обрезка по центру без искажений */
    object-position: center;
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ (до 768px) МЕДИА ===== */
@media (max-width: 768px) {
    /* Навбар */
    .navbar-brand img:first-child {
        height: 40px !important;
        margin-right: 10px !important;
    }
    .studio-title {
        font-size: 19px !important;
        white-space: normal !important;
        text-shadow: none !important;
    }
    .navbar-toggler {
        padding: 0.1rem 0.3rem !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    .navbar-toggler-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .navbar {
        min-height: auto !important;
    }
    .navbar-nav .nav-link {
        font-size: 16px !important;
        padding: 0.5rem 0 !important;
        text-align: center;
    }
    .navbar-nav {
        gap: 0.5rem;
    }

    /* Герой-секция */
    .hero {
        display: none;
    }

    /* Общие заголовки */
    h1, h2, h4, h5, h6 {
        font-size: 28px !important;
    }
    h3 {
        font-size: 25px !important;
    }
    h6 {
        font-size: 23px !important;
    }

    /* Карточки услуг */
    #services .card-title {
        font-size: 24px !important;
    }
    #services .card-text {
        font-size: 18px !important;
    }
    .service-card-image {
        width: 100%;
        
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 10px;
    }

    /* Карточки акций */
    #promotions .card-title {
        font-size: 24px !important;
    }
    #promotions .card-text {
        font-size: 21px !important;
    }
    #promotions .promo-img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    }
    #promotions .card {
        height: auto !important;
        min-height: 380px !important;
    }

    /* Галерея */
    #gallery .row {
        --bs-gutter-x: 0.75rem !important;
    }

    /* Футер */
    footer {
        padding: 1rem 0 !important;
        font-size: 12px !important;
    }

    /* Полное описание на странице услуги */
    .service-full-description {
        font-size: 18px !important;
    }

    /* Кнопки */
    .btn, .btn-admin, .btn-navbar {
        font-size: 18px !important;
        padding: 8px 16px !important;
    }

    /* Отступы для якорей */
    section[id] {
        scroll-margin-top: 80px !important;
    }

    /* Секция "О студии": фото вверху, текст внизу */
    #about .row {
        display: flex;
        flex-direction: column;
    }
    #about .col-md-6:first-child {
        order: 2;
    }
    #about .col-md-6:last-child {
        order: 1;
        margin-bottom: 36px;
    }

    /* Квадратное изображение в блоке "О студии" на мобильных */
    #about img {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* ПЕРЕНОС ТЕКСТА ПО СЛОГАМ ДЛЯ МОБИЛЬНЫХ */
    #about p,
    #services .card-text,
    #promotions .card-text {
        hyphens: auto;
        word-break: break-word;
        overflow-wrap: break-word;
    }

        /* Для страницы услуги */
    .service-full-description,
    .service-full-description p,
    .service-full-description li,
    .lead,
    .lead p {
        hyphens: auto;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Переносы текста на странице политики конфиденциальности (мобильные) */
    .privacy-container, 
    .privacy-container .content,
    .privacy-container .content p,
    .privacy-container .content li,
    .privacy-container h2 {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    .privacy-container h1 {
            word-break: normal !important;      /* стандартное поведение (перенос по пробелам, но не по слогам) */
            overflow-wrap: normal !important;   /* отключает разрыв длинных слов */
            white-space: normal !important;  
            hyphens: none !important;
    }

    .privacy-container h1 {
                text-align: center !important;
    }    
        
        /* Выключка текста на странице политики конфиденциальности (мобильные) */
    .privacy-container .content li,
    .privacy-container h2 {
        text-align: left !important;
        }

}






/* ===== ВЫРАВНИВАНИЕ КАРТОЧЕК УСЛУГ ПО ВЫСОТЕ И КОРРЕКТИРОВКА ПОДПИСЕЙ ===== */
/* Чтобы все карточки услуг были одинаковой высоты */
#services .row {
    display: flex;
    flex-wrap: wrap;
}
/*#services .col-md-4 {
    display: flex;
    flex-direction: column;
}*/
#services .card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
#services .service-card-image {
    width: 100%;
    height: 250px;          /* фиксированная высота картинки на десктопе */
    object-fit: cover;
    object-position: center;
}
#services .card-body {
    flex-grow: 1;
    display: flex;
    align-items: center;    /* вертикальное центрирование заголовка */
    justify-content: center;
    padding: 1rem;
}
#services .card-title {
    margin-bottom: 0;
    text-align: center;
    display: -webkit-box;
    /*-webkit-line-clamp: 2; */ /* максимум 2 строки */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Лайтбокс: кнопки навигации */
#imageModal .carousel-control-prev,
#imageModal .carousel-control-next {
    width: 10%;
    opacity: 0.6;
    transition: opacity 0.2s;
}
#imageModal .carousel-control-prev:hover,
#imageModal .carousel-control-next:hover {
    opacity: 1;
}
#imageModal .carousel-control-prev-icon,
#imageModal .carousel-control-next-icon {
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
}
#imageModal .modal-body {
    position: relative;
}
#imageModal img {
    max-height: 85vh;
    object-fit: contain;
}
#imageCounter {
    font-size: 1rem;
    font-family: monospace;
    pointer-events: none;
}

/* Усиление затемнения фона лайтбокса */
.modal-backdrop.show {
    opacity: 0.9 !important;  /* делаем фон темнее (0.9 - почти чёрный) */
    background-color: #000;
}

/* Убираем белый фон у содержимого модального окна (у вас уже есть bg-transparent, но на всякий случай) */
#imageModal .modal-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Делаем само изображение с небольшим свечением или тенью для отделения от фона (опционально) */
#imageModal img {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

/* Скрываем элементы интерфейса при открытом лайтбоксе */
body.lightbox-open .navbar,
body.lightbox-open footer {
    display: none !important;
}
/* Дополнительно: если есть другие элементы, которые мешают (например, кнопка чата) */
body.lightbox-open .floating-button {
    display: none !important;
}

/* Для мобильных: картинка становится квадратной */
@media (max-width: 768px) {
    #services .service-card-image {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}