/*!
 * rating.css — страница /all/ (рейтинг регионов Казахстана).
 * Пара к /css/style.css: используются сайтовые токены (--c/--d/--m/--bh/--ln/--r/--s5…--s40)
 * и news-card-классы (.po/.pi/.pn/.pt) в роли карточек рейтинга.
 */

/* ==============================================================
 *  Сетка карточек: 2 колонки (новостная лента), синяя плитка слева
 * ============================================================== */
.rate-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s20);margin-top:var(--s40);
}
.rate-grid .po{
  padding:0;border-bottom:0;overflow:hidden;
  background:var(--bh);border-radius:var(--r);
}
.rate-grid .pn{padding:var(--s10) var(--s10) var(--s10) 0;min-width:0}
.rate-grid .pt{margin:0;color:var(--c);font-size:1rem;font-weight:700}

.rate-num{
  flex:none;align-self:stretch;width:90px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--c);color:#fff;font-weight:700;font-size:3rem;
}

/* ==============================================================
 *  Строка рейтинга: полоса + % + счётчик + CTA
 * ============================================================== */
.rate-bar-wrap{display:flex;align-items:center;gap:var(--s10);margin:var(--s5) 0}
.rate-bar{
  flex:1 1 auto;display:flex;overflow:hidden;
  height:10px;background:var(--disabled-bg);border-radius:999px;
}
.rate-bar-good,.rate-bar-bad{height:100%;transition:width .25s}
.rate-bar-good{background:var(--c)}
.rate-bar-bad {background:var(--d)}

.rate-score  {font-variant-numeric:tabular-nums;white-space:nowrap}
.rate-score b{color:var(--c)}
.rate-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--s10);margin:var(--s5) 0 0}

.bt.rate-results        {background:var(--m)}
.bt.rate-results:active {background:var(--ts)}
.bt:disabled            {background:var(--disabled-bg);cursor:not-allowed}

/* ==============================================================
 *  FAQ-блок (SEO, видимый контент, под картами)
 * ============================================================== */
.rate-faq    {margin:var(--s40) 0 0}
.rate-faq h2 {margin:0 0 var(--s20)}
.rate-faq h3 {margin:var(--s20) 0 var(--s5);font-size:1rem}
.rate-faq p  {margin:0 0 var(--s10)}

/* ==============================================================
 *  Модалка: сайтовые .mo/.md + рейтинг-специфика
 * ============================================================== */
.rate-md-hd{
  display:flex;align-items:center;gap:var(--s20);
  margin:0 0 var(--s20);padding:0 0 var(--s10);border-bottom:var(--ln);
}
.rate-md-hd .rate-num{
  flex:0 0 56px;align-self:center;width:56px;height:56px;
  font-size:2rem;border-radius:var(--r);
}
.rate-md-hd span        {margin:0;color:var(--c);font-weight:700}
.rate-md-hd .rate-md-sub{margin:0}

.rate-lead{margin:0 0 var(--s10)}

/* — Список категорий — */
.rate-cats{list-style:none;margin:0;padding:0;display:grid;gap:var(--s10)}
.rate-cats li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s10);
  margin:0;padding:var(--s5) var(--s10);background:var(--bh);border-radius:var(--r);
}
.rate-cat-name{font-weight:700}
.rate-cat-btns{display:flex;gap:var(--s5)}

/* — 👍/👎 кнопки — */
.rate-vb{
  font:inherit;cursor:pointer;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--s5) var(--s10);background:#fff;border:0;border-radius:var(--r);
}
.rate-vb:hover        {border-color:var(--c)}
.rate-vb.sel-like     {background:var(--c);border-color:var(--c);color:#fff}
.rate-vb.sel-dislike  {background:var(--d);border-color:var(--d);color:#fff}

/* — Статистика в results-режиме — */
.rate-cat-stats{
  display:none;align-items:center;gap:var(--s10);flex-shrink:0;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rate-st-like{color:var(--c);font-weight:700}
.rate-st-dis {color:var(--d);font-weight:700}
.rate-st-pct {min-width:44px;text-align:right}

/* — Капча: input как в петиции — */
.rate-captcha{margin:var(--s10) 0 0}
.rate-captcha .inp{width:100%;padding:var(--s5) var(--s10);border:var(--ln);background:#fff}

/* — Share-блок (скрыт до is-share) — */
.rate-md-share{display:none}

/* — Футер модалки — */
.rate-md-ft{
  display:flex;justify-content:flex-end;gap:var(--s10);
  margin:var(--s20) 0 0;padding:var(--s10) 0 0;border-top:var(--ln);
}

/* ==============================================================
 *  Переключение режимов модалки (vote / results / share)
 * ============================================================== */
/* [hidden] перебивает явный display на любых кнопках/капче/футере */
.rate-md-ft[hidden],
.rate-md-ft .va[hidden],
.rate-md-ft .bt[hidden],
.rate-captcha[hidden]{display:none}

/* Results: прячем 👍/👎, показываем цифры */
.rate-cats.mode-results .rate-cat-btns {display:none}
.rate-cats.mode-results .rate-cat-stats{display:inline-flex}

/* Share: прячем lead/cats/captcha, показываем share-блок */
.rate-md.is-share .rate-lead,
.rate-md.is-share .rate-cats,
.rate-md.is-share .rate-captcha{display:none}
.rate-md.is-share .rate-md-share{display:block}

/* ==============================================================
 *  Адаптив
 * ============================================================== */
@media (max-width:600px){
  .rate-grid{grid-template-columns:1fr}
  .rate-grid .rate-num{width:72px;font-size:2rem}
}