/* ==========================================================================
   Site design system: Variant A (owner, 2026-10-06; docs/design/variant-a-mockup.html), refreshed by design v3
   (owner, 2026-10-13: home direction C „Пазарът с един поглед“, pricing, tender, lots, dashboard – a 1240px
   page, a 68px header with the outlined „Регистрация“, 600-weight buttons, 24px pills, softer card shadows).
   A modern, product-first B2B look: white page, navy ink, ONE blue accent for actions and
   links, quiet status colours (green / orange / red), 1px borders, rounded corners 8/12/18,
   light shadows. Manrope for headings, Inter for UI, Montserrat for every number.
   Light only: there is no dark mode on the public site.

   Contents: tokens · base · layout · type · header/nav · footer · buttons · pills/badges ·
   days-left pill · chips · cards/panels · tables · forms · alerts · page header/breadcrumbs ·
   tabs · account layout (sidebar) · KPI tiles · stepper · progress ring/bar · match ·
   status icons · utilities · legacy components (hero, search box, filters, pagination, tiles) · number features.
   ========================================================================== */

:root {
  /* palette */
  --bg: #FFFFFF;             /* page */
  --canvas: #F6F8FB;         /* bands, table heads, side areas */
  --soft: #EEF2F7;           /* soft fills, neutral pills, empty bars */
  --line: #E2E7EF;           /* 1px borders */
  --line-strong: #CFD6E2;    /* inputs, secondary buttons */
  --ink: #0B1324;            /* text */
  --ink-2: #2A3448;          /* secondary text */
  --muted: #5D687C;          /* muted text (5.6:1 on white) */
  --faint: #667085;          /* hints, table heads, sources, notes (4.97:1 on white, 4.68:1 on canvas: WCAG AA) */
  --faint-deco: #8A94A6;     /* decorative only: icons, separators, hover borders (3:1, never for text) */
  --accent: #2F5BEA;         /* the one accent: actions and links */
  --accent-ink: #1E45C9;     /* hover, accent text on tints */
  --accent-soft: #EDF2FF;    /* accent tint */
  /* status colours (separate from the accent) */
  --ok: #0F7B55;     --ok-soft: #E6F5EE;      /* suitable / ready / open */
  --warn: #B25E09;   --warn-soft: #FDF2E3;    /* attention / missing (icons, borders, bars) */
  --warn-ink: #9C5207;                         /* orange TEXT: 5.24:1 on --warn-soft, 5.8:1 on white */
  --crit: #C0331F;   --crit-soft: #FCEBE8;    /* critical deadline (≤3 days, Утре, Днес) / problem */

  /* shape, depth, motion */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 19, 36, .05);
  --shadow-md: 0 1px 2px rgba(11, 19, 36, .04), 0 6px 24px -8px rgba(11, 19, 36, .12);
  --shadow-lg: 0 2px 4px rgba(11, 19, 36, .04), 0 24px 60px -20px rgba(11, 19, 36, .25);
  --shadow-card: 0 1px 2px rgba(11, 19, 36, .04), 0 8px 24px -16px rgba(11, 19, 36, .14);   /* tiles, plan cards */
  --shadow-panel: 0 1px 2px rgba(11, 19, 36, .04), 0 12px 32px -22px rgba(11, 19, 36, .2);  /* list panels */
  --shadow-float: 0 2px 4px rgba(11, 19, 36, .04), 0 30px 70px -34px rgba(11, 19, 36, .35); /* product previews */
  --line-soft: #EEF2F7;      /* row separators inside a panel (= --soft) */
  --ring: 0 0 0 3px rgba(47, 91, 234, .18);   /* focus ring of inputs */
  --ease: cubic-bezier(.2, .6, .2, 1);

  /* type: "Traxer Digits" (Montserrat digits only, fonts.css) sits first, so every number is Montserrat;
     "… Fallback" = local Arial scaled to the web font (fonts.css), so nothing shifts while the fonts load */
  --font-display: "Traxer Digits", "Manrope", "Manrope Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Traxer Digits", "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num: "Montserrat", "Montserrat Fallback", "Inter", system-ui, sans-serif;

  /* spacing scale (4px base) and layout */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px;
  --maxw: 1240px;            /* design v3: every screen is 1240 wide (1192 of content) */
  --gutter: 24px;
  --header-h: 68px;

  /* Legacy names (app stylesheets written for the earlier design use them); keep until every
     app CSS is migrated, then delete. New code uses the names above. */
  --surface: var(--canvas);
  --text: var(--ink);
  --hair: 1px;
  --radius: var(--r);
  --radius-pill: var(--r-pill);
  --accent-text: var(--accent-ink);
  --accent-tint: var(--accent-soft);
  --danger: var(--crit);
  --danger-tint: var(--crit-soft);
  --btn-bg: var(--accent);
  --btn-text: #FFFFFF;
  --focus: var(--accent);
  --font-body: var(--font-sans);

  color-scheme: light;
}
@media (max-width: 640px) { :root { --gutter: 16px; } }

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
/* plain links inside sentences, forms and hints are accent blue (the palette: the accent is for actions and
   links); links with a class (nav, buttons, table titles, components) and the footer keep their own colour */
p a:not([class]), .lede a:not([class]), .form a:not([class]), .helptext a:not([class]), .field__help a:not([class]),
.check a:not([class]) { color: var(--accent); }
p a:not([class]):hover, .lede a:not([class]):hover, .form a:not([class]):hover, .helptext a:not([class]):hover,
.field__help a:not([class]):hover, .check a:not([class]):hover { color: var(--accent-ink); }
.site-footer p a:not([class]) { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
::selection { background: var(--accent-soft); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* "Към съдържанието": hidden until a keyboard user tabs onto it. */
.skip-link:focus, .skip-link:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; margin: 0;
  padding: 10px 18px; clip: auto; overflow: visible; white-space: normal;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); text-decoration: none; font-size: 14px;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------ layout */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 760px; }
.container--wide { max-width: none; }
main { min-height: 60vh; display: block; }

/* Vertical rhythm. .section: content blocks (40px); --lg: marketing bands (96px, 64 on phones);
   --canvas: a full-width grey band with top/bottom borders (alternate with white bands). */
.section { padding-block: var(--s-8); }
.section + .section { border-top: 1px solid var(--line); }
.container.section + .container.section { border-top: 0; }
.container.section + .container.section::before { content: ""; display: block; border-top: 1px solid var(--line); margin: calc(-1 * var(--s-8)) 0 var(--s-8); }
.section--lg { padding-block: var(--s-11); }
.section--canvas { background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--lg + .section--lg, .section--canvas + .section, .section + .section--canvas { border-top: 0; }
@media (max-width: 640px) { .section { padding-block: var(--s-7); } .section--lg { padding-block: 64px; } }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack--lg { gap: var(--s-5); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.split-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-4) var(--s-6); }
/* Two-column page body: content + sticky side card (tender page, order). Stacks under 1000px. */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; padding-block: 28px var(--s-10); }
.with-aside--narrow { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1000px) { .with-aside, .with-aside--narrow { grid-template-columns: 1fr; padding-bottom: var(--s-9); } }
.sticky-aside { position: sticky; top: calc(var(--header-h) + 12px); display: grid; gap: var(--s-4); }
@media (max-width: 1000px) { .sticky-aside { position: static; } }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ type */
/* Measures: text widths are in em, never ch. A ch is the width of "0", and our "0" comes from the digit font
   (Traxer Digits = Montserrat): it is ~20% wider than the fallback's, so a ch width jumps when the fonts arrive
   and everything below shifts (CLS). N ch = N × 0.662em (weight ≤400), 0.667em (500), 0.673em (600+);
   the comment next to each rule keeps the ch it replaces. */
