/* ==========================================================================
   Home / search page (owned by the search app) and the tender page block at the end.
   Loaded on every page after core/static/css/traxer.css (Variant A design system); uses its tokens only.
   The marketing blocks below (.how-steps, .plans, .trust, .cta-band) are shared with /uslugi/ and /tseni/.
   Reference: docs/design/variant-a-mockup.html, screen #home.
   ========================================================================== */

/* The home hero, its market tiles and bands: core/static/css/home.css (design v3, loaded by the home page only). */

/* search form */
.search-form { margin: 0; }
.pill-search { position: relative; }
.search-spinner {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: traxer-spin .8s linear infinite;
}
.search-form:not(.htmx-request) .search-spinner { display: none; }
@keyframes traxer-spin { to { transform: rotate(360deg); } }
.search-kbd { flex: none; font: 500 12px/1.2 var(--font-sans); color: var(--faint); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.search-form.htmx-request .search-kbd, .pill-search:focus-within .search-kbd { display: none; }
@media (max-width: 640px) { .search-kbd { display: none; } }
.chip-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips--collapsible.is-collapsed .chips__extra { display: none; }
.chip--more { font-weight: 500; color: var(--ink-2); }
.chip--more .num { font-weight: 600; }

/* ---------------------------------------------------------- the live list (product panel) */
.product { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-panel); color: var(--ink); }
.product__top {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; min-height: 56px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--canvas);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.product__title { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 14px/1.3 var(--font-sans); letter-spacing: 0; color: var(--ink); }
.product__title .pill { font-weight: 600; }
.product__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: 13px; }
.product__new { color: var(--accent-ink); font-weight: 600; }
.results-head__clear { color: var(--muted); text-decoration: none; }
.results-head__clear:hover { color: var(--accent); text-decoration: underline; }
.results-head__save { margin: 0; }
@media (max-width: 640px) { .product__top, .profile-hint { padding-inline: 16px; } }
/* home (design v3): the results head is the section head above the panel – title with the count, sync time and source */
.list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; margin-bottom: 20px; }
.list-head__main { min-width: 0; }
.list-head .list-head__title { gap: 12px; font: 800 30px/1.15 var(--font-display); letter-spacing: -.03em; }
.list-head__title .pill { min-height: 26px; font-size: 13px; vertical-align: middle; }
.list-head__meta { margin-top: 6px; font-size: 14px; color: var(--muted); }
.list-head__more { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.list-head__more:hover { color: var(--accent-ink); }
@media (max-width: 640px) { .list-head { margin-bottom: 16px; } .list-head .list-head__title { font-size: 26px; } }

/* who the "Съответствие" column is for (or how to get it) */
.profile-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 20px; background: var(--canvas);
  border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; color: var(--muted); }
.profile-hint > .ic-info { flex: none; margin-top: 1px; color: var(--accent); }
.profile-hint .pill { margin-right: 4px; vertical-align: 1px; }
.profile-hint b { font-weight: 600; }
.profile-hint__note { color: var(--muted); }
.profile-hint a { color: var(--accent); text-decoration: none; font-weight: 600; }
.profile-hint a:hover { color: var(--accent-ink); text-decoration: underline; }

/* filter bar: a button per filter that opens its own panel (part of #search-form through form="search-form") */
.filterbar-wrap { position: relative; border-bottom: 1px solid var(--line-soft); }
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px; }
.filterbar__spacer { flex: 1 1 0; }
.fsel {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--muted);
  font-size: 13px; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.fsel:hover { border-color: var(--line-strong); }
.fsel:focus-visible, .fsel:focus-within { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.fsel__value { max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ink); }
.fsel__chev { flex: none; color: var(--faint-deco); transition: transform .2s var(--ease); }
details[open] > .fsel .fsel__chev { transform: rotate(180deg); }
.fpop > summary, .more-filters > summary { list-style: none; }
.fpop > summary::-webkit-details-marker, .more-filters > summary::-webkit-details-marker { display: none; }
/* a set filter turns its button blue (also after an instant search, without a reload) */
.fpop[open] > .fsel:not(.fsel--plain),
.fpop--region:has(input:checked) > .fsel,
.fpop--value:has(input.input:not(:placeholder-shown)) > .fsel,
.fpop--deadline:has(input:checked:not([value=""])) > .fsel,
.fpop--procedure:has(input:checked:not([value=""])) > .fsel {
  border-color: #BFD0FF; background: var(--accent-soft); color: var(--accent-ink);
}
.fpop--region:has(input:checked) > .fsel .fsel__value, .fpop--value:has(input.input:not(:placeholder-shown)) > .fsel .fsel__value,
.fpop--deadline:has(input:checked:not([value=""])) > .fsel .fsel__value,
.fpop--procedure:has(input:checked:not([value=""])) > .fsel .fsel__value { color: var(--accent-ink); }
.fsel--plain { border-color: transparent; background: transparent; padding-inline: 4px 0; }
.fsel--plain:hover { border-color: transparent; }
.fsel--plain .fsel__label { color: var(--muted); }
.fsel__icon { flex: none; color: var(--faint-deco); }
.fsel--plain:focus-visible { border-color: var(--accent); }

