/* ═══════════════════════════════════════════════════════════════
   components.css — общие компоненты КРС Маркета (02.10.2026).

   Правила, которые держат сайт цельным:
   • Цвет. Фирменный — тёмно-зелёный (--g800). Ярко-зелёный кнопкой не бывает.
     Второй акцент — «солома» (--straw, с 04.10.2026, css/theme-warm.css): главное действие
     сделки на экране, «Срочно», цена. Жёлтый — рейтинг. Фон страниц — крем, не серый.
   • Кнопки. Главная на светлом фоне — тёмно-зелёная; на тёмном — белая с зелёным
     текстом. Вторичная — контурная. Высота 40 (обычная) или 48 (крупная), скругление 12.
   • Карточка. Белая, рамка 1px, скругление 16, тень только при наведении.
   • Иконка. Линейная, толщина 1.8, в светло-зелёной плашке, цвет --g700.
   • Заголовок блока — слева, подзаголовок серым под ним, ссылка «Все …» справа.
   • Вкладки-таблетки: одна высота, активная — тёмно-зелёная.

   Подключать после base.css. Классы ниже — для новой разметки; старые классы
   страниц приводятся к этим же значениям в стилях самих страниц.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --btn-h:40px; --btn-h-lg:48px; --btn-r:12px;
  --card-r:16px; --card-border:1px solid var(--gr100);
  --status-urgent:#dc3b1a; --status-rating:#f59e0b;
}

/* ── Кнопки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 18px;
  border-radius:var(--btn-r);font:600 14px/1 var(--font-text);cursor:pointer;text-decoration:none;
  border:1.5px solid transparent;transition:background .15s,border-color .15s,color .15s,transform .15s;white-space:nowrap}
.btn-lg{height:var(--btn-h-lg);padding:0 24px;font:700 15px/1 var(--font-display)}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--g800);color:#fff}
.btn-primary:hover{background:var(--g700)}
.btn-secondary{background:#fff;color:var(--g800);border-color:var(--gr200)}
.btn-secondary:hover{border-color:var(--g700);color:var(--g700)}
/* на тёмном фоне */
.btn-on-dark{background:#fff;color:var(--g800)}
.btn-on-dark:hover{background:var(--g50)}
.btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ── Карточка ── */
.card{background:#fff;border:var(--card-border);border-radius:var(--card-r);transition:border-color .2s,box-shadow .2s,transform .2s}
.card-link:hover{border-color:var(--g400);box-shadow:var(--sh-md);transform:translateY(-3px)}

/* ── Иконка в плашке ── */
.icon-tile{width:44px;height:44px;border-radius:12px;background:var(--g50);color:var(--g700);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── Заголовок блока ── */
.block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.block-title{font:800 24px/1.2 var(--font-display);color:var(--gr800);margin:0}
.block-sub{font-size:14px;color:var(--gr500);margin-top:6px}
.block-link{font-size:14px;font-weight:600;color:var(--g700);text-decoration:none}
.block-link:hover{color:var(--g800);text-decoration:underline}

/* ── Вкладки-таблетки ── */
.pill-tabs{display:flex;gap:6px;flex-wrap:wrap}
.pill-tab{height:36px;padding:0 16px;border-radius:100px;border:1.5px solid var(--gr200);background:#fff;
  color:var(--gr600);font:600 14px/1 var(--font-text);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.pill-tab:hover{border-color:var(--g400);color:var(--g700)}
.pill-tab.active{background:var(--g800);border-color:var(--g800);color:#fff}

/* ═══ Ветеринарное благополучие хозяйства (js/farm-health-ui.js, 04.10.2026) ═══ */
.vh-box{background:#fff;border:1px solid var(--gr100);border-radius:16px;padding:18px 20px;margin-bottom:24px}
.vh-box.all{border-color:#cfe7d8;background:linear-gradient(180deg,#f3faf5,#fff 60%)}
.vh-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.vh-ico{width:40px;height:40px;border-radius:12px;background:var(--cream-2,#EEE7D4);color:var(--g800);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vh-box.all .vh-ico{background:var(--g800);color:var(--straw-300,#F2C468)}
.vh-ico svg,.vh-inline>svg,.vh-doc svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vh-ico svg{width:22px;height:22px}
.vh-title{font:800 17px/1.3 var(--font-display,'Geologica',sans-serif);color:var(--g900)}
.vh-src{font-size:13px;color:var(--gr500);margin-top:2px}
.vh-ok{color:var(--g700);font-weight:800}
.vh-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vh-row{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--cream,#F6F3EA)}
.vh-name{font-size:13px;color:var(--gr600)}
.vh-st{font-size:14px;font-weight:700}
.vh-st.free{color:var(--g700)}
.vh-st.recovering{color:#A06A0E}
.vh-st.none{color:var(--gr400);font-weight:500}
.vh-doc{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:600;color:var(--g700);text-decoration:none}
.vh-doc svg{width:15px;height:15px}
.vh-doc:hover{color:var(--g900);text-decoration:underline}
.vh-inline{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--cream,#F6F3EA);color:var(--g800)}
.vh-inline.all{background:#EAF5EE}
.vh-inline>svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.vh-inline b{display:block;font-size:13px;font-weight:700;color:var(--g900);line-height:1.35}
.vh-inline span{display:block;font-size:12px;color:var(--gr500);margin-top:2px}
@media(max-width:600px){.vh-rows{grid-template-columns:1fr}.vh-row{flex-direction:row;justify-content:space-between;align-items:center}}
/* Ветобстановка в регионе и перевозка (07.10.2026, данные Цербера) */
.vr-box{display:flex;flex-direction:column;gap:12px}
.vr-head{display:flex;gap:12px;align-items:flex-start}
.vr-ico{width:36px;height:36px;border-radius:10px;background:var(--cream-2,#EEE7D4);color:var(--g800);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vr-ico svg,.vr-sub svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vr-ico svg{width:20px;height:20px}
.vr-title{font:800 16px/1.3 var(--font-display,'Geologica',sans-serif);color:var(--g900)}
.vr-src{font-size:12px;color:var(--gr500);margin-top:2px}
.vr-rows{display:flex;flex-direction:column;gap:6px}
.vr-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 10px;border-radius:10px;background:var(--cream,#F6F3EA)}
.vr-name{font-size:13px;color:var(--gr600)}
.vr-st{font-size:13px;font-weight:700;text-align:right;white-space:nowrap}
.vr-st small{display:block;font-size:11px;font-weight:500;color:var(--gr500)}
.vr-st.free{color:var(--g700)}
.vr-st.bad{color:#B4441F}
.vr-st.none{color:var(--gr500);font-weight:600}
.vr-more summary,.vr-cond summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--g700)}
.vr-more .vr-rows{margin-top:8px}
.vr-transit{border-top:1px solid var(--gr100);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.vr-sub{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--g900);font-size:14px}
.vr-sub svg{width:18px;height:18px}
.vr-sel{width:100%;padding:9px 10px;border:1px solid var(--gr200);border-radius:10px;font:inherit;font-size:14px;background:#fff}
.vr-res{display:flex;flex-direction:column;gap:8px}
.vr-tr{padding:10px 12px;border-radius:10px;background:var(--cream,#F6F3EA)}
.vr-tr b{display:block;font-size:14px}
.vr-tr span{display:block;font-size:12px;color:var(--gr500);margin-top:2px}
.vr-tr.ok{background:#EAF5EE}.vr-tr.ok b{color:var(--g700)}
.vr-tr.cond{background:#FBF1DD}.vr-tr.cond b{color:#8A5A0B}
.vr-tr.ban{background:#FBE7E1}.vr-tr.ban b{color:#B4441F}
.vr-conds{display:flex;flex-direction:column;gap:6px}
.vr-cond{padding:8px 10px;border:1px solid var(--gr100);border-radius:10px}
.vr-cond i{font-style:normal;font-weight:500;color:var(--gr500)}
.vr-cond ul{margin:6px 0 0;padding-left:18px;font-size:12px;color:var(--gr700);line-height:1.45}
.vr-cond li+li{margin-top:4px}
.vr-must{font-size:12px;color:var(--gr500);margin-top:6px}
.vr-note{font-size:12px;color:var(--gr500);line-height:1.45}
.vr-note a{color:var(--g700);font-weight:600}
/* Стадо хозяйства из DairyNews у продавца в объявлении (07.10.2026) */
.sdn{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--cream,#F6F3EA)}
.sdn-h{font-size:12px;font-weight:700;color:var(--gr600);margin-bottom:6px}
.sdn-g{display:flex;gap:14px;flex-wrap:wrap}
.sdn-g b{display:block;font:800 16px/1.2 var(--font-display,'Geologica',sans-serif);color:var(--g900)}
.sdn-g span{font-size:11px;color:var(--gr500)}
.sdn-src{font-size:11px;color:var(--gr400);margin-top:6px}