/* Совместимость сторонних библиотек с дизайн-системой «Наш Город» */

/* ---- Bootstrap modal ---- */
.modal-content.ng-modal,
.ng-modal .modal-content {
    border: 0;
    border-radius: var(--ng-radius);
    border-top: 4px solid var(--ng-red);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.ng-modal .modal-body { padding: 40px 32px; }
.ng-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--ng-radius);
    background: rgba(188, 32, 33, .08);
    color: var(--ng-red);
    margin-bottom: 20px;
}
.ng-modal__title {
    font-family: var(--ng-head);
    font-weight: 900;
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 10px;
}
.ng-modal__text { font-size: 14px; color: var(--ng-muted); margin-bottom: 24px; }

.modal-header { border-bottom: 1px solid var(--ng-line); padding: 20px 32px; }
.modal-title { font-family: var(--ng-head); font-weight: 700; font-size: 18px; }
.modal-body { padding: 24px 32px; }
.modal-footer { border-top: 1px solid var(--ng-line); padding: 16px 32px; }

/* ---- Tom Select ---- */
.ts-wrapper .ts-control {
    min-height: 44px;
    border: 1px solid var(--ng-line);
    border-radius: var(--ng-radius);
    background: var(--ng-bg-soft);
    padding: 10px 14px;
    font-family: var(--ng-body);
    font-size: 14px;
    color: var(--ng-text);
}
.ts-wrapper.focus .ts-control { border-color: var(--ng-red); box-shadow: 0 0 0 3px rgba(188, 32, 33, .12); }
.ts-dropdown { border: 1px solid var(--ng-line); border-radius: var(--ng-radius); font-family: var(--ng-body); font-size: 14px; }
.ts-dropdown .active { background: rgba(188, 32, 33, .08); color: var(--ng-red); }
.ts-wrapper .ts-control > .item { background: var(--ng-line-soft); border-radius: var(--ng-radius); }

/* ---- Splide ---- */
.splide__pagination__page { background: var(--ng-line); opacity: 1; }
.splide__pagination__page.is-active { background: var(--ng-red); transform: none; }
.splide__arrow { background: #fff; border: 1px solid var(--ng-line); border-radius: var(--ng-radius); opacity: 1; }
.splide__arrow svg { fill: var(--ng-text-2); width: 14px; height: 14px; }
.splide__arrow:hover { border-color: var(--ng-red); }
.splide__arrow:hover svg { fill: var(--ng-red); }
.splide__slide { height: auto; }
.splide__list { align-items: stretch; }

/* ---- Fancybox ---- */
.fancybox__container { --fancybox-accent-color: var(--ng-red); }

/* ---- Bootstrap grid внутри новых страниц ---- */
.ng-container .row { --bs-gutter-x: 24px; }

/* ---- утилиты форм из старых компонентов ---- */
.form-control, .form-select {
    min-height: 44px;
    border: 1px solid var(--ng-line);
    border-radius: var(--ng-radius);
    background: var(--ng-bg-soft);
    font-family: var(--ng-body);
    font-size: 14px;
    color: var(--ng-text);
    padding: 12px 16px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ng-red);
    box-shadow: 0 0 0 3px rgba(188, 32, 33, .12);
}
.form-label { font-size: 12px; font-weight: 600; color: var(--ng-text); margin-bottom: 6px; }

/* ---- Прямые углы: нормализация сторонних библиотек ----
   Bootstrap, Tom Select, Splide и Fancybox подключаются с CDN и правятся
   только оверрайдом. Единый радиус сайта живёт в токене --ng-radius (ng.css):
   поменять там одно значение — изменится вся геометрия, включая этот блок. */
.btn,
.btn-close,
.card,
.card-img, .card-img-top, .card-img-bottom,
.badge,
.alert,
.progress, .progress-bar,
.pagination, .page-link,
.dropdown-menu, .dropdown-item,
.list-group, .list-group-item,
.input-group, .input-group-text,
.nav-pills .nav-link,
.accordion, .accordion-item, .accordion-button,
.toast, .toast-header,
.offcanvas,
.modal-header, .modal-footer,
button, input, select, textarea,
.popover, .tooltip .tooltip-inner,
.form-check-input,
.modal-content {
    border-radius: var(--ng-radius);
}

/* утилиты Bootstrap объявлены с !important — перебиваем тем же весом */
.rounded, .rounded-0, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5,
.rounded-circle, .rounded-pill,
.rounded-top, .rounded-end, .rounded-bottom, .rounded-start {
    border-radius: var(--ng-radius) !important;
}

/* точки пагинации Splide и кнопки Fancybox приходят кругами */
.splide__pagination__page { border-radius: var(--ng-radius); }
.f-button,
.fancybox__container .f-button,
.fancybox__nav .f-button,
.f-thumbs__slide__button { border-radius: var(--ng-radius); }

/* Яндекс.Карты подмешивают свои стили в рантайме (кнопки зума, копирайт,
   балуны). Класс содержит версию API — селектор намеренно версионно-независимый. */
[class*="ymaps-"] { border-radius: var(--ng-radius) !important; }