.display {              /* hero headline */
  font: 800 clamp(36px, 5.6vw, 64px)/1.04 var(--font-display); letter-spacing: -.035em;
  margin: 0; max-width: 10.768em; text-wrap: balance; /* 16ch, see “Measures” */
}
.display em, .display span.accent { font-style: normal; color: var(--accent); }
.h2, .section-title {   /* marketing section headline */
  font: 800 clamp(30px, 4vw, 46px)/1.08 var(--font-display); letter-spacing: -.03em; margin: 14px 0 0;
  max-width: 13.46em; text-wrap: balance; /* 20ch */
}
.headline {             /* page title (h1 of inner pages) */
  font: 800 clamp(24px, 3vw, 34px)/1.15 var(--font-display); letter-spacing: -.025em; margin: 0;
  text-wrap: balance;
}
.headline--long { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.22; }
.subhead {              /* panel / block title */
  font: 700 18px/1.3 var(--font-display); letter-spacing: -.01em; margin: 0 0 var(--s-3);
}
.title-sm { font: 700 16px/1.3 var(--font-display); letter-spacing: -.01em; margin: 0; }
.eyebrow, .overline {   /* small uppercase label above a headline */
  display: block; font: 600 12.5px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}
.label {                /* muted field / tile label (no caps) */
  display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin: 0;
}
.lede, .lead { color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 39.72em; margin: 0; } /* 60ch */
.lede--sm { font-size: 15px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.ink { color: var(--ink); }
.small { font-size: 13px; }
.xsmall { font-size: 12px; }
.text-ok { color: var(--ok); } .text-warn { color: var(--warn-ink); } .text-crit { color: var(--crit); }
.prose { max-width: 46.34em; } /* 70ch */
.prose p { margin: 0 0 1em; }
.prose a { color: var(--accent); }
.prose a:hover { color: var(--accent-ink); }
.prose h2 { font: 700 22px/1.25 var(--font-display); letter-spacing: -.015em; margin: 1.6em 0 .5em; }
.prose h3 { font: 600 16px/1.35 var(--font-sans); margin: 1.4em 0 .4em; }
.prose > h2:first-child, .prose > :first-child > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin: 0 0 .4em; }
.text-block { white-space: pre-line; }

/* Numbers: Montserrat (owner's rule). Use .num on any number that stands alone (amounts, counts, dates,
   days); digits inside running text are Montserrat already ("Traxer Digits"). Lining figures are set
   site-wide and tabular ones on stand-alone numbers (.num and the numeric components), at the end of this file. */
.num { font-family: var(--font-num); }
.amount { font: 600 18px/1.2 var(--font-num); white-space: nowrap; letter-spacing: -.01em; }
.amount--small { font-size: 15px; }
.amount--large { font-size: 30px; letter-spacing: -.02em; }
.amount--none { font: 400 13px/1.3 var(--font-sans); color: var(--faint); white-space: normal; }

/* live catalogue line ("● 1 526 активни поръчки · обновено преди 12 мин") */
.live-count, .status-badge {
  display: inline-block; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); background: var(--bg);
  border: 1px solid var(--line); padding: 5px 14px 5px 12px; border-radius: var(--r-pill); box-shadow: 0 1px 2px rgba(11, 19, 36, .04);
}
.live-count .live-dot, .status-badge .dot { margin-right: 8px; vertical-align: 1px; }
.live-count strong, .status-badge b { font-family: var(--font-num); font-weight: 600; color: var(--ink); }
.live-count .sep, .status-badge .sep { margin: 0 4px; color: var(--line-strong); }
.live-count .num { font-weight: 500; }
.live-count__new strong { color: var(--ok); }
/* phones: the line wraps into a rounded box without the dots (design v3) */
@media (max-width: 640px) {
  .live-count { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 5px 12px; border-radius: var(--r);
    font-size: 12px; }
  .live-count .sep { display: none; }
  .live-count .live-dot { margin-right: -6px; }
}
.live-count + .display, .status-badge + .display { margin-top: 22px; }
.display + .live-count, .display + .lede, .display + .lead { margin-top: 18px; }
.live-dot, .dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live-dot, .dot--live { width: 6px; height: 6px; background: var(--ok); }   /* a status dot, not a „LIVE“ glow */

/* ------------------------------------------------------------ header / nav */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line-soft);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.site-header__inner { display: flex; align-items: center; gap: 40px; min-height: var(--header-h); }
.wordmark {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font: 800 19px/1 var(--font-display); letter-spacing: -.03em; text-decoration: none; color: var(--ink); white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark__mark { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); display: grid; place-items: center; flex: none; }
.wordmark__mark i { display: block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent);
  transform: translate(3px, -3px); box-shadow: -6px 6px 0 #FFFFFF; }   /* the brand mark (brand/mark.svg, favicon) */
/* {% site_wordmark %} renders "ЕОП <span>Direct</span>": the last word is the small accent pill. */
.wordmark > span:not(.wordmark__mark) {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
  font: 600 11px/1 var(--font-sans); letter-spacing: 0; color: var(--accent-ink); background: var(--accent-soft);
}
.nav-links { display: flex; align-items: center; gap: 28px; font: 500 14px/1.4 var(--font-sans); color: var(--muted); }
.nav-links a { text-decoration: none; padding-block: 6px; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.nav-cta form { margin: 0; }
.nav-cta [aria-current="page"] { color: var(--ink); font-weight: 600; }
/* „Вход“: a quiet ink text button; „Регистрация“: the outlined (secondary) button – the page keeps its one blue one */
.nav-cta .nav-login { color: var(--ink); font-weight: 600; padding-inline: 14px; }
.nav-cta .nav-login:hover { color: var(--ink); background: var(--canvas); }
.nav-signup { min-height: 40px; padding-inline: 18px; }
/* logged in (design v3 „Dashboard“): the balance box – wallet, „Баланс“, the amount with quieter cents and „Зареди“
   when the top-up works; on phones the amount only */
.nav-balance { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 13px; color: var(--muted); white-space: nowrap; flex: none; }
.nav-balance a { text-decoration: none; display: inline-flex; align-items: center; height: 100%; }
.nav-balance__amount { gap: 8px; padding: 0 12px; color: var(--muted); border-radius: 9px; }
.nav-balance__amount:hover { color: var(--ink); background: var(--canvas); }
.nav-balance__amount .ic16 { color: var(--muted); }
.nav-balance .nav-bal { font: 600 14.5px/1 var(--font-num); color: var(--ink); }
.nav-balance .nav-bal__c { color: var(--faint-deco); font-weight: 500; }
.nav-balance__topup { padding: 0 12px; border-left: 1px solid var(--line); font-weight: 600; color: var(--accent); border-radius: 0 9px 9px 0; }
.nav-balance__topup:hover { color: var(--accent-ink); background: var(--accent-soft); }
.nav-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); color: var(--ink); flex: none;
  display: inline-grid; place-items: center; font: 600 13px/1 var(--font-sans); letter-spacing: .02em; text-decoration: none;
  transition: background-color .15s, box-shadow .15s; }