/* "С покана (N)": brings back the invitation-only procedures the lists hide by default; blue when on. While a
   procedure is chosen it would change nothing (that procedure shows anyway), so it steps aside. */
.fsel--check { gap: 7px; padding-right: 12px; }
.fsel--check input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.fsel--check:has(input:checked) { border-color: #BFD0FF; background: var(--accent-soft); color: var(--accent-ink); }
.fsel--check:has(input:focus-visible) { border-color: var(--accent); box-shadow: var(--ring); }
.fsel--check input:focus-visible { outline: 0; }
.fsel__count { font: 500 12px/1 var(--font-num); font-variant-numeric: lining-nums tabular-nums; color: var(--faint); }
.fsel--check:has(input:checked) .fsel__count { color: var(--accent-ink); }
.filterbar:has(#f-procedure input:checked:not([value=""])) .fsel--check { display: none; }

/* the panels: under the bar, below their button (search.js places them; without it at the left) */
.fpop, .more-filters { position: static; }
.fpop__panel, .more-filters__panel {
  position: absolute; z-index: 30; top: calc(100% - 4px); left: 18px;
  display: flex; flex-direction: column; gap: 14px; width: 360px; max-width: calc(100% - 24px); padding: 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  animation: fpop-in .16s var(--ease);
}
@keyframes fpop-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .fpop__panel, .more-filters__panel { animation: none; } }
.fpop__panel--map { width: 760px; }
.fpop__panel--range { width: 420px; }
.fpop__panel--list { width: 320px; }
.fpop__head { display: flex; flex-direction: column; gap: 2px; }
.fpop__title { margin: 0; font: 700 15px/1.3 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.fpop__hint { margin: 0; font-size: 13px; color: var(--muted); }
.fpop__foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fpop__foot .fpop__done { margin-left: auto; }
.fpop__foot .fpop__done .num { font-weight: 600; }
/* what the script shows or hides – the classes' own display never wins over [hidden] */
.filterbar-wrap [hidden] { display: none !important; }
.fpop__quick { margin: 0; gap: 6px; }
.fpop__quick .chip { min-height: 30px; padding: 0 11px; font-size: 13px; }

/* Област: the map of the oblasti and the same choices as a list (the list is the keyboard's and the phone's way) */
.fpop__map { display: grid; grid-template-columns: minmax(0, 1fr) 236px; align-items: start; gap: 16px; }
.bgmap { position: relative; }
.bgmap[hidden] + .rlist { grid-column: 1 / -1; max-height: none; }
.bgmap__svg { display: block; width: 100%; height: auto; }
.bgmap__r {
  fill: #DCE5F7; fill-rule: evenodd; stroke: #FFFFFF; stroke-width: 1.2; stroke-linejoin: round; cursor: pointer;
  transition: fill .15s var(--ease);
}
.bgmap__r.is-empty { fill: var(--soft); }
.bgmap__r:hover { fill: #BFD0FF; }
.bgmap__r.is-on { fill: var(--accent); }
.bgmap__r.is-on:hover { fill: var(--accent-ink); }
.bgmap__tip {
  position: absolute; z-index: 1; margin: 0; padding: 5px 9px; border-radius: var(--r-sm); pointer-events: none;
  background: var(--ink); color: #FFFFFF; font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 10px));
}
.bgmap__tip .num { color: var(--faint-deco); font-weight: 600; }
.rlist { margin: 0; gap: 6px; max-height: 318px; overflow-y: auto; overscroll-behavior: contain; align-content: flex-start; }
.rlist .chip { min-height: 30px; padding: 0 11px; font-size: 13px; }

/* Стойност and Срок: sliders over the exact fields and the quick choices */
.range { position: relative; height: 28px; margin: 4px 6px 0; }
.range__track { position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: var(--r-pill); background: var(--line); }
.range__fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: var(--r-pill); background: var(--accent); }
.range__input {
  position: absolute; inset: 0 -6px; width: calc(100% + 12px); height: 28px; margin: 0; background: none;
  appearance: none; -webkit-appearance: none; pointer-events: none;
}
.range__input:focus { outline: 0; }
.range__input::-webkit-slider-runnable-track { height: 28px; background: none; }
.range__input::-moz-range-track { height: 28px; background: none; }
.range__input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; pointer-events: auto; cursor: grab;
  background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(11, 19, 36, .2);
}
.range__input::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; pointer-events: auto; cursor: grab;
  background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(11, 19, 36, .2);
}
.range__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
.range__input:focus-visible::-moz-range-thumb { box-shadow: var(--ring); }
.range__ends { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); }
.range--one { margin-bottom: 24px; }
.range--two { margin-bottom: 6px; }
.range__fields { display: flex; align-items: flex-end; gap: 10px; }
.range__fields .field { flex: 1 1 0; }
.range__fields .input { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; }
.range__dash { padding-bottom: 10px; color: var(--faint); }

