/* ==========================================================================
   new_version_2025/css/pages.css — оновлений дизайн внутрішніх сторінок
   (каталог, картка авто, аукціони, обране, ставки, інформаційні сторінки, вхід)
   у стилі головної сторінки. Підключається ПІСЛЯ всіх інших стилів.
   Діє лише на сторінках з <body class="cl-legacy">, тож головна не змінюється.
   2026-10-22
   ========================================================================== */

:root {
  --cl-primary: #2f58cd;
  --cl-primary-hover: #2549b3;
  --cl-primary-soft: #f2f5fe;
  --cl-navy: #2b3467;
  --cl-text: #414042;
  --cl-muted: #6b7186;
  --cl-border: #e3e8f4;
  --cl-border-strong: #c3cde6;
  --cl-surface: #f4f6fc;
  --cl-surface-2: #f8f9fe;
  --cl-white: #ffffff;
  --cl-danger: #e5484d;
  --cl-success: #1f9d55;
  --cl-radius-sm: 0.5rem;
  --cl-radius: 0.75rem;
  --cl-radius-lg: 1rem;
  --cl-radius-xl: 1.5rem;
  --cl-shadow: 0 1px 2px rgba(47, 88, 205, 0.04), 0 8px 24px rgba(47, 88, 205, 0.08);
  --cl-font: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cl-page-width: none; /* v6: контент на всю ширину екрана, як шапка й підвал */
  --cl-gutter: clamp(16px, 2.5vw, 64px);
}

/* ---------- Основа ---------- */
body.cl-legacy {
  font-family: var(--cl-font) !important;
  color: var(--cl-text);
  background: var(--cl-white);
  -webkit-font-smoothing: antialiased;
}
body.cl-legacy,
body.cl-legacy p,
body.cl-legacy li,
body.cl-legacy td,
body.cl-legacy th,
body.cl-legacy label,
body.cl-legacy input,
body.cl-legacy select,
body.cl-legacy textarea,
body.cl-legacy button,
body.cl-legacy .btn {
  font-family: var(--cl-font) !important;
}
body.cl-legacy p,
body.cl-legacy li { line-height: 1.55; }
body.cl-legacy a { color: var(--cl-primary); transition: color .15s ease; }
body.cl-legacy a:hover,
body.cl-legacy a:focus { color: var(--cl-primary-hover); text-decoration: none; }
body.cl-legacy img { max-width: 100%; }
body.cl-legacy .otstup,
body.cl-legacy .otstup1 { height: 12px; }

/* Ширина контенту як на головній */
body.cl-legacy .container:not(header *):not(footer *),
body.cl-legacy .container-fluid:not(header *):not(footer *) {
  max-width: var(--cl-page-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cl-gutter);
  padding-right: var(--cl-gutter);
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Заголовок сторінки (як «ПІДБІР АВТОМОБІЛЯ» на головній) ---------- */
body.cl-legacy section.afMnu,
body.cl-legacy .afMnu {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.cl-legacy section.afMnu .container {
  padding-top: 28px;
  padding-bottom: 8px;
}
body.cl-legacy h1,
body.cl-legacy .afMnu h1 {
  font-family: var(--cl-font) !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--cl-text) !important;
  text-align: left !important;
  margin: 0 0 20px !important;
}
body.cl-legacy h2 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; color: var(--cl-text); line-height: 1.2; }
body.cl-legacy h3 { font-size: 20px; font-weight: 600; color: var(--cl-text); line-height: 1.3; }
body.cl-legacy h4, body.cl-legacy h5 { font-weight: 600; color: var(--cl-text); }