.nav-avatar:hover { background: var(--line); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
.nav-cta > .nav-name { min-height: 38px; padding-inline: 12px; font-size: 13.5px; border-color: var(--line); border-radius: 10px; }
.nav-company { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.2; }
/* logged in, narrow desktop: the name button shrinks (ellipsis), so the links, the balance, „Управление“ (staff) and
   „Изход“ never push the header wider than the screen */
.nav-cta > .nav-name { min-width: 0; flex: 0 1 auto; }
.nav-name .nav-company { min-width: 0; }
/* phone menu: a <details> disclosure with the same links (no JavaScript) */
.nav-menu { display: none; position: relative; }
.nav-menu > summary { list-style: none; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: min(280px, calc(100vw - 32px));
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 8px; display: grid; gap: 2px;
}
.nav-menu__panel a, .nav-menu__panel button {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 15px; color: var(--ink-2); text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer;
}
.nav-menu__panel a:hover, .nav-menu__panel button:hover { background: var(--canvas); color: var(--ink); }
.nav-menu__panel hr { margin: 6px 4px; }
.nav-menu__panel form { margin: 0; }
.nav-menu > summary { width: 40px; min-height: 40px; padding: 0; border-color: var(--line); border-radius: 10px; }
@media (max-width: 860px) {
  .site-header__inner { gap: 12px; }
  .nav-links, .nav-cta .nav-desktop { display: none; }
  .nav-menu { display: block; }
  .nav-balance .nav-balance__label, .nav-balance .nav-balance__topup { display: none; }
  .nav-balance__amount { padding: 0 10px; gap: 6px; }
}
/* logged in, the header holds more (the balance, the company, the avatar): the menu takes over below 1100px */
@media (max-width: 1180px) { .site-header__inner--user .nav-balance .nav-balance__label { display: none; } .site-header__inner--user .nav-links { gap: 22px; } }
@media (max-width: 1100px) {
  .site-header__inner--user { gap: 12px; }
  .site-header__inner--user .nav-links, .site-header__inner--user .nav-cta .nav-desktop { display: none; }
  .site-header__inner--user .nav-menu { display: block; }
}
@media (max-width: 400px) { .nav-balance__amount .ic16 { display: none; } }
@media (max-width: 370px) { .nav-avatar { display: none; } }
/* phones: „Вход“ and the menu (as the mock-up); „Регистрация“ is in the menu and in the closing call to action */
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .nav-cta .nav-signup { display: none; }
}
@media (max-width: 400px) { .nav-cta > .btn { padding-inline: 12px; } }
/* the smallest phones (320-360px): the wordmark, „Регистрация“ and the menu button pushed the page 13px sideways at
   320px; tighter gaps, a smaller sign-up button and menu button keep the header inside the 16px gutters */
@media (max-width: 360px) {
  .site-header__inner { gap: 8px; }
  .wordmark { gap: 6px; font-size: 17px; }
  .nav-cta { gap: 6px; }
  .nav-cta > .btn { min-height: 36px; padding-inline: 10px; font-size: 13px; }
  .nav-menu > summary { padding-inline: 8px; }
}

/* ------------------------------------------------------------ footer */
.site-footer { margin-top: var(--s-10); border-top: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 14px; }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); padding-block: 48px 0; }
.site-footer__brand p { margin: 14px 0 0; max-width: 21.3em; } /* 320px */
.site-footer__col h2 { font: 600 12px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }
.site-footer__links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.site-footer__links a { color: var(--ink-2); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px;
  padding-block: 20px 28px; position: relative; font-size: 13px; }
.site-footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-soft); }
.disclaimer { max-width: 47.664em; margin: 0; color: var(--muted); } /* 72ch */
@media (max-width: 860px) { .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .site-footer__inner { padding-top: 40px; } .site-footer__bottom { flex-direction: column; margin-top: 28px; } }
/* the app shell (accounts/_base.html with the sidebar): the slim footer of design v3 – the disclaimer and ©, then the
   service and legal links in one row; the catalogue column and the brand are in the header and the sidebar already */
.site-footer--app { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 24px; padding: 16px var(--gutter); font-size: 13px; }
.site-footer--app > .container { max-width: none; margin: 0; padding: 0; width: auto; }
.site-footer--app .site-footer__inner { order: 2; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; }
.site-footer--app .site-footer__brand, .site-footer--app [aria-labelledby="footer-catalog"] { display: none; }
.site-footer--app .site-footer__col h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.site-footer--app .site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer--app .site-footer__links a { color: var(--muted); }
.site-footer--app .site-footer__bottom { order: 1; margin: 0; padding: 0; gap: 4px 16px; flex-direction: row; }
.site-footer--app .site-footer__bottom::before { content: none; }
@media (max-width: 640px) { .site-footer--app { flex-direction: column; align-items: flex-start; padding-block: 18px; } }

/* the e-mail is not confirmed (accounts/_email_banner.html): a full-width strip under the header on every page */
.verify-strip { background: var(--warn-soft); border-bottom: 1px solid color-mix(in srgb, var(--warn) 22%, var(--warn-soft)); font-size: 14px; color: var(--ink-2); }
.verify-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-block: 10px; }
.verify-strip__inner > .ic16 { color: var(--warn); flex: none; }
.verify-strip__text { flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; }
.verify-strip strong { color: var(--ink); font-weight: 600; }
.verify-strip form { margin: 0; }
body:has(.app-layout > .side-nav) .verify-strip > .container { max-width: none; }

/* a page that ends with a grey band (or a CTA) sits directly on the footer */
.site-footer--flush, main:has(> .section--canvas:last-child) + .site-footer { margin-top: 0; }

