/* ==========================================================================
   e-Lot Sales — редизайн (Zeplin «e-Lot Sales S26-27», 15.09.2026)
   Підключається після main.css + whiteTheme.css і перекриває їх.
   Токени: текст #333/#222, мутед #79818d/#8c94a3, лінії #e1e4ed/#edf0f5,
   акцент синій #4e90ea, зелений #179551, чипи #e0ecff/#eeeff2, радіуси 16/8/6.
   ========================================================================== */

:root {
    --el-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --el-text: #333333;
    --el-text-dark: #222222;
    --el-muted: #79818d;
    --el-muted-2: #8c94a3;
    --el-line: #e1e4ed;
    --el-line-soft: #edf0f5;
    --el-bg: #f4f5f7;
    --el-card: #ffffff;
    --el-blue: #4e90ea;
    --el-blue-soft: #e0ecff;
    --el-green: #179551;
    --el-green-dark: #15924f;
    --el-grey-chip: #eeeff2;
    --el-red: #f83150;
    --el-shadow: 0 1px 1px rgba(0, 0, 0, .03);
}

body.elot {
    font-family: var(--el-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--el-text);
    background-color: var(--el-bg) !important;
    -webkit-font-smoothing: antialiased;
    /* Герой і блок новин розтягнуті на 100vw; з класичним (не overlay) скролбаром
       100vw ширше за вікно → зʼявлявся горизонтальний скрол. clip не створює
       скрол-контейнер, тож sticky правої панелі лота працює. */
    overflow-x: hidden;
    overflow-x: clip;
}

body.elot .text-white { color: var(--el-text) !important; }
/* Стандартні bootstrap-кнопки-посилання (a.btn-success, a.btn-default, a.btn-danger…) на сторінках
   поза редизайном лишаються зі своїм кольором тексту: синій колір посилання на кольоровому тлі
   кнопки не читався. :where() не додає специфічності, тож решта перекриттів нижче працює як раніше. */
