/* =========================================================================
   PharmCo.world — Редизайн 1b «Аптека»
   Готовый референс-стиль. Framework-agnostic (чистый CSS).
   Перенесите переменные и правила в стек проекта как есть.
   ========================================================================= */

:root {
  /* Цвета */
  --primary:        #0d9488;  /* основной бирюзовый: кнопки, ссылки, цены-минимум */
  --primary-hover:  #0b7d73;  /* ховер кнопок */
  --primary-dark:   #0f4e49;  /* тёмная верхняя полоса, футер, блок "лучшая цена" */
  --ink:            #12232e;  /* основной текст, заголовки */
  --muted:          #5a6f78;  /* вторичный текст, описания */
  --label:          #6b8087;  /* подписи, заголовки колонок */
  --surface:        #ffffff;
  --bg-soft:        #f0f7f6;  /* мягкие панели */
  --bg-hero:        #f3f9f8;  /* фон hero */
  --bg-row-alt:     #f7fbfa;  /* служебные строки (фильтр-бар, пагинация) */
  --bg-best:        #f4fbf9;  /* подсветка строки с мин. ценой */
  --border:         #d4e2e0;  /* внешние границы */
  --border-inner:   #e4eeec;  /* разделители секций */
  --border-row:     #eef4f3;  /* разделители строк таблиц */
  --chip-bg:        #dff2ef;  /* активный чип фильтра — светлый */
  --chip-text:      #0d7d72;
  --chip-border:    #8ecfc5;
  --tag-bg:         #dff2ef;  /* бейдж "аналог", "в наличии" */
  --warn:           #c98a2b;  /* ограниченное наличие */
  --nodata:         #90a6ab;  /* прочерк "—" */
  --danger:         #b3261e;  /* текст ошибки/статуса error */
  --danger-bg:      #fbeae9;  /* фон бейджа/алерта ошибки */

  /* Типографика */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Размеры */
  --container: 1200px;
  --radius-card: 12px;
  --radius-box: 10px;
  --radius-btn: 8px;
  --radius-chip: 6px;

  /* Тени */
  --shadow-card: 0 10px 30px -18px rgba(18,35,46,.25);
  --shadow-search: 0 12px 26px -18px rgba(13,148,136,.35);
}

/* ---------- Reset / базовое ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }
.mono { font-family: var(--font-mono); }

/* =========================================================================
   КОНТЕЙНЕР (ключевое правило ширины)
   Контент НЕ растягивается на всю ширину. Цветные полосы — на 100%,
   но их содержимое выровнено по контейнеру. На больших экранах — поля по бокам.
   ========================================================================= */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 900px) { .container { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 640px) { .container { padding-left: 16px; padding-right: 16px; } }

/* =========================================================================
   ШАПКА
   ========================================================================= */
.topbar { background: var(--primary-dark); color: #cfeae7; }
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
@media (max-width: 560px) { .topbar .tb-note { display: none; } }
.topbar .tb-right { display: flex; align-items: center; gap: 12px; }
.topbar select {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px;
  color: #fff;
  font: 600 12.5px var(--font-sans);
  cursor: pointer;
  padding: 4px 8px;
  outline: none;
}
.topbar select:hover { background: rgba(255,255,255,.2); }

.masthead { border-bottom: 2px solid var(--primary); background: var(--surface); }
.masthead .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand-logo {
  width: 34px; height: 34px; border-radius: var(--radius-btn);
  background: var(--primary); color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-name { font-weight: 700; font-size: 27px; color: var(--ink); letter-spacing: -0.02em; }
.brand-name .tld { color: var(--primary); }

/* Главная страница — крупнее */
.masthead .brand-logo { width: 46px; height: 46px; font-size: 24px; }
.masthead .brand-name { font-size: 38px; }

/* Страница поиска — компактнее */
.search-head .brand-logo { width: 28px; height: 28px; font-size: 14px; }
.search-head .brand-name { font-size: 20px; color: #fff; }

.nav { display: flex; gap: 22px; font-size: 14px; font-weight: 600; color: #3f5760; }
.nav a.active { color: var(--primary); }
.nav a:hover { color: var(--primary); }

.masthead-search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-btn); font-size: 13px; font-weight: 600; color: #3f5760;
}

/* =========================================================================
   ГЛАВНАЯ — HERO (сплит 2 колонки)
   ========================================================================= */
.hero { background: linear-gradient(180deg, var(--bg-hero) 0%, #ffffff 100%); }
.hero .container {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px;
  align-items: center; padding-top: 44px; padding-bottom: 44px;
}
.hero h1 {
  font-size: 38px; line-height: 1.1; font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 12px;
}
.hero p.lead { font-size: 16px; color: var(--muted); margin: 0 0 24px; }

/* Поле поиска (hero) */
.searchbar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-box); padding: 8px;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-search);
}
.searchbar .sb-input {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  color: var(--muted); font-size: 15px;
}
.searchbar input {
  flex: 1; border: none; outline: none; font: inherit; color: var(--ink);
  background: transparent;
}
.btn {
  background: var(--primary); color: #fff; font-weight: 700; font-size: 15px;
  border-radius: var(--radius-btn); padding: 0 26px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.btn:hover { background: var(--primary-hover); }
.btn-sm { height: auto; padding: 8px 14px; font-size: 13px; border-radius: 7px; }

.popular { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.popular .lbl { font-size: 13px; color: var(--label); font-weight: 600; }
.tag {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-chip); padding: 5px 12px;
  font-size: 13px; font-weight: 600; color: #2c4a44;
}
.tag:hover { border-color: var(--primary); color: var(--primary); }

/* Карточка-пример таблицы (hero, правая колонка) */
.example-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card);
}
.example-card .ec-head {
  background: var(--bg-soft); padding: 12px 16px; border-bottom: 1px solid var(--border-inner);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 700;
}
.pill {
  font-size: 11.5px; font-weight: 600; color: var(--primary);
  background: var(--tag-bg); padding: 3px 8px; border-radius: 5px;
}
.ec-row {
  display: grid; grid-template-columns: 1fr auto 44px; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--border-row);
}
.ec-row:last-child { border-bottom: none; }
.ec-row.best { background: var(--bg-best); }
.ec-row .country { font-size: 13.5px; font-weight: 600; }
.ec-row .price { text-align: right; font-family: var(--font-mono); font-weight: 600; }
.ec-row.best .price { color: var(--primary); font-weight: 700; }
.ec-row .stock { text-align: right; }
.dot-ok  { color: var(--primary); }
.dot-low { color: var(--warn); }