/* ------------------------------------------------------------ buttons
   .btn is the secondary (white, bordered) button; .btn--primary is THE blue action – one per view;
   .btn--text is a quiet text button. Sizes: --small (34px), default (42px), --lg (48px). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); font: 600 14px/1.2 var(--font-sans); text-decoration: none;
  white-space: nowrap; cursor: pointer; text-align: center; box-shadow: 0 1px 1px rgba(11, 19, 36, .04);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover { border-color: var(--faint-deco); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn--ghost { background: var(--bg); }
.btn--primary {
  background: var(--accent); border-color: var(--accent); color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 19, 36, .16), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #FFFFFF; }
/* navy ink: a strong action that is not THE blue one of the view (the home search's „Търси“) */
.btn--ink { background: var(--ink); border-color: var(--ink); color: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 19, 36, .2); }
.btn--ink:hover { background: var(--ink-2); border-color: var(--ink-2); color: #FFFFFF; }
.btn--text { border-color: transparent; background: transparent; color: var(--muted); padding-inline: 8px; box-shadow: none; }
.btn--text:hover { color: var(--ink); border-color: transparent; }
.btn--danger { color: var(--crit); }
.btn--danger:hover { border-color: var(--crit); color: var(--crit); }
.btn--small { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: var(--r-sm); }
.btn--lg { min-height: 50px; padding: 0 24px; font-size: 15px; border-radius: var(--r); }
.btn--block { display: flex; width: 100%; }
.btn svg { flex: none; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.link-button:hover { color: var(--accent); }
.link { color: var(--accent); text-decoration: none; }
.link:hover { color: var(--accent-ink); text-decoration: underline; }
.official-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; }
.official-link:hover { color: var(--accent-ink); }
.official-link svg { width: 12px; height: 12px; }
.btn.official-link { color: var(--ink); }

/* ------------------------------------------------------------ pills / badges (status)
   .pill--ok green (suitable / ready / open), --warn orange (attention / missing), --crit red (critical /
   problem), --neutral grey, --accent blue tint (informational, e.g. "Подходяща за Вас"). */
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1.45; white-space: nowrap; background: var(--soft); color: var(--ink-2);
}
.pill .num { font-weight: 600; }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill--crit { background: var(--crit-soft); color: var(--crit); }
.pill--neutral { background: var(--soft); color: var(--ink-2); }
.pill--accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.pill--lg { font-size: 13.5px; padding: 5px 12px; }
.badge {                /* small caps tag ("НОВА", "Пример") */
  display: inline-flex; align-items: center; padding: 3px 6px; border-radius: 5px; vertical-align: 2px;
  font: 600 10.5px/1 var(--font-sans); letter-spacing: .03em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent-ink);
}
.badge--new { margin-right: 6px; }

/* days-left pill ({% days_pill %}): neutral > 10 days, orange 4–10 days ("soon"), red ≤ 3 days, "Утре", "Днес" */
.days-pill {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill);
  font: 600 12px/1.45 var(--font-num); white-space: nowrap; background: var(--soft); color: var(--ink-2);
}
.days-pill--soon { background: var(--warn-soft); color: var(--warn-ink); }
.days-pill--urgent, .days-pill--today { background: var(--crit-soft); color: var(--crit); }
.days-pill--expired, .days-pill--muted { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); font-weight: 500; }

/* day counter box (dashboard deadlines): <div class="daybox daybox--crit"><b class="daybox__n">1</b><span>ден</span></div> */
.daybox { display: grid; place-items: center; align-content: center; min-width: 64px; padding: 8px 6px; border-radius: 10px;
  background: var(--soft); color: var(--ink-2); text-align: center; }
.daybox__n, .daybox b { display: block; font: 600 20px/1 var(--font-num); }
.daybox span { font-size: 11.5px; margin-top: 2px; }
.daybox--ok { background: var(--ok-soft); color: var(--ok); }
.daybox--warn { background: var(--warn-soft); color: var(--warn-ink); }
.daybox--crit { background: var(--crit-soft); color: var(--crit); }

/* ------------------------------------------------------------ chips (filters with counts) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); color: var(--ink-2);
  font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip__count, .chip .num { font: 500 12px/1 var(--font-num); color: var(--muted); }
.chip__count:empty { display: none; }
.chip--on, .chip--active, .chip[aria-pressed="true"], input:checked + .chip { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.chip--on .chip__count, .chip--active .chip__count, input:checked + .chip .chip__count,
.chip--on .num, input:checked + .chip .num { color: var(--faint-deco); }   /* on the navy chip: 6:1 (the mock-up's #8A94A6) */
.chips label { position: relative; display: inline-flex; }
.chip input, .chips input[type="radio"], .chips input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .chips--scroll::-webkit-scrollbar { display: none; }
}

/* ------------------------------------------------------------ cards / panels
   .card: a marketing/service card (padding 24). .panel: a product surface; with .panel__head/.panel__body
   children it drops its own padding (head and body pad themselves). .panel--canvas: grey inner panel. */
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  box-shadow: var(--shadow-sm); display: grid; gap: 10px; align-content: start;
}
.card h3, .card__title { font: 700 17px/1.3 var(--font-display); letter-spacing: -.01em; margin: 6px 0 0; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.card__icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.card__price { margin-top: 6px; font-size: 13px; color: var(--faint); }
.card__price .num { color: var(--ink); font-weight: 600; }
.card--hl { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); position: relative; }
a.card { text-decoration: none; color: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
a.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); color: inherit; }

.panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s-6); }
.panel:has(> .panel__head, > .panel__body, > .panel__foot, > .table, > .table-wrap), .panel--flush { padding: 0; overflow: hidden; }
.panel--plain { background: transparent; box-shadow: none; }
.panel--canvas { background: var(--canvas); box-shadow: none; }
.panel--raised { box-shadow: var(--shadow-lg); }
.panel__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel__head h2, .panel__head h3, .panel__title { font: 700 17px/1.3 var(--font-display); letter-spacing: -.01em; margin: 0; }
.panel__head--canvas { background: var(--canvas); padding-block: 14px; }
.panel__body { padding: 20px; }
.panel__body--tight { padding: 8px 20px 12px; }
.panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--canvas); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
/* list rows inside a panel (checklists, items, documents) */
.panel-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 20px; border-top: 1px solid var(--line); }
.panel__head + .panel-row, .panel-row:first-child { border-top: 0; }
.panel-row h3, .panel-row h4, .panel-row__title { margin: 0; font: 500 14.5px/1.4 var(--font-sans); letter-spacing: 0; }
.panel-row p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); }
.panel-row__source, .source, .panel-row p.panel-row__source { font-size: 12px; line-height: 1.45; color: var(--faint); margin-top: 4px; }
.panel-row__side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: end; }
.panel-row--warn { background: #FFFBF4; }
@media (max-width: 640px) { .panel-row { grid-template-columns: 24px minmax(0, 1fr); } .panel-row__side { grid-column: 2; justify-content: start; } }
.group-label { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 6px;
  font: 600 12.5px/1.2 var(--font-sans); color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }

/* side "buy" card: options with prices and a total */
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; cursor: pointer; }
.opt:last-of-type { border-bottom: 0; }
.opt input { margin: 3px 0 0; accent-color: var(--accent); }
.opt small { display: block; color: var(--faint); font-size: 12.5px; }
.opt .num { font-weight: 600; white-space: nowrap; }
.total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.total__value, .total > span:last-child > .num { font: 600 26px/1.1 var(--font-num); letter-spacing: -.02em; white-space: nowrap; }
.total s { color: var(--faint); font: 500 14px var(--font-num); margin-right: 8px; }
.note { font-size: 12.5px; color: var(--faint); margin: 0; }
/* package picker (tender side card, order form): ONE package as radio cards, the chosen one outlined in blue */
.pkg-pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pkg-opt { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); }
.pkg-opt:hover { border-color: var(--line-strong); }
.pkg-opt input { margin: 3px 0 0; accent-color: var(--accent); }
.pkg-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.pkg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pkg-opt__main { min-width: 0; font-size: 14px; line-height: 1.35; }
.pkg-opt__main b { font-weight: 600; color: var(--ink); }
.pkg-opt__main small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.pkg-opt__price { font: 600 15px/1.35 var(--font-num); white-space: nowrap; color: var(--ink); }
.pkg-opt__tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent); color: #FFFFFF;
  font: 500 11px/1.5 var(--font-sans); vertical-align: 1px; }
