/* ===== Главное фото ===== */
/* Главное фото — выше и стабильно */
.gh-gallery-main {
    position: relative;
    margin-bottom: 12px !important;
    aspect-ratio: 1 / 1; /* было 16/9 → делаем выше */
    max-height: 80vh; /* можно 85vh, если хочешь ещё выше */
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 576px) {
    .gh-gallery-main {
        aspect-ratio: 4 / 3;
    }
    /* на мобиле ещё повыше, удобно смотреть */
}

.gh-gallery-main img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
    pointer-events: none;
}

/* Стрелки на главном фото (изумрудные) */
.gh-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(0,77,54,.9); /* #004d36 c прозрачностью */
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    z-index: 2;
}

    .gh-arrow:hover {
        background: #004d36;
    }

.gh-prev {
    left: 12px;
}

.gh-next {
    right: 12px;
}

/* Счётчик фото (опционально) */
.gh-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: #004d36;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}

/* ===== Лента миниатюр в один ряд ===== */
.gh-thumbs-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px 0; /* было: большие отступы/паддинги */
    padding: 0;
    height: auto !important;
    min-height: 0 !important;
}
.gh-thumbs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
}
    /* скрыть полосу прокрутки (при желании) */
    .gh-thumbs-scroll::-webkit-scrollbar {
        height: 0;
    }

/* Кнопки-стрелки у ленты миниатюр */
.gh-thumbs-btn {
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(0,77,54,.9);
    color: #fff;
    font-size: 18px;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}

    .gh-thumbs-btn:hover {
        background: #004d36;
    }

.gh-thumbs-prev {
    margin-right: 2px;
}

.gh-thumbs-next {
    margin-left: 2px;
}

/* Кнопки-миниатюры (фиксированный размер, без мыла) */
.gh-thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    flex: 0 0 auto;
    width: 120px; /* единая ширина */
    height: 90px; /* единая высота */
    overflow: hidden;
}

    .gh-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* чётко и без искажений */
        display: block;
    }

    .gh-thumb.active {
        border-color: #198754;
    }

/* ===== Бейджи-характеристики ===== */
.gh-feature {
    display: inline-block;
    background: #f1f3f5;
    border-radius: 20px;
    padding: .25rem .6rem;
    margin: .15rem;
    font-size: .9rem;
}
.gh-features-vert {
    display: flex;
    flex-direction: column; /* вертикально */
    align-items: flex-start; /* по левому краю */
    gap: 6px; /* расстояние между элементами */
}

.gh-features-vert .gh-feature {
    display: inline-block;   /* ширина = по тексту */
    padding: 6px 10px;
    background: #f5f5f5;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.gh-counter {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(0,77,54,0.9);
    color: #fff;
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}


    .gh-counter::before {
        content: "";
        width: 16px;
        height: 16px;
        display: inline-block;
        background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M20 5h-3.2l-1.5-2H8.7L7.2 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm-8 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/></svg>");
    }
.gh-price {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: .25rem;
}

.gh-meta {
    margin-top: .25rem;
}

.meta-row {
    display: grid;
    grid-template-columns: 140px 1fr; /* подписи слева, значения справа */
    gap: 10px;
    padding: 6px 0;
}

.meta-label {
    color: #6b7280; /* серый как на макете */
    font-weight: 600;
}

.meta-value {
    font-weight: 500;
}

/* Чтобы миниатюры выглядели аккуратно (на случай отсутствия края) */
.gh-thumb {
    border-radius: 10px;
}
/* Тонкая серая линия перед блоком описания */
.gh-divider {
    border: 0;
    border-top: 1px solid #e5e7eb; /* светло-серая */
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

/* Контейнер описания — уже и по центру */
.gh-desc {
    max-width: 860px; /* ширина текста как на макете */
    padding: 0 16px; /* небольшие отступы по бокам на мобилке */
}

/* Заголовок "Опис" по центру */
.gh-desc-title {
    text-align: center;
    font-size: 20px; /* можно 22px, если хочется крупнее */
    font-weight: 700;
    margin: 0 0 12px 0; /* без лишних отступов сверху */
}

/* Текст описания: читаемо и без гигантских полей слева */
.gh-desc-text {
    font-size: 16px;
    line-height: 1.6;
    color: #111827;
}

@media (min-width: 992px) {
    .gh-desc {
        max-width: 900px;
    }
    /* чуть шире на десктопе */
}
/* Тонкая линия перед «Опис» */
.gh-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
}