/* Процедура, Община, Подредба: a list of choices with their counts */
.olist { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; padding: 0; list-style: none; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.olist--box { margin: 0; padding: 4px; max-height: 210px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.opt:hover { background: var(--canvas); color: var(--ink); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.opt:has(input:checked) { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.opt:has(input:checked)::before { border: 5px solid var(--accent); }
.opt:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--accent); }
.opt__label { flex: 1 1 auto; min-width: 0; }
.opt__n { flex: none; font: 500 12px/1 var(--font-num); font-variant-numeric: lining-nums tabular-nums; color: var(--faint); }
.opt[hidden] { display: none; }
.olist li[hidden] { display: none; }

/* "Още филтри": the panel's count badge and its fields */
.more-filters > summary svg { flex: none; color: var(--faint-deco); }
.more-filters[open] > summary, .more-filters:has(.more-filters__count:not(:empty)) > summary {
  border-color: #BFD0FF; background: var(--accent-soft); color: var(--accent-ink);
}
.more-filters__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-pill); background: var(--accent); color: #FFFFFF; font: 600 11px/1 var(--font-num);
}
.more-filters__count:empty { display: none; }
.more-filters__panel { width: 720px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: 14px 20px; }
.more-filters__panel .check { grid-column: 2; align-self: start; }
.more-filters__panel .fpop__foot { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-inline: 16px; }
  .filterbar::-webkit-scrollbar { display: none; }
  .filterbar__spacer { flex: 0 0 4px; }
  .fsel { flex: none; }
  /* the bar scrolls sideways here: "С покана (N)" changes what the list means, so it comes first, not off-screen */
  .fsel--check { order: -1; }
  .more-filters__panel { grid-template-columns: 1fr; }
  .more-filters__panel .check { grid-column: auto; }
  .fpop__map { grid-template-columns: 1fr; }
  .rlist { max-height: 180px; }
}
/* a phone: every panel is a sheet from the bottom over a dimmed page; a tap outside closes it */
@media (max-width: 640px) {
  .fpop__panel, .more-filters__panel {
    position: fixed; z-index: 60; top: auto; left: 0 !important; right: 0; bottom: 0; width: auto; max-width: none;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg);
    animation: fpop-up .2s var(--ease);
  }
  /* the dimmed page is the open panel's own button stretched over the screen: a tap on it closes the sheet (natively,
     also without JavaScript) and never reaches the link or chip underneath */
  .fpop[open] > summary::before, .more-filters[open] > summary::before {
    content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(11, 19, 36, .38); cursor: default;
  }
  @keyframes fpop-up { from { transform: translateY(24px); opacity: .6; } }
  .fpop__foot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); margin: 0 -16px calc(-16px - env(safe-area-inset-bottom)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); }
  .fpop__foot .fpop__done { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .rlist { max-height: none; }
  .olist { max-height: none; }
  .olist--box { max-height: 240px; }
}