.pkg-opt__list { grid-column: 2 / -1; margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink-2); }
.pkg-opt__list li { display: flex; gap: 6px; align-items: baseline; }
.pkg-opt__list li::before { content: "✓"; color: var(--ok); font-weight: 600; }
.pkg-opt__list li.is-client::before { content: "○"; color: var(--faint); }
.pkg-opt__list li.is-client { color: var(--muted); }
.pkg-always { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pkg-always .ic, .pkg-always svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ok); }
.pkg-success { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--r); font-size: 14px; cursor: pointer; }
.pkg-success:has(input:checked) { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.pkg-success input { margin: 3px 0 0; accent-color: var(--ok); }
.pkg-success b { font-weight: 600; }
.pkg-success small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.pkg-success__split { display: block; margin-top: 2px; font: 600 13px/1.4 var(--font-num); color: var(--ink); }
.pkg-success--off { cursor: default; opacity: .6; }
/* callout strip ("10 дни до крайния срок …"): orange by default (= --warn), --accent, --ok, --crit, --neutral.
   Deadlines use the days-pill thresholds everywhere: red ≤3 days, orange ≤10, neutral after that. */
.callout { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--warn-soft); color: var(--warn-ink); font-size: 13.5px; }
.callout > .num, .callout__n { font: 600 22px/1 var(--font-num); flex: none; }
.callout--warn { background: var(--warn-soft); color: var(--warn-ink); }
.callout--accent { background: var(--accent-soft); color: var(--accent-ink); }
.callout--ok { background: var(--ok-soft); color: var(--ok); }
.callout--crit { background: var(--crit-soft); color: var(--crit); }
.callout--neutral { background: var(--canvas); color: var(--ink-2); }

/* key-value summary grid (two columns, stacks on phones) */
.summary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 0; }
.summary > div { padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.summary > div:nth-last-child(-n+2) { border-bottom: 0; }
.summary dt { font-size: 12.5px; color: var(--faint); }
.summary dd { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 600px) { .summary { grid-template-columns: 1fr; } .summary > div:nth-last-child(2) { border-bottom: 1px solid var(--line); } }
/* key-value rows (label left, value right) */
.kv { margin: 0; }
.kv > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--muted); font-size: 13.5px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kv > div { grid-template-columns: 1fr; gap: 2px; } }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------ tables
   .table: clean data table. Inside .panel it gets panel padding. .table--stack: rows become stacked
   blocks under 720px (cells with data-label="…" show the label). Wrap wide tables that must not
   stack in .table-wrap (the wrapper scrolls, the page never does). */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font: 500 12px/1.3 var(--font-sans); color: var(--faint); letter-spacing: .02em; white-space: nowrap; }
.table th, .table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num, .table .t-right { text-align: right; white-space: nowrap; }
.table td.num { font-weight: 500; }
.table td.num .muted { display: block; font-size: 12px; font-weight: 400; }
.table--hover tbody tr { transition: background-color .15s; }
.table--hover tbody tr:hover { background: #FAFBFD; }
.table--middle td { vertical-align: middle; }
.panel > .table th, .panel > .table td, .panel > .table-wrap > .table th, .panel > .table-wrap > .table td { padding: 14px 18px; }
.panel > .table th, .panel > .table-wrap > .table th { padding-block: 12px; }
.table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t-title { font-weight: 500; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 40.02em; } /* 60ch */
a.t-title:hover { color: var(--accent); } /* links only: an unlinked name (<span class="t-title">) stays ink */
.t-sub { color: var(--muted); font-size: 13px; margin: 3px 0 0; }
/* the "·" ends the item before it, glued by a word joiner – a line never starts with it; the items after the first
   (municipality, procedure, lots, the official page) are whole boxes that move to the next line together and wrap
   inside only when longer than a line; the first (the buyer) flows on, so the next item can follow its last line */
.t-sub > span:not(:last-child)::after { content: "\2060·"; margin: 0 6px; color: var(--faint-deco); }
.t-sub > span + span { display: inline-block; max-width: 100%; }
.t-val { font: 600 14.5px/1.3 var(--font-num); white-space: nowrap; text-align: right; }
@media (max-width: 720px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .panel > .table--stack tr { padding: 14px 16px; }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack td, .panel > .table--stack td { flex: 1 1 100%; border: 0; padding: 0; text-align: left; }
  .table--stack td.num, .table--stack td.t-val, .table--stack td.doc-link, .table--stack td.stack-inline { flex: 0 0 auto; width: auto; text-align: left; }
  .table--stack td[data-label]::before { content: attr(data-label) " · "; color: var(--faint); font: 400 12px var(--font-sans); }
  .table--stack td.stack-hide { display: none; }
}

/* ------------------------------------------------------------ forms
   Boxed inputs. .input / .select / .textarea are the new names; .input-underline / .select-underline
   (set by the forms in accounts/, orders/, profiles/, lawbase/) render the same. */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 440px; }