/* =========================================================================
   ГЛАВНАЯ — фичи
   ========================================================================= */
.features { border-top: 1px solid var(--border-inner); }
.features .container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding: 0;
}
.feature { padding: 24px 28px; }
.feature + .feature { border-left: 1px solid var(--border-inner); }
.feature h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; }
.feature p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* =========================================================================
   ФУТЕР
   ========================================================================= */
.footer { background: var(--primary-dark); color: #9fcfca; }
.footer .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.footer .f-brand { color: #fff; font-weight: 700; font-size: 15px; }
.footer .f-copy { font-size: 12.5px; }

/* =========================================================================
   СТРАНИЦА ПОИСКА
   ========================================================================= */
.search-head { background: var(--primary-dark); }
.search-head .container {
  display: flex; align-items: center; gap: 20px;
  padding-top: 12px; padding-bottom: 12px;
}
/* search-head .brand-name overridden above with size + color */
.search-field {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  background: #fff; border-radius: var(--radius-btn);
}
.search-field input {
  flex: 1; border: none; outline: none; font: inherit; font-weight: 600; color: var(--ink);
}
.search-field .clear { color: var(--muted); cursor: pointer; }

/* Панель фильтров-чипов */
.filters { background: var(--bg-row-alt); border-bottom: 1px solid var(--border-inner); }
.filters .container {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; padding-bottom: 12px;
}
.filters .f-lbl { font-size: 12.5px; font-weight: 700; color: var(--label); }
/* Активный чип — СВЕТЛЫЙ, без тяжёлой тени */
.chip-active {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--chip-bg); color: var(--chip-text);
  border: 1px solid var(--chip-border); border-radius: var(--radius-chip);
  padding: 5px 11px; font-size: 12.5px; font-weight: 600;
}
.chip-active .x { cursor: pointer; opacity: .7; }
.chip {
  background: #fff; border: 1px solid var(--border); color: #3f5760;
  border-radius: var(--radius-chip); padding: 5px 11px; font-size: 12.5px; font-weight: 600;
}
.filters .in-stock {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #2c4a44;
}
.checkbox {
  width: 15px; height: 15px; border-radius: 4px; background: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px;
}

/* ── БОКОВАЯ ПАНЕЛЬ (фильтры стран) ── */
.search-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 32px 40px;
}
.country-sidebar {
  background: var(--surface);
  border: 1px solid var(--border-inner);
  border-radius: 10px;
  padding: 14px;
  align-self: start;
  position: sticky;
  top: 72px;
}
.sidebar-title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--label); margin-bottom: 8px;
}
.s-country {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 6px; border-radius: 6px;
  transition: background .12s;
  font-size: 13px; font-weight: 500; user-select: none;
}
.s-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; transition: background .12s;
}
.s-flag { font-size: 15px; line-height: 1; }
.s-name { transition: color .12s; }