/* ---------- Кнопки ---------- */
body.cl-legacy .btn,
body.cl-legacy input[type=submit].btn,
body.cl-legacy button.btn {
  border-radius: var(--cl-radius) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  padding: 12px 20px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.cl-legacy .btn-primary,
body.cl-legacy .btn-warning,
body.cl-legacy .btn-success,
body.cl-legacy .btn-info,
body.cl-legacy input.btn-primary {
  background: var(--cl-primary) !important;
  color: #fff !important;
}
body.cl-legacy .btn-primary:hover,
body.cl-legacy .btn-warning:hover,
body.cl-legacy .btn-success:hover,
body.cl-legacy .btn-info:hover,
body.cl-legacy input.btn-primary:hover { background: var(--cl-primary-hover) !important; color: #fff !important; }
body.cl-legacy .btn-default,
body.cl-legacy .btn-secondary {
  background: var(--cl-white) !important;
  color: var(--cl-text) !important;
  border-color: var(--cl-border) !important;
}
body.cl-legacy .btn-default:hover,
body.cl-legacy .btn-secondary:hover { border-color: var(--cl-primary) !important; color: var(--cl-primary) !important; }
body.cl-legacy .btn-danger { background: var(--cl-white) !important; color: var(--cl-danger) !important; border-color: #f3c6c7 !important; }
body.cl-legacy .btn-danger:hover { background: #fff5f5 !important; }
body.cl-legacy .btn-sm, body.cl-legacy .btn-xs { padding: 8px 12px !important; font-size: 13px !important; }

/* ---------- Поля форм (як у фільтрі на головній) ---------- */
body.cl-legacy .form-control,
body.cl-legacy input[type=text],
body.cl-legacy input[type=email],
body.cl-legacy input[type=password],
body.cl-legacy input[type=number],
body.cl-legacy input[type=tel],
body.cl-legacy input[type=search],
body.cl-legacy input[type=date],
body.cl-legacy select,
body.cl-legacy textarea {
  border: 1px solid var(--cl-border) !important;
  border-radius: var(--cl-radius) !important;
  background-color: var(--cl-white) !important;
  color: var(--cl-text) !important;
  font-size: 15px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.cl-legacy .form-control,
body.cl-legacy input[type=text],
body.cl-legacy input[type=email],
body.cl-legacy input[type=password],
body.cl-legacy input[type=number],
body.cl-legacy input[type=tel],
body.cl-legacy input[type=search],
body.cl-legacy select { min-height: 44px; padding: 10px 14px !important; height: auto !important; }
body.cl-legacy textarea { padding: 12px 14px !important; }
body.cl-legacy .form-control:focus,
body.cl-legacy input:focus,
body.cl-legacy select:focus,
body.cl-legacy textarea:focus {
  outline: none !important;
  border-color: var(--cl-primary) !important;
  box-shadow: 0 0 0 3px rgba(47, 88, 205, 0.12) !important;
}
body.cl-legacy ::placeholder { color: var(--cl-border-strong); }
body.cl-legacy label { font-weight: 500; color: var(--cl-muted); font-size: 14px; }

/* ---------- Панелі, блоки, таблиці ---------- */
body.cl-legacy .panel,
body.cl-legacy .well {
  border: 0 !important;
  border-radius: var(--cl-radius-lg) !important;
  box-shadow: none !important;
  background: var(--cl-surface) !important;
}
body.cl-legacy .panel-heading {
  background: transparent !important;
  border: 0 !important;
  color: var(--cl-text) !important;
  font-weight: 600;
}
body.cl-legacy .table {
  background: var(--cl-white);
  border-radius: var(--cl-radius-lg);
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0;
  border: 1px solid var(--cl-border);
}
body.cl-legacy .table > thead > tr > th {
  background: var(--cl-surface-2);
  color: var(--cl-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom: 1px solid var(--cl-border) !important;
  border-top: 0 !important;
  padding: 12px 14px !important;
}
body.cl-legacy .table > tbody > tr > td {
  border-top: 1px solid var(--cl-border) !important;
  padding: 12px 14px !important;
  vertical-align: middle !important;
}
body.cl-legacy .table-striped > tbody > tr:nth-of-type(odd) { background: var(--cl-white); }
body.cl-legacy .table-hover > tbody > tr:hover { background: var(--cl-primary-soft); }
body.cl-legacy .alert {
  border: 0;
  border-radius: var(--cl-radius-lg);
  padding: 14px 18px;
  font-weight: 500;
}
body.cl-legacy .alert-danger { background: #fff1f1; color: #b4232a; }
body.cl-legacy .alert-success { background: #edf9f1; color: #17703d; }
body.cl-legacy .alert-info,
body.cl-legacy .alert-warning { background: var(--cl-primary-soft); color: var(--cl-navy); }
body.cl-legacy .label,
body.cl-legacy .badge {
  border-radius: 999px;
  font-weight: 600;
  padding: 4px 10px;
}
body.cl-legacy .modal-content {
  border: 0;
  border-radius: var(--cl-radius-xl);
  box-shadow: 0 24px 64px rgba(43, 52, 103, 0.18);
}
body.cl-legacy .modal-header,
body.cl-legacy .modal-footer { border-color: var(--cl-border); padding: 18px 24px; }
body.cl-legacy .modal-body { padding: 20px 24px; }
body.cl-legacy .modal-title { font-weight: 600; color: var(--cl-text); }

/* ==========================================================================
   КАТАЛОГ (?act=cars, обране, ставки, виграні)
   ========================================================================== */
body.cl-legacy .container-fluid:has(> #filter_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 28px;
}
body.cl-legacy .container-fluid:has(> #filter_form)::before,
body.cl-legacy .container-fluid:has(> #filter_form)::after { display: none !important; }
body.cl-legacy #filter_form {
  flex: 0 0 300px;
  max-width: 300px;
  order: 1;
  position: sticky;
  top: 16px;
}
body.cl-legacy #filter_form + .paginator,
body.cl-legacy .container-fluid > .paginator { order: 2; flex: 1 1 0; min-width: 0; }
body.cl-legacy .container-fluid > .col-lg-9 { order: 3; flex: 0 0 100%; }
@media (min-width: 992px) {
  /* список авто — праворуч від фільтра, пагінація над ним */
  body.cl-legacy .container-fluid:has(> #filter_form) {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas: "filter pager" "filter list" "filter pager2";
    grid-template-rows: auto 1fr auto;
    column-gap: 28px;
    align-items: start;
  }
  body.cl-legacy #filter_form { grid-area: filter; max-width: none; }
  body.cl-legacy .container-fluid > .paginator:first-of-type { grid-area: pager; }
  body.cl-legacy .container-fluid > .col-lg-9 { grid-area: list; width: auto; padding: 0; float: none; }
  body.cl-legacy .container-fluid > .paginator:last-of-type:not(:first-of-type) { grid-area: pager2; }
  body.cl-legacy .container-fluid > .col-lg-9:first-child { grid-column: 1 / -1; }
}

/* Фільтр: сіра панель, як блок «Підбір автомобіля» на головній */
body.cl-legacy .forFiltr1 { width: 100% !important; padding: 0 !important; float: none !important; }
body.cl-legacy .filtrPan {
  background: var(--cl-surface) !important;
  border-radius: var(--cl-radius-xl) !important;
  padding: 16px !important;
  margin: 0 !important;
}
body.cl-legacy .filtrPan .otstup { height: 6px; }
body.cl-legacy .filtrPan .collapse_btn,
body.cl-legacy .filtrPan .btn-warning {
  position: relative;
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--cl-white) !important;
  color: var(--cl-text) !important;
  border: 1px solid transparent !important;
  border-radius: var(--cl-radius) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
  padding: 13px 16px !important;
  height: auto !important;
  white-space: normal;
}
body.cl-legacy .filtrPan .collapse_btn:hover { border-color: var(--cl-primary) !important; color: var(--cl-primary) !important; }
body.cl-legacy .filtrPan .collapse_btn i,
body.cl-legacy .filtrPan .collapse_btn [class^="icon-"] {
  color: var(--cl-primary) !important;
  font-size: 16px;
  margin-left: 12px;
  position: static !important;
  float: none !important;
}
body.cl-legacy .filtrPan .collapse,
body.cl-legacy .filtrPan .collapsing { margin-top: 6px; }
body.cl-legacy .filtrPan .well,
body.cl-legacy .filtrPan .well_1,
body.cl-legacy .filtrPan .well_2 {
  background: var(--cl-white) !important;
  border-radius: var(--cl-radius) !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  max-height: 340px;
  overflow: auto;
  font-size: 14px;
}
body.cl-legacy .filtrPan .well span.col-lg-2 {
  float: none !important;
  display: inline-block;
  width: auto !important;
  padding: 0 6px 0 0 !important;
  color: var(--cl-muted);
  font-size: 13px;
}
body.cl-legacy .filtrPan .well input.col-lg-3 {
  float: none !important;
  display: inline-block;
  width: calc(50% - 34px) !important;
  min-height: 40px;
  padding: 8px 10px !important;
  margin: 2px 4px 2px 0;
}
body.cl-legacy .filtrPan input[type=checkbox],
body.cl-legacy .filtrPan input[type=radio] { accent-color: var(--cl-primary); width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
body.cl-legacy .filtrPan .button-container { display: flex; flex-wrap: wrap; gap: 8px; }
body.cl-legacy .filtrPan .button-container a.button {
  background: var(--cl-surface-2);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
}
body.cl-legacy .filtrPan .button-container a.button:hover,
body.cl-legacy .filtrPan .button-container a.button.active { border-color: var(--cl-primary); background: var(--cl-primary-soft); }
body.cl-legacy .filtrPan .button-container a.button img { max-height: 28px; width: auto; }
body.cl-legacy .filtrPan input.btn-primary.button,
body.cl-legacy .filtrPan > input.btn {
  width: 100%;
  margin-top: 6px;
  padding: 14px 20px !important;
  font-size: 16px !important;
}

/* Пагінація */
body.cl-legacy .paginator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  clear: both;
}
body.cl-legacy .paginator .showing { color: var(--cl-muted); font-size: 14px; }
body.cl-legacy .paginator .showing b { color: var(--cl-text); }
body.cl-legacy .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0; }
body.cl-legacy .pagination > li { display: block; }
body.cl-legacy .pagination > li > a,
body.cl-legacy .pagination > li > span {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px !important;
  margin: 0 !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: var(--cl-radius) !important;
  background: var(--cl-white) !important;
  color: var(--cl-text) !important;
  font-weight: 600;
  font-size: 14px;
}
body.cl-legacy .pagination > li > a:hover { border-color: var(--cl-primary) !important; color: var(--cl-primary) !important; }
body.cl-legacy .pagination > .active > a,
body.cl-legacy .pagination > .active > span {
  background: var(--cl-primary) !important;
  border-color: var(--cl-primary) !important;
  color: #fff !important;
}
body.cl-legacy .pagination > .disabled > a { opacity: .45; pointer-events: none; }

/* Картка авто у списку */
body.cl-legacy .avtoItem {
  display: grid !important;
  grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 16px !important;
  padding: 14px !important;
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-xl);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
body.cl-legacy .avtoItem::before,
body.cl-legacy .avtoItem::after { display: none !important; }
body.cl-legacy .avtoItem:hover { border-color: transparent; box-shadow: var(--cl-shadow); }
body.cl-legacy .avtoItem > [class*="col-"] { width: auto !important; float: none !important; padding: 0 !important; position: relative; }
body.cl-legacy .avtoItem .forPicAI a { display: block; border-radius: var(--cl-radius-lg); overflow: hidden; background: var(--cl-surface); aspect-ratio: 4 / 3; }
body.cl-legacy .avtoItem .forPicAI img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; transition: transform .35s ease; }
body.cl-legacy .avtoItem:hover .forPicAI img { transform: scale(1.03); }
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px 12px;
  padding: 4px 4px 4px 0 !important;
}
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > [class*="col-"] { float: none !important; padding: 0 !important; width: auto !important; }
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-12 { flex: 0 0 100%; }
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-12 > br { display: none; }
body.cl-legacy .avtoItem a.name {
  display: block;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--cl-text);
  padding-right: 120px;
  margin: 2px 0 2px;
}
body.cl-legacy .avtoItem a.name:hover { color: var(--cl-primary); }
body.cl-legacy .avtoItem .countdown {
  top: 0 !important;
  right: 0 !important;
  background: var(--cl-primary-soft);
  color: var(--cl-primary);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
body.cl-legacy .avtoItem .countdown .time::before { content: "⏱ "; }
body.cl-legacy .avtoItem ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.cl-legacy .avtoItem ul li {
  background: var(--cl-surface);
  color: var(--cl-text);
  border-radius: var(--cl-radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 !important;
  list-style: none;
}
body.cl-legacy .avtoItem ul li:empty { display: none; }
body.cl-legacy .avtoItem .proposal { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
body.cl-legacy .avtoItem .proposal > br { display: none; }
body.cl-legacy .avtoItem .proposal .btn { flex: 0 0 auto; }
body.cl-legacy .avtoItem .price,
body.cl-legacy .avtoItem .cost,
body.cl-legacy .avtoItem b { color: var(--cl-text); }

@media (max-width: 991px) {
  body.cl-legacy #filter_form { position: static; flex: 0 0 100%; max-width: 100%; margin-bottom: 20px; }
  body.cl-legacy .container-fluid > .paginator { flex: 0 0 100%; }
}
@media (max-width: 640px) {
  body.cl-legacy .avtoItem { grid-template-columns: 1fr; gap: 14px; padding: 12px !important; }
  body.cl-legacy .avtoItem a.name { padding-right: 0; font-size: 17px; }
  body.cl-legacy .avtoItem .countdown { position: static !important; display: inline-block; margin-bottom: 4px; }
  body.cl-legacy .paginator { justify-content: center; }
}

/* ==========================================================================
   КАРТКА АВТО (?act=car), АУКЦІОНИ, ІНФОРМАЦІЙНІ СТОРІНКИ
   ========================================================================== */
body.cl-legacy .detailsdiv,
body.cl-legacy .wrapper .detailsdiv { font-size: 15px; }
body.cl-page-car .container-fluid:not(header *) > .row,
body.cl-page-car .detailsdiv {
  background: var(--cl-white);
}
body.cl-page-car .nav-tabs {
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--cl-surface);
  border-radius: var(--cl-radius-lg);
  padding: 6px;
  margin-bottom: 16px;
}
body.cl-page-car .nav-tabs > li { float: none; margin: 0; }
body.cl-page-car .nav-tabs > li > a {
  border: 0 !important;
  border-radius: var(--cl-radius) !important;
  color: var(--cl-muted) !important;
  font-weight: 600;
  padding: 10px 16px;
  margin: 0;
  background: transparent !important;
}
body.cl-page-car .nav-tabs > li.active > a,
body.cl-page-car .nav-tabs > li > a:hover { background: var(--cl-white) !important; color: var(--cl-text) !important; }
body.cl-page-car .tab-content { padding: 4px 0; }
body.cl-page-car .detailsdiv ul { padding-left: 0; list-style: none; }
body.cl-page-car .detailsdiv ul li { padding: 8px 0; border-bottom: 1px solid var(--cl-border); }
body.cl-page-car .slick-slide img,
body.cl-page-car .detailsdiv img { border-radius: var(--cl-radius-lg); }
body.cl-page-car .slick-prev,
body.cl-page-car .slick-next {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--cl-shadow);
  z-index: 3;
}
body.cl-page-car .slick-prev:before,
body.cl-page-car .slick-next:before { color: var(--cl-text); opacity: 1; }
body.cl-page-car .countdown {
  display: inline-flex;
  background: var(--cl-primary-soft);
  color: var(--cl-primary);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Аукціони, «Про нас», «Як купити», FAQ, відгуки, команда */
body.cl-page-auctions .container-fluid:not(header *):not(footer *) .row,
body.cl-page-auctions .auction,
body.cl-legacy .auctionItem {
  margin-left: 0;
  margin-right: 0;
}
body.cl-page-auctions .container-fluid:not(header *):not(footer *) > .row,
body.cl-page-auctions .auctionItem {
  background: var(--cl-white);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-xl);
  padding: 16px;
  margin-bottom: 14px;
  transition: box-shadow .2s ease;
}
body.cl-page-auctions .container-fluid:not(header *):not(footer *) > .row:hover { box-shadow: var(--cl-shadow); }
body.cl-page-aboutus .page_banner img,
body.cl-page-howtobuy .page_banner img { width: 100%; border-radius: var(--cl-radius-xl); max-height: 360px; object-fit: cover; }
body.cl-page-aboutus .container p,
body.cl-page-howtobuy .container p,
body.cl-page-info .container p { max-width: 860px; font-size: 16px; color: var(--cl-text); }
body.cl-page-howtobuy .nav-tabs,
body.cl-page-faq .nav-tabs { border: 0; display: flex; flex-wrap: wrap; gap: 6px; background: var(--cl-surface); border-radius: var(--cl-radius-lg); padding: 6px; }
body.cl-page-howtobuy .nav-tabs > li > a,
body.cl-page-faq .nav-tabs > li > a { border: 0 !important; border-radius: var(--cl-radius) !important; font-weight: 600; color: var(--cl-muted) !important; }
body.cl-page-howtobuy .nav-tabs > li.active > a,
body.cl-page-faq .nav-tabs > li.active > a { background: var(--cl-white) !important; color: var(--cl-text) !important; }
body.cl-legacy .panel-group .panel { margin-bottom: 8px; }
body.cl-legacy .panel-group .panel-title > a { display: block; color: var(--cl-text); font-weight: 600; padding: 4px 0; }

/* ==========================================================================
   ВХІД / РЕЄСТРАЦІЯ / КАБІНЕТ
   ========================================================================== */
body.cl-page-login form,
body.cl-page-account form {
  max-width: 520px;
  margin: 8px auto 40px;
  background: var(--cl-surface);
  border-radius: var(--cl-radius-xl);
  padding: 28px;
}
body.cl-page-login form .form-group,
body.cl-page-account form .form-group { margin-bottom: 14px; }
body.cl-page-login form .btn,
body.cl-page-account form .btn { width: 100%; padding: 14px 20px !important; font-size: 16px !important; }
body.cl-page-login .help-block,
body.cl-page-account .help-block { color: var(--cl-muted); font-size: 13px; }

/* ---------- Підвал і плаваюча кнопка не чіпаємо; лише відступ від контенту ---------- */
body.cl-legacy footer { margin-top: 48px; }

/* ---- Фільтр: діапазони «Від … до …» у дві колонки, списки з чекбоксами ---- */
body.cl-legacy .filtrPan .well:has(> span.col-lg-2) {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 10px;
}
body.cl-legacy .filtrPan .well:has(> span.col-lg-2) input.col-lg-3 { width: 100% !important; margin: 0; }
body.cl-legacy .filtrPan .well:has(> span.col-lg-2) > sup { grid-column: 2; }
body.cl-legacy .filtrPan .well_1,
body.cl-legacy .filtrPan .well_2 { line-height: 1.9; }

/* Кнопки всередині таблиць — компактні */
body.cl-legacy .table .btn { padding: 8px 14px !important; font-size: 13px !important; margin-top: 4px; }

/* ---- Інформаційні сторінки (Про нас, Як купити, FAQ, Інформація): банер, заголовки, вкладки ---- */
body.cl-legacy .page_banner {
  max-width: var(--cl-page-width);
  margin: 0 auto 8px;
  padding: 0 var(--cl-gutter);
  box-sizing: border-box;
}
body.cl-legacy .page_banner img {
  display: block;
  width: 100%;
  height: clamp(180px, 26vw, 340px);
  object-fit: cover;
  border-radius: var(--cl-radius-xl);
  background: var(--cl-surface);
}
body.cl-legacy .content .headline,
body.cl-legacy .block .headline {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 28px 0 18px !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  color: var(--cl-text) !important;
  text-shadow: none !important;
  text-align: left !important;
}
body.cl-legacy .content p.headline:empty { display: none; }
body.cl-legacy .content .line,
body.cl-legacy .content .sub-line { display: none !important; }
body.cl-legacy .content .block { padding: 0 0 8px; }
body.cl-legacy .content h3 { margin-top: 8px; }
body.cl-legacy .content img.gym-club,
body.cl-legacy .content .col-md-6 > img {
  width: 100%;
  border-radius: var(--cl-radius-xl);
  object-fit: cover;
}
body.cl-legacy .content .row + .row,
body.cl-legacy .content .container > .row { margin-bottom: 24px; }

/* Вертикальні вкладки-«пігулки» (Як купити) */
body.cl-legacy .nav-pills.services,
body.cl-legacy .nav-pills.nav-stacked {
  background: var(--cl-surface);
  border-radius: var(--cl-radius-xl);
  padding: 8px;
}
body.cl-legacy .nav-pills > li > a {
  border-radius: var(--cl-radius) !important;
  color: var(--cl-text) !important;
  font-weight: 600;
  padding: 12px 16px;
  background: transparent !important;
  border: 0 !important;
}
body.cl-legacy .nav-pills > li > a i { color: var(--cl-primary); margin-right: 10px; width: 16px; text-align: center; }
body.cl-legacy .nav-pills > li > a:hover { background: var(--cl-white) !important; }
body.cl-legacy .nav-pills > li.active > a,
body.cl-legacy .nav-pills > li.active > a:hover,
body.cl-legacy .nav-pills > li.active > a:focus { background: var(--cl-primary) !important; color: #fff !important; }
body.cl-legacy .nav-pills > li.active > a i { color: #fff; }
body.cl-legacy .nav-stacked > li + li { margin-top: 4px; }
body.cl-legacy .tab-content .tab-pane { font-size: 15px; }
body.cl-legacy .tab-content .tab-pane h4 { font-size: 17px; margin: 18px 0 8px; }
body.cl-legacy .content .nav-pills.services > li:not(.active) > a,
body.cl-legacy .content .nav-pills.nav-stacked > li:not(.active) > a { color: var(--cl-text) !important; }

/* ---- Поля з підписом-префіксом (Вхід, Реєстрація, Кабінет) ---- */
body.cl-legacy .input-group { display: flex; width: 100%; }
body.cl-legacy .input-group-addon {
  display: flex; align-items: center; gap: 6px;
  width: auto; white-space: nowrap;
  background: var(--cl-surface-2) !important;
  border: 1px solid var(--cl-border) !important;
  border-right: 0 !important;
  border-radius: var(--cl-radius) 0 0 var(--cl-radius) !important;
  color: var(--cl-muted) !important;
  font-size: 14px; font-weight: 500;
  padding: 0 14px !important;
}
body.cl-legacy .input-group-addon { flex: 0 0 auto; width: auto !important; max-width: 60%; overflow: visible !important; }
body.cl-page-login .input-group-addon,
body.cl-page-account .input-group-addon { min-width: 140px; }
body.cl-legacy .input-group > .input-group-addon:last-child:not(:first-child) {
  border-left: 0 !important; border-right: 1px solid var(--cl-border) !important;
  border-radius: 0 var(--cl-radius) var(--cl-radius) 0 !important;
}
body.cl-legacy .input-group > .input-group-addon:first-child ~ .form-control:not(:last-child),
body.cl-legacy .input-group > .input-group-addon:first-child ~ input:not(:last-child) { border-radius: 0 !important; }
body.cl-legacy .input-group-addon i { flex: 0 0 auto; display: inline-block; min-width: 20px; text-align: center; }
body.cl-legacy .input-group .form-control,
body.cl-legacy .input-group input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--cl-radius) var(--cl-radius) 0 !important; }
body.cl-legacy .input-group .form-control:first-child { border-radius: var(--cl-radius) !important; }

/* Вкладені .container (старі шаблони) не додають зайвих відступів */
body.cl-legacy .container .container,
body.cl-legacy .container-fluid .container,
body.cl-legacy .container .container-fluid { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }

/* ======================================================================
   Сторінка авто (?act=car) — header1.tpl, body.cl-page-car
   ====================================================================== */
body.cl-page-car > section.car-title,
body.cl-page-car > .row {
  max-width: var(--cl-page-width);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cl-gutter);
  padding-right: var(--cl-gutter);
  box-sizing: border-box;
}
body.cl-page-car > br { display: none; }
body.cl-page-car section.afMnu h1 { font-size: clamp(14px, 1.2vw, 16px) !important; color: var(--cl-muted) !important; font-weight: 500 !important; margin: 0 0 6px !important; }
body.cl-page-car section.car-title h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  text-transform: none;
  margin: 0 0 20px;
  color: var(--cl-text);
}
body.cl-page-car > .row { display: flex; flex-wrap: wrap; gap: 28px 0; }
body.cl-page-car > .row::before, body.cl-page-car > .row::after { display: none; }
body.cl-page-car > .row > [class*="col-"] { float: none; }
body.cl-page-car > .row > .col-lg-5 { padding-left: 0; padding-right: 28px; }
body.cl-page-car > .row > .forFiltr2 { padding: 0; }

/* Галерея */
body.cl-page-car .avto_slider { border-radius: var(--cl-radius-xl); overflow: hidden; background: var(--cl-surface); margin-bottom: 10px; }
body.cl-page-car .avto_slider img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 !important; }
body.cl-page-car .avto_slider_nav { padding: 0 36px; position: relative; }
body.cl-page-car .avto_slider_nav .slick-slide { padding: 0 4px; }
body.cl-page-car .avto_slider_nav img { border-radius: var(--cl-radius-sm) !important; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; cursor: pointer; opacity: .75; transition: opacity .15s ease; }
body.cl-page-car .avto_slider_nav .slick-current img, body.cl-page-car .avto_slider_nav img:hover { opacity: 1; outline: 2px solid var(--cl-primary); outline-offset: -2px; }
body.cl-page-car .avto_slider_nav .slick-prev,
body.cl-page-car .avto_slider_nav .slick-next {
  width: 32px !important; height: 32px !important; top: 50% !important; transform: translateY(-50%);
  border-radius: 50% !important; background: var(--cl-white) !important; border: 1px solid var(--cl-border) !important;
  box-shadow: none !important; z-index: 2;
}
body.cl-page-car .avto_slider_nav .slick-prev { left: 0 !important; }
body.cl-page-car .avto_slider_nav .slick-next { right: 0 !important; }
body.cl-page-car .avto_slider_nav .slick-prev:before,
body.cl-page-car .avto_slider_nav .slick-next:before { color: var(--cl-primary) !important; font-size: 18px; }

/* Інформація про аукціон */
body.cl-page-car .forFiltr2 > .time_right,
body.cl-page-car .forFiltr2 > .time_left { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 10px 0; vertical-align: middle; }
body.cl-page-car .forFiltr2 > .time_right img.a_type { width: 32px; height: 32px; object-fit: contain; }
body.cl-page-car .forFiltr2 > .time_left {
  float: none;
  background: var(--cl-primary-soft); color: var(--cl-primary);
  border-radius: 999px; padding: 8px 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
body.cl-page-car .forFiltr2 > br { display: none; }
body.cl-page-car .forFiltr2 > .time_right + .time_right { display: flex; }
body.cl-page-car .forFiltr2 a.blue { font-weight: 600; }

/* Характеристики: підписи й значення в рядках однакової висоти */
body.cl-page-car .forOpisanLeft,
body.cl-page-car .forFiltr2 > .forOpisanRight:not(:has(> .btn)) {
  background: var(--cl-surface);
  padding: 8px 16px !important;
  margin-top: 6px;
}
body.cl-page-car .forOpisanLeft { border-radius: var(--cl-radius-lg) 0 0 var(--cl-radius-lg); clear: left; }
body.cl-page-car .forFiltr2 > .forOpisanRight:not(:has(> .btn)) { border-radius: 0 var(--cl-radius-lg) var(--cl-radius-lg) 0; }
body.cl-page-car .forOpisanLeft ul,
body.cl-page-car .forOpisanRight ul { margin: 0; padding: 0; list-style: none; }
body.cl-page-car .forOpisanLeft li,
body.cl-page-car .forOpisanRight ul li {
  height: 36px; line-height: 36px; padding: 0 !important;
  border-bottom: 1px solid var(--cl-border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px;
}
body.cl-page-car .forOpisanLeft li { color: var(--cl-muted); }
body.cl-page-car .forOpisanRight ul li { color: var(--cl-text); font-weight: 600; }
body.cl-page-car .forOpisanLeft ul:last-child li,
body.cl-page-car .forOpisanRight ul:last-child li { border-bottom: 0; }
body.cl-page-car .forOpisanLeft hr,
body.cl-page-car .forOpisanRight hr { display: none; }
body.cl-page-car .forOpisanLeft ul:empty,
body.cl-page-car .forOpisanRight ul:empty { display: none; }

/* Колонка дій */
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) {
  display: flex; flex-direction: column; gap: 8px; padding-left: 16px !important; padding-right: 0 !important; margin-top: 6px;
}
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > .otstup { display: none; }
body.cl-page-car .forFiltr2 .btn-block { margin: 0 !important; text-align: center; white-space: normal; }
body.cl-page-car .forFiltr2 .btn-warning1 {
  background: var(--cl-white) !important; color: var(--cl-text) !important; border-color: var(--cl-border) !important;
}
body.cl-page-car .forFiltr2 .btn-info {
  background: var(--cl-primary-soft) !important; color: var(--cl-primary) !important;
}
body.cl-page-car .forFiltr2 .btn-info:hover { background: #e4eafc !important; }
body.cl-page-car .forFiltr2 .add2favorites {
  background: var(--cl-white) !important; color: var(--cl-primary) !important; border-color: var(--cl-primary) !important;
}
body.cl-page-car .forFiltr2 .proposalInner {
  background: var(--cl-primary) !important; color: #fff !important; border-color: var(--cl-primary) !important;
  padding: 14px 20px !important; font-size: 16px !important;
}
body.cl-page-car .forFiltr2 .proposalInner:hover { background: var(--cl-primary-hover) !important; }

/* Ціна й розрахунок */
body.cl-page-car .forFiltr2 > hr { display: none; }
body.cl-page-car .forFiltr2 > .col-lg-6:not(:empty) {
  background: var(--cl-surface);
  border-radius: var(--cl-radius-xl);
  padding: 18px 20px !important;
  margin-top: 16px;
}
body.cl-page-car .forFiltr2 > .col-lg-6 > h4 {
  float: none; width: auto; padding: 0;
  font-size: 18px; font-weight: 600; color: var(--cl-text); margin: 0 0 10px;
}
body.cl-page-car .forFiltr2 > .col-lg-6 > p.col-lg-12,
body.cl-page-car .forFiltr2 > .col-lg-6 > h4 > p.col-lg-12 { float: none; width: auto; padding: 0; }
body.cl-page-car [id^="toggleCalcBtn_"] {
  background: var(--cl-white); border: 1px solid var(--cl-border); border-radius: var(--cl-radius);
  color: var(--cl-primary); font-weight: 600; padding: 10px 14px; margin: 4px 0 10px; cursor: pointer;
}
body.cl-page-car [id^="toggleCalcBtn_"]:hover { border-color: var(--cl-primary); }
body.cl-page-car .calc-preview-switcher { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
body.cl-page-car .calc-preview-switcher > div { flex: 0 0 100%; }
body.cl-page-car .calc-preview-switcher .btn { margin: 0 !important; }
body.cl-page-car [class^="calc-preview-box-"] { background: var(--cl-white); border-radius: var(--cl-radius-lg); padding: 12px 14px; margin-top: 10px; }
body.cl-page-car [class^="calc-preview-box-"] h4 { font-size: 14px; margin: 0 0 6px; }
body.cl-page-car [id^="fullCalc_"] { background: var(--cl-white); border-radius: var(--cl-radius-lg); padding: 12px 14px; margin-top: 8px; line-height: 1.7; }

@media (max-width: 991px) {
  body.cl-page-car > .row > .col-lg-5 { padding-right: 0; width: 100%; }
  body.cl-page-car > .row > .forFiltr2 { width: 100%; }
}
@media (max-width: 767px) {
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) { padding-left: 0 !important; margin-top: 16px; }
}
/* Блок ціни/розрахунку — під характеристиками, поруч із колонкою дій */
@media (min-width: 768px) {
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) { float: right; }
  body.cl-page-car .forFiltr2 > .otstup { display: none; }
  body.cl-page-car .forFiltr2 > .col-lg-6:not(:empty) { clear: left; float: left; width: calc(66.666% - 16px); }
}


/* ==========================================================================
   v3 (2026-10-22): біло-синя мінімалістична гама, компактні картки,
   бокова панель на сторінках «Виграні / Обране / Ставки», прокрутка фільтра
   ========================================================================== */

/* --- Кнопки «danger» — у синій гамі (без червоного) --- */
body.cl-legacy .btn-danger {
  background: var(--cl-white) !important;
  color: var(--cl-primary) !important;
  border-color: #cdd8f6 !important;
}
body.cl-legacy .btn-danger:hover { background: var(--cl-primary-soft) !important; border-color: var(--cl-primary) !important; }
body.cl-legacy .btn-warning1 { background: var(--cl-white) !important; color: var(--cl-text) !important; border: 1px solid var(--cl-border) !important; }

/* --- Заголовок сторінки трохи легший --- */
body.cl-legacy h1, body.cl-legacy .afMnu h1 { font-size: clamp(24px, 2.6vw, 34px) !important; margin-bottom: 16px !important; }
body.cl-legacy section.afMnu .container { padding-top: 20px; padding-bottom: 4px; }

/* --- Сітка «панель зліва + список» для всіх списків авто (каталог, виграні, обране, ставки) --- */
body.cl-legacy .container-fluid:has(> .forFiltr1) {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 28px;
}
body.cl-legacy .container-fluid:has(> .forFiltr1)::before,
body.cl-legacy .container-fluid:has(> .forFiltr1)::after { display: none !important; }
body.cl-legacy .container-fluid > .forFiltr1 { flex: 0 0 280px; max-width: 280px !important; order: 1; }
@media (min-width: 992px) {
  body.cl-legacy .container-fluid:has(> .forFiltr1) {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas: "filter pager" "filter list" "filter pager2";
    grid-template-rows: auto 1fr auto;
    column-gap: 28px;
  }
  body.cl-legacy .container-fluid:has(> #filter_form) { grid-template-columns: 280px minmax(0, 1fr); }
  body.cl-legacy .container-fluid > .forFiltr1 { grid-area: filter; max-width: none !important; }
  /* панель «липне», але її можна прокрутити до кінця, якщо вона вища за екран */
  body.cl-legacy #filter_form,
  body.cl-legacy .container-fluid > .forFiltr1 {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c3cde6 transparent;
    border-radius: var(--cl-radius-xl);
  }
}
@media (max-width: 991px) {
  body.cl-legacy .container-fluid > .forFiltr1 { flex: 0 0 100%; max-width: 100% !important; margin-bottom: 16px; }
}

/* --- Бокова панель: компактніша, біло-синя --- */
body.cl-legacy .filtrPan { padding: 12px !important; border: 1px solid var(--cl-border); }
body.cl-legacy .filtrPan + .filtrPan { margin-top: 12px !important; }
body.cl-legacy .filtrPan .collapse_btn,
body.cl-legacy .filtrPan .btn-warning {
  padding: 11px 14px !important;
  font-size: 14px !important;
  border: 1px solid var(--cl-border) !important;
  background: var(--cl-white) !important;
  color: var(--cl-text) !important;
}
body.cl-legacy .filtrPan .collapse_btn:hover,
body.cl-legacy .filtrPan .btn-warning:hover { border-color: var(--cl-primary) !important; color: var(--cl-primary) !important; }
body.cl-legacy .filtrPan .otstup { height: 6px; }
body.cl-legacy .filtrPan .otstup1 { height: 8px; }
/* статистика на «Виграні/Ставки/Обране» — підпис + значення */
body.cl-legacy .forFiltr1 .filtrPan h3,
body.cl-legacy .forFiltr1 .filtrPan h4,
body.cl-legacy .forFiltr1 .filtrPan h5,
body.cl-legacy .forFiltr1 .filtrPan .panel-heading {
  font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .03em;
  color: var(--cl-muted) !important; text-align: left !important; margin: 10px 4px 6px !important; padding: 0 !important;
}
body.cl-legacy .forFiltr1 .filtrPan > .well,
body.cl-legacy .forFiltr1 .filtrPan .panel-body > .well {
  background: var(--cl-white) !important; border: 1px solid var(--cl-border) !important;
  padding: 10px 14px !important; font-weight: 600; font-size: 15px; color: var(--cl-navy); max-height: none;
}
body.cl-legacy .forFiltr1 .filtrPan .btn-block { padding: 10px 14px !important; font-size: 13px !important; }
body.cl-legacy .filtrPan select { min-height: 40px; }

/* --- Картка авто: компактна --- */
body.cl-legacy .avtoItem {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  padding: 12px !important;
  margin: 0 0 12px !important;
  border-radius: 18px;
  border: 1px solid var(--cl-border);
  box-shadow: none;
}
body.cl-legacy .avtoItem:hover { border-color: #cfd9f3; box-shadow: 0 8px 24px rgba(47, 88, 205, 0.08); }
body.cl-legacy .avtoItem .forPicAI a { border-radius: 12px; }
body.cl-legacy .avtoItem .forPicAI > * + * { margin-top: 8px; }
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) { gap: 8px 10px; padding: 2px 2px 2px 0 !important; }
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-12:first-child:empty,
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-12:first-child:not(:has(*:not(br))) { display: none; }
body.cl-legacy .avtoItem a.name {
  font-size: 16px; line-height: 1.35; font-weight: 600; padding-right: 120px; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.cl-legacy .avtoItem .countdown { padding: 5px 10px; font-size: 13px; }
body.cl-legacy .avtoItem ul { gap: 6px; }
body.cl-legacy .avtoItem ul li {
  background: var(--cl-primary-soft);
  color: var(--cl-navy);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12.5px;
}
/* рядок ставки: поле + кнопка в один рядок */
body.cl-legacy .avtoItem .proposal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
body.cl-legacy .avtoItem .proposal > .otstup { display: none; }
body.cl-legacy .avtoItem .proposal .input-group { flex: 0 1 230px; width: auto; }
body.cl-legacy .avtoItem .proposal .input-group .form-control,
body.cl-legacy .avtoItem .proposal .input-group input { min-height: 40px !important; padding: 8px 12px !important; font-size: 14px !important; }
body.cl-legacy .avtoItem .proposal .input-group-addon { padding: 0 10px !important; font-size: 13px; }
body.cl-legacy .avtoItem .proposal .carProposal,
body.cl-legacy .avtoItem .proposal .btn-block {
  flex: 0 0 auto; width: auto !important; display: inline-flex !important; align-items: center;
  background: var(--cl-primary) !important; color: #fff !important; border-color: var(--cl-primary) !important;
  padding: 10px 16px !important; font-size: 14px !important; margin: 0 !important;
}
body.cl-legacy .avtoItem .proposal .carProposal:hover { background: var(--cl-primary-hover) !important; }
body.cl-legacy .avtoItem .proposal > a:not(.btn) { font-size: 13px; display: inline-flex; align-items: center; }
body.cl-legacy .avtoItem .proposal > a[style*="green"] { color: var(--cl-muted) !important; }
body.cl-legacy .avtoItem .proposal > a[style*="green"]:hover { color: var(--cl-primary) !important; }
/* блок розрахунку — компактно */
body.cl-legacy .avtoItem [class*="col-lg-9"] { flex: 0 0 100%; font-size: 13px; }
body.cl-legacy .avtoItem [class*="col-lg-9"] > strong { font-size: 14px; color: var(--cl-text); }
body.cl-legacy .avtoItem [id^="summaryBlock_"] {
  border: 1px solid var(--cl-border) !important; background: var(--cl-surface-2) !important;
  border-radius: 10px; padding: 6px 10px !important; margin: 6px 0 !important;
}
body.cl-legacy .avtoItem [id^="toggleCalcBtn_"],
body.cl-legacy .avtoItem [id^="closeCalcBtn_"] {
  background: var(--cl-white); border: 1px solid var(--cl-border); border-radius: 8px;
  padding: 5px 12px !important; font-size: 13px; cursor: pointer;
}
body.cl-legacy .avtoItem [id^="fullCalc_"] { border: 1px solid var(--cl-border) !important; border-radius: 10px; background: var(--cl-white); }
body.cl-legacy .avtoItem .calc-preview-switcher {
  border: 1px solid var(--cl-border) !important; background: var(--cl-surface-2) !important;
  border-radius: 10px; padding: 8px 10px !important; margin: 6px 0 !important;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
body.cl-legacy .avtoItem .calc-preview-switcher > div { flex: 0 0 100%; margin: 0 !important; font-size: 12px; }
body.cl-legacy .avtoItem .calc-preview-switcher .btn { padding: 5px 10px !important; font-size: 12px !important; margin: 0 !important; }
body.cl-legacy .avtoItem [class*="calc-preview-box-"] { border: 1px dashed #c3cde6 !important; border-radius: 10px; background: var(--cl-white); }
/* прогноз ціни під фото */
body.cl-legacy .avtoItem .forPicAI > div:not(:empty) { border-radius: 12px !important; border-color: var(--cl-border) !important; font-size: 12.5px; }
/* обране (зірочка) */
body.cl-legacy .avtoItem a.favorites { top: 10px !important; right: 12px !important; color: var(--cl-primary); }

@media (max-width: 1199px) {
  body.cl-legacy .avtoItem { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body.cl-legacy .avtoItem { grid-template-columns: 1fr; }
  body.cl-legacy .avtoItem .proposal .input-group { flex: 1 1 100%; }
  body.cl-legacy .avtoItem .proposal .carProposal { flex: 1 1 100%; justify-content: center; }
}

/* --- Інформаційні повідомлення («Нічого не знайдено») --- */
body.cl-legacy .alert { border: 1px solid #dbe4fb; }

/* --- Підвал на внутрішніх сторінках — як на головній (темний текст) --- */
body.cl-legacy .footer-landing a { color: #414042; }
body.cl-legacy .footer-landing a:hover { color: var(--cl-primary); }
body.cl-legacy .footer-landing .footer-item a { color: #232323; }

/* --- Сторінка авто: компактніше --- */
body.cl-page-car section.afMnu .container { padding-top: 14px; padding-bottom: 0; }
body.cl-page-car section.afMnu h1 { margin: 0 !important; }
body.cl-page-car section.car-title h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 14px; }
body.cl-page-car > .row { gap: 20px 0; }
body.cl-page-car > .row > .col-lg-5 { padding-right: 20px; }
body.cl-page-car .forOpisanLeft li,
body.cl-page-car .forOpisanRight ul li { height: 32px; line-height: 32px; font-size: 13.5px; }
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) { gap: 6px; }
body.cl-page-car .forFiltr2 .btn-block { padding: 9px 12px !important; font-size: 13.5px !important; }
body.cl-page-car .forFiltr2 .proposalInner { padding: 12px 16px !important; font-size: 15px !important; }
body.cl-page-car .forFiltr2 > .col-lg-6:not(:empty) { padding: 14px 16px !important; margin-top: 12px; }
body.cl-page-car .avto_slider_nav .slick-slide { padding: 0 3px; }

/* v3 правки */
body.cl-legacy .avtoItem ul.dropdown-menu { display: none !important; }
body.cl-legacy .avtoItem.open > ul.dropdown-menu,
body.cl-legacy .avtoItem .open > ul.dropdown-menu {
  display: flex !important; flex-direction: column; gap: 4px; padding: 6px !important;
  left: auto !important; right: 12px !important; top: 44px !important; width: auto !important; min-width: 180px;
  border: 1px solid var(--cl-border); border-radius: 12px; box-shadow: var(--cl-shadow); background: #fff;
}
body.cl-legacy .avtoItem ul.dropdown-menu > li { background: transparent !important; padding: 0 !important; font-size: 13px; }
body.cl-legacy .avtoItem ul.dropdown-menu > li > a { display: block; padding: 8px 10px; border-radius: 8px; }
body.cl-legacy .avtoItem ul.dropdown-menu > li > a:hover { background: var(--cl-primary-soft); }
body.cl-legacy .avtoItem ul.dropdown-menu > li.divider { display: none; }
body.cl-legacy .avtoItem [class*="col-lg-9"] > strong,
body.cl-legacy .avtoItem [class*="col-lg-9"] > .max_bet_user { display: block; line-height: 1.5; }
body.cl-legacy .filtrPan .btn-warning:not(:has(i)),
body.cl-legacy .filtrPan .collapse_btn:not(:has(i)) { flex-direction: row; justify-content: flex-start; }
/* сторінка авто: кнопки «попереднє / до списку / наступне» — маленькі, в рядку із заголовком */
body.cl-page-car .container-fluid > br { display: none; }
body.cl-page-car .container-fluid > .detailsdiv {
  float: right; margin: -48px 0 0 !important; display: flex; gap: 6px; position: relative; z-index: 2;
}
body.cl-page-car .container-fluid > .detailsdiv > br { display: none; }
body.cl-page-car .container-fluid > .detailsdiv .btn {
  width: 38px; height: 38px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--cl-white) !important; color: var(--cl-primary) !important; border: 1px solid var(--cl-border) !important;
  font-size: 14px !important;
}
body.cl-page-car .container-fluid > .detailsdiv .btn:hover { border-color: var(--cl-primary) !important; background: var(--cl-primary-soft) !important; }
body.cl-page-car section.car-title h2 { margin-top: 4px !important; font-size: clamp(22px, 2.2vw, 28px) !important; font-weight: 600 !important; }
@media (max-width: 640px) {
  body.cl-page-car .container-fluid > .detailsdiv { float: none; margin: 0 0 8px !important; }
}


/* ==========================================================================
   v4 (2026-10-22): більше фото в картці, без порожніх рамок, фільтр,
   вирівнювання на сторінці авто
   ========================================================================== */
/* фільтр: коли панель прокручена до кінця, далі прокручується сторінка
   (раніше прокрутка «застрягала» в панелі, і її низ лишався за краєм екрана) */
@media (min-width: 992px) {
  body.cl-legacy #filter_form,
  body.cl-legacy .container-fluid > .forFiltr1 { overscroll-behavior: auto; }
}

/* картка: фото більше */
body.cl-legacy .avtoItem { grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1399px) { body.cl-legacy .avtoItem { grid-template-columns: 300px minmax(0, 1fr); } }
@media (max-width: 1199px) { body.cl-legacy .avtoItem { grid-template-columns: 240px minmax(0, 1fr); } }
@media (max-width: 640px)  { body.cl-legacy .avtoItem { grid-template-columns: 1fr; } }
/* порожні службові блоки в картці не займають місця */
body.cl-legacy .avtoItem > [class*="col-lg-12"]:empty,
body.cl-legacy .avtoItem > [class*="col-lg-12"]:not(.forPicAI):not(:has(*:not(br))) { display: none !important; }
body.cl-legacy .avtoItem [class*="col-lg-9"] > p:empty,
body.cl-legacy .avtoItem [class*="col-lg-9"] > .price_usd:empty,
body.cl-legacy .avtoItem [class*="col-lg-9"] > .max_bet_user:not(:has(a:not(:empty))) { display: none; }

/* блок розрахунку — без порожніх рамок: кнопка й перемикач в один рядок */
body.cl-legacy .avtoItem [id^="summaryBlock_"], body.cl-legacy [id^="summaryBlock_"] {
  border: 0 !important; background: transparent !important; padding: 0 !important; margin: 6px 0 !important;
  display: inline-block !important;
}
body.cl-legacy .avtoItem [id^="toggleCalcBtn_"], body.cl-legacy [id^="toggleCalcBtn_"] {
  background: var(--cl-primary-soft) !important; border: 0 !important; border-radius: 8px !important;
  color: var(--cl-primary) !important; font-weight: 600 !important; padding: 6px 12px !important; margin: 0 !important; font-size: 13px !important;
}
body.cl-legacy .avtoItem [id^="toggleCalcBtn_"]:hover, body.cl-legacy [id^="toggleCalcBtn_"]:hover { background: #e4eafc !important; }
body.cl-legacy .avtoItem .calc-preview-switcher, body.cl-legacy .calc-preview-switcher {
  border: 0 !important; background: transparent !important; padding: 0 !important; margin: 4px 0 6px !important;
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px !important;
}
body.cl-legacy .avtoItem .calc-preview-switcher > div, body.cl-legacy .calc-preview-switcher > div { flex: 0 0 auto !important; margin: 0 6px 0 0 !important; font-size: 12px; color: var(--cl-muted); }
body.cl-legacy .avtoItem .calc-preview-switcher > div strong, body.cl-legacy .calc-preview-switcher > div strong { font-weight: 500; }
body.cl-legacy .avtoItem .calc-preview-switcher .btn, body.cl-legacy .calc-preview-switcher .btn {
  padding: 5px 10px !important; font-size: 12px !important; margin: 0 !important;
  background: var(--cl-white) !important; border: 1px solid var(--cl-border) !important; color: var(--cl-text) !important;
}
body.cl-legacy .avtoItem .calc-preview-switcher .btn:hover, body.cl-legacy .calc-preview-switcher .btn:hover { border-color: var(--cl-primary) !important; color: var(--cl-primary) !important; }

/* сторінка авто: рядок «Назва» на всю ширину — характеристики (підписи й значення) починаються на одному рівні */
body.cl-page-car .forFiltr2 > .time_left ~ .time_right,
body.cl-page-car .forFiltr2 > .time_right ~ .time_right { display: flex !important; width: 100%; float: none; clear: both; }
body.cl-page-car .forOpisanLeft,
body.cl-page-car .forFiltr2 > .forOpisanRight:not(:has(> .btn)) { margin-top: 4px !important; }
/* сторінка авто: блок ціни компактніше, примітки дрібніше */
body.cl-page-car .forFiltr2 > .col-lg-6 > p.blue,
body.cl-page-car .forFiltr2 > .col-lg-6 > p[class*="blue"] { font-size: 12.5px; line-height: 1.5; color: var(--cl-muted) !important; margin: 8px 0 0; }
body.cl-page-car .forFiltr2 > .col-lg-6 > h4 { font-size: 16px; }
body.cl-page-car .forFiltr2 > .row:not(:has(*:not(:empty))) { display: none; }
/* сторінка авто: менше порожнього місця між блоками внизу */
body.cl-page-car > .otstup { height: 6px; }
body.cl-page-car > hr { max-width: var(--cl-page-width); margin: 12px auto; border-color: var(--cl-border); }
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > a:not(.btn) { display: inline-flex; width: auto; }
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > a[style*="green"] { color: var(--cl-muted) !important; }

/* ==========================================================================
   v5 (2026-10-22): картка авто — стабільна сітка для будь-яких прав користувача
   Елементи картки (cars.tpl) і хто їх бачить:
     фото ................................. усі
     тип/назва аукціону ................... користувач / адмін (назва — статус ≥5)
     таймер ............................... усі, крім «Виграні» і спец. аукціонів
     характеристики (2 рядки) ............. усі
     поле ставки + кнопка ................. користувач, авто в торгах
     іконки ціни/донора, «Приховати» ...... адмін
     «Ваша ставка» ........................ якщо є ставка
     ціна й розрахунок .................... користувач, якщо є ставка
     аналітика ринку («Немає ціни…») ...... статус ≥5
     статус розподілу / меню .............. «Виграні» (меню — адмін)
     зірочка «Обране» / індикатор ......... користувач / адмін
   Фото завжди ліворуч у фіксованій пропорції 4:3 і не розтягується, аналітика ринку — під текстом, а не під фото.
   ========================================================================== */
body.cl-legacy .avtoItem {
  grid-template-columns: 300px minmax(0, 1fr);
  grid-auto-rows: auto;
  column-gap: 20px;
  row-gap: 8px;
  align-items: start;
}
body.cl-legacy .avtoItem > .forPicAI { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
body.cl-legacy .avtoItem > .forPicAI a { aspect-ratio: 4 / 3; width: 100%; }
body.cl-legacy .avtoItem > [class*="col-lg-8"] { grid-column: 2; grid-row: 1; }
body.cl-legacy .avtoItem > [class*="col-lg-12"] { grid-column: 2; grid-row: 2; }
body.cl-legacy .avtoItem > [class*="col-lg-12"] > div { margin: 0 !important; border-radius: 12px !important; box-shadow: none !important; }
@media (max-width: 1199px) { body.cl-legacy .avtoItem { grid-template-columns: 240px minmax(0, 1fr); } }

/* порожній блок ставки (гість / авто не в торгах) не займає місця */
body.cl-legacy .avtoItem .proposal:not(:has(*:not(br))) { display: none !important; }
body.cl-legacy .avtoItem .proposal > br { display: none; }

/* характеристики — окремий блок у два рядки по три значення */
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-4:has(> ul),
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-3:not(.proposal):has(> ul) {
  flex: 0 0 100% !important;
  background: var(--cl-surface-2);
  border: 1px solid var(--cl-border);
  padding: 0 !important;
}
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-4:has(> ul) { border-radius: 12px 12px 0 0; border-bottom-style: dashed; }
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-3:not(.proposal):has(> ul) { border-radius: 0 0 12px 12px; border-top: 0; margin-top: -8px !important; }
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-4 > ul,
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-3:not(.proposal) > ul {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0 !important;
}
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-4 > ul > li,
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-3:not(.proposal) > ul > li {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500;
  color: var(--cl-navy) !important;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-4 > ul > li + li,
body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-3:not(.proposal) > ul > li + li { border-left: 1px solid var(--cl-border); }
body.cl-legacy .avtoItem ul li:empty { display: block; }

/* телефон: фото на всю ширину, далі текст і блоки */
@media (max-width: 640px) {
  body.cl-legacy .avtoItem { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  body.cl-legacy .avtoItem > .forPicAI,
  body.cl-legacy .avtoItem > [class*="col-lg-8"],
  body.cl-legacy .avtoItem > [class*="col-lg-12"] { grid-column: 1; grid-row: auto; }
  body.cl-legacy .avtoItem a.name { padding-right: 0; -webkit-line-clamp: 3; }
  body.cl-legacy .avtoItem .countdown { position: static !important; display: inline-flex; order: -1; }
  body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-4 > ul > li,
  body.cl-legacy .avtoItem > [class*="col-"]:not(.forPicAI) > .col-lg-3:not(.proposal) > ul > li { padding: 8px !important; font-size: 12px !important; white-space: normal; }
  body.cl-legacy .avtoItem a.favorites { top: 18px !important; right: 18px !important; background: #fff; border-radius: 50%; width: 34px; height: 34px; display: flex !important; align-items: center; justify-content: center; box-shadow: var(--cl-shadow); }
}
/* «Виграні»: статус розподілу — акуратний бейдж у правому верхньому куті */
body.cl-legacy .avtoItem .dist_status {
  top: 12px !important; right: 12px !important; left: auto !important;
  border-radius: 999px !important; padding: 4px 10px !important;
  font-size: 12px !important; font-weight: 600; line-height: 1.4 !important;
  border: 1px solid var(--cl-border) !important; background: #fff !important; color: var(--cl-muted) !important;
}
body.cl-legacy .avtoItem .dist_status.distributed { background: #edf9f1 !important; color: #17703d !important; border-color: #cdebd8 !important; }
body.cl-legacy .avtoItem .dist_status.rejected { background: #fff1f1 !important; color: #b4232a !important; border-color: #f3c6c7 !important; }
body.cl-legacy .avtoItem .dist_status.waiting { background: var(--cl-primary-soft) !important; color: var(--cl-primary) !important; border-color: #dbe4fb !important; }
@media (max-width: 640px) { body.cl-legacy .avtoItem .dist_status { top: 18px !important; right: 18px !important; } }


/* ==========================================================================
   v6 (2026-10-22): «гумова» сторінка — контент займає всю ширину екрана, як шапка й підвал,
   а на великих екранах (або при зменшеному масштабі браузера) елементи пропорційно збільшуються.
   Масштаб застосовується до всієї сторінки (шапка, вміст, підвал) — пропорції однакові на будь-якому екрані.
   ========================================================================== */
body.cl-legacy > section.afMnu .container,
body.cl-legacy > .container-fluid:not(header *):not(footer *) { max-width: none !important; }
@media (min-width: 1680px) {
  body.cl-legacy { --cl-z: 1.1; }
  body.cl-legacy { zoom: 1.1; }
}
@media (min-width: 1920px) {
  body.cl-legacy { --cl-z: 1.2; }
  body.cl-legacy { zoom: 1.2; }
}
@media (min-width: 2240px) {
  body.cl-legacy { --cl-z: 1.35; }
  body.cl-legacy { zoom: 1.35; }
}
@media (min-width: 2560px) {
  body.cl-legacy { --cl-z: 1.55; }
  body.cl-legacy { zoom: 1.55; }
}
@media (min-width: 3200px) {
  body.cl-legacy { --cl-z: 1.9; }
  body.cl-legacy { zoom: 1.9; }
}
@media (min-width: 3840px) {
  body.cl-legacy { --cl-z: 2.25; }
  body.cl-legacy { zoom: 2.25; }
}
/* липка панель фільтра всередині збільшеного вмісту — висота з урахуванням масштабу */
@media (min-width: 992px) {
  body.cl-legacy #filter_form,
  body.cl-legacy .container-fluid > .forFiltr1 { max-height: calc((100vh - 32px) / var(--cl-z, 1)); }
}

/* ==========================================================================
   v7 (2026-10-22): фільтр прокручується разом зі сторінкою (без липкої панелі з власною прокруткою),
   іконки типів аукціону без обрізання, кнопка «Вгору», сторінка авто — сітка для всіх ширин екрана
   ========================================================================== */

/* --- фільтр / бічна панель: звичайний блок у потоці сторінки --- */
body.cl-legacy #filter_form,
body.cl-legacy .container-fluid > .forFiltr1 {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
body.cl-legacy .filtrPan {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
body.cl-legacy .filtrPan .well,
body.cl-legacy .filtrPan .well_1,
body.cl-legacy .filtrPan .well_2 {
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid var(--cl-border) !important;
}
/* довгий список марок — лише він має власну прокрутку, щоб не розтягувати сторінку на кілька екранів */
body.cl-legacy .filtrPan #collapse2 .well { max-height: 360px !important; overflow-y: auto !important; }

/* --- іконки типів аукціону — цілі, без обрізання --- */
body.cl-legacy .filtrPan .button-container { gap: 8px !important; justify-content: flex-start; }
body.cl-legacy .filtrPan .button-container a.button {
  width: auto !important;
  aspect-ratio: auto !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  padding: 6px !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
body.cl-legacy .filtrPan .button-container a.button img {
  width: 40px !important; height: 40px !important; max-height: none !important;
  object-fit: contain !important; display: block;
}
body.cl-legacy .filtrPan .button-container a.button:hover { border-color: var(--cl-primary) !important; background: var(--cl-primary-soft) !important; }

/* --- кнопка «Вгору» (додається в header.tpl / header1.tpl) --- */
.cl-totop {
  position: fixed; right: 20px; bottom: 24px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-primary, #2f58cd); color: #fff !important;
  box-shadow: 0 8px 24px rgba(47, 88, 205, .3);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  border: 0; cursor: pointer; text-decoration: none !important;
}
.cl-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.cl-totop:hover { background: #2549b3; }
.cl-totop svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .cl-totop { right: 14px; bottom: 16px; width: 44px; height: 44px; } }

/* --- сторінка авто: сітка, що працює на всіх ширинах --- */
body.cl-page-car > .row { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
body.cl-page-car > .row > [class*="col-"] { width: auto !important; padding: 0 !important; float: none !important; }
body.cl-page-car > .row > .col-lg-5 { padding-right: 0 !important; }

body.cl-page-car .forFiltr2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 260px);
  column-gap: 0;
  row-gap: 10px;
  align-items: start;
}
body.cl-page-car .forFiltr2 > br,
body.cl-page-car .forFiltr2 > hr,
body.cl-page-car .forFiltr2 > .otstup,
body.cl-page-car .forFiltr2 > .row { display: none !important; }
body.cl-page-car .forFiltr2 > * { float: none !important; width: auto !important; margin: 0 !important; }
/* рядок 1: тип і номер аукціону + дата закінчення */
body.cl-page-car .forFiltr2 > .time_right:first-child { grid-column: 1 / 3; grid-row: 1; align-self: center; flex-wrap: wrap; }
body.cl-page-car .forFiltr2 > .time_left { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; text-align: center; }
/* рядок 2: назва аукціону */
body.cl-page-car .forFiltr2 > .time_left ~ .time_right,
body.cl-page-car .forFiltr2 > .time_right ~ .time_right { grid-column: 1 / -1; grid-row: 2; }
/* рядок 3: характеристики (підписи | значення) і колонка дій праворуч */
body.cl-page-car .forFiltr2 > .forOpisanLeft { grid-column: 1; grid-row: 3; }
body.cl-page-car .forFiltr2 > .forOpisanRight:not(:has(> .btn)) { grid-column: 2; grid-row: 3; }
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) {
  grid-column: 3; grid-row: 3 / span 2; padding: 0 0 0 16px !important;
}
/* рядок 4: ціна й розрахунок */
body.cl-page-car .forFiltr2 > .col-lg-6:not(:empty) { grid-column: 1 / 3; grid-row: 4; margin-top: 6px !important; }
body.cl-page-car .forFiltr2 > .col-lg-6:empty { display: none !important; }
/* іконки й «Приховати» в колонці дій — в один рядок */
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) { flex-direction: row !important; flex-wrap: wrap; }
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > .btn,
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > .input-group { flex: 0 0 100%; }
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > br { display: none; }
body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > a:not(.btn) { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* середні екрани (ноутбук, збільшений масштаб): колонка дій переходить під характеристики, кнопки в два стовпці */
@media (max-width: 1399px) {
  body.cl-page-car .forFiltr2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.cl-page-car .forFiltr2 > .time_right:first-child { grid-column: 1 / -1; }
  body.cl-page-car .forFiltr2 > .time_left { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  body.cl-page-car .forFiltr2 > .time_left ~ .time_right,
  body.cl-page-car .forFiltr2 > .time_right ~ .time_right { grid-row: 3; }
  body.cl-page-car .forFiltr2 > .forOpisanLeft { grid-row: 4; }
  body.cl-page-car .forFiltr2 > .forOpisanRight:not(:has(> .btn)) { grid-row: 4; }
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) {
    grid-column: 1 / -1; grid-row: 5; padding: 4px 0 0 !important;
    display: flex !important; flex-wrap: wrap; gap: 8px;
  }
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > .btn,
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > .input-group { flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > a:not(.btn) { flex: 0 0 auto !important; }
  body.cl-page-car .forFiltr2 > .col-lg-6:not(:empty) { grid-column: 1 / -1; grid-row: 6; }
}
/* планшет: фото над описом */
@media (max-width: 991px) {
  body.cl-page-car > .row { grid-template-columns: minmax(0, 1fr); }
}
/* телефон: кнопки дій в один стовпець */
@media (max-width: 640px) {
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > .btn,
  body.cl-page-car .forFiltr2 > .forOpisanRight:has(> .btn) > .input-group { flex: 1 1 100% !important; }
  body.cl-page-car .forOpisanLeft li, body.cl-page-car .forOpisanRight ul li { font-size: 12.5px; }
  body.cl-page-car .forOpisanLeft, body.cl-page-car .forFiltr2 > .forOpisanRight:not(:has(> .btn)) { padding: 6px 10px !important; }
  body.cl-page-car .container-fluid > .detailsdiv { float: none; justify-content: flex-end; margin: 0 0 8px !important; }
}
body.cl-page-car .forFiltr2 > .forOpisanLeft,
body.cl-page-car .forFiltr2 > .forOpisanRight:not(:has(> .btn)) { margin-top: 0 !important; }

/* ==========================================================================
   v8 (2026-10-22): сторінка авто — заголовок по центру, стрілки переходу не ховаються під шапку;
   блоки розрахунку й аналітики; кнопка Buy now у списках; модальні вікна в стилі сайту
   ========================================================================== */

/* --- заголовок «Детальний опис авто №…» по центру, стрілки праворуч у тому ж рядку --- */
body.cl-page-car section.afMnu .container {
  min-height: 54px; padding-top: 10px !important; padding-bottom: 6px !important;
  display: flex; align-items: center; justify-content: center;
}
body.cl-page-car section.afMnu h1 { text-align: center !important; width: 100%; margin: 0 !important; letter-spacing: .04em; }
body.cl-page-car > .container-fluid:has(> .detailsdiv) { position: relative; height: 0; }
body.cl-page-car .container-fluid > .detailsdiv {
  position: absolute !important; right: var(--cl-gutter); top: -46px;
  float: none !important; margin: 0 !important; z-index: 5;
}
body.cl-page-car section.car-title h2 { text-align: center; margin-top: 6px !important; }
@media (max-width: 640px) {
  body.cl-page-car section.afMnu .container { justify-content: flex-start; padding-right: 140px !important; }
  body.cl-page-car section.afMnu h1 { text-align: left !important; font-size: 13px !important; }
  body.cl-page-car .container-fluid > .detailsdiv { right: 12px; }
  body.cl-page-car section.car-title h2 { text-align: left; }
}

/* --- повний розрахунок і «показати як для статусу…» — акуратні панелі --- */
body.cl-legacy [id^="fullCalc_"],
body.cl-legacy [class*="calc-preview-box-"] {
  background: var(--cl-surface-2) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin: 8px 0 10px !important;
  font-size: 14px;
  line-height: 1.7 !important;
}
body.cl-legacy [class*="calc-preview-box-"] { border-style: dashed !important; background: #fff !important; }
body.cl-legacy [class*="calc-preview-box-"] > h4 {
  font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .03em;
  color: var(--cl-primary) !important; margin: 0 0 8px !important;
}
/* рядки розрахунку: звичайні суми — темним, підсумок у Польщі — синім, собівартість — окремим рядком */
body.cl-legacy [id^="fullCalc_"] [style*="2f58cd"],
body.cl-legacy [class*="calc-preview-box-"] [style*="2f58cd"] { color: var(--cl-text) !important; }
body.cl-legacy [id^="fullCalc_"] [style*="009999"],
body.cl-legacy [class*="calc-preview-box-"] [style*="009999"] { color: var(--cl-primary) !important; font-weight: 600; }
body.cl-legacy [id^="fullCalc_"] [style*="b45309"],
body.cl-legacy [class*="calc-preview-box-"] [style*="b45309"] {
  display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--cl-border-strong);
  color: var(--cl-navy) !important; font-weight: 700;
}
body.cl-legacy [id^="closeCalcBtn_"] {
  background: #fff !important; border: 1px solid var(--cl-border) !important; border-radius: 8px !important;
  color: var(--cl-primary) !important; font-weight: 600 !important; padding: 6px 12px !important; font-size: 13px !important;
}
body.cl-legacy [id^="closeCalcBtn_"]:hover { border-color: var(--cl-primary) !important; }
body.cl-legacy [id^="fullCalc_"] > span > div { margin-top: 10px !important; }

/* --- ринкова аналітика (Немає ціни / прогноз / перцентилі) --- */
body.cl-legacy div[style*="overflow:hidden"]:has(> .market-toggle-icon),
body.cl-legacy div:has(> div > .market-toggle-icon) {
  border-radius: 14px !important; background: #fff !important; box-shadow: none !important;
}
body.cl-legacy div:has(> .market-toggle-icon) { padding: 10px 14px !important; }
body.cl-legacy .market-toggle-icon {
  width: 28px !important; height: 28px !important; min-width: 28px !important; line-height: 26px !important;
  border-color: var(--cl-border) !important; color: var(--cl-primary) !important; background: var(--cl-primary-soft);
}
body.cl-legacy div:has(> div > .market-toggle-icon) > div:last-child { padding: 4px 14px 14px !important; font-size: 13px; line-height: 1.6; }
body.cl-legacy div:has(> div > .market-toggle-icon) > div:last-child > div[style*="border"] {
  border-radius: 10px !important; background: var(--cl-surface-2) !important; border-color: var(--cl-border) !important;
}

/* --- Buy now у списку (статус ≥5, не фіксована ціна, є ціна buy now) --- */
body.cl-legacy .avtoItem .proposal .cl-buynow {
  flex: 0 0 auto; width: auto !important; display: inline-flex !important; align-items: center; gap: 6px;
  background: #fff !important; color: var(--cl-primary) !important; border: 1px solid var(--cl-primary) !important;
  padding: 10px 14px !important; font-size: 14px !important; margin: 0 !important;
}
body.cl-legacy .avtoItem .proposal .cl-buynow:hover { background: var(--cl-primary-soft) !important; }
@media (max-width: 640px) { body.cl-legacy .avtoItem .proposal .cl-buynow { flex: 1 1 100%; justify-content: center; } }

/* --- модальні вікна (пропозиція, розрахунок, таблиця цін, повідомлення) --- */
body.cl-legacy .modal-backdrop.in { opacity: .4; background: #1b2350; }
body.cl-legacy .modal-content {
  border: 0 !important; border-radius: 20px !important; overflow: hidden;
  box-shadow: 0 24px 64px rgba(27, 35, 80, .25) !important; font-family: var(--cl-font) !important;
}
body.cl-legacy .modal-header {
  display: flex !important; align-items: center; gap: 12px;
  background: #fff !important; color: var(--cl-text) !important;
  border-bottom: 1px solid var(--cl-border) !important; padding: 18px 24px !important;
}
body.cl-legacy .modal-header::before, body.cl-legacy .modal-header::after { display: none !important; }
body.cl-legacy .modal-header h4,
body.cl-legacy .modal-header .h10,
body.cl-legacy .modal-header .modal-title {
  order: 1; flex: 1 1 auto; margin: 0 !important;
  font-family: var(--cl-font) !important; font-size: 18px !important; font-weight: 600 !important;
  color: var(--cl-text) !important; text-transform: none !important; letter-spacing: 0 !important; text-shadow: none !important;
}
body.cl-legacy .modal-header .my_icon,
body.cl-legacy .modal-header h4 [class^="icon-"] { color: var(--cl-primary) !important; }
body.cl-legacy .modal-header .close {
  order: 2; float: none !important; margin: 0 !important; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cl-surface) !important; color: var(--cl-text) !important; opacity: 1 !important; text-shadow: none !important;
  font-size: 18px; line-height: 1; border: 0;
}
body.cl-legacy .modal-header .close:hover { background: var(--cl-primary-soft) !important; color: var(--cl-primary) !important; }
body.cl-legacy .modal-header .close i { color: inherit !important; }
body.cl-legacy .modal-body { padding: 20px 24px !important; color: var(--cl-text); font-size: 15px; line-height: 1.6; }
body.cl-legacy .modal-body h4 { font-family: var(--cl-font) !important; font-size: 17px !important; font-weight: 600 !important; color: var(--cl-text) !important; }
body.cl-legacy .modal-body .red { color: var(--cl-danger) !important; }
body.cl-legacy .modal-footer {
  display: flex !important; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  margin: 0 !important; padding: 16px 24px !important; border-top: 1px solid var(--cl-border) !important; background: #fff;
}
body.cl-legacy .modal-footer::before, body.cl-legacy .modal-footer::after { display: none !important; }
body.cl-legacy .modal-footer > [class*="col-"] { float: none !important; width: auto !important; padding: 0 !important; flex: 1 1 0; }
body.cl-legacy .modal-footer > [class*="col-lg-8"] { flex: 2 1 0; }
body.cl-legacy .modal-footer .btn { margin: 0 !important; }
/* підтвердження пропозиції: суми розрахунку — у світлій панелі */
body.cl-legacy #modProposal .modal-body > p,
body.cl-legacy #modProposal .modal-body > span,
body.cl-legacy #modProposal .modal-body > div:not(.clearfix) {
  background: var(--cl-surface-2); border: 1px solid var(--cl-border); border-radius: 14px; padding: 12px 16px; margin: 10px 0;
}
body.cl-legacy #modProposal .modal-body [style*="2f58cd"] { color: var(--cl-text) !important; }
body.cl-legacy #modProposal .modal-body [style*="009999"] { color: var(--cl-primary) !important; font-weight: 600; }
body.cl-legacy #modProposal .modal-body [style*="b45309"] { color: var(--cl-navy) !important; font-weight: 700; }
body.cl-legacy #modProposal .modal-body #proposal_price { color: var(--cl-primary); }

/* модальне вікно калькулятора: біло-синє замість бірюзового */
body.cl-legacy #calcModal .modal-header { background: #fff !important; color: var(--cl-text) !important; border-bottom: 1px solid var(--cl-border) !important; }
body.cl-legacy #calcModal .modal-header .modal-title { color: var(--cl-text) !important; }
body.cl-legacy #calcModal .modal-header .close { color: var(--cl-text) !important; }
body.cl-legacy #calcModal .form-control:focus,
body.cl-legacy #customsCalcWrap .cl-select:focus,
body.cl-legacy #customsCalcWrap .cl-input:focus { border-color: var(--cl-primary) !important; box-shadow: 0 0 0 3px rgba(47, 88, 205, .12) !important; }
body.cl-legacy #calcModal table.table th { background: var(--cl-primary-soft) !important; color: var(--cl-navy) !important; }
body.cl-legacy #calcModal .summary-section #copySummaryBtn { background: var(--cl-primary) !important; border-color: var(--cl-primary) !important; }
body.cl-legacy #customsCalcWrap .cl-card { border-color: var(--cl-border) !important; border-radius: 16px !important; }
body.cl-legacy #customsCalcWrap .cl-btn { border-color: var(--cl-primary) !important; color: #fff !important; background: var(--cl-primary) !important; border-radius: 10px !important; }
body.cl-legacy #customsCalcWrap .cl-btn:hover { background: var(--cl-primary-hover) !important; }
body.cl-legacy #customsCalcWrap .cl-ok { background: var(--cl-primary-soft) !important; border: 1px solid #dbe4fb; }
body.cl-legacy #customsCalcWrap .cl-ok,
body.cl-legacy #customsCalcWrap .cl-ok * { color: var(--cl-navy) !important; }
body.cl-legacy #customsCalcWrap .cl-hr { background: #dbe4fb !important; }
body.cl-legacy #calcModal .nav-tabs {
  border: 0; display: flex; flex-wrap: wrap; gap: 6px; background: var(--cl-surface); border-radius: 14px; padding: 6px; margin-bottom: 16px;
}
body.cl-legacy #calcModal .nav-tabs > li { float: none; margin: 0; }
body.cl-legacy #calcModal .nav-tabs > li > a {
  border: 0 !important; border-radius: 10px !important; color: var(--cl-muted) !important; font-weight: 600; padding: 10px 16px; margin: 0;
  background: transparent !important; text-transform: none;
}
body.cl-legacy #calcModal .nav-tabs > li.active > a { background: #fff !important; color: var(--cl-primary) !important; }

/* таблиця цін / ринкова аналітика: на всю висоту екрана, шрифт і кольори сайту */
body.cl-legacy #mod_prices .modal-dialog {
  width: calc((100vw - 32px) / var(--cl-z, 1)) !important; max-width: 1600px !important;
  height: calc((100vh - 32px) / var(--cl-z, 1)); margin: 16px auto !important;
}
body.cl-legacy #mod_prices .modal-content { height: 100%; display: flex; flex-direction: column; }
body.cl-legacy #mod_prices .modal-body { flex: 1 1 auto; max-height: none !important; overflow-y: auto; padding: 24px !important; }
body.cl-legacy #mod_prices,
body.cl-legacy #mod_prices *,
body.cl-legacy #prices-point,
body.cl-legacy #prices-point * { font-family: var(--cl-font) !important; }
body.cl-legacy #mod_prices *:not(h1):not(h2):not(h3):not(h4):not(.badge) { font-size: 14px; }
body.cl-legacy #mod_prices .badge.bg-primary,
body.cl-legacy #prices-point .badge.bg-primary { background: var(--cl-primary) !important; }
body.cl-legacy #mod_prices .alert { border-radius: 16px !important; border: 1px solid var(--cl-border) !important; background: var(--cl-surface-2) !important; }
body.cl-legacy #mod_prices .table { border-radius: 14px; }
body.cl-legacy #mod_prices .btn.active, body.cl-legacy #mod_prices button.active { border-color: var(--cl-primary) !important; background: var(--cl-primary-soft) !important; }
body.cl-legacy .modal-close-btn {
  background: #fff !important; border: 1px solid var(--cl-border) !important; color: var(--cl-text) !important;
  border-radius: 999px !important; padding: 6px 16px !important; font-weight: 600 !important;
}
body.cl-legacy .modal-close-btn:hover { border-color: var(--cl-primary) !important; color: var(--cl-primary) !important; }
@media (max-width: 640px) {
  body.cl-legacy #mod_prices .modal-dialog { width: 100vw !important; height: 100vh; height: 100dvh; margin: 0 !important; }
  body.cl-legacy #mod_prices .modal-content { border-radius: 0 !important; }
  body.cl-legacy #mod_prices .modal-body { padding: 14px !important; }
  body.cl-legacy .modal-header, body.cl-legacy .modal-body, body.cl-legacy .modal-footer { padding-left: 16px !important; padding-right: 16px !important; }
}

/* v8b: car-page title fully centred (afMnu is a .row grid) */
body.cl-page-car section.afMnu{display:block !important}
body.cl-page-car section.afMnu > .container{width:auto !important;max-width:none !important;margin:0 var(--cl-gutter) !important;padding-left:150px !important;padding-right:150px !important}
@media (max-width:767px){body.cl-page-car section.afMnu > .container{padding-left:0 !important;padding-right:0 !important}}

/* v8b: market analytics block */
body.cl-legacy .cl-ma{border-width:1px 1px 1px 4px !important;border-radius:14px !important;background:#fff !important;box-shadow:none !important}
body.cl-legacy .cl-ma-head{padding:10px 14px !important}
body.cl-legacy .cl-ma-head span{font-size:13px !important;color:var(--cl-text) !important}
body.cl-legacy .cl-ma-head span[style*="border-radius:999px"]{color:#fff !important;font-size:12px !important}
body.cl-legacy .cl-ma-body{padding:4px 14px 14px !important;border-top:1px solid var(--cl-border) !important}
body.cl-legacy .cl-ma-stats span{display:inline-block;background:var(--cl-surface);border-radius:999px;padding:3px 10px;font-size:12px !important;color:var(--cl-muted) !important}
body.cl-legacy .cl-ma-stats span b{color:var(--cl-text)}
body.cl-legacy .cl-ma-range{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px !important;margin-top:8px}
body.cl-legacy .cl-ma-range > span{display:flex;flex-direction:column;background:var(--cl-surface-2);border:1px solid var(--cl-border);border-radius:10px;padding:6px 10px;font-size:13px;font-weight:700}
body.cl-legacy .cl-ma-range > span b{font-size:11px;font-weight:500;color:var(--cl-muted);text-transform:uppercase;letter-spacing:.02em}
body.cl-legacy .cl-ma-iqr{margin-top:8px !important;font-size:13px !important;color:var(--cl-text) !important}
body.cl-legacy .cl-ma-pred{border-radius:10px !important;background:var(--cl-primary-soft) !important;border:1px dashed #c3cde6 !important}
@media (max-width:480px){body.cl-legacy .cl-ma-range{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v8c: modals whose footer sits outside .modal-content */
body.cl-legacy .modal-dialog:has(> .modal-footer){background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(27,35,80,.25)}
body.cl-legacy .modal-dialog:has(> .modal-footer) > .modal-content,
body.cl-legacy #calcModal .modal-dialog > .modal-content{box-shadow:none !important;border-radius:0 !important}
body.cl-legacy .modal-dialog > .modal-footer{border-radius:0 !important;box-shadow:none !important}
/* v8c: price table modal — pinned close button, blue active buttons */
body.cl-legacy #mod_prices .modal-content{position:relative}
body.cl-legacy #mod_prices .modal-body{padding-top:60px !important}
body.cl-legacy #mod_prices .modal-close-btn{position:absolute !important;top:14px;right:18px;z-index:20}
body.cl-legacy #mod_prices .btn{border-radius:10px !important;font-weight:600}
body.cl-legacy #mod_prices .btn.active,body.cl-legacy #mod_prices .btn:active{background:var(--cl-primary) !important;border-color:var(--cl-primary) !important;color:#fff !important;box-shadow:none !important}
body.cl-legacy #mod_prices table th{background:var(--cl-primary-soft) !important;color:var(--cl-navy) !important;white-space:nowrap}
body.cl-legacy .modal-dialog{margin-top:48px}
body.cl-legacy .modal-body h4{font-family:var(--cl-font) !important;font-size:17px !important;font-weight:600 !important;color:var(--cl-text)}
body.cl-legacy .modal-body h4 strong{color:var(--cl-primary)}
@media (max-width:767px){body.cl-legacy .modal-dialog{margin:24px 10px}body.cl-legacy .modal-header,body.cl-legacy .modal-body,body.cl-legacy .modal-footer{padding-left:16px !important;padding-right:16px !important}}

/* v8d: proposal modal — calculation is one inline <span> with <br>; render it as one panel */
body.cl-legacy #modProposal .modal-body > span{display:block !important;line-height:1.75;font-size:15px}
body.cl-legacy #modProposal .modal-body > span span{background:none !important;border:0 !important;padding:0 !important;margin:0 !important;border-radius:0 !important}
body.cl-legacy #modProposal .modal-body > span [style*="b45309"]{display:block !important;margin-top:8px !important;padding-top:8px !important;border-top:1px dashed var(--cl-border-strong) !important}
body.cl-legacy #modProposal .modal-body > p:empty,
body.cl-legacy #modProposal .modal-body > div:empty{display:none !important}
body.cl-legacy #modProposal .modal-body > br{display:none}
body.cl-legacy #modProposal .modal-body > h4{margin:0 0 12px !important}

/* v8e: «Показати повний розрахунок» ховається, коли розрахунок розгорнуто */
body.cl-legacy [id^="summaryBlock_"][style*="display: none"],
body.cl-legacy [id^="summaryBlock_"][style*="display:none"]{display:none !important}
/* v8f: ціна, від якої рахуються додаткові розрахунки */
body.cl-legacy .cl-calc-base{display:inline-block;background:var(--cl-primary-soft);border-radius:8px;padding:4px 10px;font-size:13px;color:var(--cl-text)}
body.cl-legacy .cl-calc-base b{color:var(--cl-primary)}

/* v8g: рядок пропозиції у списку — однакова висота й радіус, «Купити» м'якою кнопкою, іконки праворуч */
body.cl-legacy .avtoItem .proposal .input-group,
body.cl-legacy .avtoItem .proposal .carProposal,
body.cl-legacy .avtoItem .proposal .cl-buynow{height:44px !important;border-radius:12px !important}
body.cl-legacy .avtoItem .proposal .input-group .form-control,
body.cl-legacy .avtoItem .proposal .input-group input,
body.cl-legacy .avtoItem .proposal .input-group-addon{height:44px !important;min-height:44px !important}
body.cl-legacy .avtoItem .proposal .carProposal,
body.cl-legacy .avtoItem .proposal .cl-buynow{justify-content:center;padding:0 18px !important;font-weight:600 !important;line-height:1 !important;box-shadow:none !important}
body.cl-legacy .avtoItem .proposal .cl-buynow{background:var(--cl-primary-soft) !important;border:1px solid transparent !important;color:var(--cl-primary) !important}
body.cl-legacy .avtoItem .proposal .cl-buynow:hover{background:#e4eafc !important;border-color:#c3cde6 !important}
body.cl-legacy .avtoItem .proposal:has(.carProposal) > *{order:2}
body.cl-legacy .avtoItem .proposal:has(.carProposal) > a:not(.btn){order:4;font-size:13px}
body.cl-legacy .avtoItem .proposal:has(.carProposal)::after{content:"";order:3;flex:0 0 100%;height:0;margin-top:-4px}
body.cl-legacy .avtoItem .proposal:has(.carProposal) .input-group{flex:1 1 200px !important;max-width:280px}
body.cl-legacy .avtoItem .proposal .cl-buynow + a:not(.btn),
body.cl-legacy .avtoItem .proposal .carProposal + a:not(.btn){margin-left:auto}
@media (max-width:640px){
  body.cl-legacy .avtoItem .proposal:has(.carProposal) .input-group{max-width:none;flex-basis:100% !important}
  body.cl-legacy .avtoItem .proposal .carProposal,body.cl-legacy .avtoItem .proposal .cl-buynow{flex:1 1 100% !important}
}

/* v8g: плашка «Розрахунок від пропозиції» окремим рядком */
body.cl-legacy .cl-calc-base{display:block !important;width:max-content;max-width:100%;margin:0 0 8px !important}

/* v8h: комплектація — один список на всю ширину, у два стовпчики (зверху вниз) */
body.cl-legacy #translate-target{display:block !important;margin:0 var(--cl-gutter) !important}
body.cl-legacy #translate-target table.translate{width:100%}
body.cl-legacy #translate-target table.translate td{width:auto !important;padding:6px 0 !important}
body.cl-legacy #translate-target .equipment-list{display:block !important;column-count:2;column-gap:40px}
body.cl-legacy #translate-target .equipment-item{width:auto !important;break-inside:avoid;margin-bottom:8px}
body.cl-legacy #translate-target .equipment-item:empty{display:none}
@media (max-width:768px){body.cl-legacy #translate-target .equipment-list{column-count:1}}

/* v8i: сторінка авто для гостя — компактна іконка типу аукціону, акуратна розкладка */
body.cl-page-car .forFiltr2:has(> img.a_type){display:flex!important;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:10px 0}
body.cl-page-car .forFiltr2:has(> img.a_type) > *{order:2}
body.cl-page-car .forFiltr2:has(> img.a_type) > img.a_type,body.cl-page-car .forFiltr2:has(> img.a_type) > .time_left{order:0}
body.cl-page-car .forFiltr2:has(> img.a_type) > p.red{order:1}
body.cl-page-car .forFiltr2:has(> img.a_type) > img.a_type{width:32px!important;height:32px!important;max-width:32px;object-fit:contain;margin:0 10px 0 0!important;flex:0 0 32px}
body.cl-page-car .forFiltr2:has(> img.a_type) > .time_left{flex:0 0 100%;margin:0!important}
body.cl-page-car .forFiltr2:has(> img.a_type) > p.red:empty{display:none!important}
body.cl-page-car .forFiltr2:has(> img.a_type) > p.red{flex:0 0 100%;width:100%!important;margin:4px 0!important;padding:12px 16px!important;background:var(--cl-primary-soft);border-radius:12px;color:var(--cl-navy)!important;font-weight:600}
body.cl-page-car .forFiltr2:has(> img.a_type) > .forOpisanLeft,body.cl-page-car .forFiltr2:has(> img.a_type) > .forOpisanRight.col-xs-6{flex:0 0 50%;width:50%!important;max-width:50%}
body.cl-page-car .forFiltr2:has(> img.a_type) > .forOpisanRight.col-xs-12{flex:0 0 100%;width:100%!important;max-width:100%;display:flex;flex-direction:row!important;flex-wrap:nowrap!important;gap:10px}
body.cl-page-car .forFiltr2:has(> img.a_type) > .forOpisanRight.col-xs-12 .btn{flex:1 1 0!important;min-width:0;width:auto!important;max-width:none!important;margin:0!important}
body.cl-page-car .forFiltr2:has(> img.a_type) > .google-translate-block,body.cl-page-car .forFiltr2:has(> img.a_type) > div:empty{flex:0 0 100%}
body.cl-page-car .forFiltr2:has(> img.a_type) > .google-translate-block{display:block!important;margin:16px 0 0!important}

/* v8i: реєстрація (тепер зі спільним хедером → body.cl-page-login) */
body.cl-page-login #signup .input-group-addon{min-width:200px}
body.cl-page-login #signup p{font-size:13px;color:var(--cl-muted);margin:6px 0 12px}
body.cl-page-login #signup p.blue{color:var(--cl-primary);font-weight:600;font-size:14px}
body.cl-page-login #signup .otstup7{height:10px}
body.cl-page-login #signup #testrbt,body.cl-page-login #signup #sbmtfrm{width:100%;color:#fff}
@media (max-width:640px){body.cl-page-login #signup .input-group-addon{min-width:0}}

/* v9: більше фото в списках */
body.cl-legacy .avtoItem{grid-template-columns:minmax(320px,40%) minmax(0,1fr) !important}
@media (max-width:1199px){body.cl-legacy .avtoItem{grid-template-columns:minmax(260px,38%) minmax(0,1fr) !important}}
@media (max-width:640px){body.cl-legacy .avtoItem{grid-template-columns:1fr !important}}

/* v9c: гостьова сторінка авто — блок комплектації не вилазить за правий край */
body.cl-page-car .forFiltr2:has(> img.a_type) > #translate-target{margin:16px 0 0 !important;width:100% !important;max-width:100% !important;flex:0 0 100% !important}