.form--wide { max-width: 680px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-legend { font: 700 18px/1.3 var(--font-display); letter-spacing: -.01em; margin: 10px 0 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.field__help, .helptext, .form .helptext { font-size: 12.5px; color: var(--muted); }
.input, .select, .textarea, .input-underline, .select-underline {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink);
  font: 400 15px/1.35 var(--font-sans); box-shadow: var(--shadow-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder, .input-underline::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover, .input-underline:hover, .select-underline:hover { border-color: var(--faint-deco); }
.input:focus, .select:focus, .textarea:focus, .input-underline:focus, .select-underline:focus { outline: 0; border-color: var(--accent); box-shadow: var(--ring); }
.input[disabled], .select[disabled], .input-underline[disabled], .select-underline[disabled] { background: var(--canvas); color: var(--muted); cursor: not-allowed; }
.select, .select-underline {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.select option, .select-underline option { background: var(--bg); color: var(--ink); }
textarea.input, textarea.input-underline, .textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input[type="file"].input, input[type="file"].input-underline { padding: 7px 10px; font-size: 13.5px; color: var(--muted); }
input[type="file"]::file-selector-button {
  font: 500 13px var(--font-sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 6px 12px; margin-right: 12px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--faint-deco); }
input[type="date"].input, input[type="date"].input-underline { min-height: 42px; }
.field--invalid .input, .field--invalid .select, .field--invalid .input-underline, .field--invalid .select-underline,
.input[aria-invalid="true"], .input-underline[aria-invalid="true"], .select-underline[aria-invalid="true"] { border-color: var(--crit); }
.field:has(.errorlist) .input-underline, .field:has(.errorlist) .select-underline { border-color: var(--crit); }
/* checkbox / radio row */
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; cursor: pointer; min-height: 0; }
.check input[type="checkbox"], .check input[type="radio"] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  border: 1px solid var(--line-strong); border-radius: 5px; background: var(--bg); cursor: pointer;
  display: grid; place-content: center; box-shadow: var(--shadow-sm);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.check input[type="radio"] { border-radius: 50%; }
.check input[type="checkbox"]::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.check input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; opacity: 0; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check .errorlist { grid-column: 2; }
.check--inline { display: inline-grid; align-items: center; }
/* segmented toggle (e.g. Traxer / Аз per item): radios inside .segmented */
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; background: var(--bg); font-size: 12.5px; }
.segmented label, .segmented > span, .segmented > a { position: relative; display: inline-flex; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span, .segmented > a { padding: 4px 10px; border-radius: 6px; color: var(--muted); cursor: pointer; text-decoration: none; }
.segmented input:checked + span, .segmented .is-on, .segmented [aria-pressed="true"], .segmented [aria-current="true"] { background: var(--ink); color: #FFFFFF; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.errorlist { color: var(--crit); list-style: none; padding: 0; margin: 0; font-size: 13px; }
.errorlist.nonfield, .form-errors { padding: 12px 14px; border-radius: var(--r); background: var(--crit-soft); }
/* upload drop zone (a real drop target only) */
.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 14px 16px; background: var(--canvas);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); }
/* upload row: a link to an upload form (solid, so it does not suggest drag and drop; .dropzone is for a real drop target) */
.upload-box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; background: var(--canvas);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); }
/* sticky bottom action bar (long forms) */
.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .96); padding: 14px 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------------ alerts / messages / notices */
/* A flex row only when the alert holds a button or a form next to its text: loose text mixed with inline tags
   (<b>, <a>, <span class="num">) would otherwise become separate flex items spread across the row. */