/* buyer autocomplete */
.autocomplete { position: relative; }
.ac-list {
  list-style: none; margin: 4px 0 0; padding: 0; position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  max-height: 320px; overflow-y: auto;
}
.ac-list:empty { display: none; }
.ac-option {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 14px; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; color: var(--ink);
}
.ac-list li:last-child .ac-option { border-bottom: 0; }
.ac-option:hover, .ac-option:focus-visible { background: var(--canvas); }
.ac-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
.ac-option:hover .ac-option__name { color: var(--accent); }
.ac-option__name { font-size: 14px; line-height: 1.35; transition: color .15s var(--ease); }
.ac-option__meta { font-size: 12px; color: var(--muted); }
.ac-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------- results table */
.results { scroll-margin-top: calc(var(--header-h) + 12px); }
.results[aria-busy="true"] .tender-table { opacity: .55; transition: opacity .2s var(--ease); }
.tender-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tender-table th {
  padding: 10px 10px; background: var(--canvas); border-bottom: 1px solid var(--line-soft); text-align: left; white-space: nowrap;
  font: 600 12px/1.2 var(--font-sans); letter-spacing: 0; color: var(--muted);
}
.tender-table td { padding: 15px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tender-table th:first-child, .tender-table td:first-child { padding-left: 22px; }
.tender-table th:last-child, .tender-table td:last-child { padding-right: 22px; }
.tender-table .c-proc { width: 168px; }
.tender-table td.c-proc { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.tender-table .c-cat { width: 150px; }
.tender-table .c-cat, .tender-table .c-dl, .tender-table .c-match { white-space: nowrap; }
.tender-table .c-val { width: 158px; text-align: right; white-space: nowrap; }
.tender-table .c-dl { width: 112px; text-align: right; }
.tender-table td.c-dl { white-space: normal; }
.tender-table--match .c-dl { padding-right: 12px; }
.t-row td { transition: background-color .15s; }
.t-row:hover td { background: #FAFBFD; }
.t-row .t-title { font-size: 15px; font-weight: 600; line-height: 1.4; max-width: 42.688em; } /* 64ch */
.t-row .t-title:visited { color: var(--ink); }
.t-row .t-title:hover { color: var(--accent); }
.t-row .t-sub { margin: 3px 0 0; line-height: 1.45; }
.t-row .t-sub > span:not(:last-child)::after { color: var(--line-strong); margin: 0 8px; }
.t-official { color: var(--muted); text-decoration: none; white-space: nowrap; }
.t-official:hover { color: var(--accent); }
.t-row .c-cat .pill { font-weight: 500; }
.t-row .t-val { font-size: 15px; }
.t-val__c { color: var(--faint); font-weight: 500; }
.t-row .c-dl .days-pill { display: inline-flex; }
.t-date { display: block; margin-top: 4px; font: 500 12px/1.2 var(--font-num); color: var(--muted); white-space: nowrap; }
.t-row .amount--none { font-size: 13px; }
.c-match .match { vertical-align: middle; }
.tender-table td.c-match { min-width: 200px; }
.c-match .reasons { margin-top: 5px; gap: 0 8px; font-size: 12px; white-space: normal; max-width: 200px; }
@media (max-width: 1180px) { .tender-table .c-proc { display: none; } }
@media (min-width: 1181px) { .t-sub .t-sub__proc { display: none; } }   /* the procedure has its own column there */
/* the foot row: "Показани 20 от 29 · Покажи още" or the end of the list */
.tender-table tr.load-more td, .tender-table tr.list-end td { padding: 0; border-bottom: 0; }
.list-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; padding: 14px 22px;
  background: var(--canvas); border-top: 1px solid var(--line); border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  font-size: 13px; color: var(--muted);
}
.t-row + .load-more .list-foot, .t-row + .list-end .list-foot { border-top: 0; }
.list-foot b { font-weight: 600; color: var(--ink); }
.list-foot .btn { min-height: 38px; }
.load-more.htmx-request .btn { opacity: .55; }
.results .empty { padding-block: 56px; }
.results .empty .small { margin: 0; }
.results .list-pages { border-top: 1px solid var(--line); padding: 16px 18px; }
/* under the list: what the default hides, with a link to show it (search/_hidden_note.html) */
.results-note {
  display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 12px 18px; border-top: 1px solid var(--line);
  background: var(--canvas); border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.results-note > span + span::before { content: "·"; margin: 0 8px; color: var(--line-strong); }
.results-note .num { font-weight: 600; color: var(--ink-2); }
.results-note a { color: var(--accent); font-weight: 500; text-decoration: none; }
.results-note a:hover { color: var(--accent-ink); text-decoration: underline; }
.results:has(.results-note) .list-foot { border-radius: 0; }
.results-note--below { padding: 12px 2px 0; border: 0; background: none; border-radius: 0; }
.product { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (max-width: 860px) {
  .tender-table thead { display: none; }
  .tender-table, .tender-table tbody, .tender-table tr, .tender-table td { display: block; width: auto; }
  .tender-table tr.t-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "s d" "v d"; align-items: center; gap: 6px 12px;
    padding: 16px; border-bottom: 1px solid var(--line-soft);
  }
  .tender-table tr.t-row td { width: auto; padding: 0; border: 0; background: none; text-align: left; white-space: normal; }
  .tender-table td.c-title { grid-area: t; }
  .tender-table td.c-proc { display: none; }
  .tender-table td.c-cat { grid-area: s; }
  .tender-table td.c-cat:empty { display: none; }
  .tender-table td.c-val { grid-area: v; }
  .tender-table td.c-val .t-val { text-align: left; font-size: 16px; }
  .tender-table td.c-dl { grid-area: d; justify-self: end; align-self: center; text-align: right; }
  .tender-table tr.t-row:has(td.c-cat:empty) { grid-template-areas: "t t" "v d"; }
  .tender-table td.c-match { grid-column: 1 / -1; grid-row: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .tender-table td.c-match { min-width: 0; }
  .c-match .reasons { margin: 0; max-width: none; }
  .list-foot { padding-inline: 16px; border-top: 0; }
}
@media (max-width: 640px) {
  .list-foot .btn { width: 100%; }
  .results-note { flex-direction: column; padding-inline: 16px; }
  .results-note > span + span::before { content: none; }
}

/* ---------------------------------------------------------- /porachki/: the same search block under the page head */
.catalog-head .pill-search { margin-top: 24px; }
.catalog-body { padding-top: 28px; }
@media (max-width: 640px) { .catalog-head .pill-search { margin-top: 20px; } .catalog-body { padding-top: 20px; } }

/* ---------------------------------------------------------- marketing blocks (home, /uslugi/, /tseni/) */
/* 5-step process with a connecting line */
.how-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 48px 0 0; padding: 0; list-style: none; }
.how-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 22px; height: 2px; background: linear-gradient(90deg, var(--accent) 0 40%, var(--line) 40%); }
.how-step { position: relative; display: grid; gap: 10px; align-content: start; }
.how-step__n {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font: 600 15px/1 var(--font-num); background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink-2);
}
.how-step.is-done .how-step__n { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.how-step h3 { margin: 6px 0 0; font: 700 16px/1.3 var(--font-display); letter-spacing: -.01em; }
.how-step p { margin: 0; color: var(--muted); font-size: 14px; }
.how-step__who { font-size: 12px; color: var(--faint); }
.how-step__who b { color: var(--ink-2); font-weight: 500; }
@media (max-width: 900px) {
  .how-steps { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .how-steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: var(--line); }
  .how-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding-bottom: 22px; }
  .how-step__n { grid-row: span 3; }
  .how-step h3 { margin: 0; align-self: center; }
  .how-step p, .how-step__who { grid-column: 2; }
}
/* text + sample side by side */
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
@media (max-width: 900px) { .home-split { grid-template-columns: 1fr; gap: 32px; } }
.home-split .ticks { margin-top: 24px; }
/* pricing plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; gap: 24px; } }
.card.plan { display: flex; flex-direction: column; gap: 14px; padding: 28px; box-shadow: none; }
.card.plan.card--hl { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.plan h3 { margin: 0; font: 700 18px/1.3 var(--font-display); }
.card.plan .plan__price { margin: 0; font: 600 34px/1 var(--font-num); letter-spacing: -.02em; color: var(--ink); }
.plan__price small { font: 400 14px var(--font-sans); letter-spacing: 0; color: var(--muted); }
.card.plan p:not(.plan__price) { font-size: 14px; }
.plan__list { margin: 4px 0 0; gap: 9px; font-size: 14px; }
.plan__list li::before { width: 14px; height: 14px; }
.plan .btn { margin-top: auto; }
.plan__tag { position: absolute; top: -12px; left: 24px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent); color: #FFFFFF; font-size: 12px; font-weight: 500; line-height: 1.3; }
@media (max-width: 640px) { .card.plan { padding: 24px 20px; } .card.plan .plan__price { font-size: 30px; } }

/* closing call to action */
.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: 48px; border-radius: 24px; background: var(--ink); color: #FFFFFF; }
.cta-band h2 { margin: 0; max-width: 14.806em; /* 22ch */ font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--font-display); letter-spacing: -.03em; color: #FFFFFF; text-wrap: balance; }
.cta-band p { margin: 10px 0 0; color: #A9B4C8; }
@media (max-width: 640px) { .cta-band { padding: 28px 24px; border-radius: var(--r-lg); } .cta-band .btn { width: 100%; } }
main:has(> .home-cta:last-child) + .site-footer { margin-top: 0; }
.cta-band__link { color: #FFFFFF; text-decoration: underline; }
.cta-band__link:hover { color: #FFFFFF; }

/* ---------------------------------------------------------- /uslugi/ and /tseni/ */
.marketing-head { padding-top: 64px; }
@media (max-width: 640px) { .marketing-head { padding-top: 32px; } }
.home-split--top { align-items: start; }
.eyebrow .pill { margin-left: 8px; vertical-align: 1px; letter-spacing: 0; text-transform: none; }
/* /uslugi/?porachka=…: the tender's title and buyer as published, long unbroken tokens included (a 30-letter
   word scrolled the page 58px sideways at 320px) */
.selected-tender { overflow-wrap: anywhere; }
.selected-tender .title-sm a { text-decoration: none; }
.selected-tender .title-sm a:hover { color: var(--accent); }
.service-cards { margin-top: 48px; }
/* The price label ("от 439 € / в пакетите „Техническо“, „Ценово“ и „Проверка“") never pushes the page sideways:
   it may wrap (it was flex: none, 311px wide, and scrolled the page by up to 125px at 650-890px), and a card too
   narrow for the title and the price side by side (a container query on the card, whatever the viewport) puts the
   price under the title. The title keeps at least its longest word; the price gets the rest first. */
.service-card { container-type: inline-size; scroll-margin-top: calc(var(--header-h) + 16px); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.service-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.service-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.service-card__head h3 { margin: 0; flex: 1 1 0; }
.service-card .card__price { flex: 0 1 auto; min-width: 0; margin: 0; text-align: right; line-height: 1.5; }
@container (max-width: 500px) { .service-card__head { flex-direction: column; gap: 4px; } .service-card__head h3 { flex: none; } .service-card .card__price { text-align: left; } }
@media (max-width: 640px) { .service-cards { margin-top: 32px; } .service-card__head { flex-direction: column; gap: 4px; } .service-card__head h3 { flex: none; } .service-card .card__price { text-align: left; } }
/* /uslugi/ and /tseni/: the free tools a funded balance opens (tools/_offer_section.html) */
.tool-offer { scroll-margin-top: var(--header-h); }
.tool-offer__card h3 { margin: 0; }
.tool-offer__card h3 a { color: inherit; text-decoration: none; }
.tool-offer__card h3 a:hover { color: var(--accent); }
.tool-offer .ticks { max-width: 46em; }
.price-list__name { color: var(--ink); font-weight: 500; text-decoration: none; }
.price-list__name:hover { color: var(--accent); }
.price-list .pill { margin-left: 6px; }

/* lede inside a panel */
.panel .lede { font-size: 14.5px; margin: 0 0 18px; }

/* ---------------------------------------------------------- „Само подходящи за фирмата“ (search/fit.py)
   The checkbox comes first in the "Съответствие" line at every width (the owner asked for it before „Съответствие“),
   so the filter that changes the whole list is never below the fold of that line. The note at the top of the list
   says what it keeps and why. "С покана" steps aside while it is on (invitation-only tenders are never suitable). */
.profile-hint--match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.profile-hint__text { flex: 1 1 420px; min-width: 0; margin: 0; }
.fit-toggle { flex: none; }
.fit-toggle > span:first-of-type { font-weight: 500; }
.product:has(#f-fit:checked) .fsel--invited { display: none; }
.results-note--fit { border-top: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #F3F7FF; color: var(--ink-2); }
.results-note--fit b { font-weight: 600; color: var(--ink); }
.results-note--fit b .num { color: var(--ink); }
@media (max-width: 860px) {
  .profile-hint--match { flex-direction: column; align-items: stretch; }
  .profile-hint__text { flex: none; }
  .profile-hint--match .fit-toggle { align-self: flex-start; }
}
@media (max-width: 640px) {
  .results-note--fit { padding-inline: 16px; }
}

/* the CPV filter from the catalogue (/cpv/): removable chips under the sector chips */
.cpv-chips { margin-top: 10px; }
.cpv-chips .chip { white-space: normal; text-decoration: none; }