body.elot a:where(:not(.btn)) { color: var(--el-blue); }
body.elot a:where(:not(.btn)):hover { color: #2f6fc7; text-decoration: none; }
body.elot ul { background-color: transparent; }
body.elot a.elot-btn, body.elot a.elot-tab, body.elot a.elot-check, body.elot a.elot-segment__item, body.elot a.elot-nav__link { text-decoration: none; }
body.elot a.elot-btn { color: var(--el-text-dark); }
body.elot a.elot-btn--green, body.elot a.elot-btn--green:hover, body.elot a.elot-btn--primary, body.elot a.elot-btn--primary:hover { color: #fff; }
body.elot a.elot-btn--light, body.elot a.elot-btn--light:hover { color: #050505; }
body.elot .elot-footer a { color: #7f8081; }
body.elot .elot-footer a:hover, body.elot .elot-footer__contacts a { color: #fff; }
body.elot .elot-footer a.elot-btn--light, body.elot .elot-footer a.elot-btn--light:hover { color: #050505; }
body.elot .elot-topbar__links a { color: #8b93a5; }
body.elot .elot-topbar__links a.elot-topbar__phone { color: var(--el-text); }
body.elot .elot-user__profile, body.elot .elot-user__profile:hover { color: #2c2c2c; }
body.elot .elot-card__title a { color: #222; }
body.elot .elot-card__title a:hover { color: #222; }
body.elot .elot-card__dates dd a { color: #2c2c2c; }
body.elot .elot-card__dates dd a:hover { color: var(--el-blue); }
body.elot .elot-breadcrumbs a { color: #666b74; }
body.elot .elot-breadcrumbs--light a { color: rgba(255, 255, 255, .6); }
body.elot a.elot-news__card, body.elot a.elot-news__card:hover { color: #2d3a52; }
body.elot h1, body.elot h2, body.elot h3, body.elot h4, body.elot h5, body.elot h6 { font-family: var(--el-font); }
body.elot .font-grotesque { font-family: var(--el-font); }
body.elot img { max-width: 100%; }

/* Макет: контент 1280px (x=43…1323 на 1366). У bootstrap-контейнера ще по 15px
   бокових падінгів, тому max-width = 1280 + 30. */
@media (min-width: 1340px) {
    body.elot .container { max-width: 1310px; }
}

body.elot #toTop { display: none; }
/* Стара плаваюча кнопка сповіщень (fixed, top: 82px) налазила на шапку: ховаємо,
   шторку .notifications відкриває дзвінок у шапці (web/js/elot.js). */
body.elot .notify-btn { display: none; }
body.elot .notifications {
    width: 380px;
    max-width: calc(100vw - 30px);
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--el-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
    font: 400 14px/19px var(--el-font);
    color: var(--el-text);
}
body.elot .show-notifications.active ~ .notifications { top: 112px; bottom: auto; right: max(15px, calc(50vw - 640px)); z-index: 1050; display: flex; flex-direction: column; max-height: calc(100vh - 128px); }
body.elot .notifications:after { display: none; }
/* «Відмітити усі як прочитані» — спокійна дія в шапці панелі замість синьої плашки */
body.elot .notifications h3.mark-all {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 13px 20px;
    border: 0;
    border-bottom: 1px solid var(--el-line-soft);
    border-radius: 0;
    background: #f8f9fa;
    box-shadow: none;
    color: #25589d;
    font: 500 13px/18px var(--el-font);
    text-align: left;
}
body.elot .notifications h3.mark-all:hover { color: var(--el-blue); text-decoration: underline; }
body.elot .notifications .notifications-list { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; }
/* transition: transform лишається від віджета — на його transitionend висить закриття сповіщення */
body.elot .notifications .notifications-list .item { display: flex; align-items: flex-start; gap: 12px; width: auto; padding: 13px 16px 13px 20px; border-top: 1px solid #f2f4f7; color: var(--el-text); white-space: normal; }
body.elot .notifications .notifications-list .item.no-data + .item { border-top: 0; }
body.elot .notifications .notifications-list .item:before,
body.elot .notifications .notifications-list .item.expired:before { flex: 0 0 6px; width: 6px; height: 6px; margin-top: 7px; background: var(--el-blue); }
body.elot .notifications .notifications-list .item .details { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; word-break: break-word; }
body.elot .notifications .notifications-list .item.expired { color: var(--el-text); }
body.elot .notifications .notifications-list .item .details .date,
body.elot .notifications .notifications-list .item.expired .details .date { margin-top: 4px; color: #8c94a3; font: 400 12px/15px var(--el-font); }
body.elot .notifications .notifications-list .item .button-dismiss { flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #f4f5f7; color: #8c94a3; font: 400 16px/24px var(--el-font); text-align: center; }
body.elot .notifications .notifications-list .item .button-dismiss:hover,
body.elot .notifications .notifications-list .item .button-dismiss:focus { background: #e7e9ed; color: #333; }
/* рядок-заглушка видимий лише в порожній панелі (як у віджеті); display:flex вище його не вмикає */
body.elot .notifications .notifications-list .item.no-data { display: none; justify-content: center; color: #8c94a3; }
body.elot .notifications.empty .notifications-list .item.no-data { display: flex; }
body.elot .notifications .notifications-list .item.no-data:before { display: none; }
@media (max-width: 575.98px) {
    /* мобільний: панель на всю ширину екрана з полями контейнера, одразу під шапкою */
    body.elot .notifications { width: auto; max-width: none; }
    body.elot .show-notifications.active ~ .notifications { top: 100px; left: 15px; right: 15px; max-height: calc(100vh - 116px); }
}
body.elot .elot-page { padding-bottom: 32px; }
body.elot .alert { border-radius: 12px; }

/* --------------------------------------------------------------------------
   Кнопки, чипи, теги
   -------------------------------------------------------------------------- */
.elot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font: 500 13px/1 var(--el-font);
    color: var(--el-text-dark);
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: var(--el-shadow);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
}
.elot-btn:hover { text-decoration: none; color: var(--el-text-dark); background: #f4f6fa; }
/* Головна дія — зелений градієнт макета (#199a54 → #118d4a: «Перейти», «Подати пропозицію»). */
.elot-btn--green { color: #fff; border-color: transparent; background: linear-gradient(180deg, #199a54 0%, #118d4a 100%) border-box; }
.elot-btn--green:hover { color: #fff; background: #118d4a border-box; }
.elot-btn--primary { color: #fff; border-color: var(--el-blue); background: var(--el-blue); }
.elot-btn--primary:hover { color: #fff; background: #3a7fdc; }
.elot-btn--ghost { border-color: var(--el-line); background: #fff; }
.elot-btn--ghost:hover { background: #f4f6fa; }
.elot-btn--light { color: #050505; background: #fff; border-radius: 16px; height: 31px; padding: 0 15px; font-size: 12px; }
.elot-btn--light:hover { background: #e9e9e9; color: #050505; }
.elot-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }

.elot-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--el-line);
    background: #fff;
    position: relative;
    flex: 0 0 auto;
}
.elot-iconbtn img { width: 13px; height: 13px; }
.elot-iconbtn:hover { background: #f4f6fa; }
.elot-iconbtn__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    border: 1.5px solid #fff;
    background: var(--el-red);
    color: #fff;
    font: 500 10px/16px var(--el-font);
    text-align: center;
}

.elot-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.elot-tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--el-grey-chip);
    color: #2c2c2c;
    font: 500 12px/14px var(--el-font);
}
.elot-tag--blue { background: var(--el-blue-soft); }

.elot-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--el-blue-soft);
    color: var(--el-text);
    font: 500 12px/14px var(--el-font);
    white-space: nowrap;
}
.elot-chip img { width: 10px; height: 10px; }
.elot-chip--urgent { background: #ffe2d5; }
.elot-chip--status { background: var(--el-grey-chip); max-width: 100%; white-space: normal; text-align: right; }
.elot-chip--success { background: #d5edcf; }
.elot-chip--warning { background: #fff1cc; }
.elot-chip--danger { background: #ffe2d5; }
/* Чип фільтра не ширший за рядок: довге значення («Статус процедури: Очікується опублікування
   протоколу…», назва області при збільшеному системному шрифті телефона) переноситься всередині
   чипа. Без цього nowrap-чип розпирав сторінку — на мобільному зʼявлялась горизонтальна прокрутка. */
.elot-chip--filter { background: #f0f2f4; padding: 6px 8px 6px 10px; max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.elot-chip--filter img, .elot-chip--filter .elot-chip__label, .elot-chip--filter .elot-chip__remove { flex: 0 0 auto; }
.elot-chip__label { color: var(--el-muted); font-weight: 400; white-space: nowrap; }
.elot-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 3px;
    background: #e1e5e8;
    color: var(--el-text) !important;
    font-size: 14px;
    line-height: 1;
    text-decoration: none !important;
}
.elot-chip__remove:hover { background: #d1d5d8; }

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.elot-header { background: #fff; }
.elot-topbar { border-bottom: 1px solid #f4f5fa; font-size: 12px; color: #8b93a5; }
.elot-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}
.elot-topbar__tagline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elot-topbar__links { display: flex; align-items: center; gap: 0; white-space: nowrap; }
.elot-topbar__links > * { padding: 0 14px; border-left: 1px solid #edf0f7; color: #8b93a5; }
.elot-topbar__links > *:first-child { border-left: 0; }
.elot-topbar__links > *:last-child { padding-right: 0; }
.elot-topbar__links a { color: #8b93a5; text-decoration: underline; text-decoration-color: #c9ced9; text-underline-offset: 3px; }
.elot-topbar__links a:hover { color: var(--el-text); }
.elot-topbar__links .elot-topbar__phone { color: var(--el-text); font-weight: 500; text-decoration: none; }

.elot-mainbar { border-bottom: 1px solid #f4f5fa; }
.elot-mainbar__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 66px;            /* шапка макета = 106px: 38 + 1 (лінія) + 66 + 1 (лінія) */
}
.elot-logo { display: inline-flex; align-items: center; padding-right: 24px; border-right: 1px solid #eaecf2; }
.elot-logo img { height: 14px; width: auto; }
.elot-nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.elot-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 5px;
    color: #2c2c2c !important;
    font: 400 14px/1 var(--el-font);
    background: transparent;
    border: 0;
    white-space: nowrap;
}
.elot-nav__link:hover, .elot-nav__link.is-active, .elot-nav__more.show .elot-nav__toggle { background: #eff0f4; text-decoration: none; }
.elot-nav__link img { width: 7px; opacity: .8; }
.elot-nav__more.show .elot-nav__toggle img { transform: rotate(180deg); }
.elot-menu {
    margin-top: 8px;
    padding: 8px 0;
    border: 1px solid var(--el-line);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    font-size: 14px;
    max-height: calc(100vh - 140px);
    overflow: auto;
    min-width: 260px;
}
.elot-menu .dropdown-item { padding: 8px 18px; color: #2c2c2c; }
.elot-menu .dropdown-item:hover { background: #f4f6fa; color: #2c2c2c; }
.elot-menu .dropdown-submenu > .dropdown-menu { position: static; float: none; border: 0; box-shadow: none; padding-left: 12px; }
.elot-menu .dropdown-header { padding: 8px 18px 4px; font-size: 12px; color: var(--el-muted); }

.elot-user { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.elot-user__menu { padding-right: 16px; margin-right: 8px; border-right: 1px solid #e4e4e6; }
.elot-user__profile { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: #2c2c2c; text-align: left; cursor: pointer; }
.elot-user__profile:focus { outline: 0; }
.elot-user__profile:hover { text-decoration: none; }
.elot-user__avatar { display: inline-flex; flex: 0 0 20px; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #d9e0f2; color: #25589d; font: 600 11px/1 var(--el-font); }
.elot-user__text { display: flex; flex-direction: column; line-height: 1.25; }
.elot-user__name { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #2c2c2c; }
.elot-user__name > span { max-width: 253px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elot-user__name > img { width: 7px; opacity: .8; transition: transform .15s; }
.elot-user__menu.show .elot-user__name > img { transform: rotate(180deg); }
.elot-user__sub { max-width: 260px; overflow: hidden; font-size: 12px; color: #7c808d; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 991.98px) {
    .elot-topbar__tagline { display: none; }
    .elot-topbar__links { width: 100%; justify-content: space-between; overflow-x: auto; }
    .elot-mainbar__inner { flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
    .elot-logo { border-right: 0; padding-right: 0; }
    .elot-nav { order: 3; width: 100%; overflow-x: auto; }
    .elot-user__menu { border-right: 0; margin-right: 0; padding-right: 0; }
    .elot-user__avatar { flex-basis: 32px; width: 32px; height: 32px; font-size: 13px; }   /* на мобільному лишається сам аватар — розміром як сусідні кнопки */
    .elot-user__text { display: none; }
}

/* --------------------------------------------------------------------------
   Хлібні крихти
   -------------------------------------------------------------------------- */
.elot-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin: 0;
    padding: 14px 0 0;
    list-style: none;
    font-size: 12px;
    color: #666b74;
}
.elot-breadcrumbs li { display: inline-flex; align-items: center; max-width: 100%; }
.elot-breadcrumbs li + li::before {
    content: '';
    width: 4px;
    height: 7px;
    margin: 0 9px;
    background: url(/images/elot/chevron-right.svg) center/contain no-repeat;
    opacity: .7;
}
.elot-breadcrumbs a { color: #666b74; }
.elot-breadcrumbs li.active { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elot-breadcrumbs--light, .elot-breadcrumbs--light a { color: rgba(255, 255, 255, .6); }
.elot-breadcrumbs--light li.active { color: #fff; }
.elot-breadcrumbs--light li + li::before { filter: brightness(10); }

/* --------------------------------------------------------------------------
   Каталог: герой + картка пошуку
   -------------------------------------------------------------------------- */
.elot-catalog { position: relative; }
.elot-hero {
    position: relative;
    z-index: 0;
    height: 151px;               /* 285px фону мінус 134px, які перекриває картка пошуку */
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    color: #fff;
}
.elot-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    height: 285px;
    /* затемнення 30% з макета вже запечене в hero.jpg — вдруге не накладаємо */
    background: #7d8a67 url(/images/elot/hero.jpg) center/cover no-repeat;
}
.elot-hero--compact::before { height: 187px; }   /* коротка картка (лише вкладки): перекриття 36px */
.elot-hero__inner { position: relative; padding: 6px 0 0; }
.elot-hero__title {
    margin: 30px 0 0;
    font: 600 26px/28px var(--el-font);
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elot-hero__title span { color: #dff5cf; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.elot-searchcard {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding: 19px;
    border-radius: 16px;
    border: 1px solid var(--el-line-soft);
    background: #fff;
    box-shadow: var(--el-shadow);
}
.elot-searchcard__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.elot-searchcard__pz { height: 20px; flex: 0 0 auto; }
.elot-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    min-width: 0;                /* довга назва категорії не повинна виштовхувати логотип Prozorro за екран */
    gap: 4px;
    padding: 3px;
    border-radius: 8px;
    background: #f0f2f5;
}
.elot-tab {
    display: inline-block;
    max-width: 100%;
    height: 26px;
    padding: 0 12px;
    overflow: hidden;
    border-radius: 6px;
    color: #656c76 !important;
    font: 500 12px/26px var(--el-font);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.elot-tab:hover { background: #e2e5ea; text-decoration: none; }
.elot-tab.is-active { background: #fff; color: #333 !important; box-shadow: 0 2px 2px rgba(0, 0, 0, .05); }
.elot-tabs .btn, .elot-tabs .dropdown { align-self: center; }

.elot-searchbox { margin-top: 20px; padding: 9px; border: 1px solid var(--el-line-soft); border-radius: 12px; }
.elot-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 8px 0 6px;
    border-radius: 21px;
    background: #f4f5f7;
}
.elot-search__chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--el-line-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    font: 500 12px/1 var(--el-font);
    color: #222;
    white-space: nowrap;
}
.elot-search__field { flex: 1 1 auto; margin: 0; }
.elot-search__input, .elot-search__input:focus {
    width: 100%;
    height: 40px;
    padding: 0;
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
    background: transparent !important;
    font: 400 14px/1 var(--el-font);
    color: var(--el-text) !important;
}
.elot-search__input::placeholder { color: #878c96; }
.elot-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e7e9ed;
    border: 0;
    flex: 0 0 auto;
}
.elot-search__btn:hover { background: #d9dce2; }
.elot-search__btn img { width: 5px; }
.elot-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.elot-search + .elot-chips { margin: 9px -9px 0; padding: 10px 9px 0; border-top: 1px solid var(--el-line-soft); }

.elot-segment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.elot-segment__label { font-size: 13px; color: var(--el-muted); margin-right: 4px; }
.elot-segment__item {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1px solid var(--el-line);
    background: #fff;
    color: #333 !important;
    font: 500 12px/1 var(--el-font);
}
.elot-segment__item:hover { background: #f4f6fa; text-decoration: none; }
.elot-segment__item.is-active { background: var(--el-blue); border-color: var(--el-blue); color: #fff !important; }

/* Старі фільтр-форми модульних лістингів (/<module>/procedures, favourites) —
   базове оформлення, щоб не випадали зі стилю поруч із новими картками. */
body.elot-catalog main.main form.filters-text { margin-top: 24px; }
body.elot-catalog main.main form.filters-text label { font-size: 12px; color: var(--el-muted); }
body.elot-catalog main.main form.filters-text .form-control,
body.elot-catalog main.main form.filters-text .select2-container--krajee-bs4 .select2-selection {
    border-radius: 8px;
    border: 1px solid var(--el-line) !important;
    background: #fff !important;
    color: var(--el-text) !important;
    box-shadow: none !important;
    font-size: 13px;
}
body.elot-catalog main.main form.filters-text .btn-primary { background: var(--el-green) !important; border-color: var(--el-green); border-radius: 8px; font-size: 13px; }
body.elot-catalog main.main form.filters-text .btn-danger { border-radius: 8px; }
body.elot-catalog main.main form.filters-text .btn-collapse { color: var(--el-blue) !important; }
body.elot-catalog main.main form.filters-text .form-control, body.elot-catalog main.main form.filters-text .form-group { text-wrap: wrap; white-space: normal; }
body.elot-catalog main.main #primary-pjax > hr.bg-secondary { display: none; }
body.elot-catalog main.main #primary-pjax { display: block; margin-top: 20px; font-size: 13px; color: var(--el-muted); }
body.elot-catalog main.main #primary-pjax > a { margin: 0 4px; }
body.elot-catalog main.main #primary-pjax > .elot-list { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Каталог: тулбар, сітка, сайдбар
   -------------------------------------------------------------------------- */
.elot-toolbar { display: flex; align-items: center; gap: 8px; margin: 37px 0; }
.elot-toolbar__btn, .elot-toolbar__sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    margin: 0;
    padding: 0 12px 0 10px;
    border-radius: 15px;
    border: 1px solid var(--el-line);
    background: #eeeff2;
    color: #333;
    font: 500 12px/1 var(--el-font);
    white-space: nowrap;
    position: relative;
}
.elot-toolbar__btn img, .elot-toolbar__sort img { width: 10px; }
.elot-toolbar__sort img { width: 7px; pointer-events: none; position: absolute; right: 12px; }
.elot-toolbar__measure { position: absolute; visibility: hidden; white-space: nowrap; font: 500 12px/1 var(--el-font); }
.elot-toolbar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--el-blue);
    color: #fff;
    font: 600 10px/1 var(--el-font);
}
.elot-toolbar__select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding-right: 18px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: 0;
}
.elot-toolbar__line { flex: 1 1 auto; height: 1px; background: var(--el-line); margin: 0 8px; }
.elot-toolbar__total { font-size: 12px; color: var(--el-muted); white-space: nowrap; }
.elot-toolbar__link { font-size: 12px; white-space: nowrap; }
.elot-toolbar__btn { gap: 6px; padding: 0 11px; cursor: pointer; }
.elot-toolbar__btn img:first-child { margin-right: 2px; }
.elot-toolbar__btn .elot-toolbar__chevron { width: 5px; }
.elot-toolbar__sort { padding: 0 11px; }
.elot-toolbar__sort img { right: 11px; width: 5px; }
@media (min-width: 992px) { .elot-layout.is-nofilter > .elot-sidebar.collapse { display: none !important; } }
@media (max-width: 575.98px) {
    .elot-toolbar { flex-wrap: wrap; margin: 24px 0; }
    .elot-toolbar__line { display: none; }
    .elot-toolbar__total { flex: 1 1 100%; }
}

.elot-layout { display: flex; gap: 20px; align-items: flex-start; }
.elot-sidebar { flex: 0 0 320px; width: 320px; }
.elot-content { flex: 1 1 auto; min-width: 0; }
@media (min-width: 992px) { .elot-sidebar.collapse:not(.show) { display: block !important; } }
@media (max-width: 991.98px) {
    .elot-layout { flex-direction: column; }
    .elot-sidebar { flex-basis: auto; width: 100%; }
    /* без явної ширини колонка в стовпчику (align-items: flex-start) розтягувалась під нерозривний рядок
       порожнього стану при збільшеному системному шрифті — сторінка отримувала горизонтальну прокрутку */
    .elot-content { width: 100%; }
}

.elot-filter-card {
    margin-bottom: 12px;
    padding: 19px;
    border-radius: 16px;
    border: 1px solid var(--el-line-soft);
    background: #fff;
    box-shadow: var(--el-shadow);
}
.elot-categories + .elot-acc { margin-top: -13px; border-top-color: #f4f6fa; border-radius: 0 0 16px 16px; }
.elot-categories:has(+ .elot-acc) { border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: none; }
.elot-filter-card__title, .elot-acc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #002630;
    font: 500 14px/18px var(--el-font);
    text-align: left;
}
.elot-filter-card__title { color: #333; margin-bottom: 16px; }
.elot-filter-card__title img, .elot-acc__toggle img { width: 7px; transition: transform .15s; }
.elot-filter-card__title img, .elot-acc__toggle img { transform: rotate(180deg); }
.elot-filter-card__title.collapsed img, .elot-acc__toggle.collapsed img { transform: none; }
.elot-filter-card__title.collapsed { margin-bottom: 0; }

.elot-acc { padding: 0; }
.elot-acc__item { border-top: 1px solid #f4f6fa; }
.elot-acc__item:first-child { border-top: 0; }
.elot-acc__toggle { padding: 19px 19px 18px; }
.elot-acc__body { padding: 0 19px 18px; }
.elot-acc__body .form-group { margin-bottom: 0; }
.elot-acc__body .form-control, .elot-acc__body .select2-container--krajee-bs4 .select2-selection {
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid var(--el-line) !important;
    background: #fff !important;
    font-size: 13px;
    color: var(--el-text) !important;
    box-shadow: none !important;
}
.elot-acc__body .form-control { height: 36px; padding: 0 12px; }
.elot-acc__body select.elot-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background: #fff url(/images/elot/chevron-down.svg) right 12px center/8px no-repeat !important;
}
.elot-acc__body .direction-filters label { font-size: 12px; color: var(--el-muted); margin-bottom: 4px; }
.elot-acc__body .direction-filters .form-group { margin-bottom: 10px; }
.elot-acc__body .direction-filters .form-group:last-child { margin-bottom: 0; }
.elot-acc__body .direction-filters select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 28px;
    background: #fff url(/images/elot/chevron-down.svg) right 12px center/8px no-repeat !important;
}
/* Модульні лістинги (_module_index): поля напряму з підписами — прямі нащадки контейнера (оформлення
   полів — від .elot-filter-form), пари «від / до» стають у два стовпці. */
/* padding-right — як .pr-2 у полів стандартних секцій, щоб правий край збігався */
.elot-acc__body .direction-filters--stack { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 8px; padding-right: 8px; }
/* !important: контейнер поля ActiveForm несе утиліти .flex-1 / .mb-2 / .pr-2 */
.elot-acc__body .direction-filters--stack > div { flex: 0 0 100% !important; max-width: 100%; min-width: 0; margin-bottom: 0 !important; padding-right: 0 !important; }
.elot-acc__body .direction-filters--stack > div[class$="from"],
.elot-acc__body .direction-filters--stack > div[class*="from "],
.elot-acc__body .direction-filters--stack > div[class$="to"],
.elot-acc__body .direction-filters--stack > div[class*="to "] { flex: 0 0 calc(50% - 4px) !important; max-width: calc(50% - 4px); }
.elot-acc__body .direction-filters--stack label:empty { display: none; }
.elot-acc__body .direction-filters--stack .help-block:empty { display: none; }
.elot-acc__body .direction-filters--stack .select2-container { width: 100% !important; }
.elot-range { display: flex; gap: 8px; }
.elot-range .form-group { flex: 1 1 50%; min-width: 0; }
.elot-range .input-group { flex-wrap: nowrap; }
.elot-sidebar .select2-container--krajee-bs4 .select2-selection__rendered { color: var(--el-text) !important; }
.elot-sidebar .select2-container--krajee-bs4 .select2-selection--multiple .select2-selection__choice {
    background: var(--el-blue-soft) !important;
    border: 0 !important;
    border-radius: 6px;
    color: var(--el-text) !important;
    font-size: 12px;
}
.elot-sidebar__actions { display: flex; gap: 8px; }
.elot-sidebar__actions .elot-btn { flex: 1 1 50%; }

.elot-categories__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    margin: 0 0 12px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid var(--el-line);
    background: #fff;
}
.elot-categories__search img { width: 10px; }
.elot-categories__input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: 400 13px/1 var(--el-font); color: var(--el-text); min-width: 0; }
.elot-categories__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.elot-categories__list { max-height: 330px; overflow: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #d7d9dd #edeff2; }
.elot-categories__list::-webkit-scrollbar { width: 3px; }
.elot-categories__list::-webkit-scrollbar-track { background: #edeff2; }
.elot-categories__list::-webkit-scrollbar-thumb { background: #d7d9dd; border-radius: 3px; }
.elot-categories__group { margin-bottom: 8px; }
.elot-categories__group.is-hidden { display: none; }
.elot-categories__letter { display: block; margin: 8px 0 6px; font: 400 13px/17px var(--el-font); color: #949ca5; }
.elot-check {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
    color: #222 !important;
    font: 400 14px/17px var(--el-font);
}
.elot-check:hover { text-decoration: none; color: var(--el-blue) !important; }
.elot-check.is-hidden { display: none; }
.elot-check__box {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #c9ced9;
    background: #fff;
    position: relative;
}
.elot-check.is-active .elot-check__box { background: var(--el-blue); border-color: var(--el-blue); }
.elot-check.is-active .elot-check__box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 4px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg);
}
.elot-check__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Фільтри з множинним вибором у модалці (Регіон / Статус / Напрям роботи) — за зразком
   фільтрів e-lot.com.ua. Рядок сайдбара відкриває модалку; на телефоні вона стає шторкою
   на весь екран із закріпленими пошуком і кнопками.
   -------------------------------------------------------------------------- */
.elot-acc__label { flex: 1 1 auto; min-width: 0; }
.elot-acc__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    margin-right: 10px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--el-blue);
    color: #fff;
    font: 600 10px/1 var(--el-font);
}
.elot-acc__toggle--modal img, .elot-acc__toggle--modal.collapsed img { transform: rotate(-90deg); }
.elot-acc__toggle--modal:hover .elot-acc__label { color: var(--el-blue); }

/* touch-action: дотик, що почався в модалці, гортає лише по вертикалі (масштаб двома пальцями
   лишається) — шторку й сторінку під нею неможливо потягнути вбік. */
.elot-fmodal { --fm-pad: 24px; touch-action: pan-y pinch-zoom; }
.elot-fmodal [hidden] { display: none !important; }
.elot-fmodal .elot-fmodal__dialog { max-width: 600px; }
.elot-fmodal__content {
    display: flex;
    flex-direction: column;
    height: 620px;
    max-height: calc(100vh - 56px);
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .24);
    font-family: var(--el-font);
    color: var(--el-text);
}
.elot-fmodal__head {
    position: relative;
    flex: 0 0 auto;
    padding: 20px var(--fm-pad) 16px;
    border-bottom: 1px solid var(--el-line-soft);
}
.elot-fmodal__title { margin: 0 36px 14px; text-align: center; font: 600 16px/24px var(--el-font); color: var(--el-text-dark); }
.elot-fmodal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--el-muted);
    font: 400 24px/32px var(--el-font);
    cursor: pointer;
}
.elot-fmodal__close:hover { background: #f4f6fa; color: var(--el-text-dark); }
.elot-fmodal__search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    margin: 0;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--el-line);
    background: #fff;
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.elot-fmodal__search:focus-within { border-color: var(--el-blue); box-shadow: 0 0 0 3px rgba(78, 144, 234, .15); }
.elot-fmodal__search img { flex: 0 0 auto; width: 12px; }
.elot-fmodal__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px/20px var(--el-font); color: var(--el-text); }
.elot-fmodal__input::placeholder { color: var(--el-muted-2); }
.elot-fmodal__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: #f8f9fb; }
.elot-fmodal__list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px calc(var(--fm-pad) - 10px);
    /* overflow-y: auto сам робить overflow-x теж auto — явно забороняємо гортання списку вбік. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #d7d9dd transparent;
}
.elot-fmodal__item {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 10px;
    border-radius: 8px;
    font: 400 14px/20px var(--el-font);
    color: var(--el-text-dark);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.elot-fmodal__item:hover { background: #eef1f6; }
.elot-fmodal__item.is-hidden { display: none; }
.elot-fmodal__checkbox { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.elot-fmodal__box {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1px solid #c9ced9;
    background: #fff;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.elot-fmodal__checkbox:checked + .elot-fmodal__box { background: var(--el-blue); border-color: var(--el-blue); }
.elot-fmodal__checkbox:checked + .elot-fmodal__box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 4px;
    width: 8px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}
.elot-fmodal__checkbox:focus-visible + .elot-fmodal__box { box-shadow: 0 0 0 3px rgba(78, 144, 234, .3); border-color: var(--el-blue); }
.elot-fmodal__checkbox:checked ~ .elot-fmodal__text { font-weight: 500; }
.elot-fmodal__text { min-width: 0; overflow-wrap: anywhere; }
.elot-fmodal__text mark { padding: 0; border-radius: 2px; background: #ffe9a8; color: inherit; }
.elot-fmodal__empty { padding: 40px var(--fm-pad); text-align: center; color: var(--el-muted); font: 400 14px/20px var(--el-font); }
.elot-fmodal__foot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px var(--fm-pad);
    border-top: 1px solid var(--el-line-soft);
    background: #fff;
}
.elot-fmodal__summary { display: flex; align-items: center; gap: 12px; font: 400 13px/18px var(--el-font); color: var(--el-muted); }
.elot-fmodal__summary b { font-weight: 600; color: var(--el-text-dark); }
.elot-fmodal__clear { padding: 0; border: 0; background: transparent; color: var(--el-blue); font: 500 13px/18px var(--el-font); cursor: pointer; }
.elot-fmodal__clear:hover { color: #2f6fc7; }
.elot-fmodal__actions { display: flex; gap: 8px; }

@media (max-width: 575.98px) {
    .elot-fmodal { --fm-pad: 16px; padding: 0 !important; }
    /* Шторка від верхнього відступу до низу ВИДИМОЇ області: --elot-vvh (visualViewport, elot.js)
       зменшується разом з екранною клавіатурою, тож кнопки не ховаються під неї. */
    .elot-fmodal .elot-fmodal__dialog {
        align-items: flex-start;
        max-width: none;
        min-height: 0;
        height: calc(100vh - 24px);
        height: calc(var(--elot-vvh, 100dvh) - 24px);
        margin: 24px 0 0;
    }
    .elot-fmodal .elot-fmodal__dialog::before { display: none; }
    .elot-fmodal.fade .elot-fmodal__dialog { transform: translateY(48px); }
    .elot-fmodal.show .elot-fmodal__dialog { transform: none; }
    .elot-fmodal__content { width: 100%; height: 100%; max-height: none; border-radius: 16px 16px 0 0; }
    .elot-fmodal__head { padding-top: 16px; }
    .elot-fmodal__close { top: 6px; right: 8px; width: 44px; height: 44px; line-height: 44px; }
    .elot-fmodal__search { height: 44px; }
    /* 16px — iOS не масштабує сторінку при фокусі в полі. */
    .elot-fmodal__input { font-size: 16px; }
    .elot-fmodal__list { padding-top: 8px; padding-bottom: 8px; }
    .elot-fmodal__item { min-height: 44px; padding: 10px; font-size: 15px; }
    .elot-fmodal__item:hover { background: transparent; }
    .elot-fmodal__item:active { background: #eef1f6; }
    .elot-fmodal__box { flex-basis: 20px; width: 20px; height: 20px; }
    .elot-fmodal__checkbox:checked + .elot-fmodal__box::after { left: 5px; top: 5px; }
    .elot-fmodal__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .elot-fmodal__summary { justify-content: space-between; min-height: 20px; }
    /* min-width: 0 — при збільшеному системному шрифті кнопки стискаються, а не вилазять за шторку. */
    .elot-fmodal__actions .elot-btn { flex: 1 1 50%; min-width: 0; height: 44px; padding: 0 8px; font-size: 14px; overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Картка лота в каталозі
   -------------------------------------------------------------------------- */
.elot-list { display: flex; flex-direction: column; gap: 20px; }
.elot-card {
    border-radius: 16px;
    border: 1px solid var(--el-line-soft);
    background: #f9fafc;
    box-shadow: var(--el-shadow);
    overflow: hidden;
}
.elot-card__main {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 201px;
    gap: 0 24px;
    padding: 19px 19px 20px;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--el-shadow);
}
.elot-card__media {
    display: block;
    width: 240px;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f4;
}
.elot-card__media { position: relative; }
.elot-card__media img.elot-card__slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.elot-card__media img.elot-card__slide.is-active { opacity: 1; }
.elot-card__media img.elot-card__slide.is-broken { visibility: hidden; }   /* прев'ю не завантажилось — видно тло */
/* Стрілки каруселі: як у макеті — зʼявляються при наведенні на картку; на сенсорних екранах видимі завжди. */
.elot-card__nav { position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; opacity: 0; transition: opacity .15s; }
.elot-card__nav--prev { left: 16px; }
.elot-card__nav--next { right: 16px; }
.elot-card:hover .elot-card__nav, .elot-card__nav:focus { opacity: 1; }
@media (hover: none) { .elot-card__nav { opacity: 1; } }
.elot-card__dots { bottom: 15px; pointer-events: none; }
.elot-card__dots li { box-shadow: 0 0 2px rgba(0, 0, 0, .35); }   /* білі крапки видно й на світлому фото */
.elot-card__noimage { display: flex; align-items: center; justify-content: center; height: 100%; color: #a3a9b5; font-size: 13px; }
.elot-card__body { min-width: 0; display: flex; flex-direction: column; gap: 18px; margin-left: 1px; padding-top: 5px; }   /* теги в макеті на 5px нижче за верх фото */
.elot-card__title { margin: 0; font: 500 16px/22px var(--el-font); }
/* Клікабельна вся картка: посилання назви розтягнуте на картку, окремі цілі — поверх нього. */
.elot-card { position: relative; }
.elot-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.elot-card__dates dd a, .elot-card .elot-help, .elot-card__footer > * { position: relative; z-index: 2; }
.elot-card__title a { color: #222; text-decoration: none; }
.elot-card__title a:hover { color: #222; text-decoration: underline; text-underline-offset: 3px; }
.elot-card__org { display: flex; align-items: center; gap: 6px; font: 400 14px/17px var(--el-font); color: #2c2c2c; }
.elot-card__org > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elot-help { flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%; background: #c4c9d4; color: #fff; font: 600 9px/13px var(--el-font); font-style: normal; text-align: center; cursor: help; }
.elot-card__org span, .elot-card__dates dd span, .elot-card__dates dd a { text-decoration: underline dashed #c9ced9 1px; text-underline-offset: 4px; }
.elot-card__dates { display: flex; flex-wrap: wrap; gap: 15px 32px; margin: 0; }
.elot-card__dates > div { display: flex; flex-direction: column; }
.elot-card__dates dt { font: 400 13px/20px var(--el-font); color: var(--el-muted-2); }
.elot-card__dates dd { margin: 0; font: 400 14px/20px var(--el-font); color: #2c2c2c; }
.elot-card__dates dd a { color: #2c2c2c; }
.elot-card__dates dd a:hover { color: var(--el-blue); }
.elot-card__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0 0 24px;
    border-left: 1px solid #f2f4f8;
    text-align: right;
}
.elot-card__pricebox { display: flex; flex-direction: column; }
.elot-card__label { font: 400 13px/18px var(--el-font); color: var(--el-muted); }
.elot-card__label--dark { color: #222; }
.elot-card__price { margin: 4px 0; font: 600 20px/24px var(--el-font); letter-spacing: -.02em; color: #1f314d; }
.elot-card__fee { font: 400 13px/18px var(--el-font); color: #1f314d; }
.elot-card__deadline { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.elot-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 15px 19px 13px; }
.elot-card__footer .elot-btn { height: 30px; padding: 0 12px; font-size: 12px; }
.elot-iconbtn--card { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(180deg, #fff, #f8f9fa); border-color: var(--el-line-soft); }
.elot-empty { padding: 48px 20px; text-align: center; color: var(--el-muted); background: #fff; border-radius: 16px; border: 1px solid var(--el-line-soft); }

@media (max-width: 1199.98px) {
    .elot-card__main { grid-template-columns: 200px minmax(0, 1fr); }
    .elot-card__media { width: 200px; height: 200px; }
    .elot-card__aside { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; padding: 16px 0 0; border-left: 0; border-top: 1px solid #f2f4f8; margin-top: 16px; text-align: left; }
    .elot-card__deadline { align-items: flex-end; }
}
@media (max-width: 575.98px) {
    .elot-card__main { grid-template-columns: 1fr; padding: 12px; }
    .elot-card__media { width: 100%; height: 200px; margin-bottom: 12px; }
    .elot-card__aside { flex-direction: column; align-items: flex-start; }
    .elot-card__deadline { align-items: flex-start; }
    .elot-card__footer { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Пагінація
   -------------------------------------------------------------------------- */
.elot-list__foot { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.elot-list__summary { font-size: 12px; color: var(--el-muted); }
body.elot .pagination { margin: 0; gap: 8px; }
body.elot .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--el-line-soft);
    background: var(--el-grey-chip);
    color: #333 !important;
    font: 500 11px/1 var(--el-font);
    box-shadow: none;
}
body.elot .pagination .page-link:hover { background: #e4e5ea; }
body.elot .pagination .page-link img { width: 4px; }
body.elot .pagination .page-item.active .page-link { background: var(--el-green-dark); border-color: var(--el-green-dark); color: #fff !important; }
body.elot .pagination .page-item.disabled .page-link { opacity: .4; }
body.elot .pagination .page-link.elot-page-gap { min-width: 14px; padding: 0; border-color: transparent; background: transparent; opacity: 1 !important; }
body.elot-catalog .elot-list__summary { display: none; }
body.elot-catalog .elot-list__foot { flex-direction: row; justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Новини
   -------------------------------------------------------------------------- */
.elot-news { margin: 40px calc(50% - 50vw) -32px; padding: 60px 0 56px; background: #f4f4f7; border-top: 1px solid #ebedf1; }
.elot-news__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.elot-news__title { margin: 0; font: 500 22px/1.2 var(--el-font); color: #333; }
.elot-news__all { font-size: 14px; }
.elot-news__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.elot-news__card {
    display: flex;
    flex-direction: column;
    padding: 10px 20px 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--el-shadow);
    color: #2d3a52;
    transition: box-shadow .15s, transform .15s;
}
.elot-news__card:hover { text-decoration: none; color: #2d3a52; box-shadow: 0 3px 6px rgba(0, 0, 0, .06); transform: translateY(-2px); }
.elot-news__media { position: relative; display: block; height: 172px; margin: 0 -10px 22px; border-radius: 11px; overflow: hidden; background: #dfe4ea; }
.elot-news__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elot-news__tag {
    position: absolute;
    left: 6px;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 12px;
    border: 4px solid #fff;
    background: var(--el-blue-soft);
    color: #2d3a52;
    font: 400 12px/16px var(--el-font);
}
.elot-news__tag img { width: 10px; }
.elot-news__name { flex: 1 1 auto; font: 500 15px/21px var(--el-font); }
.elot-news__date { align-self: flex-start; margin-top: 24px; padding: 5px 8px; border-radius: 12px; background: #eff2f7; font-size: 12px; }
@media (max-width: 991.98px) { .elot-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .elot-news__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Футер
   -------------------------------------------------------------------------- */
.elot-footer { margin-top: 32px; padding: 50px 0 30px; background: #050505; color: #727272; font-size: 14px; }
.elot-footer a { color: #7f8081; }
.elot-footer a:hover { color: #fff; text-decoration: none; }
.elot-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 58px; border-bottom: 1px solid #191919; }
.elot-footer__logo img { height: 15px; }
.elot-footer__contacts { display: flex; align-items: center; gap: 0; font-size: 13px; }
.elot-footer__contacts a { color: #fff; padding: 0 14px; border-left: 1px solid #242424; }
.elot-footer__contacts a:first-child { border-left: 0; }
.elot-footer__contacts a:last-child { padding-right: 0; }
.elot-footer__cols { display: grid; grid-template-columns: 460fr 212fr 224fr 221fr 163fr; gap: 24px 0; min-height: 384px; padding: 64px 0 40px; }
.elot-footer__col h6 { margin: 0 0 28px; font: 500 13px/15px var(--el-font); color: #fff; }
.elot-footer__col a:not(.elot-btn), .elot-footer__col address { display: block; margin: 0 0 13px; padding-right: 16px; font: 400 14px/17px var(--el-font); }
.elot-footer__col--about p { margin: 0 0 24px; max-width: 372px; font-size: 14px; line-height: 21px; }
.elot-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 24px; border-top: 1px solid #191919; font-size: 13px; }
.elot-footer__debug { color: #ff6b6b; }
@media (max-width: 991.98px) { .elot-footer__cols { grid-template-columns: repeat(2, 1fr); padding: 40px 0; } .elot-footer__col--about { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .elot-footer__cols { grid-template-columns: 1fr; } .elot-footer__top { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   Сторінка лота (Zeplin «e-Lot Sales S26-27 / картка»).
   Верх (_lot_head) і права панель (_lot_aside) — спільні partial-и, підставлені в усі
   49 модульних procedures/view.php; решта модульної розмітки (карусель-вкладки,
   секції .p-3.pb-5, DetailView → .elot-kv, документи → .elot-docs) оформлюється тут.
   Сітка 920 / 20 / 340: #primary-pjax = grid, старі .row/.col «розчиняються» (contents).
   ========================================================================== */
body.elot-lot .elot-page { padding-top: 0; }
body.elot-lot main.secondary-bg.rounded-x2 { background: transparent !important; color: var(--el-text) !important; border-radius: 0; }
body.elot-lot main.secondary-bg .opacity-7 { opacity: 1; }
.elot-hidden { display: none !important; }

/* Крихти + ID */
.elot-crumbrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 24px; }
.elot-crumbrow .elot-breadcrumbs { flex: 1 1 320px; min-width: 0; }
.elot-crumbrow .elot-breadcrumbs { flex-wrap: nowrap; }
.elot-crumbrow .elot-breadcrumbs li { flex: 0 0 auto; }
.elot-crumbrow .elot-breadcrumbs li.active { display: block; flex: 0 1 auto; min-width: 0; }   /* довга назва лота — в один рядок з «…» */
.elot-crumbrow .elot-breadcrumbs li.active::before { display: inline-block; vertical-align: middle; }
.elot-crumbrow__id { padding-top: 14px; font-size: 12px; color: #333; white-space: nowrap; }
.elot-crumbrow__id span { color: #858b98; }

/* Заголовок */
.elot-lothead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; margin: 30px 0 41px; }
.elot-lothead__note { flex: 0 0 100%; font-size: 13px; color: var(--el-muted); }
.elot-lothead__title { flex: 1 1 0; min-width: 50%; margin: 0; font: 500 20px/30px var(--el-font); color: #333; white-space: pre-wrap; word-break: break-word; }
.elot-lothead__actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 8px; order: -1; max-width: 50%; }
.elot-lothead__note { order: -2; }
.elot-lothead__actions .btn { height: 30px; display: inline-flex; align-items: center; }
.elot-lothead__actions .btn { font-size: 12px; padding: 5px 10px; border-radius: 7px; }
.elot-lothead__actions .refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--el-line-soft);
    border-radius: 7px;
    background: linear-gradient(180deg, #fff, #f8f9fa);
    box-shadow: var(--el-shadow);
    color: var(--el-muted);
    font-size: 12px;
    line-height: 1;
}
.elot-lothead__actions .refresh-btn:hover { color: var(--el-blue); }
.elot-lothead__actions .refresh-btn > * { font-size: 12px; line-height: 1; }

/* Сітка */
@media (min-width: 992px) {
    body.elot-lot #primary-pjax { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 20px; align-items: start; }
    body.elot-lot #primary-pjax > * { grid-column: 1; min-width: 0; }
    body.elot-lot #primary-pjax > .elot-lothead { grid-column: 1 / -1; }
    body.elot-lot #primary-pjax > .row.p-4.pb-5.flex-wrap-reverse,
    body.elot-lot #primary-pjax > .row.p-4.pb-5.flex-wrap-reverse > .col-12:not(.col-lg-7) { display: contents !important; }
    body.elot-lot #primary-pjax > .row.p-4.pb-5.flex-wrap-reverse > .col-12.col-lg-7 { grid-column: 1; flex: none; max-width: none; min-width: 0; padding: 0; }
    body.elot-lot .elot-lotaside { grid-column: 2; grid-row: 2 / span 60; }
}
@media (min-width: 992px) and (min-height: 900px) {
    body.elot-lot .elot-lotaside { position: sticky; top: 16px; }
}
@media (max-width: 991.98px) {
    body.elot-lot #primary-pjax > .row.p-4.pb-5.flex-wrap-reverse { margin: 0; padding: 0 !important; }
    body.elot-lot #primary-pjax > .row.p-4.pb-5.flex-wrap-reverse > .col-12 { padding: 0; }
    body.elot-lot .elot-lotaside { margin-bottom: 20px; }
    .elot-lothead { margin: 20px 0 24px; }
}

/* Рядок чипів + вкладки */
.elot-lotstatus__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; }
.elot-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; padding: 3px; border: 1px solid #e1e4ed; border-radius: 17px; background: #eeeff2; }
.elot-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border-radius: 13px; background: #e2e4e9; color: #2c2c2c; font: 500 12px/14px var(--el-font); }
.elot-pill--blue { background: #d6e3f5; }
.elot-pill--success { background: #d5edcf; }
.elot-pill--warning { background: #fff1cc; }
.elot-pill--danger { background: #ffe2d5; }
.elot-pill__dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: #8c94a3; position: relative; }
.elot-pill--success .elot-pill__dot { background: var(--el-green); }
.elot-pill--success .elot-pill__dot::after { content: ''; position: absolute; left: 3.5px; top: 3.5px; width: 5px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.elot-pill--warning .elot-pill__dot { background: #e5a100; }
.elot-pill--danger .elot-pill__dot { background: var(--el-red); }
.elot-lotstatus__line { flex: 1 1 24px; height: 1px; background: #e1e4ed; }
.elot-lotstatus__tabs:empty { display: none; }

body.elot-lot .carousel.slide { min-height: 0; padding-top: 0 !important; }
body.elot-lot .carousel-indicators {
    position: static;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    width: auto !important;
    max-width: 100%;
    margin: 0 0 20px !important;
    padding: 2px;
    border: 1px solid #e1e4ed;
    border-radius: 17px;
    background: #eeeff2;
    list-style: none;
}
body.elot-lot .elot-lotstatus__tabs .carousel-indicators { margin: 0 !important; }
body.elot-lot .carousel-indicators li { width: auto; height: auto; margin: 0 !important; text-indent: 0; opacity: 1; border: 0; background: transparent !important; cursor: pointer; }
body.elot-lot .carousel-indicators li button {
    display: block !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: transparent;
    color: #7c8290 !important;
    font: 500 12px/1 var(--el-font);
    white-space: nowrap;
}
body.elot-lot .carousel-indicators li.active button { border-color: #e7eaf0 !important; background: linear-gradient(180deg, #fff, #f8f9fa); color: #2c2c2c !important; box-shadow: var(--el-shadow); }

/* Степер періодів */
.elot-stepper { margin-bottom: 20px; border: 1px solid #edf0f5; border-radius: 16px; background: #f8f9fa; box-shadow: var(--el-shadow); }
.elot-stepper__steps { display: flex; gap: 25px; margin: 0; padding: 24px 24px 25px; list-style: none; border-radius: 15px 15px 11px 11px; background: #fff; box-shadow: var(--el-shadow); }
.elot-stepper__step { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; text-align: center; }
.elot-stepper__label { display: flex; flex: 1 1 auto; align-items: flex-end; justify-content: center; padding-bottom: 14px; border-bottom: 2px solid #eceef2; color: #333; font: 500 13px/15px var(--el-font); }
.elot-stepper__value { display: block; margin-top: 12px; color: #858b98; font: 500 13px/15px var(--el-font); }
.elot-stepper__step.is-done .elot-stepper__label { border-bottom-color: var(--el-green); }
.elot-stepper__step.is-done .elot-stepper__value { color: var(--el-green); }
.elot-stepper__foot { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 19px 24px 20px; font: 400 14px/16px var(--el-font); color: #222; }
.elot-stepper__foot dt { flex: 0 0 196px; font-weight: 500; }
.elot-stepper__foot dd { margin: 0; }
@media (max-width: 767.98px) {
    .elot-stepper__steps { flex-direction: column; gap: 16px; }
    .elot-stepper__foot dt { flex-basis: 100%; }
}

/* Картки: вкладка каруселі та секції */
body.elot-lot .carousel-inner { margin-top: 0 !important; overflow: visible; }
body.elot-lot .col-lg-7 .carousel-item,
body.elot-lot #primary-pjax > .p-3.pb-5.d-flex {
    padding: 24px !important;
    border: 1px solid #edf0f5 !important;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--el-shadow);
    text-align: left !important;
}
body.elot-lot #primary-pjax > .p-3.pb-5.d-flex { display: block !important; margin: 20px 0 0; }
body.elot-lot .col-lg-7 .carousel-item.active, body.elot-lot .col-lg-7 .carousel-item-next, body.elot-lot .col-lg-7 .carousel-item-prev { display: flex; flex-direction: column; }
/* Перемикання вкладок: стара картка гасне, нова проявляється — без ковзання вліво-вправо
   (bootstrap 4 за замовчуванням зсуває .carousel-item через transform). Послідовно, а не
   кросфейдом: картки різної висоти, і стара не повинна просвічувати під новою. Bootstrap
   прибирає стару картку по завершенні ЇЇ переходу (тривалість + затримка першого transition). */
body.elot-lot .col-lg-7 .carousel-item { opacity: 0; transform: none; transition: opacity .25s ease; }
body.elot-lot .col-lg-7 .carousel-item.active { z-index: 1; opacity: 1; }
body.elot-lot .col-lg-7 .carousel-item-next.carousel-item-left,
body.elot-lot .col-lg-7 .carousel-item-prev.carousel-item-right { z-index: 1; opacity: 1; transition: opacity .25s ease .18s; }
body.elot-lot .col-lg-7 .active.carousel-item-left,
body.elot-lot .col-lg-7 .active.carousel-item-right { z-index: 0; opacity: 0; transition: opacity .18s ease; }
@media (prefers-reduced-motion: reduce) {
    body.elot-lot .col-lg-7 .carousel-item,
    body.elot-lot .col-lg-7 .carousel-item-next.carousel-item-left,
    body.elot-lot .col-lg-7 .carousel-item-prev.carousel-item-right,
    body.elot-lot .col-lg-7 .active.carousel-item-left,
    body.elot-lot .col-lg-7 .active.carousel-item-right { transition: none; }
}
body.elot-lot .col-lg-7 .carousel-item > * { order: 1; }
body.elot-lot .col-lg-7 .carousel-item > .elot-gallery { order: 2; }
body.elot-lot .carousel-item > .row, body.elot-lot #primary-pjax > .p-3.pb-5 > .row { margin: 0 !important; }
body.elot-lot .carousel-item > .row > .col-12, body.elot-lot .carousel-item > .row > .w-100 > .collapse > .col-12,
body.elot-lot #primary-pjax > .p-3.pb-5 > .col-12, body.elot-lot #primary-pjax > .p-3.pb-5 > .row > .col-12 { flex: 0 0 100%; max-width: 100%; padding: 0; }
body.elot-lot .carousel-item > .row.d-flex.my-4 + .row.d-flex.my-4 { margin-top: 20px !important; }
body.elot-lot #primary-pjax .mt-3, body.elot-lot #primary-pjax .mt-5 { margin-top: 0 !important; }

body.elot-lot #primary-pjax h3, body.elot-lot #primary-pjax h4 { margin: 0 0 25px !important; color: #333; font: 500 16px/19px var(--el-font); font-weight: 500 !important; text-transform: none !important; }
body.elot-lot #primary-pjax .elot-kv + h3, body.elot-lot #primary-pjax .elot-docs + h3, body.elot-lot #primary-pjax hr + h3, body.elot-lot #primary-pjax hr + h4 { margin-top: 25px !important; }
body.elot-lot #primary-pjax h3 .text-primary { margin-left: 6px; color: var(--el-muted) !important; }
body.elot-lot #primary-pjax > .p-3.pb-5 h3:first-of-type { position: relative; padding-right: 28px; cursor: pointer; }
body.elot-lot #primary-pjax > .p-3.pb-5 h3:first-of-type::after { content: ''; position: absolute; right: 0; top: 7px; width: 8px; height: 5px; background: url(/images/elot/chevron-down.svg) center/contain no-repeat; transform: rotate(180deg); transition: transform .15s; }
body.elot-lot #primary-pjax > .p-3.pb-5.is-collapsed h3:first-of-type { margin-bottom: 0 !important; }
body.elot-lot #primary-pjax > .p-3.pb-5.is-collapsed h3:first-of-type::after { transform: none; }
body.elot-lot #primary-pjax .d-flex.align-items-center.justify-content-between { gap: 12px; margin-bottom: 25px; }
body.elot-lot #primary-pjax .d-flex.align-items-center.justify-content-between > h3 { flex: 1 1 auto; margin-bottom: 0 !important; }
body.elot-lot #primary-pjax hr, body.elot-lot #primary-pjax hr.bg-secondary { height: 1px; margin: 20px 0 !important; border: 0; background: var(--el-line-soft) !important; opacity: 1; }
body.elot-lot #primary-pjax .carousel-item > hr:last-child, body.elot-lot #primary-pjax .col-12 > hr:last-child { display: none; }
body.elot-lot .btn-collapse { padding: 0 0 12px; color: var(--el-blue) !important; font-weight: 500; text-align: left; }

/* Таблиця «ключ — значення» (DetailView → .elot-kv; рукописні рядки першої вкладки) */
body.elot-lot .elot-kv,
body.elot-lot .carousel-item > .row.d-flex.my-4 > .col-12:has(> p.row.my-3) { border: 1px solid #f0f2f7; border-radius: 10px; overflow: hidden; background: #fff; }
body.elot-lot .elot-kv + .elot-kv, body.elot-lot .elot-kv + .elot-docs, body.elot-lot .elot-docs + .elot-kv { margin-top: 20px; }
body.elot-lot p.row.my-3 { margin: 0 !important; padding: 12px 15px 11px; border-top: 1px solid #f2f4f7; background: #fff; color: #222; font: 400 14px/18px var(--el-font); }
body.elot-lot p.row.my-3:first-child { border-top: 0; }
body.elot-lot p.row.my-3:has(> .col-sm-4:empty):has(> .col-sm-8:empty) { display: none; }   /* рядок кнопок DetailView без кнопок */
body.elot-lot p.row.my-3:nth-child(even) { background: #fcfcfc; }
body.elot-lot p.row.my-3 > span.col-sm-4 { padding: 0 16px 0 0; color: #222; font-weight: 500; }
body.elot-lot p.row.my-3 > .col-sm-8 { margin-top: 0 !important; padding: 0; color: #222; word-break: break-word; }
body.elot-lot p.row.my-3 > a.col-sm-8, body.elot-lot p.row.my-3 > .col-sm-8 a { color: var(--el-blue); }
body.elot-lot p.row.my-3 .btn { font-size: 12px; padding: 4px 10px; border-radius: 6px; }
@media (max-width: 575.98px) { body.elot-lot p.row.my-3 > span.col-sm-4 { margin-bottom: 4px; } }

/* Галерея «Зображення» */
.elot-gallery { margin-top: 24px; }
.elot-gallery:first-child:last-child, .elot-gallery:only-child { margin-top: 0; }
.elot-gallery__box { position: relative; padding: 19px; border: 1px solid #f0f2f7; border-radius: 10px; }
.elot-gallery__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.elot-gallery__track::-webkit-scrollbar { display: none; }
.elot-gallery__item { position: relative; flex: 0 0 180px; width: 180px; scroll-snap-align: start; color: #333 !important; text-decoration: none !important; }
.elot-gallery__item img { transition: filter .15s; }
.elot-gallery__item::after { content: ''; position: absolute; left: 76px; top: 76px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .55) url(/images/elot/expand.svg) center/12px no-repeat; opacity: 0; transition: opacity .15s; }
.elot-gallery__item:hover img { filter: brightness(.72); }
.elot-gallery__item:hover::after { opacity: 1; }
.elot-gallery__item img { display: block; width: 180px; height: 180px; border-radius: 8px; object-fit: cover; background: #eef0f4; }
.elot-gallery__file { display: flex; align-items: center; justify-content: center; width: 180px; height: 180px; border-radius: 8px; background: #eef0f4; color: #8c94a3; font: 600 16px/1 var(--el-font); letter-spacing: .04em; }
.elot-gallery__item--file::after { display: none; }
.elot-gallery__name { display: block; margin-top: 15px; overflow: hidden; color: #333; font: 400 14px/21px var(--el-font); text-overflow: ellipsis; white-space: nowrap; }
.elot-gallery__meta { display: block; color: #8c94a3; font: 400 13px/18px var(--el-font); }
.elot-round { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); cursor: pointer; }
.elot-round:hover { background: #f2f5f8; }
.elot-round img { width: 4px; }
.elot-gallery__prev, .elot-gallery__next { position: absolute; top: 92px; z-index: 2; }
.elot-gallery__prev { left: 34px; }
.elot-gallery__next { right: 34px; }
.elot-gallery__track:not(.is-scrollable) ~ .elot-gallery__next, .elot-gallery__box:has(.elot-gallery__track:not(.is-scrollable)) .elot-gallery__prev { display: none; }

/* Права панель */
.elot-lotaside { border: 1px solid #e7eaf0; border-radius: 16px; background: #f8f9fa; box-shadow: 0 3px 3px rgba(0, 0, 0, .03); }
.elot-lotaside__body { padding: 19px 19px 20px; border-radius: 15px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.elot-lotaside__body > * + * { margin-top: 20px; }
.elot-lotaside__photos { position: relative; min-height: 0; overflow: hidden; border-radius: 10px; background: #eef0f4; }   /* main.css: .carousel { min-height: 22rem } */
.elot-lotaside__photos .carousel-item img { display: block; width: 100%; height: 180px; object-fit: cover; }
.elot-lotaside__prev, .elot-lotaside__next { position: absolute; top: 73px; z-index: 2; }
.elot-lotaside__prev { left: 16px; }
.elot-lotaside__next { right: 16px; }
.elot-lotaside__timer { position: absolute; top: 0; right: 0; z-index: 2; border-radius: 0 10px 0 11px; padding: 5px 10px; }
.elot-dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; }
.elot-dots li { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .6); cursor: pointer; }
.elot-dots li.active { width: 6px; height: 6px; background: #fff; }

.elot-lotaside__info { border: 1px solid #edf0f5; border-radius: 10px; color: #707b86; font: 400 13px/19px var(--el-font); }
.elot-lotaside__info > * { padding: 10px 11px; border-top: 1px solid #edf0f5; }
.elot-lotaside__info > *:first-child { border-top: 0; }
.elot-lotaside__grid { display: grid; grid-template-columns: 1fr 1fr; padding: 0 !important; }
.elot-lotaside__grid > div { padding: 11px 11px 12px; }
.elot-lotaside__grid > div + div { border-left: 1px solid #edf0f5; }
.elot-lotaside__cap { display: block; color: #333; font: 600 11px/13px var(--el-font); letter-spacing: .02em; text-transform: uppercase; }
.elot-lotaside__val { display: block; margin-top: 5px; color: #707b86; font: 400 13px/15px var(--el-font); }
.elot-lotaside__row b, .elot-lotaside__dates p.fs-15 { color: #222; font-weight: 400; }
.elot-lotaside__row--stack b { display: block; }
.elot-lotaside__dates { padding: 0 !important; }
.elot-lotaside__dates .mb-3 { margin: 0 !important; padding: 10px 11px; border-top: 1px solid #edf0f5; }
.elot-lotaside__dates .mb-3:first-child { border-top: 0; }
.elot-lotaside__dates p { margin: 0 !important; font: 400 13px/19px var(--el-font) !important; }
.elot-lotaside__dates p.fs-13::after { content: ':'; }

.elot-lotaside__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.elot-lotaside__label { color: #858b98; font: 400 13px/15px var(--el-font); }
.elot-lotaside__price .elot-lotaside__label:first-child { flex: 0 0 100%; margin-bottom: 5px; }
.elot-lotaside__amount { color: #333; font: 500 22px/26px var(--el-font); }
.elot-lotaside__amount small { font-size: 14px; color: #858b98; }
.elot-lotaside__deadline { padding: 9px 14px 13px; border: 1px solid #eaedf2; border-radius: 10px; background: #fafafa; color: #222; font: 400 13px/19px var(--el-font); }
.elot-lotaside__deadline > span { display: block; }
.elot-lotaside__deadline .elot-chip { display: inline-flex; margin-top: 4px; }
.elot-chip--round { border-radius: 11px; background: #dbe8fc; }
.elot-chip--round.elot-chip--status { background: var(--el-grey-chip); text-align: left; }
.elot-chip--round.elot-chip--success { background: #d5edcf; }
.elot-chip--round.elot-chip--warning { background: #fff1cc; }
.elot-chip--round.elot-chip--danger, .elot-chip--round.elot-chip--urgent { background: #ffe2d5; }

.elot-lotaside__actions { display: flex; flex-direction: column; gap: 10px; padding: 20px 19px 19px; }
.elot-lotaside__main { display: flex; gap: 10px; }
body.elot .elot-lotaside__actions .elot-btn { height: 38px; font-size: 13px; }
.elot-lotaside__bid { flex: 1 1 auto; border: 0; background: linear-gradient(180deg, #199a54, #118d4a); }
.elot-lotaside__wide { width: 100%; border-color: #e7eaf0; }
.elot-lotaside__star { width: 38px; height: 38px; border-radius: 8px; border-color: #e7eaf0; box-shadow: var(--el-shadow); }
.elot-lotaside__star--wide { flex: 1 1 auto; width: auto; gap: 8px; color: #222; font: 500 13px/1 var(--el-font); }

/* Мапа */
body.elot-lot .map-widget, body.elot-lot #map { border-radius: 12px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Таблиця документів (app/views/documents/view.php — спільна для лота, заяв,
   договорів): Назва | Від | Скачати, як у секції «Документація» макета.
   -------------------------------------------------------------------------- */
.elot-docs { border: 1px solid #f0f2f7; border-radius: 10px; overflow: hidden; background: #fff; text-align: left; }
.elot-docs + .elot-docs { margin-top: 20px; }
.elot-docs__head, .elot-doc { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(130px, 1fr) 82px; gap: 0 15px; align-items: start; padding: 8px 15px; }
.elot-docs__head { align-items: center; min-height: 36px; border-bottom: 1px solid #f0f2f5; background: #f8f9fa; color: #6d7286; font: 500 13px/15px var(--el-font); }
.elot-doc { min-height: 42px; border-top: 1px solid #f2f4f7; color: #333; font: 400 14px/21px var(--el-font); }
.elot-docs__head + .elot-doc { border-top: 0; }
.elot-doc__main { display: flex; gap: 15px; min-width: 0; padding: 2px 0; }
.elot-doc__icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; }
.elot-doc__text { min-width: 0; }
body.elot a.elot-doc__name { color: #333; word-break: break-word; text-decoration: underline dashed #cbd1d9 1px; text-underline-offset: 4px; cursor: pointer; }
body.elot a.elot-doc__name:hover { color: var(--el-blue); }
.elot-doc__meta { display: block; margin-top: 2px; color: #8c94a3; font: 400 12px/17px var(--el-font); }
.elot-doc__meta > span { display: block; }
.elot-doc__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.elot-doc__actions .btn { font-size: 12px; padding: 3px 9px; border-radius: 6px; }
.elot-doc__date { padding: 2px 0; text-decoration: underline dashed #cbd1d9 1px; text-underline-offset: 4px; white-space: nowrap; }
.elot-doc__dl { text-align: right; }
.elot-doc.is-deleted .elot-doc__name, .elot-doc.is-deleted .elot-doc__date { text-decoration: line-through; color: #8c94a3; }
.elot-doc.is-deleted .elot-doc__icon { visibility: hidden; }
body.elot a.elot-btn--xs, .elot-btn--xs { height: 26px; padding: 0 10px; border: 1px solid #e7eaf0; border-radius: 6px; font-size: 12px; color: #333; }
.elot-btn--xs::before { content: ''; width: 7px; height: 4px; background: url(/images/elot/chevron-down.svg) center/contain no-repeat; }
@media (max-width: 575.98px) {
    .elot-docs__head { display: none; }
    .elot-doc { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .elot-doc__main { grid-column: 1 / -1; }
    .elot-docs .elot-doc:first-of-type { border-top: 0; }
}

/* --------------------------------------------------------------------------
   Єдине меню шапки (_navbar.php → $renderMenu): у залогіненого відкривається з плашки профілю,
   у гостя — з «Меню». Колонки: Кабінет · Розділи · Адміністрування; унизу — вхід/вихід.
   Панель привʼязана до контейнера шапки (data-display="static"), тож не вилазить за екран.
   -------------------------------------------------------------------------- */
.elot-mainbar__inner { position: relative; }
.elot-nav__more, .elot-user__menu { position: static; }
.elot-mega {
    top: calc(100% - 6px);
    width: 100%;
    max-height: calc(100vh - 120px);
    margin: 0;
    padding: 22px 24px 0;
    overflow-y: auto;
    border: 1px solid var(--el-line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
    font: 400 14px/18px var(--el-font);
    color: #2c2c2c;
}
.elot-mega.show { display: grid; gap: 0 32px; align-items: start; }
.elot-mega--right { right: 15px; left: auto; }
.elot-mega--left { left: 15px; right: auto; }
.elot-mega--cols1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.elot-mega--cols2 { grid-template-columns: 230px minmax(0, 1fr); max-width: 900px; }
.elot-mega--cols3 { grid-template-columns: 220px minmax(0, 1fr) 250px; max-width: 1250px; }
.elot-mega__col { min-width: 0; padding-bottom: 18px; }
.elot-mega__title { margin-bottom: 10px; color: #8c94a3; font: 600 11px/13px var(--el-font); letter-spacing: .04em; text-transform: uppercase; }
.elot-mega__col--sections .elot-mega__list { column-count: 2; column-gap: 32px; }
.elot-mega--cols1 .elot-mega__col--sections .elot-mega__list { column-count: 3; }
.elot-mega__item { break-inside: avoid; padding: 1px 0; }
body.elot a.elot-mega__link, .elot-mega__label { display: block; margin: 0 -8px; padding: 6px 8px; border-radius: 7px; color: #2c2c2c; }
body.elot a.elot-mega__link:hover { background: #f4f6fa; color: #2c2c2c; text-decoration: none; }
.elot-mega__label { padding-bottom: 2px; font-weight: 500; }
.elot-mega__sub { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 -8px 4px; }
body.elot a.elot-mega__sublink { padding: 3px 8px; border-radius: 6px; color: #5f6775; font-size: 13px; }
body.elot a.elot-mega__sublink:hover { background: #e0ecff; color: #25589d; text-decoration: none; }
.elot-mega__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 -24px; padding: 10px 24px; border-top: 1px solid var(--el-line-soft); background: #f8f9fa; border-radius: 0 0 15px 15px; position: sticky; bottom: 0; }
.elot-mega__foot a.elot-mega__link { margin: 0; font-weight: 500; }
.elot-mega .count-notification { color: var(--el-red); font-weight: 500; }
@media (max-width: 991.98px) {
    .elot-mega, .elot-mega--right, .elot-mega--left { left: 0; right: 0; max-width: none; }
    .elot-mega.show { grid-template-columns: minmax(0, 1fr); }
    .elot-mega__col--sections .elot-mega__list, .elot-mega--cols1 .elot-mega__col--sections .elot-mega__list { column-count: 1; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .elot-mega__col--sections .elot-mega__list, .elot-mega--cols1 .elot-mega__col--sections .elot-mega__list { column-count: 2; }
}

/* --------------------------------------------------------------------------
   Спливаючі плашки Noty (обране, повідомлення сокета; тема mint із noty.css).
   Мова макета: біла картка, мʼяка рамка, тінь; увагу тримають кольорова смуга й кругла
   піктограма типу та поява знизу. Закривається кліком (як і раніше) — про це каже «×».
   -------------------------------------------------------------------------- */
body.elot #noty_layout__bottomRight, body.elot #noty_layout__bottomLeft, body.elot #noty_layout__topRight, body.elot #noty_layout__topLeft { width: 380px; max-width: calc(100vw - 30px); }
body.elot #noty_layout__bottomRight { right: 20px; bottom: 20px; }
body.elot .noty_theme__mint.noty_bar {
    --toast: #5f6775;
    --toast-soft: #eeeff2;
    position: relative;
    margin: 10px 0 0;
    overflow: hidden;
    border: 1px solid var(--el-line);
    border-left: 4px solid var(--toast);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .08);
    color: #222;
    cursor: pointer;
    animation: elot-toast-in .28s cubic-bezier(.2, .8, .2, 1);
}
body.elot .noty_theme__mint.noty_bar .noty_body { position: relative; min-height: 56px; padding: 18px 40px 18px 58px; font: 500 14px/20px var(--el-font); color: #222; }
body.elot .noty_theme__mint.noty_bar .noty_body a { color: #25589d; text-decoration: underline; text-underline-offset: 3px; }
body.elot .noty_theme__mint.noty_bar .noty_body a:hover { color: var(--el-blue); }
/* піктограма типу */
body.elot .noty_theme__mint.noty_bar .noty_body::before {
    content: 'i';
    position: absolute;
    left: 16px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--toast);
    color: #fff;
    font: 700 15px/28px var(--el-font);
    text-align: center;
    animation: elot-toast-pop .45s ease .15s both;
}
/* «×» — підказка, що плашка закривається кліком */
body.elot .noty_theme__mint.noty_bar::after { content: '×'; position: absolute; right: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; color: #8c94a3; font: 400 18px/20px var(--el-font); text-align: center; }
body.elot .noty_theme__mint.noty_bar:hover::after { background: #f4f5f7; color: #333; }
body.elot .noty_theme__mint.noty_type__success { --toast: #199a54; --toast-soft: #d5edcf; }
body.elot .noty_theme__mint.noty_type__success .noty_body::before { content: '✓'; }
body.elot .noty_theme__mint.noty_type__warning { --toast: #e08a00; --toast-soft: #fff1cc; }
body.elot .noty_theme__mint.noty_type__warning .noty_body::before { content: '!'; }
body.elot .noty_theme__mint.noty_type__error { --toast: #e5484d; --toast-soft: #ffe2d5; }
body.elot .noty_theme__mint.noty_type__error .noty_body::before { content: '!'; }
body.elot .noty_theme__mint.noty_type__info, body.elot .noty_theme__mint.noty_type__information { --toast: #4e90ea; --toast-soft: #e0ecff; }
body.elot .noty_theme__mint.noty_type__alert, body.elot .noty_theme__mint.noty_type__notification { --toast: #5f6775; }
/* Плашка обраного приходить із main.js типом warning, хоча це не попередження: впізнаємо її за
   посиланням на «обрані» й показуємо серцем макета (без :has лишиться звичайний warning). */
body.elot .noty_theme__mint.noty_bar:has(.noty_body a[href$="/procedures/favourites"]) { --toast: #f83150; }
body.elot .noty_theme__mint.noty_bar:has(.noty_body a[href$="/procedures/favourites"]) .noty_body::before { content: ''; background: #ffe3e8 url(/images/elot/heart-active.svg) center/14px no-repeat; }
body.elot .noty_has_timeout.noty_has_progressbar .noty_progressbar { height: 3px; background-color: var(--toast); opacity: .35; }
@keyframes elot-toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes elot-toast-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    body.elot .noty_theme__mint.noty_bar, body.elot .noty_theme__mint.noty_bar .noty_body::before { animation: none; }
}
@media (max-width: 575.98px) {
    body.elot #noty_layout__bottomRight, body.elot #noty_layout__bottomLeft { left: 15px; right: 15px; bottom: 15px; width: auto; max-width: none; }
}

/* ==========================================================================
   Реєстр: інформаційні повідомлення, об'єкти малої/великої приватизації, викуп,
   реєстр оренди (об'єкти, мапа, договори, дії, заяви). Дизайну в Zeplin немає —
   сторінки зібрані з тих самих елементів, що й каталог (герой, картка пошуку,
   тулбар, сайдбар, картки) та сторінка лота (крихти з ID, чипи, права панель).
   Partial-и: app/views/registry/_list_head, _card, _view_head, _aside.
   ========================================================================== */

/* Герой: заголовок розділу + перемикач «Оренда / Мала / Велика приватизація» */
/* Висота героя — від вмісту (довгі заголовки own/my, перенос крихт на телефоні), підкладка-фото
   тягнеться на 134px нижче (36px для короткої картки пошуку), як у каталозі. */
.elot-hero--reg { height: auto; min-height: 151px; padding-bottom: 16px; }
.elot-hero--reg::before { height: calc(100% + 134px); }
.elot-hero--reg.elot-hero--compact::before { height: calc(100% + 36px); }
.elot-hero__row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 30px; }
.elot-hero__row .elot-hero__title { display: -webkit-box; flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
@media (max-width: 1199.98px) {
    .elot-hero__row { flex-wrap: wrap; margin-top: 20px; }
    .elot-hero__row .elot-hero__title { flex-basis: 100%; }
}
.elot-hero__groups {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 17px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
body.elot a.elot-hero__group {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    color: rgba(255, 255, 255, .9);
    font: 500 12px/1 var(--el-font);
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s;
}
body.elot a.elot-hero__group:hover { background: rgba(255, 255, 255, .18); color: #fff; }
body.elot a.elot-hero__group.is-active { background: #fff; color: #333; box-shadow: 0 2px 2px rgba(0, 0, 0, .08); }
@media (max-width: 767.98px) {
    .elot-hero__row { margin-top: 16px; }
    .elot-hero__row .elot-hero__title { font-size: 22px; }
    .elot-hero__groups { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .elot-hero__groups::-webkit-scrollbar { display: none; }
}

/* Списки: підсумок «Показані 1-20 із …» дублює «Знайдено» тулбара */
.elot-reg .elot-list__summary { display: none; }
.elot-reg .elot-list__foot { flex-direction: row; justify-content: flex-start; }

/* Кнопки створення (організатор) у тулбарі — у мові макета */
.elot-toolbar__create { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.elot .elot-toolbar__create .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #199a54 0%, #118d4a 100%) !important;
    box-shadow: var(--el-shadow);
    color: #fff !important;
    font: 500 12px/1 var(--el-font);
    white-space: nowrap;
}
body.elot .elot-toolbar__create .btn:hover { background: #118d4a !important; }
body.elot .elot-toolbar__create a.btn[target="_blank"] { border: 1px solid var(--el-line) !important; background: #eeeff2 !important; color: #333 !important; }
.elot-toolbar__create .btn-group, .elot-toolbar__create .dropdown { display: inline-flex; }
.elot-toolbar__create .dropdown-menu { padding: 8px 0; border: 1px solid var(--el-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); font-size: 14px; }
.elot-toolbar__create .dropdown-item { padding: 8px 18px; color: #2c2c2c; }
.elot-toolbar__create .dropdown-item:hover { background: #f4f6fa; }

/* Сайдбар: плоска форма фільтрів (підпис + поле), без акордеона — полів небагато */
.elot-filter-form .form-group { margin-bottom: 14px; }
.elot-filter-form .form-group:last-child { margin-bottom: 0; }
.elot-filter-form label { display: block; margin: 0 0 6px; opacity: 1; color: var(--el-muted); font: 500 12px/16px var(--el-font); }
.elot-filter-form .form-control.mt-2, .elot-filter-form .input-group.mt-2, .elot-filter-form .input-group > .form-control { margin-top: 0 !important; }
.elot-filter-form .input-group-prepend:last-child > :last-child { border-radius: 0 8px 8px 0; }
.elot-filter-form .input-group-text { margin-top: 0; }
.elot-filter-form .select2-container { margin: 0; }
.elot-filter-form .form-control,
.elot-filter-form .select2-selection {
    min-height: 36px;
    border: 1px solid var(--el-line) !important;
    border-radius: 8px;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--el-text) !important;
    font-size: 13px;
}
.elot-filter-form .form-control { height: 36px; padding: 0 12px; }
.elot-filter-form .form-control:focus { border-color: var(--el-blue) !important; box-shadow: 0 0 0 3px rgba(78, 144, 234, .15) !important; }
.elot-filter-form select.form-control, .elot-filter-form select.elot-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 28px;
    background: #fff url(/images/elot/chevron-down.svg) right 12px center/8px no-repeat !important;
}
.elot-filter-form .select2-selection__rendered { color: var(--el-text) !important; }
.elot-filter-form .select2-selection--single { height: 36px !important; padding: 0 30px 0 12px !important; }
.elot-filter-form .select2-selection--single .select2-selection__rendered { padding: 0 !important; line-height: 34px !important; }
.elot-filter-form .select2-selection--single .select2-selection__arrow { top: 0 !important; right: 0 !important; width: 30px !important; height: 34px !important; border: 0 !important; background: url(/images/elot/chevron-down.svg) center/8px no-repeat !important; }
.elot-filter-form .select2-selection--single .select2-selection__arrow b { display: none; }
.elot-filter-form .select2-selection__clear { margin-right: 4px; color: var(--el-muted); }
.elot-filter-form .select2-container--focus .select2-selection, .elot-filter-form .select2-container--open .select2-selection { border-color: var(--el-blue) !important; }
.elot-filter-form .select2-selection--multiple .select2-selection__choice { border: 0 !important; border-radius: 6px; background: var(--el-blue-soft) !important; color: var(--el-text) !important; font-size: 12px; }
/* kartik DatePicker: поле + «×» + календар — одним рядком висотою з інші поля */
.elot-filter-form .input-group { flex-wrap: nowrap; }
.elot-filter-form .input-group > .form-control { min-width: 0; }
.elot-filter-form .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.elot-filter-form .input-group-append, .elot-filter-form .input-group-prepend { display: flex; }
.elot-filter-form .input-group-append .btn, .elot-filter-form .input-group-prepend .btn, .elot-filter-form .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--el-line);
    border-left: 0;
    border-radius: 0;
    background: #f8f9fa;
    color: var(--el-muted);
    font-size: 12px;
    cursor: pointer;
}
.elot-filter-form .input-group-append > :last-child { border-radius: 0 8px 8px 0; }
.elot-filter-form .input-group-text:hover { background: #eef1f6; color: var(--el-text); }
.elot-filter-form .input-group-text i, .elot-filter-form .input-group-text svg { width: 12px; height: 12px; font-size: 12px; line-height: 1; }
.elot-filter-form .invalid-feedback, .elot-filter-form .help-block { font-size: 12px; }
.elot-sidebar__actions { margin-top: 12px; }

/* Картка запису: без фото-колонки (договори, дії, заяви) та без правої колонки */
.elot-card--compact .elot-card__main { grid-template-columns: minmax(0, 1fr) 201px; }
.elot-card--compact .elot-card__body { padding-top: 0; }
.elot-card--noaside .elot-card__main { grid-template-columns: minmax(0, 1fr); }
.elot-card--noaside:not(.elot-card--compact) .elot-card__main { grid-template-columns: 240px minmax(0, 1fr); }
.elot-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: -8px 0 0; color: #5f6775; font: 400 14px/20px var(--el-font); word-break: break-word; }
.elot-card__lines { display: flex; flex-direction: column; gap: 8px; margin-top: -6px; }
.elot-card__address {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-left: 19px;
    background: url(/images/elot/location.svg) 0 3px/12px no-repeat;
    color: #2c2c2c;
    font: 400 14px/19px var(--el-font);
    word-break: break-word;
}
.elot-card__lines .elot-card__org { gap: 5px; }
.elot-card__lines .elot-card__org em { flex: 0 0 auto; color: var(--el-muted-2); font-style: normal; }
.elot-card__lines .elot-card__org span { text-decoration: none; }
.elot-card__dates dd > span { white-space: nowrap; }
.elot-card__aside .elot-card__label + .elot-card__fee + .elot-card__label, .elot-card__fee + .elot-card__label { margin-top: 6px; }
/* Заглушка без фото — піктограма типу майна на мʼякому тлі */
.elot-card__media:has(> [class*="elot-card__noimage--"]) { background: linear-gradient(160deg, #f3f5f9 0%, #e8ecf2 100%); }
[class*="elot-card__noimage--"] { flex-direction: column; gap: 12px; color: #a3a9b5; }
[class*="elot-card__noimage--"]::before { content: ''; width: 48px; height: 48px; background: url(/images/elot/ph-doc.svg) center/contain no-repeat; opacity: .9; }
.elot-card__noimage--building::before { background-image: url(/images/elot/ph-building.svg); }
.elot-card__noimage--car::before { background-image: url(/images/elot/ph-car.svg); }
.elot-card__noimage--box::before { background-image: url(/images/elot/ph-box.svg); }
.elot-card__noimage--factory::before { background-image: url(/images/elot/ph-factory.svg); }
/* Кнопки запису (редагування, історія, публікація…) — легкі, праворуч перед «Детальніше» */
.elot-card__footer { flex-wrap: wrap; }
.elot-card__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.elot-card__tools .btn, .elot-card__tools .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px;
    border: 1px solid var(--el-line-soft) !important;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f8f9fa) !important;
    box-shadow: var(--el-shadow);
    color: #222 !important;
    font: 500 12px/1 var(--el-font);
    white-space: nowrap;
}
.elot-card__tools .btn:hover { background: #f4f6fa !important; }
/* довгі підписи дій («Подати заяву на оренду майна або…») переносяться, а не розпирають картку */
.elot-card__tools .btn { max-width: 100%; height: auto; min-height: 30px; padding-top: 6px; padding-bottom: 6px; line-height: 16px; white-space: normal; text-align: left; }
.elot-card__tools .btn-danger { color: #d92d20 !important; }
.elot-card__tools .btn-success { color: var(--el-green) !important; }
.elot-card__tools .btn i, .elot-card__tools .btn svg { color: var(--el-muted); font-size: 11px; }
.elot-card__tools .btn-danger i { color: #d92d20; }
@media (max-width: 1199.98px) {
    .elot-card--compact .elot-card__main { grid-template-columns: minmax(0, 1fr); }
    .elot-card--noaside:not(.elot-card--compact) .elot-card__main { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .elot-card--noaside:not(.elot-card--compact) .elot-card__main { grid-template-columns: 1fr; }
    .elot-card__tools { justify-content: flex-start; }
}

/* Статуси записів реєстру: колір чипа / точки за кодом статусу ЦБД */
.elot-chip[data-status], .elot-pill[data-status] { --st-bg: #eeeff2; --st-dot: #8c94a3; }
.elot-chip[data-status="pending"], .elot-pill[data-status="pending"],
.elot-chip[data-status="published"], .elot-pill[data-status="published"],
.elot-chip[data-status="waiting"], .elot-pill[data-status="waiting"],
.elot-chip[data-status="qualification"], .elot-pill[data-status="qualification"],
.elot-chip[data-status="active_rectification"], .elot-pill[data-status="active_rectification"],
.elot-chip[data-status="active_procedure"], .elot-pill[data-status="active_procedure"],
.elot-chip[data-status="active_auction"], .elot-pill[data-status="active_auction"],
.elot-chip[data-status="active_contracting"], .elot-pill[data-status="active_contracting"] { --st-bg: #e0ecff; --st-dot: #4e90ea; }
.elot-chip[data-status="sold"], .elot-pill[data-status="sold"],
.elot-chip[data-status="complete"], .elot-pill[data-status="complete"],
.elot-chip[data-status="approved"], .elot-pill[data-status="approved"],
.elot-chip[data-status="active"], .elot-pill[data-status="active"] { --st-bg: #d5edcf; --st-dot: #179551; }
.elot-chip[data-status="draft"], .elot-pill[data-status="draft"] { --st-bg: #fff1cc; --st-dot: #e5a100; }
.elot-chip[data-status="deleted"], .elot-pill[data-status="deleted"],
.elot-chip[data-status="cancelled"], .elot-pill[data-status="cancelled"],
.elot-chip[data-status="unsuccessful"], .elot-pill[data-status="unsuccessful"] { --st-bg: #ffe2d5; --st-dot: #f83150; }
.elot-chip--status[data-status] { background: var(--st-bg); }
.elot-pill--status { background: var(--st-bg); }
.elot-pill--status .elot-pill__dot { background: var(--st-dot); }

/* --------------------------------------------------------------------------
   Сторінка запису: основна колонка з картками-секціями + права панель
   -------------------------------------------------------------------------- */
.elot-lothead--reg { margin-bottom: 24px; }
.elot-lothead--reg + .elot-lotstatus__bar { margin-bottom: 24px; }
.elot-lothead__actions .btn-group, .elot-lothead__actions .dropdown { display: inline-flex; }
.elot-regview { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main aside"; gap: 20px; align-items: start; }
.elot-regview__main { grid-area: main; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.elot-regview__aside { grid-area: aside; min-width: 0; }
.elot-regview__aside .elot-lotaside__actions .elot-btn { width: 100%; }
/* головна дія запису з моделі (напр. «Подати заяву на оренду…») — зеленою кнопкою на всю ширину */
.elot-regview__aside .elot-lotaside__actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #199a54, #118d4a);
    color: #fff !important;
    font: 500 13px/17px var(--el-font);
    text-align: center;
    white-space: normal;
}
.elot-regview__aside .elot-lotaside__actions .btn:hover { background: #118d4a; }
.elot-regview__aside .elot-lotaside__row b a { color: var(--el-blue); word-break: break-word; }
@media (min-width: 992px) and (min-height: 900px) {
    /* панель вища за вікно (фото + довгі назви організацій) — прокручується сама, щоб кнопка дії була досяжна */
    .elot-regview__aside { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d7d9dd transparent; }
    .elot-regview__aside .elot-lotaside__actions { position: sticky; bottom: 0; z-index: 1; background: #f8f9fa; }
}
@media (max-width: 991.98px) {
    .elot-regview { grid-template-columns: minmax(0, 1fr); grid-template-areas: "aside" "main"; }
}

.elot-box {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--el-line-soft);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--el-shadow);
}
.elot-box h2, .elot-box h3, .elot-box h4, .elot-box .elot-box__title {
    margin: 0 0 18px;
    color: #333;
    font: 500 16px/21px var(--el-font) !important;
    letter-spacing: 0;
    text-transform: none !important;
}
.elot-box .elot-box__title small, .elot-box h3 .text-primary { margin-left: 6px; color: var(--el-muted) !important; font-size: 14px; }
.elot-box * + h2, .elot-box * + h3, .elot-box * + h4 { margin-top: 24px; }
.elot-box hr, .elot-box hr.bg-secondary { height: 1px; margin: 20px 0 !important; border: 0; background: var(--el-line-soft) !important; opacity: 1; }
.elot-box > hr:last-child, .elot-box .col-12 > hr:last-child { display: none; }
.elot-box .alert { font-size: 13px; }
.elot-box--wide { margin-bottom: 20px; }
.elot-box > .col-12 { padding: 0; }
.elot-box .row { margin-left: 0; margin-right: 0; }
.elot-box .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.elot-box .elot-kv + .elot-kv, .elot-box .elot-kv + .elot-docs, .elot-box .elot-docs + .elot-kv, .elot-box .elot-kv + .map-widget { margin-top: 20px; }
/* Вбудовані спільні partial-и (_additionalInformation, виконання умов приватизації) мають
   старий каркас із відступами/бордерами — у картці-секції вони «розчиняються». */
.elot-box .p-3.pb-5 { display: block !important; padding: 0 !important; border: 0 !important; }
.elot-box .col-lg-9, .elot-box .col-lg-7, .elot-box .col-md-8, .elot-box .col-md-6, .elot-box .col-md-4 { flex: 0 0 100%; max-width: 100%; }
.elot-box .mt-3, .elot-box .mt-5, .elot-box .mt-4 { margin-top: 0 !important; }
.elot-box .d-flex.align-items-center.justify-content-between { gap: 12px; margin-bottom: 18px; }
.elot-box .d-flex.align-items-center.justify-content-between > h3 { margin: 0 !important; }

/* «Ключ — значення» (DetailView → .elot-kv), як на сторінці лота; те саме в модалках (історія версій ІП) */
:is(.elot-box, .modal-body) .elot-kv { border: 1px solid #f0f2f7; border-radius: 10px; overflow: hidden; background: #fff; }
:is(.elot-box, .modal-body) p.row.my-3 { margin: 0 !important; padding: 12px 15px 11px; border-top: 1px solid #f2f4f7; background: #fff; color: #222; font: 400 14px/19px var(--el-font); }
:is(.elot-box, .modal-body) p.row.my-3:first-child { border-top: 0; }
:is(.elot-box, .modal-body) p.row.my-3:nth-child(even) { background: #fcfcfc; }
:is(.elot-box, .modal-body) p.row.my-3:has(> .col-sm-4:empty):has(> .col-sm-8:empty) { display: none; }
:is(.elot-box, .modal-body) p.row.my-3 > span.col-sm-4 { padding: 0 16px 0 0; opacity: 1; color: #222; font-weight: 500; }
:is(.elot-box, .modal-body) p.row.my-3 > .col-sm-8 { margin-top: 0 !important; padding: 0; color: #222; word-break: break-word; }
:is(.elot-box, .modal-body) p.row.my-3 a:where(:not(.btn)) { color: var(--el-blue); }
/* Кнопки в рядках (аукціони ВП, виконання умов тощо) — легкі, як дії в картках: синій/градієнтний
   фон старої теми з синім текстом посилання не читався. */
:is(.elot-box, .modal-body) p.row.my-3 .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 6px 2px 0;
    padding: 4px 10px;
    border: 1px solid var(--el-line-soft) !important;
    border-radius: 6px;
    background: linear-gradient(180deg, #fff, #f8f9fa) !important;
    box-shadow: var(--el-shadow);
    color: #2463b8 !important;
    font: 500 12px/16px var(--el-font);
    white-space: normal;
    text-align: left;
}
:is(.elot-box, .modal-body) p.row.my-3 .btn:hover { background: #f4f6fa !important; }
:is(.elot-box, .modal-body) p.row.my-3 .btn-group { flex-wrap: wrap; gap: 6px; }
@media (max-width: 575.98px) { :is(.elot-box, .modal-body) p.row.my-3 > span.col-sm-4 { margin-bottom: 4px; } }

/* Таблиці (аукціони ланцюжка ІП, банківські рахунки) */
.elot-box .table-responsive { border: 1px solid #f0f2f7; border-radius: 10px; }
.elot-box .table { margin: 0; color: #222; font: 400 13px/18px var(--el-font); }
.elot-box .table-bordered, .elot-box .table-bordered th, .elot-box .table-bordered td { border: 0; }
.elot-box .table th, .elot-box .table td { padding: 10px 12px; border-top: 1px solid #f2f4f7 !important; vertical-align: top; }
.elot-box .table thead th { border-top: 0 !important; border-bottom: 1px solid #f0f2f5 !important; background: #f8f9fa; color: #6d7286; font-weight: 500; }
.elot-box .table tbody tr:nth-child(even) td { background: #fcfcfc; }
.elot-box .table a { color: var(--el-blue); white-space: nowrap; }
/* ланцюжок аукціонів ІП: суми й дати не ламаються на два рядки, назва аукціону — ширша */
.elot-box--wide .table th, .elot-box--wide .table td { padding-left: 9px; padding-right: 9px; }
.elot-box--wide .table td:nth-child(2) { min-width: 180px; }
@media (max-width: 1339.98px) {
    .elot-box--wide .table th, .elot-box--wide .table td { padding-left: 7px; padding-right: 7px; }
    .elot-box--wide .table td:nth-child(2) { min-width: 150px; }
    .elot-box--wide .table td:nth-child(4) { min-width: 120px; }
    .elot-box--wide .table a { white-space: normal; overflow-wrap: anywhere; }
}
.elot-box p.fs-13 { margin: 12px 0 0; color: var(--el-muted); font-size: 13px; }

/* Згортання (активи об'єкта, договори) — рядок-акордеон із шевроном */
.elot-box a.btn-collapse {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 !important;
    padding: 12px 16px;
    border: 1px solid #f0f2f7;
    border-radius: 10px;
    background: #f8f9fa;
    color: #25589d !important;
    font: 500 14px/19px var(--el-font);
    text-align: left;
    text-decoration: none;
}
.elot-box a.btn-collapse:hover { background: #f1f4f9; }
.elot-box a.btn-collapse::before {
    content: '';
    flex: 0 0 8px;
    width: 8px;
    height: 5px;
    margin: 0 !important;
    border: 0 !important;
    background: url(/images/elot/chevron-down.svg) center/contain no-repeat;
    transform: rotate(180deg);
    transition: transform .15s;
}
.elot-box a.btn-collapse.collapsed::before { transform: none; }
.elot-box a.btn-collapse + .collapse, .elot-box a.btn-collapse + .collapsing { margin-top: 14px; }
.elot-box .collapse + a.btn-collapse, .elot-box .collapsing + a.btn-collapse { margin-top: 12px !important; }
.elot-box .elot-box__item + .elot-box__item { margin-top: 12px; }
.elot-box .collapse > .col-12, .elot-box .collapsing > .col-12 { padding: 0; }
.elot-card__fee { overflow-wrap: anywhere; }
.elot-box [id^="map-"] { height: 360px !important; margin-top: 16px; border-radius: 10px; overflow: hidden; }

/* Вкладки bootstrap (викуп: «Викуп / Виконання умов приватизації») — як чипи лота */
.elot-reg .nav-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0 0 20px; padding: 2px; border: 1px solid #e1e4ed; border-radius: 17px; background: #eeeff2; }
.elot-reg .nav-tabs .nav-link { height: 28px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 14px; opacity: 1; color: #7c8290 !important; font: 500 12px/26px var(--el-font); }
.elot-reg .nav-tabs .nav-link::before { display: none; }
.elot-reg .nav-tabs .nav-link:hover { border-color: transparent; color: #2c2c2c !important; }
.elot-reg .nav-tabs .nav-link.active { border-color: #e7eaf0; background: linear-gradient(180deg, #fff, #f8f9fa); box-shadow: var(--el-shadow); color: #2c2c2c !important; }

/* Мапа об'єктів оренди */
.elot-mapcard { position: relative; margin-top: 20px; overflow: hidden; border: 1px solid var(--el-line-soft); border-radius: 16px; background: #eef0f4; box-shadow: var(--el-shadow); }
.elot-mapcard__map { height: 680px; height: min(680px, calc(100vh - 160px)); min-height: 420px; }
.elot-mapcard__legend { position: absolute; left: 16px; top: 16px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); color: #333; font: 500 12px/16px var(--el-font); pointer-events: none; }
.elot-mapcard__legend b { font-weight: 600; }
.elot-mapinfo { max-width: 300px; padding: 4px 2px 2px; color: #333; font: 400 13px/18px var(--el-font); }
.elot-mapinfo__meta { color: var(--el-muted); font-size: 12px; }
body.elot .elot-mapinfo__title { display: block; margin: 6px 0 10px; color: #222; font: 500 15px/20px var(--el-font); }
body.elot .elot-mapinfo__title:hover { color: var(--el-blue); }
.elot-mapinfo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.elot-mapinfo dl { margin: 0 0 10px; }
.elot-mapinfo dt { color: var(--el-muted-2); font-weight: 400; }
.elot-mapinfo dd { margin: 0 0 6px; }
body.elot .elot-mapinfo .elot-btn { height: 30px; font-size: 12px; }
.elot-mapinfo__spinner { padding: 18px 40px; color: var(--el-muted); }
.elot-mapinfo__stack { margin: 0 0 10px; color: var(--el-muted); font-size: 12px; }
/* поки вантажаться точки — кільце-спінер по центру мапи */
.elot-mapcard.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(23, 149, 81, .2);
    border-top-color: var(--el-green);
    border-radius: 50%;
    animation: elot-spin .8s linear infinite;
}
@keyframes elot-spin { to { transform: rotate(360deg); } }
@media (max-width: 575.98px) {
    /* довгий «ID: … (хеш ЦБД)» у рядку крихт переноситься, а не розпирає сторінку */
    .elot-crumbrow__id { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
/* Кнопки запису в шапці сторінки реєстру: довгі підписи переносяться всередині кнопки */
.elot-lothead--reg .elot-lothead__actions .btn { height: auto; min-height: 30px; line-height: 16px; white-space: normal; text-align: left; }
@media (max-width: 767.98px) {
    .elot-lothead--reg .elot-lothead__actions { max-width: 100%; }
    /* Вкладки розділу — один рядок із горизонтальною прокруткою; логотип Prozorro поступається місцем */
    .elot-hero--reg + .elot-searchcard .elot-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .elot-hero--reg + .elot-searchcard .elot-tabs::-webkit-scrollbar { display: none; }
    .elot-hero--reg + .elot-searchcard .elot-tab { flex: 0 0 auto; max-width: none; }
    .elot-hero--reg + .elot-searchcard .elot-searchcard__pz { display: none; }
}
.elot-crumbrow + .alert { margin-top: 12px; }
/* Шапка запису реєстру: назва першою на всю ширину, під нею — кнопки власника в легкому стилі
   (їх буває з десяток: опублікувати, змінити, додати документ, виключити з переліку…). */
.elot-lothead--reg .elot-lothead__title { flex: 1 1 100%; min-width: 0; }
.elot-lothead--reg .elot-lothead__actions { order: 1; flex: 1 1 100%; max-width: 100%; }
.elot-lothead--reg .elot-lothead__actions .btn,
.elot-lothead--reg .elot-lothead__actions .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--el-line-soft) !important;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f8f9fa) !important;
    box-shadow: var(--el-shadow);
    color: #222 !important;
    font: 500 12px/16px var(--el-font);
}
.elot-lothead--reg .elot-lothead__actions .btn:hover { background: #f4f6fa !important; }
.elot-lothead--reg .elot-lothead__actions .btn-success { color: var(--el-green) !important; }
.elot-lothead--reg .elot-lothead__actions .btn-danger { color: #d92d20 !important; }
.elot-lothead--reg .elot-lothead__actions .btn i, .elot-lothead--reg .elot-lothead__actions .btn svg { font-size: 11px; }

/* --------------------------------------------------------------------------
   Обране (/procedures/favourites) і кнопка «Створити процедуру» у вкладках картки пошуку
   -------------------------------------------------------------------------- */
.elot-empty--favourites { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; }
.elot-empty--favourites::before { content: ''; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: #ffe3e8 url(/images/elot/heart-active.svg) center/22px no-repeat; }
.elot-empty--favourites b { color: #222; font: 500 16px/22px var(--el-font); }
.elot-empty--favourites span { max-width: 420px; color: var(--el-muted); font-size: 14px; line-height: 20px; }
.elot-empty--favourites .elot-btn { margin-top: 8px; }
body.elot .elot-tabs .btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    height: 26px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #199a54 0%, #118d4a 100%) !important;
    color: #fff !important;
    font: 500 12px/1 var(--el-font);
    white-space: nowrap;
}
body.elot .elot-tabs .btn:hover { background: #118d4a !important; }
.elot-tabs .dropdown-menu { padding: 8px 0; border: 1px solid var(--el-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); font-size: 14px; }
.elot-tabs .dropdown-item { padding: 8px 18px; color: #2c2c2c; }
.elot-tabs .dropdown-item:hover { background: #f4f6fa; }

/* --------------------------------------------------------------------------
   Реєстр: доопрацювання за аудитом (дропдауни дій, чипи на телефоні, копіювання тексту,
   iOS-масштаб, дрібні кнопки)
   -------------------------------------------------------------------------- */
/* Меню дій власника (ButtonDropdown: «Створити інф. повідомлення», «Додати об'єкт», «Додати дію»):
   не обрізаються карткою, відкриваються під кнопкою, пункти переносяться, стиль — як меню шапки. */
.elot-reg .elot-card { overflow: visible; }
.elot-reg .elot-card__main { position: relative; }
.elot-card__tools .dropdown-menu,
.elot-lothead__actions .dropdown-menu,
.elot-toolbar__create .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    z-index: 1060;
    width: max-content;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 32px));
    margin: 6px 0 0 !important;
    padding: 8px 0;
    border: 1px solid var(--el-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    font: 400 14px/19px var(--el-font);
    transform: none !important;
}
.elot-card__tools .dropdown-menu, .elot-toolbar__create .dropdown-menu { right: 0 !important; left: auto !important; }
.elot-lothead__actions .dropdown-menu { right: auto !important; left: 0 !important; }
.elot-card__tools .dropdown-item, .elot-lothead__actions .dropdown-item, .elot-toolbar__create .dropdown-item { padding: 8px 18px; color: #2c2c2c; white-space: normal; }
.elot-card__tools .dropdown-item:hover, .elot-lothead__actions .dropdown-item:hover, .elot-toolbar__create .dropdown-item:hover { background: #f4f6fa; color: #2c2c2c; }
.elot-card__tools .dropleft .dropdown-toggle::before,
.elot-lothead__actions .dropleft .dropdown-toggle::before,
.elot-toolbar__create .dropleft .dropdown-toggle::before { display: none; }
.elot-card__tools .btn-group, .elot-card__tools .dropdown { position: relative; }

/* Кнопка «Оновити дані» в картці — як у шапці запису */
.elot-card__tools .refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--el-line-soft);
    border-radius: 8px;
    background: linear-gradient(180deg, #fff, #f8f9fa);
    box-shadow: var(--el-shadow);
    color: var(--el-muted);
    font-size: 12px;
}
.elot-card__tools .refresh-btn > * { font-size: 12px; line-height: 1; }
.elot-card__tools .refresh-btn:hover { color: var(--el-blue); }

/* Дії з документами (замінити / видалити / історія) — легкі кнопки з кольором лише в тексті */
.elot-doc__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--el-line-soft) !important;
    background: linear-gradient(180deg, #fff, #f8f9fa) !important;
    box-shadow: var(--el-shadow);
    color: #222 !important;
    font: 500 12px/16px var(--el-font);
}
.elot-doc__actions .btn:hover { background: #f4f6fa !important; }
.elot-doc__actions .btn-danger { color: #d92d20 !important; }
.elot-doc__actions .btn-warning { color: #b25e09 !important; }
.elot-doc__actions .btn-success { color: var(--el-green) !important; }

/* Ідентифікатори, номери, ЄДРПОУ й адреси в картках реєстру можна виділити й скопіювати:
   вони лежать над розтягнутим посиланням картки (клік по назві, фото й «Детальніше» веде на запис). */
.elot-reg .elot-card__dates dd, .elot-reg .elot-card__org, .elot-reg .elot-card__address, .elot-reg .elot-card__text { position: relative; z-index: 2; cursor: text; }

/* Сортування: увесь пігулковий контрол клікабельний; хрестик чипа — зона дотику 24px */
.elot-reg .elot-toolbar__select { height: 30px; }
.elot-reg .elot-chip__remove { min-width: 24px; min-height: 24px; margin: -4px -4px -4px 2px; border-radius: 6px; }

@media (max-width: 767.98px) {
    /* iOS не масштабує сторінку при фокусі в полі з шрифтом від 16px */
    .elot-search__input, .elot-search__input:focus, .elot-filter-form .form-control, .elot-filter-form .select2-search__field, .elot-toolbar__select { font-size: 16px; }
    /* ширину селекта сортування міряє прихований зразок — тим самим кеглем, інакше підпис обрізався */
    .elot-toolbar__measure, .select2-container--open .select2-search__field { font-size: 16px; }
}
@media (max-width: 767.98px) {
    /* Довгий підпис фільтра («Статус інформаційного повідомлення:») — окремим рядком над значенням,
       інакше значення стискалось до кількох пікселів, по літері в рядок. */
    /* те саме в модульних лістингах: підписи атрибутів там довгі («Період розрахунку стартової вартості») */
    .elot-reg .elot-chip--filter, .elot-module .elot-chip--filter { display: block; position: relative; padding-right: 36px; }
    .elot-reg .elot-chip--filter > img, .elot-module .elot-chip--filter > img { display: none; }
    .elot-reg .elot-chip--filter .elot-chip__label, .elot-module .elot-chip--filter .elot-chip__label { display: block; white-space: normal; }
    .elot-reg .elot-chip--filter .elot-chip__remove, .elot-module .elot-chip--filter .elot-chip__remove { position: absolute; top: 50%; right: 8px; margin: -12px 0 0; }
}

/* --------------------------------------------------------------------------
   Діалоги SweetAlert2 (підтвердження дій власника, системні попередження) — у мові бренду
   -------------------------------------------------------------------------- */
body.elot .swal2-popup { padding: 28px 24px 24px; border-radius: 16px; font-family: var(--el-font); box-shadow: 0 24px 64px rgba(16, 24, 40, .24); }
body.elot .swal2-title { color: #222; font: 600 18px/24px var(--el-font); }
body.elot .swal2-html-container, body.elot .swal2-content { color: var(--el-text); font: 400 14px/20px var(--el-font); }
body.elot .swal2-actions { gap: 8px; }
body.elot .swal2-styled { margin: 0; padding: 0 18px; height: 38px; border-radius: 8px; font: 500 13px/38px var(--el-font); box-shadow: var(--el-shadow); }
body.elot .swal2-styled.swal2-confirm { border: 0; background: linear-gradient(180deg, #199a54 0%, #118d4a 100%) !important; color: #fff; }
body.elot .swal2-styled.swal2-cancel { border: 1px solid var(--el-line); background: #fff !important; color: var(--el-text-dark); }
body.elot .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(23, 149, 81, .25); }
.elot-empty--blank { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px; }
.elot-empty--blank::before { content: ''; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: #eef1f6 url(/images/elot/ph-doc.svg) center/30px no-repeat; }
.elot-empty--blank b { color: #222; font: 500 16px/22px var(--el-font); }
.elot-empty--blank span { max-width: 440px; color: var(--el-muted); font-size: 14px; line-height: 20px; }
.elot-empty--blank .elot-btn { margin-top: 8px; }
/* Викуп: секції (у вкладці «Викуп» або без вкладок) — стовпчиком із тим самим відступом, що й у сітці */
.elot-regstack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.elot-regview__main > .nav-tabs { align-self: flex-start; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Модалки лейауту: #ajax-modal (історія версій ІП, форми дій), #documents-preview-modal
   -------------------------------------------------------------------------- */
body.elot .modal-content:not(.elot-fmodal__content) { overflow: hidden; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 24px 64px rgba(16, 24, 40, .24); color: var(--el-text); font-family: var(--el-font); }
body.elot .modal-header { align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--el-line-soft); background: #f8f9fa; }
body.elot .modal-header h2, body.elot .modal-header .modal-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 500 15px/20px var(--el-font); }
body.elot .modal-header .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--el-line-soft); border-radius: 8px; background: linear-gradient(180deg, #fff, #f8f9fa); box-shadow: var(--el-shadow); color: #222 !important; font: 500 13px/1 var(--el-font); }
body.elot .modal-header .btn-success { border-color: transparent; background: linear-gradient(180deg, #199a54 0%, #118d4a 100%); color: #fff !important; }
body.elot .modal-header .close { width: 32px; height: 32px; margin: 0 0 0 auto; padding: 0; border-radius: 8px; opacity: 1; color: var(--el-muted); font: 400 24px/32px var(--el-font); text-shadow: none; }
body.elot .modal-header .close:hover { background: #eef1f6; color: #222; }
body.elot #new-tab-link { color: var(--el-blue); font: 500 13px/18px var(--el-font); }
body.elot .modal-body { padding: 20px 24px 24px; font: 400 14px/20px var(--el-font); }
body.elot .modal-body > .container { max-width: none; padding: 0; }
body.elot .modal-body .row { margin-left: 0; margin-right: 0; }
body.elot .modal-body .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
body.elot .modal-body h4, body.elot .modal-body h5 { margin: 0 0 14px !important; color: #222; font: 500 16px/22px var(--el-font); }
body.elot .modal-body * + h5 { margin-top: 22px !important; }
/* історія версій ІП: стрілки «попередня / наступна» — круглі кнопки, перелік версій — приглушений */
body.elot .history-index h4 { display: flex; align-items: center; gap: 12px; }
body.elot .history-index h4 .ajax-btn { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: auto; border: 1px solid var(--el-line-soft); border-radius: 50%; background: #fff; box-shadow: var(--el-shadow); color: var(--el-muted); cursor: pointer; }
body.elot .history-index h4 .ajax-btn:first-child { margin-left: 0; }
body.elot .history-index h4 .ajax-btn:hover { background: #f4f6fa; color: var(--el-blue); }
body.elot .history-index p.fs-13 { margin: 0 0 16px; color: var(--el-muted); font-size: 13px; line-height: 20px; }
body.elot .history-index p.fs-13 a { color: var(--el-blue); cursor: pointer; }
body.elot .history-index p.fs-13 b { color: #222; font-weight: 600; }

/* --------------------------------------------------------------------------
   Сторінка помилки (404 / 403 / 400 / 500) — site/error.php
   -------------------------------------------------------------------------- */
.elot-error { display: flex; justify-content: center; padding: 56px 0 24px; }
.elot-error__card { width: 100%; max-width: 640px; padding: 40px 32px; border: 1px solid var(--el-line-soft); border-radius: 16px; background: #fff; box-shadow: var(--el-shadow); text-align: center; }
.elot-error__code { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 44px; padding: 0 16px; border-radius: 22px; background: var(--el-blue-soft); color: #25589d; font: 600 20px/1 var(--el-font); letter-spacing: .04em; }
.elot-error__title { margin: 20px 0 10px; color: #222; font: 600 24px/30px var(--el-font); }
.elot-error__text { margin: 0 auto 24px; max-width: 480px; color: var(--el-muted); font: 400 15px/22px var(--el-font); word-break: break-word; }
.elot-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media (max-width: 575.98px) {
    /* Крихти запису (з рівнем розділу хабу їх 4) на телефоні переносяться, а не розпирають сторінку */
    .elot-crumbrow .elot-breadcrumbs { flex-wrap: wrap; }
    .elot-crumbrow .elot-breadcrumbs li { flex: 0 1 auto; min-width: 0; }
}

/* Доопрацювання після перевірки: меню дій поверх «Детальніше», меню у вкладках каталогу, дати панелі,
   модалка історії версій ІП */
.elot-card__footer > .elot-card__tools { z-index: 3; }
body.elot .elot-tabs .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: max-content;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 32px));
    margin: 6px 0 0 !important;
}
body.elot .elot-tabs .dropdown-item { white-space: normal; }
body.elot .elot-tabs .dropleft .dropdown-toggle::before { display: none; }
.elot-lotaside__grid .elot-lotaside__val { font-size: 12px; white-space: nowrap; }
@media (min-width: 768px) { body.elot .modal-body .history-index .row > .col-md-6 + .col-md-6 { padding-left: 20px; } }
body.elot .modal-body .table { margin: 0; overflow: hidden; border: 1px solid #f0f2f7; border-collapse: separate; border-spacing: 0; border-radius: 10px; color: #222; font: 400 13px/18px var(--el-font); }
body.elot .modal-body .table-bordered th, body.elot .modal-body .table-bordered td { border: 0; }
body.elot .modal-body .table th, body.elot .modal-body .table td { padding: 10px 12px; border-top: 1px solid #f2f4f7 !important; vertical-align: top; overflow-wrap: anywhere; }
body.elot .modal-body .table tr:first-child > * { border-top: 0 !important; }
body.elot .modal-body .table tbody tr:nth-child(even) > * { background: #fcfcfc; }
body.elot .modal-body hr, body.elot .modal-body hr.bg-secondary { height: 1px; margin: 20px 0 !important; border: 0; background: var(--el-line-soft) !important; opacity: 1; }
body.elot .history-index p.fs-13 :is(a, b) { white-space: nowrap; }
/* Картка з відкритим меню дій — над сусідніми картками (їхні dd/футер мають власні z-index 2–3) */
.elot-reg .elot-card:has(.dropdown-menu.show) { z-index: 5; }
/* меню дій, розкрите над кнопкою (elot.js, коли знизу бракує місця) */
.elot-card__tools .dropdown-menu.elot-dropup, .elot-lothead__actions .dropdown-menu.elot-dropup,
.elot-toolbar__create .dropdown-menu.elot-dropup, body.elot .elot-tabs .dropdown-menu.elot-dropup { top: auto !important; bottom: 100% !important; margin: 0 0 6px !important; }

/* --------------------------------------------------------------------------
   Вхід, код підтвердження, відновлення пароля, лист підтвердження: компактна картка — окремою
   сторінкою (.elot-auth) і модалкою входу з шапки (#elot-login-modal). За зразком авторизації
   e-Lot Procurement: заголовок по центру, поля з підказкою замість підпису, зелена головна дія,
   під рискою — другорядні дії.
   -------------------------------------------------------------------------- */
.elot-auth { display: flex; justify-content: center; padding: 56px 0 40px; }
.elot-authcard { width: 100%; max-width: 452px; border: 1px solid var(--el-line-soft); border-radius: 16px; background: #fff; box-shadow: var(--el-shadow); color: #1b1b1b; font-family: var(--el-font); }
.elot-authcard__head { position: relative; padding: 22px 56px 0; text-align: center; }
body.elot .elot-authcard__title { margin: 0; color: #1b1b1b; font: 500 15px/20px var(--el-font); letter-spacing: .11px; }
.elot-authcard__close { position: absolute; top: 16px; right: 14px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--el-muted); font: 400 24px/32px var(--el-font); cursor: pointer; }
.elot-authcard__close:hover { background: #f4f6fa; color: #1b1b1b; }
.elot-authcard__body { padding: 22px 20px 20px; }
.elot-authcard__lead { margin: 0 0 16px; color: var(--el-muted); font: 400 13px/19px var(--el-font); }
.elot-authcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; padding: 16px 20px; border-top: 1px solid #f0f2f5; }
.elot-authcard__foot > :only-child { margin-left: auto; }
body.elot .elot-authcard__footlink { color: var(--el-muted); font: 400 13px/16px var(--el-font); }
body.elot .elot-authcard__footlink:hover { color: #1b1b1b; }

.elot-field { margin: 0 0 8px; min-width: 0; }
.elot-input { display: block; width: 100%; height: 36px; padding: 0 12px; border: 1px solid #dee2e7; border-radius: 8px; outline: 0; background: #fff; color: #1b1b1b; font: 400 14px/16px var(--el-font); letter-spacing: .11px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.elot-input::placeholder { color: #989da7; }
.elot-input:focus { border-color: var(--el-blue); box-shadow: 0 0 0 3px rgba(78, 144, 234, .15); }
.elot-field.has-error .elot-input { border-color: #fabcc7; box-shadow: 0 0 0 1px #fabcc7; background: #fffafb; }
.elot-field__error { margin-top: 5px; color: #e51a41; font: 400 13px/16px var(--el-font); }
.elot-field__error:empty { display: none; }
.elot-input--code { height: 48px; padding: 0 12px 0 calc(12px + .4em); text-align: center; font: 600 22px/1 var(--el-font); letter-spacing: .4em; }
.elot-input--code::placeholder { color: #d0d5dd; font-weight: 500; }
.elot-passfield { position: relative; }
.elot-passfield .elot-input { padding-right: 40px; }
.elot-passfield__eye { position: absolute; top: 0; right: 0; width: 38px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: url(/images/elot/eye.svg) center / 16px no-repeat; cursor: pointer; }
.elot-passfield__eye:hover { opacity: .6; }
.elot-passfield__eye.is-on { background-image: url(/images/elot/eye-off.svg); }
.elot-btn--block { display: flex; width: 100%; height: 38px; margin-top: 10px; }
.elot-authform__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 15px; }
.elot-authform__forgot { margin-left: auto; color: #858b98; font: 400 13px/15px var(--el-font); letter-spacing: .1px; }
body.elot a.elot-dashlink { margin-left: 3px; border-bottom: 1px dashed #b3b9c4; color: #1b1b1b; }
body.elot a.elot-dashlink:hover { color: #6b7280; }
.elot-authnote { margin: 0 0 8px; color: var(--el-muted); font: 400 12px/16px var(--el-font); }

/* «галочка» бренду: рідний чекбокс без системного вигляду (17px, чорна заливка, біла позначка) */
.elot-field--check { display: flex; margin: 0; }
.elot-field--check label { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; color: #1b1b1b; font: 400 13px/17px var(--el-font); cursor: pointer; }
.elot-field--check input[type="checkbox"] { flex: 0 0 17px; width: 17px; height: 17px; margin: 0 !important; border: 1px solid #d6dce4; border-radius: 3px; outline: 0; background: #fff center / 9px no-repeat; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.elot-field--check input[type="checkbox"]:checked { border-color: #1b1b1b; background-color: #1b1b1b; background-image: url(/images/elot/check-white.svg); }
.elot-field--check input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(78, 144, 234, .25); }

/* повідомлення всередині картки (флеші) */
.elot-notice { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--el-blue-soft); color: #25589d; font: 400 13px/18px var(--el-font); overflow-wrap: anywhere; }
.elot-notice--success { background: #e6f5e1; color: #1d6b3a; }
.elot-notice--warning { background: #fff4d6; color: #7a5a00; }
.elot-notice--danger { background: #ffecef; color: #c0142f; }

/* список користувачів DEBUG-входу (Select2) — у розмірі поля */
.elot-authform .select2-container { width: 100% !important; }
.elot-authform .select2-container--krajee-bs4 .select2-selection { min-height: 36px; border: 1px solid #dee2e7 !important; border-radius: 8px; background: #fff !important; box-shadow: none !important; }
.elot-authform .select2-container--krajee-bs4 .select2-selection--single { height: 36px !important; padding: 0 30px 0 12px !important; }
.elot-authform .select2-container--krajee-bs4 .select2-selection--single .select2-selection__rendered { padding: 0 !important; background: transparent !important; color: #1b1b1b !important; font-size: 14px; line-height: 34px !important; }
.elot-authform .select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow { top: 0 !important; right: 0 !important; width: 30px !important; height: 34px !important; border: 0 !important; background: url(/images/elot/chevron-down.svg) center / 8px no-repeat !important; }
.elot-authform .select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow b { display: none; }
.elot-authform .select2-container--focus .select2-selection, .elot-authform .select2-container--open .select2-selection { border-color: var(--el-blue) !important; }
.elot-authmodal .select2-dropdown, .elot-authmodal .select2-dropdown * { background-color: #fff !important; }
.elot-authmodal .select2-results__option--highlighted, .elot-authmodal .select2-results__option--highlighted * { background-color: #f4f6fa !important; }

/* сторінка-повідомлення: піктограма стану, заголовок, текст, дії по центру */
.elot-authcard--message .elot-authcard__body { padding-top: 32px; text-align: center; }
.elot-authcard--message .elot-authcard__title { margin-bottom: 8px; font-size: 16px; line-height: 22px; }
.elot-authcard--message .elot-authcard__lead { margin-bottom: 0; }
.elot-authcard--message .elot-authcard__lead + .elot-authcard__lead { margin-top: 6px; }
.elot-authcard--message .elot-authcard__foot { justify-content: center; }
.elot-authcard--message .elot-authcard__foot > :only-child { margin-left: 0; }
.elot-authcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; background: var(--el-blue-soft); color: #25589d; }
.elot-authcard__icon::before { content: 'i'; font: 600 20px/1 var(--el-font); }
.elot-authcard__icon--success { background: #e0f4db; color: var(--el-green); }
.elot-authcard__icon--success::before { content: '\2713'; }
.elot-authcard__icon--warning { background: #fff1cc; color: #a87400; }
.elot-authcard__icon--danger { background: #ffe5ea; color: #e51a41; }
.elot-authcard__icon--warning::before, .elot-authcard__icon--danger::before { content: '!'; }

/* модалка входу */
.elot-authmodal .modal-dialog { max-width: 452px; }
body.elot .elot-authmodal .modal-content.elot-authcard { max-width: none; overflow: visible; }
@media (max-width: 575.98px) {
    .elot-auth { padding: 24px 0 16px; }
    .elot-authmodal .modal-dialog { margin: 16px; }
    /* 16px у полі — iOS не масштабує сторінку при фокусі */
    .elot-input, .elot-authform .select2-search__field { font-size: 16px; }
    .elot-authcard__foot { justify-content: center; }
    .elot-authcard__foot > :only-child { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Форми кабінету: реєстрація (/user/register), налаштування акаунта й банківські реквізити
   (/user/settings/…). За зразком «Редагувати дані компанії» e-Lot Procurement: шапка сторінки з
   назвою й дією, розділи-картки із заголовком і поясненням, праворуч — липкі кроки з позначкою
   «заповнено». Поля — стандартні ActiveField (.d-flex.flex-column.mb-2.pr-2, .form-control),
   тому розкладка перекривається з !important.
   -------------------------------------------------------------------------- */
.elot-cab { padding-bottom: 40px; color: #1b1b1b; font-family: var(--el-font); }
.elot-cab__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 30px 0; }
.elot-cab__back { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 5px; background: #e0e3e8 url(/images/elot/back.svg) center / 12px no-repeat; transition: background-color .15s; }
.elot-cab__back:hover { background-color: #d2d5db; }
body.elot .elot-cab__title { margin: 0; color: #1b1b1b; font: 500 20px/30px var(--el-font); letter-spacing: .24px; }
.elot-cab__actions { display: flex; gap: 8px; margin-left: auto; }
.elot-cab__tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: 8px; padding: 2px; border: 1px solid #e1e4ed; border-radius: 17px; background: #eeeff2; }
body.elot a.elot-cab__tab { height: 28px; padding: 0 12px; border: 1px solid transparent; border-radius: 14px; color: #7c8290; font: 500 12px/26px var(--el-font); white-space: nowrap; }
body.elot a.elot-cab__tab:hover { color: #2c2c2c; }
body.elot a.elot-cab__tab.is-active { border-color: #e7eaf0; background: linear-gradient(180deg, #fff, #f8f9fa); box-shadow: var(--el-shadow); color: #2c2c2c; }
.elot-cab__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; align-items: start; }
.elot-cab__grid--single { grid-template-columns: minmax(0, 930px); }
.elot-cab__main { min-width: 0; }
.elot-cab__aside { position: sticky; top: 22px; min-width: 0; }
.elot-cab__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.elot-cab__submit .elot-btn { height: 40px; padding: 0 22px; }
.elot-cab__submit .elot-btn--green { min-width: 220px; }
.elot-cab__submitnote { color: #858b98; font: 400 13px/15px var(--el-font); }
.elot-cab .alert { margin: 0 0 10px; border: 0; border-radius: 8px; background: #fff4d6; color: #6b5200; font: 400 13px/19px var(--el-font); }

/* розділ-картка */
.elot-fsec { margin: 0 0 10px; border: 1px solid #e1e7ea; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(27, 27, 27, .05); scroll-margin-top: 16px; }
.elot-fsec__head { padding: 25px 25px 0; }
.elot-fsec__head--row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.elot .elot-fsec__title { margin: 0; color: #2c2c2c; font: 500 16px/18px var(--el-font); letter-spacing: .012em; }
.elot-fsec__desc { margin: 10px 0 0; color: #777f8b; font: 400 14px/18px var(--el-font); letter-spacing: .012em; }
.elot-fsec__body { padding: 25px; }
.elot-fsec__body > :last-child, .elot-fsec__body > :last-child > .d-flex.flex-column.mb-2:last-child { margin-bottom: 0 !important; }

/* поля: підпис 13px над полем, поле 36px */
.elot-fsec__body .row { margin-right: -7px; margin-left: -7px; }
.elot-fsec__body .row > [class*="col-"] { padding-right: 7px; padding-left: 7px; }
.elot-fsec__body .d-flex.flex-column.mb-2 { margin-bottom: 18px !important; padding-right: 0 !important; }
.elot-fsec__body label { margin: 0 !important; color: #1b1b1b; font: 500 13px/15px var(--el-font); opacity: 1 !important; }
.elot-fsec__body .required > label:not(.btn)::after, .elot-fsec__body [data-elot-required] .flex-column.mb-2 > label:not(.btn)::after { content: '*'; margin-left: 1px; color: #ff2424; font: 500 13px/15px var(--el-font); }
.elot-fsec__body .form-control { height: 36px; margin-top: 8px !important; padding: 0 12px; border: 1px solid #dee2e7 !important; border-radius: 8px; background-color: #fff !important; box-shadow: none; color: #1b1b1b !important; font: 400 14px/16px var(--el-font); letter-spacing: .11px; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.elot-fsec__body textarea.form-control { height: auto; min-height: 72px; padding: 9px 12px; line-height: 20px; }
.elot-fsec__body select.form-control { padding-right: 30px; background: #fff url(/images/elot/chevron-down.svg) right 12px center / 8px no-repeat !important; -webkit-appearance: none; appearance: none; }
.elot-fsec__body .form-control::placeholder { color: #989da7; }
.elot-fsec__body .form-control:focus { border-color: var(--el-blue) !important; box-shadow: 0 0 0 3px rgba(78, 144, 234, .15); }
.elot-fsec__body .form-control:disabled, .elot-fsec__body .form-control[readonly] { background-color: #f6f7f9 !important; color: #8d8d8d !important; }
.elot-fsec__body .has-error .form-control { border-color: #fabcc7 !important; box-shadow: 0 0 0 1px #fabcc7; background-color: #fffafb !important; }
.elot-fsec__body .help-block { margin-top: 5px; color: #e51a41 !important; font: 400 13px/16px var(--el-font); }
.elot-fsec__body .help-block:empty { display: none; }
.elot-fsec__body .hint-block { margin-top: 6px; color: #858b98; font: 400 12px/16px var(--el-font); }
.elot-fsec__body hr { display: none; }
.elot-fsec__body h3 { margin: 0 0 12px; color: #2c2c2c; font: 500 14px/18px var(--el-font) !important; }

/* «галочки» й перемикачі: рідні елементи без системного вигляду (17px, чорна заливка) */
.elot-fsec__body input[type="checkbox"], .elot-fsec__body input[type="radio"] { flex: 0 0 17px; width: 17px; height: 17px; margin: 0 9px 0 0 !important; border: 1px solid #d6dce4; border-radius: 3px; outline: 0; background: #fff center / 9px no-repeat; vertical-align: top; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.elot-fsec__body input[type="radio"] { border-radius: 50%; }
.elot-fsec__body input[type="checkbox"]:checked { border-color: #1b1b1b; background-color: #1b1b1b; background-image: url(/images/elot/check-white.svg); }
.elot-fsec__body input[type="radio"]:checked { border: 5px solid #1b1b1b; }
.elot-fsec__body input[type="checkbox"]:focus-visible, .elot-fsec__body input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px rgba(78, 144, 234, .25); }
/* підпис галочки лишається звичайним текстом (у згодах усередині нього посилання), сама галочка — зліва */
.elot-fsec__body label:has(> input[type="checkbox"]), .elot-fsec__body label:has(> input[type="radio"]):not(.btn) { position: relative; display: block; min-height: 17px; padding-left: 26px; color: #1b1b1b; font: 400 14px/17px var(--el-font); cursor: pointer; }
.elot-fsec__body label:has(> input[type="checkbox"]) > input, .elot-fsec__body label:has(> input[type="radio"]):not(.btn) > input { position: absolute; top: 0; left: 0; }
/* галочки в рядку (нерезидент, ІПН відсутній) — за шириною підпису, а не третиною рядка */
.elot-fsec__body .row > [class*="col-md-4"]:has(> .d-flex > label > input[type="checkbox"]) { flex: 0 1 auto; width: auto; max-width: 100%; margin-right: 18px; }
/* список галочок (напрями роботи, ролі): під підписом поля, у дві колонки на всю ширину картки */
.elot-fsec__body .d-flex.flex-column > div:has(> label > input[type="checkbox"]) { margin-top: 12px; column-count: 2; column-gap: 24px; }
.elot-fsec__body .d-flex.flex-column > div:has(> label > input[type="checkbox"]) > label { margin-bottom: 12px !important; break-inside: avoid; }
.elot-fsec__body .row > .orgRole, .elot-fsec__body .row > .registryRoles { flex: 0 0 100%; max-width: 100%; }
.elot-fsec__body .has-error input[type="checkbox"]:not(:checked) { border-color: #f3a3b2; }
.elot-fsec__body .consent-for + .consent-for { margin-top: 14px; }
.elot-fsec__body .consent-for .d-flex.flex-column.mb-2 { margin-bottom: 0 !important; }

/* вибір одного з варіантів (тип користувача, форма організації) — рядок кнопок-перемикачів */
.elot-fsec__body .btn-group-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.elot-fsec__body .btn-group-toggle > .btn { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: 36px; margin: 0 !important; padding: 6px 12px; border: 1px solid #dee2e7 !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; color: #1b1b1b !important; font: 500 13px/16px var(--el-font); white-space: normal; transition: border-color .2s, background-color .2s; }
.elot-fsec__body .btn-group-toggle > .btn:hover { background: #f8f9fa !important; }
.elot-fsec__body .btn-group-toggle > .btn.active { border-color: #1b1b1b !important; background: #1b1b1b !important; color: #fff !important; }
.elot-fsec__body .btn-group-toggle > .btn.focus { box-shadow: 0 0 0 3px rgba(78, 144, 234, .25) !important; }
.elot-fsec__body .btn-group-toggle > .btn input { position: absolute; opacity: 0; pointer-events: none; }

/* вкладки всередині розділу (IBAN / старий формат) */
.elot-fsec__body .nav-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 2px; border: 1px solid #e1e4ed; border-radius: 17px; background: #eeeff2; }
.elot-fsec__body .nav-tabs .nav-link { height: 28px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: 14px; opacity: 1; color: #7c8290 !important; font: 500 12px/26px var(--el-font); }
.elot-fsec__body .nav-tabs .nav-link::before { display: none; }
.elot-fsec__body .nav-tabs .nav-link.active { border-color: #e7eaf0; background: linear-gradient(180deg, #fff, #f8f9fa); box-shadow: var(--el-shadow); color: #2c2c2c !important; }
.elot-fsec__body .tab-content { margin-top: 16px; }
.elot-fsec__body .tab-content br:first-child { display: none; }

/* Select2 і поля дати — у розмірі поля */
.elot-fsec__body .select2-container { width: 100% !important; margin-top: 8px; }
.elot-fsec__body .select2-container--krajee-bs4 .select2-selection { min-height: 36px; border: 1px solid #dee2e7 !important; border-radius: 8px; background: #fff !important; box-shadow: none !important; }
.elot-fsec__body .select2-container--krajee-bs4 .select2-selection--single { height: 36px !important; padding: 0 30px 0 12px !important; }
.elot-fsec__body .select2-container--krajee-bs4 .select2-selection--single .select2-selection__rendered { padding: 0 !important; background: transparent !important; color: #1b1b1b !important; font-size: 14px; line-height: 34px !important; }
.elot-fsec__body .select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow { top: 0 !important; right: 0 !important; width: 30px !important; height: 34px !important; border: 0 !important; background: url(/images/elot/chevron-down.svg) center / 8px no-repeat !important; }
.elot-fsec__body .select2-container--krajee-bs4 .select2-selection--single .select2-selection__arrow b { display: none; }
.elot-fsec__body .select2-container--focus .select2-selection, .elot-fsec__body .select2-container--open .select2-selection { border-color: var(--el-blue) !important; }
.elot-fsec__body .input-group { margin-top: 8px !important; flex-wrap: nowrap; }
.elot-fsec__body .input-group > .form-control { margin-top: 0 !important; min-width: 0; }
.elot-fsec__body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.elot-fsec__body .input-group-append > *, .elot-fsec__body .input-group-prepend > *, .elot-fsec__body .input-group-addon { display: flex; align-items: center; height: 36px; padding: 0 10px; border: 1px solid #dee2e7; border-left: 0; border-radius: 0 8px 8px 0; background: #f8f9fa; color: #858b98; }

/* документи: вимоги, Дія, додавання файлів, уже завантажені */
.elot-fsec__body .required-documents-alert { margin: 0 0 16px; padding: 14px 16px; }
.elot-fsec__body .required-documents-alert h3 { margin: 0 0 8px; color: inherit; font: 600 13px/18px var(--el-font) !important; }
.elot-fsec__body .required-documents-alert br { display: none; }
.elot-fsec__body .required-documents { margin: 0; padding: 0; background: transparent; list-style: none !important; }
.elot-fsec__body .required-documents li + li { margin-top: 4px; }
.elot-fsec__body .btn.ajax-btn, .elot-fsec__body .add-dynamic-field, .elot-fsec__body .remove-field, .elot-fsec__body .list-group .btn, .elot-fsec__body .btn.btn-primay {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 32px; margin: 0; padding: 0 14px; border: 1px solid #e4e7eb !important; border-radius: 8px;
    background: #fff !important; box-shadow: 0 1px 1px rgba(27, 27, 27, .03); color: #1b1b1b !important; font: 500 13px/1 var(--el-font); cursor: pointer;
}
.elot-fsec__body .btn.ajax-btn:hover, .elot-fsec__body .add-dynamic-field:hover, .elot-fsec__body .remove-field:hover, .elot-fsec__body .list-group .btn:hover, .elot-fsec__body .btn.btn-primay:hover { background: #f4f6fa !important; }
.elot-fsec__body .btn.sharing-btn { margin-bottom: 14px; }
.elot-fsec__body .btn.btn-primay { width: 100%; height: 36px; margin-top: 23px; }
.elot-fsec__body .remove-field, .elot-fsec__body .list-group .btn { flex: 0 0 32px; width: 32px; padding: 0; color: #e51a41 !important; }
.elot-fsec__body .add-dynamic-field { min-width: 0; padding: 0 12px; }
.elot-fsec__or { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; color: #858b98; font: 500 12px/1 var(--el-font); }
.elot-fsec__or .btn { margin-bottom: 0 !important; }
.elot-fsec__body .file-div { flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.elot-fsec__body .file-div + .file-div { margin-top: 10px; }
.elot-fsec__body .file-div label { margin: 0; color: #858b98; font-weight: 400; }
.elot-fsec__body .file-div input[type="file"] { flex: 1 1 200px; min-width: 0; margin: 0; font: 400 13px/18px var(--el-font); }
.elot-fsec__body .list-group { border: 1px solid #f0f2f7; border-radius: 10px; background: transparent; overflow: hidden; }
.elot-fsec__body .list-group-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-top: 1px solid #f2f4f7; background: #fff; font: 400 13px/18px var(--el-font); overflow-wrap: anywhere; }
.elot-fsec__body .list-group-item:first-child { border-top: 0; }

/* кроки: праворуч, липкі; позначка — порожнє коло / зелена галочка / червона помилка */
.elot-steps { display: flex; flex-direction: column; gap: 20px; padding: 20px; border: 1px solid var(--el-line-soft); border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(27, 27, 27, .03); }
body.elot a.elot-steps__item { position: relative; display: flex; align-items: center; gap: 15px; color: #858b98; font: 400 13px/19px var(--el-font); }
body.elot a.elot-steps__item[hidden] { display: none; }
.elot-steps__mark { position: relative; flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid #cfd5de; border-radius: 50%; background: #fff center / 8px no-repeat; transition: background-color .2s, border-color .2s; }
/* риска між сусідніми кроками */
.elot-steps__item:not(.is-last) .elot-steps__mark::after { content: ''; position: absolute; top: calc(100% + 4px); left: 50%; width: 1px; height: 14px; margin-left: -.5px; background: #e4e7eb; }
.elot-steps__label { border-bottom: 1px dashed #c3c9d3; }
.elot-cab__hint { margin: 12px 4px 0; color: #858b98; font: 400 12px/17px var(--el-font); }
.elot-cab__hint b { color: #ff2424; font-weight: 500; }
body.elot a.elot-steps__item:hover, body.elot a.elot-steps__item.is-current { color: #1b1b1b; }
.elot-steps__item.is-done .elot-steps__mark { border-color: #0a984c; background-color: #0a984c; background-image: url(/images/elot/check-white.svg); }
.elot-steps__item.is-error .elot-steps__mark { border-color: #e51a41; background-color: #e51a41; background-image: none; }
.elot-steps__item.is-error .elot-steps__mark::before { content: '!'; position: absolute; inset: 0; color: #fff; font: 700 10px/13px var(--el-font); text-align: center; }
body.elot a.elot-steps__item.is-error { color: #e51a41; }
.elot-steps__item.is-error .elot-steps__label { border-bottom-color: #f3a3b2; }

@media (max-width: 991.98px) {
    .elot-cab__grid { grid-template-columns: minmax(0, 1fr); }
    /* кроки — над формою, рядком; риски між ними не потрібні */
    .elot-cab__aside { position: static; order: -1; }
    .elot-steps { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; padding: 14px 16px; }
    body.elot a.elot-steps__item { gap: 8px; }
    .elot-steps__item .elot-steps__mark::after { display: none; }
}
@media (max-width: 575.98px) {
    .elot-cab__head { padding: 20px 0; }
    /* назва й дія — першим рядком, вкладки — другим */
    body.elot .elot-cab__title { flex: 1 1 0; min-width: 0; font-size: 18px; line-height: 24px; }
    .elot-cab__tabs { order: 3; margin-left: 0; }
    .elot-fsec__head { padding: 18px 16px 0; }
    .elot-fsec__body { padding: 18px 16px; }
    .elot-fsec__body .form-control, .elot-fsec__body .select2-search__field { font-size: 16px; }
    .elot-fsec__body .btn-group-toggle > .btn { flex-basis: 40%; }
    .elot-fsec__body .d-flex.flex-column > div:has(> label > input[type="checkbox"]) { column-count: 1; }
    .elot-cab__submit .elot-btn--green { width: 100%; }
}