.alert, .messages li, .notice { display: block; }
.alert:has(> .btn, > form), .messages li:has(> .btn, > form), .notice:has(> .btn, > form) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
}
.alert, .messages li, .notice {
  padding: 12px 16px; border-radius: var(--r); border: 1px solid #DCE6FF; background: #F3F7FF; color: var(--ink-2); font-size: 14px;
}
.alert--ok, .alert--success, .messages li.success { background: var(--ok-soft); border-color: #C5E8D7; color: #0B5E41; }
.alert--warn, .alert--warning, .messages li.warning { background: var(--warn-soft); border-color: #F5DDB8; color: #8A4806; }
.alert--crit, .alert--error, .messages li.error { background: var(--crit-soft); border-color: #F4CCC5; color: #9A2818; }
.alert--neutral { background: var(--canvas); border-color: var(--line); }
.alert form, .notice form { margin: 0; }
.alert a:not(.btn), .notice a:not(.btn), .notice .link-button { color: var(--accent); }
.messages { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.notice { margin: 16px 0 0; }

/* ------------------------------------------------------------ page header, breadcrumbs */
.page-head { padding: 28px 0 24px; border-bottom: 1px solid var(--line); }
.page-head .headline { max-width: 20.19em; } /* 30ch */
.page-head--wide .headline { max-width: none; }
.page-head .lede { margin-top: 10px; }
.page-head--canvas { background: var(--canvas); }
.page-head--plain { border-bottom: 0; }
.breadcrumbs, .crumbs { font-size: 13px; color: var(--faint); margin: 0 0 14px; }
.breadcrumbs ol, .crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.breadcrumbs li + li::before, .crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line-strong); }
.breadcrumbs a, .crumbs a { text-decoration: none; }
.breadcrumbs a:hover, .crumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current="page"], .crumbs [aria-current="page"] { color: var(--muted); }

/* ------------------------------------------------------------ tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { padding: 12px 14px; font-size: 14px; color: var(--muted); text-decoration: none; background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-current="page"], .tabs [aria-selected="true"], .tabs .is-active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.tabs__count { font: 500 11.5px var(--font-num); background: var(--soft); color: var(--ink-2); border-radius: var(--r-pill); padding: 1px 6px; margin-left: 4px; }

/* ------------------------------------------------------------ account layout (sidebar + main)
   <div class="app-layout"><nav class="side-nav">…</nav><div class="app-main">…</div></div>.
   Under 900px the sidebar becomes a horizontal, scrollable strip above the content. */
.app-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 70vh; border-bottom: 1px solid var(--line); }
.side-nav { border-right: 1px solid var(--line); padding: 20px 12px; background: var(--canvas); display: grid; gap: 2px; align-content: start; }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-nav a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  border: 1px solid transparent; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.side-nav a:hover { background: var(--bg); color: var(--ink); }
.side-nav a[aria-current="page"], .side-nav a.is-active { background: var(--bg); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-sm); border-color: var(--line); }
.side-nav .num, .side-nav__count { font: 500 12px var(--font-num); color: var(--faint); }
.side-nav hr, .side-nav__sep { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.side-nav__label { font: 600 11.5px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 10px 10px 4px; }
.app-main { padding: 28px; display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.app-main__title { font: 800 26px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0; }
@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .side-nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px var(--gutter); overflow-x: auto; scrollbar-width: none;
    display: flex; gap: 4px; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav ul { display: flex; gap: 4px; }
  .side-nav a { white-space: nowrap; padding: 7px 10px; }
  .side-nav hr, .side-nav__sep, .side-nav__label { display: none; }
}
@media (max-width: 640px) { .app-main { padding: 20px var(--gutter); } }

/* ------------------------------------------------------------ KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpis, .kpis--3 { grid-template-columns: 1fr 1fr; } }
.kpi { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--bg); min-width: 0; }
.kpi dt, .kpi__label { font-size: 13px; color: var(--muted); }
.kpi dd, .kpi__value { margin: 8px 0 0; font: 600 26px/1.15 var(--font-num); letter-spacing: -.02em; }
.kpi small, .kpi__note { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.kpi a { text-decoration: none; }

/* ------------------------------------------------------------ stepper (order preparation, 6 steps)
   <ol class="stepper"><li class="is-done"><i></i><span>1. Фирма</span></li><li class="is-current">…</li>…</ol> */
.stepper { display: grid; grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.stepper > * { display: grid; gap: 8px; align-content: start; font-size: 13px; color: var(--faint); }
.stepper i { display: block; height: 4px; border-radius: 99px; background: var(--soft); }
.stepper .is-done, .stepper .done { color: var(--ink-2); }
.stepper .is-done i, .stepper .done i { background: var(--accent); }
.stepper .is-current, .stepper .cur { color: var(--ink); font-weight: 600; }
.stepper .is-current i, .stepper .cur i { background: linear-gradient(90deg, var(--accent) 60%, var(--soft) 60%); }
@media (max-width: 760px) {
  .stepper span { display: none; }
  .stepper .is-current span, .stepper .cur span { display: block; white-space: nowrap; }
}

/* ------------------------------------------------------------ progress ring / bar */
/* <div class="ring" style="--p:72"><b class="ring__value">72%</b></div> */
.ring { --p: 0; width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--soft) 0); }
.ring__value, .ring > b { width: 66px; height: 66px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font: 600 20px var(--font-num); }
.ring--sm { width: 56px; height: 56px; }
.ring--sm .ring__value, .ring--sm > b { width: 44px; height: 44px; font-size: 14px; }
.progress-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* <div class="bar"><i style="width:72%"></i></div> */
.bar { height: 6px; width: 90px; border-radius: 99px; background: var(--soft); overflow: hidden; flex: none; }
.bar--wide { width: 100%; }
.bar > i, .bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bar--ok > i { background: var(--ok); } .bar--warn > i { background: #E2A13B; } .bar--crit > i { background: var(--crit); }

/* ------------------------------------------------------------ match (only with a company profile, always with reasons) */
.match { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.match__bar { width: 46px; height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.match__bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.match__bar--mid i { background: #E2A13B; }
.match__bar--low i { background: var(--crit); }
.match__txt { font: 600 13px var(--font-num); color: var(--ok); }
.match__txt--mid { color: var(--warn-ink); }
.match__txt--low { color: var(--crit); }
.match--none { color: var(--faint); font-size: 13px; }
/* reasons next to a match: <ul class="reasons"><li class="is-ok">ЦПРС</li><li class="is-warn">застраховка</li></ul> */
.reasons { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.reasons li::before { content: "○ "; color: var(--faint-deco); }
.reasons .is-ok::before { content: "✓ "; color: var(--ok); }
.reasons .is-warn::before { content: "⚠ "; color: var(--warn); }
.reasons .is-crit::before { content: "✕ "; color: var(--crit); }
/* with the details in full (tender page): one reason per line */
.reasons--detail { flex-direction: column; flex-basis: 100%; gap: 4px; font-size: 13px; color: var(--ink-2); }
.reasons--detail b { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------ status icons (inline SVG with stroke=currentColor) */
.ic-ok { color: var(--ok); } .ic-warn { color: var(--warn); } .ic-crit { color: var(--crit); } .ic-todo { color: var(--faint-deco); } .ic-accent { color: var(--accent); }
.ic { width: 20px; height: 20px; flex: none; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 10px; align-items: start; color: var(--ink-2); }
.ticks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; background: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ticks--svg li::before { content: none; }

/* ------------------------------------------------------------ closing call to action (design v3: a light band with the page's
   one primary button; home, /tseni/) */
.cta-light { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px; padding: 44px 48px;
  border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, var(--accent-soft) 0%, var(--canvas) 55%, var(--bg) 100%); }
.cta-light > div:first-child { flex: 1 1 480px; min-width: 0; }
.cta-light h2 { margin: 0; max-width: 18.8em; font: 800 34px/1.12 var(--font-display); letter-spacing: -.03em; }
.cta-light p { margin: 10px 0 0; max-width: 36em; font-size: 16px; color: var(--muted); }
.cta-light__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .cta-light { padding: 28px 22px; }
  .cta-light h2 { font-size: 26px; }
  .cta-light__actions, .cta-light__actions .btn { width: 100%; }
}

/* ------------------------------------------------------------ utilities */
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0 !important; } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }
.text-right { text-align: right; }
@media (max-width: 640px) { .hide-phone { display: none !important; } }
.only-phone { display: none !important; } @media (max-width: 640px) { .only-phone { display: revert !important; } }
.inline-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.empty { padding: 48px 16px; color: var(--muted); text-align: center; }
.empty__title { font: 700 20px/1.3 var(--font-display); color: var(--ink); margin: 0 0 6px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--faint-deco); vertical-align: middle; }
.status-dot--on { background: var(--ok); }

/* ------------------------------------------------------------ HTMX */
.htmx-indicator { opacity: 0; transition: opacity .2s var(--ease); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .result-list, .htmx-request .tender-table { opacity: .55; transition: opacity .2s var(--ease); }

/* ==========================================================================
   Legacy components still used by templates that the screen redesign has not reached yet.
   Restyled to Variant A; screens may replace them.
   ========================================================================== */
/* hero (home) */
.hero { padding-block: 64px 32px; }
@media (max-width: 640px) { .hero { padding-block: 32px 20px; } }
/* big search box */
.pill-search, .search-box {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 780px; margin: 28px 0 0; padding: 8px 8px 8px 18px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-md);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pill-search:focus-within, .search-box:focus-within { border-color: var(--accent); box-shadow: var(--ring), var(--shadow-md); }
.pill-search__icon { flex: none; width: 20px; height: 20px; color: var(--faint-deco); }
.pill-search input[type="search"], .pill-search input[type="text"], .search-box input {
  flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; box-shadow: none; padding: 0;
  font: 400 17px/1.4 var(--font-sans); color: var(--ink);
}
.pill-search input::placeholder, .search-box input::placeholder { color: var(--faint); }
.pill-search .btn, .search-box .btn { flex: none; min-height: 46px; border-radius: var(--r); padding-inline: 20px; font-size: 15px; }
@media (max-width: 640px) {
  .pill-search, .search-box { padding-left: 14px; border-radius: 14px; }
  .pill-search input[type="search"], .pill-search input[type="text"], .search-box input { font-size: 16px; height: 40px; }
  .pill-search .btn, .search-box .btn { min-height: 42px; padding-inline: 14px; }
}
/* filter row */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 24px 0 0; }
.filters .field { min-width: 160px; }
@media (max-width: 640px) { .filters { gap: 10px 12px; } .filters .field { min-width: calc(50% - 6px); flex: 1; } }

/* results head (account pages) */
.results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 36px 0 10px; }
.results-head__count { font-size: 14px; color: var(--muted); }

/* numbered pages (core/_pager.html: « ‹ 1 … 4 5 [6] 7 8 … 40 › ») and the total above them */
.list-pages { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0 8px; }
.list-pages__range { margin: 0; font-size: 13px; color: var(--muted); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; font-size: 14px; }
.pager__page, .pager__step { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); color: var(--ink-2); text-decoration: none; transition: border-color .15s var(--ease), color .15s var(--ease); }
a.pager__page:hover, a.pager__step:hover { border-color: var(--line-strong); color: var(--ink); }
/* the current page is a state, not an action: navy ink like .chip--on (the blue stays for actions and links) */
.pager__page.is-current { background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 600; }
.pager__step.is-disabled { border-color: transparent; background: transparent; color: var(--faint-deco); }
.pager__gap { min-width: 20px; text-align: center; color: var(--faint); }
.pager__gap--narrow { display: none; }
/* a phone: one page on each side of the current one (core.listing.Pager.links), ‹ 1 … 7 [8] 9 … 16 › on one line */
@media (max-width: 640px) {
  .pager { gap: 3px; }
  .pager__page, .pager__step { min-width: 32px; height: 32px; padding: 0 6px; }
  .pager__gap { min-width: 14px; }
  .pager__step--edge, .pager__page--wide, .pager__gap--wide { display: none; }
  .pager__gap--narrow { display: inline-block; }
}
/* the order of a stacked table on a phone (core/_sort_chips.html): its header links are hidden there (.table--stack) */
.sort-chips { display: none; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.sort-chips .chip { text-decoration: none; }
.sort-chips .chip__arrow { font-size: 10px; margin-left: 2px; }
@media (max-width: 720px) { .sort-chips { display: flex; } }
/* sortable table headers (core/_sort_th.html) */
.sort-link { display: inline-flex; align-items: baseline; gap: 4px; color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--ink); }
.sort-link__arrow { font-size: 10px; color: var(--faint-deco); }
.sort-link.is-active { color: var(--ink); }
.sort-link.is-active .sort-link__arrow { color: var(--accent); }
/* a total next to a list („12 подготовки“) */
.list-count { font-size: 13px; color: var(--muted); }