/* Есть результаты — активная, кликабельная */
.s-country--has {
  cursor: pointer;
}
.s-country--has:hover { background: var(--bg-soft); }
.s-country--has .s-dot { background: var(--primary); }
.s-country--has .s-name { color: var(--ink); font-weight: 600; }

/* Есть результаты, но фильтр выключен пользователем */
.s-country--has.off .s-dot { background: var(--border); }
.s-country--has.off .s-name { color: var(--muted); font-weight: 500; }
.s-country--has.off .s-flag { opacity: .6; }

/* Нет результатов по этому запросу — бледная, некликабельная */
.s-country--none {
  cursor: default;
  opacity: .32;
}
.s-country--none .s-dot { background: var(--border); }
.s-country--none .s-name { color: var(--muted); }

/* Таблица результатов: thumb | Препарат | Производитель | Страна | Цена (сум) | Ориг. цена | кнопка */
.results { padding-top: 4px; padding-bottom: 24px; }
.results .thead,
.results .row {
  display: grid;
  grid-template-columns: 44px minmax(160px,1fr) 130px 100px 130px 110px;
  align-items: center;
  column-gap: 12px;
}
.results .thead {
  padding: 11px 0; font-size: 11px; font-weight: 700; color: var(--label);
  text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-inner);
}
.results .row {
  padding: 13px 0; border-bottom: 1px solid var(--border-row);
  cursor: pointer;
}
/* Зебра-чередование строк */
.results .row:nth-child(even) { background: #f9fcfb; }
.results .row:nth-child(odd)  { background: var(--surface); }
.results .row:hover            { background: var(--bg-soft) !important; }
.results .row.best             { background: var(--bg-best) !important; }
.thumb {
  width: 34px; height: 34px; border-radius: 7px;
  background: repeating-linear-gradient(45deg,#eaf3f1,#eaf3f1 7px,#dcebe8 7px,#dcebe8 14px);
  background-size: cover; background-position: center;
}
.drug-name { font-size: 14.5px; font-weight: 700; }
.drug-name .analog {
  font-size: 11px; font-weight: 700; color: var(--primary);
  background: var(--tag-bg); padding: 2px 6px; border-radius: 4px; margin-left: 4px;
}
.drug-meta { font-size: 12px; color: var(--label); font-weight: 500; }
.cell-price { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.cell-price.primary { color: var(--primary); font-weight: 700; }
.cell-price.nodata { color: var(--nodata); }
.cell-min { font-size: 12.5px; color: var(--primary); font-weight: 700; }

.results-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--border-inner);
  font-size: 12.5px; color: var(--label); font-weight: 600;
}
.pager { display: flex; gap: 6px; }
.pager a {
  width: 30px; height: 30px; border-radius: 7px; background: #fff;
  border: 1px solid var(--border); color: #3f5760;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.pager a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* =========================================================================
   КАРТОЧКА ЛЕКАРСТВА
   ========================================================================= */
.crumbs { font-size: 12.5px; color: var(--label); font-weight: 600; padding: 18px 0; }
.crumbs .cur { color: var(--ink); }

.product { display: grid; grid-template-columns: 150px 1fr 300px; gap: 26px; margin-bottom: 28px; }
.product .p-img {
  width: 150px; height: 150px; border-radius: var(--radius-box);
  background: repeating-linear-gradient(45deg,#eaf3f1,#eaf3f1 10px,#dcebe8 10px,#dcebe8 20px);
  background-size: cover; background-position: center;
}
.product h1 { font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.badges { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-chip); }
.badge.stock { background: var(--tag-bg); color: var(--primary); }
.badge.rx { background: var(--bg-soft); color: #3f5760; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; font-size: 13.5px; }
.specs dt { color: var(--label); font-weight: 600; }
.specs dd { margin: 0; color: var(--ink); font-weight: 600; }

.best-box {
  background: var(--primary-dark); border-radius: var(--radius-box); padding: 18px; color: #fff;
  align-self: start;
}
.best-box .bb-lbl { font-size: 12px; color: #9fcfca; font-weight: 600; }
.best-box .bb-price { font-size: 26px; font-weight: 700; font-family: var(--font-mono); margin: 2px 0; }
.best-box .bb-price small { font-size: 14px; color: #cfeae7; }
.best-box .bb-where { font-size: 12.5px; color: #cfeae7; margin-bottom: 14px; }
.best-box .btn-light {
  display: block; width: 100%; text-align: center;
  background: #fff; color: var(--primary-dark); font-weight: 700;
  font-size: 14px; padding: 11px; border-radius: var(--radius-btn);
  cursor: pointer;
}

.section-title { font-size: 17px; font-weight: 700; margin: 0 0 12px; }

/* Селект выбора города (над таблицей цен) */
.city-select {
  border: 1.5px solid var(--chip-border); border-radius: var(--radius-chip);
  padding: 6px 10px; font-size: 13px; font-weight: 600;
  background: var(--chip-bg); color: var(--chip-text); cursor: pointer;
}
.city-select:hover { border-color: var(--primary); }
.city-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,148,136,.15); }

/* Таблица цен по странам */
.price-table { border: 1px solid var(--border-inner); border-radius: var(--radius-box); overflow: hidden; margin-bottom: 26px; }
.price-table .pt-head,
.price-table .pt-row {
  display: grid; grid-template-columns: 1.2fr 1.1fr 0.9fr 0.9fr 0.8fr 90px; align-items: center;
}
.price-table .pt-head {
  background: var(--bg-row-alt); padding: 11px 18px;
  font-size: 11px; font-weight: 700; color: var(--label);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.price-table .pt-row { padding: 12px 18px; border-top: 1px solid var(--border-row); }
.price-table .pt-row.best { background: var(--bg-best); }
.price-table .pt-pharm { font-weight: 700; font-size: 14px; }
.price-table .pt-addr { color: var(--muted); font-size: 13px; }
.price-table .pt-price { font-weight: 700; font-family: var(--font-mono); }
.price-table .pt-row.best .pt-price { color: var(--primary); }
.price-table .pt-orig { font-family: var(--font-mono); color: var(--muted); font-size: 13px; }
.price-table .pt-link { color: var(--primary); font-weight: 700; font-size: 13px; }

/* Аналоги */
.analogs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.analog-card {
  border: 1px solid var(--border-inner); border-radius: var(--radius-box); padding: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.analog-card .ac-name { font-weight: 700; font-size: 14.5px; }
.analog-card .ac-maker { font-size: 12px; color: var(--label); }
.analog-card .ac-price { font-size: 15px; font-weight: 700; color: var(--primary); font-family: var(--font-mono); }

.page-pad { padding-top: 18px; padding-bottom: 34px; }

/* =========================================================================
   АДАПТИВ
   ========================================================================= */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; gap: 24px; }
  .product { grid-template-columns: 120px 1fr; }
  .product .best-box { grid-column: 1 / -1; }
  .search-layout { grid-template-columns: 1fr; padding: 12px 24px 32px; }
  .country-sidebar { display: none; }
  .results .thead, .results .row {
    grid-template-columns: 40px minmax(160px,1fr) 130px 110px;
  }
  .col-manufacturer, .col-country-name, .col-orig-price { display: none; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .features .container { grid-template-columns: 1fr; }
  .feature + .feature { border-left: none; border-top: 1px solid var(--border-inner); }
  .analogs { grid-template-columns: 1fr; }
  .price-table .pt-head { display: none; }
  .price-table .pt-row {
    grid-template-columns: 1fr auto; grid-row-gap: 2px; padding: 14px 16px;
  }
  .price-table .pt-pharm { grid-column: 1; font-size: 12px; }
  .price-table .pt-price { grid-column: 2; grid-row: 1; text-align: right; }
  .price-table .pt-stock, .price-table .pt-link { grid-column: 2; text-align: right; }
  .price-table .pt-orig, .price-table .pt-addr { display: none; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 28px; }
  .search-layout { padding: 8px 16px 24px; }
  /* Таблица результатов → карточки */
  .results .thead { display: none; }
  .results .row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "thumb name price"
      "thumb meta btn";
    row-gap: 4px; padding: 14px 0;
  }
  .results .row > .thumb { grid-area: thumb; }
  .results .row > .drug-cell { grid-area: name; }
  .results .row > .cell-price { grid-area: price; justify-self: end; }
  .results .row > .cell-min, .results .row > .col-manufacturer,
  .results .row > .col-country-name, .results .row > .col-orig-price { display: none; }
  .product { grid-template-columns: 1fr; }
  .product .p-img { width: 100%; height: 220px; }
}