/* Контейнер «Опис» — уже и по центру */
.gh-desc {
    max-width: 880px;
    margin: 0 auto; /* центрируем */
    padding: 0 16px; /* чуть воздуха на мобилке */
}

/* Заголовок по центру */
.gh-desc-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

/* Текст описания */
.gh-desc-text {
    font-size: 16px;
    line-height: 1.6;
    color: #111827;
}
/* Убрать большой зазор перед «Опис» */
.gh-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 16px 0 !important; /* компактнее */
}

/* «Опис» — центр и умеренная ширина */
.gh-desc {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 16px;
}

.gh-desc-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.gh-desc-text {
    font-size: 16px;
    line-height: 1.6;
    color: #111827;
}
.details-top {
    margin-bottom: 12px !important; /* минимальный низ у всего ряда */
}

/* Лента миниатюр: никаких лишних высот и больших отступов */
.gh-thumbs-strip {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

#thumbsScroll,
.gh-thumbs-scroll {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Сам раздел «Опис» — без сторонних вертикальных отступов вокруг */
.gh-divider {
    margin: 12px 0 !important; /* компактная линия */
}

.gh-desc {
    margin-top: 0 !important;
}
.details-top {
    margin-bottom: 8px !important;
    --bs-gutter-y: .5rem; /* уменьшаем вертикальный гаттер bootstrap */
}

/* главная картинка: никаких резервных высот */
.gh-gallery-main {
    margin-bottom: 10px !important;
    height: auto !important;
    min-height: 0 !important;
}

/* лента миниатюр: без лишних отступов/высот */
.gh-thumbs-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important; /* убирает межстрочный зазор вокруг inline-img */
}

/* контейнер скролла миниатюр */
#thumbsScroll,
.gh-thumbs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
}

/* сами миниатюры — без внешних отступов снизу */
.gh-thumb {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

/* разделитель и блок «Опис» — компактно */
.gh-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 12px 0 !important;
}

.gh-desc {
    margin-top: 0 !important;
}
.gh-desc-text {
    white-space: pre-line; /* уважает \n как перенос */
    line-height: 1.6;
}
/* ===== Общие стили модалки ===== */
.spot-modal {
    position: fixed;
    inset: 0; /* top, right, bottom, left = 0 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.55); /* затемнение фона */
    z-index: 9999; /* поверх всего */
}

/* Диалоговое окно */
.spot-modal__dialog {
    background: #fff;
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    animation: modalIn 0.25s ease;
}

/* Заголовок */
.spot-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.spot-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.spot-modal__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Закрывающая кнопка */
#leadModalClose {
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

/* Анимация появления */
@keyframes modalIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Скрытая модалка */
.spot-modal[hidden] {
    display: none !important;
}
/* Кнопка "Залишити номер телефону" */
.btn-form {
    background-color: #198754; /* зелёный */
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

    .btn-form:hover,
    .btn-form:focus {
        background-color: #157347; /* темнее при наведении */
        color: #fff !important;
    }

/* Кнопка "Подзвонити" (уже зелёная, но фиксируем стиль) */
.btn-success {
    background-color: #198754 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

    .btn-success:hover,
    .btn-success:focus {
        background-color: #157347 !important;
        color: #fff !important;
    }

/* Кнопка "Написати у Telegram" (переделываем из outline в зелёную) */
.btn-outline-success {
    background-color: #198754 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out;
}

    .btn-outline-success:hover,
    .btn-outline-success:focus {
        background-color: #157347 !important;
        color: #fff !important;
    }
/* Контейнер кнопок */
.details-buttons {
    display: flex;
    flex-wrap: wrap; /* если экран узкий — переносятся */
    gap: 10px; /* расстояние между кнопками */
    margin-top: 15px;
}

    /* Общие стили для всех кнопок */
    .details-buttons .btn {
        flex: 1 1 auto; /* одинаковая ширина */
        min-width: 140px; /* фиксируем минимальный размер */
        max-width: 180px; /* ограничиваем, чтобы не были широкими */
        text-align: center;
        padding: 10px 12px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 15px;
        white-space: nowrap; /* текст в одну строку */
    }