/* dashboard tiles (legacy grid; new screens use .kpis) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--bg); min-width: 0; }
.tile .overline { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
.tile__value { font: 600 26px/1.15 var(--font-num); letter-spacing: -.02em; margin: 6px 0 4px; }

/* ------------------------------------------------------------ cookie consent (seo/_cookie_banner.html, seo/consent.js)
   A non-blocking bottom panel: white, a 1px top border, a light shadow, the page usable around it (no wall). Kept
   low – two lines, 60px, on a 1280px desktop; four lines and the buttons, about 165px, on a 360px phone – so the home
   page's search box stays in view (with the phone hero of home.css, design v3: from 360×640 up; measured 2026-10-13).
   Three equal .btn buttons, never .btn--primary: refusing is as easy as accepting. „Настройки“ is a <details>: open,
   its panel (the two purposes and „Запази избора“) is a drawer on top of the banner, positioned against .consent
   (the fixed panel), so the buttons never move. While the banner is shown the page keeps room for it below the footer
   and above the sticky bottom bars (--consent-h: its height, set by consent.js). Opened again from the footer it
   shows the current choice (aria-pressed, the ticked boxes) and a close button. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--bg);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -16px rgba(11, 19, 36, .22); }
.consent[hidden] { display: none; }
.consent:focus { outline: none; }
.consent:focus-visible { box-shadow: inset 0 3px 0 var(--accent), 0 -10px 30px -16px rgba(11, 19, 36, .22); }
.consent__inner { display: flex; align-items: center; gap: var(--s-3) var(--s-6); padding-block: 9px; }
.consent__text { flex: 1 1 auto; min-width: 0; margin: 0; max-width: 62em; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.consent__text a { color: var(--accent); }
.consent__text a:hover { color: var(--accent-ink); }
.consent__title { font-weight: 600; color: var(--ink); }
.consent__now b { font-weight: 600; color: var(--ink); }
.consent__actions { display: flex; gap: var(--s-2); flex: none; margin: 0 0 0 auto; }
.consent__actions .btn { min-width: 100px; min-height: 38px; }
.consent__actions .btn[aria-pressed="true"],
.consent__settings[open] > summary { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.consent__settings > summary { list-style: none; }
.consent__settings > summary::-webkit-details-marker { display: none; }
.consent__panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; min-width: 0; margin: 0; padding: 0;
  border: 0; }
.consent__panel .check { font-size: 13.5px; color: var(--ink-2); }
.consent__panel .check b { color: var(--ink); }
.consent .consent__panel { position: absolute; left: 0; right: 0; bottom: 100%; background: var(--bg);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px;
  padding: 14px max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -16px rgba(11, 19, 36, .22); }
.consent .consent__panel .check { grid-column: 1; }
.consent .consent__panel .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.consent__close { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: -6px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
.consent__close[hidden] { display: none; }
.consent__close:hover { background: var(--canvas); color: var(--ink); }
@media (max-width: 760px) {
  .consent__inner { flex-wrap: wrap; gap: 8px; padding-block: 10px; }
  .consent__text { flex-basis: calc(100% - 44px); font-size: 13px; line-height: 1.45; }
  .consent__actions .btn { min-height: 40px; }
  .consent:not(.consent--reopened) .consent__text { flex-basis: 100%; }
  .consent__close { order: 1; margin: -4px -8px 0 0; }
  .consent__actions { order: 2; flex: 1 1 100%; margin: 0; }
  .consent__actions .btn, .consent__settings { flex: 1 1 0; min-width: 0; }
  .consent__actions .btn { padding-inline: 10px; }
  .consent__settings > summary { width: 100%; }
  .consent .consent__panel { grid-template-columns: minmax(0, 1fr); padding-block: 12px; gap: 10px; }
  .consent__panel .check { flex: 1 1 100%; font-size: 13px; }
  .consent .consent__panel .btn { grid-column: 1; grid-row: auto; flex: 1 1 100%; }
}
body:has(> .consent:not([hidden])) { padding-bottom: var(--consent-h, 132px); }
body:has(> .consent:not([hidden])) .sticky-actions,
body:has(> .consent:not([hidden])) .lot-cmp__sum { bottom: var(--consent-h, 132px); }
/* the phone menu opens inside the sticky header: while it is open the header stays above the banner, and the panel
   scrolls on its own when it is taller than the screen (the page under a sticky header cannot bring it into view) */
.site-header:has(.nav-menu[open]) { z-index: 70; }
.nav-menu[open] .nav-menu__panel { max-height: calc(100vh - var(--header-h) - 16px); max-height: calc(100dvh - var(--header-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
/* the choice on the cookie policy page (#izbor): the same form, in the flow of the text, the purposes open below the
   two buttons (no „Настройки“ toggle there) */
.consent-choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin: 16px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--canvas); }
.consent-choice p { margin: 0; }
.consent-choice .consent__actions { flex: 1 1 100%; flex-wrap: wrap; margin: 0; }
.consent-choice .consent__settings { flex: 1 1 100%; }
.consent-choice .consent__settings > summary { display: none; }

/* ==========================================================================
   Site-wide type features. Last in the file and !important on purpose: every `font:` shorthand (here and
   in the app stylesheets) resets these two properties, and both are owner/design rules, not per-component
   choices.
   - lining figures for every number, tabular where numbers stand alone (owner's request);
   - no Bulgarian localized Cyrillic forms: lang="bg" would switch Manrope and Montserrat to them
     (в like β, т like m), while the approved mock-up uses the standard forms.
   ========================================================================== */
*, *::before, *::after {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "locl" 0 !important;
}
/* Tabular (equal-width) figures where numbers stand alone or line up: amounts, counts, dates, days left.
   Not site-wide: Inter's tabular set also widens the hyphen ("Най - ниска"), and tabular digits leave holes
   in running text. Every selector below is set in Montserrat, whose punctuation does not change with tnum. */
.num, .num *, .amount, .t-val, .days-pill, .daybox, .kpi dd, .kpi__value, .tile__value, .total__value, .total s,
.ring__value, .ring > b, .match__txt, .tabs__count, .chip__count, .side-nav__count, .callout__n, .callout > .num,
.live-count strong, .status-badge b, .fact-strip__big, .plan__price, .how-step__n, .lot-bar__amt, .pmx__price, .tender-countdown__n,
.more-filters__count, .code-input {
  font-variant-numeric: lining-nums tabular-nums !important;
}