/* Блок курсов валют ЦБ РФ */
.rates {
  max-width: 1200px;
  margin: 28px auto 0;
  padding: 18px 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 18px 32px;
  flex-wrap: wrap;
}
.rates[hidden], .rates__switch[hidden] { display: none; }

.rates__top { display: flex; flex-direction: column; gap: 2px; }
.rates__title { font-size: 20px; font-weight: 700; color: #0b0b0b; }
.rates__date { font-size: 12px; color: #8a8a8a; }

.rates__list { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; font-size: 14px; color: #4b4b4b; }
.rates__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: #e9e9e9;
  border-radius: 10px;
}
.rates__code { font-size: 12px; font-weight: 700; color: #6b6b6b; }
.rates__value { font-size: 16px; font-weight: 700; color: #0b0b0b; }
.rates__chg { font-size: 12px; font-weight: 700; }
.rates__chg--up { color: #1f8a3b; }
.rates__chg--down { color: #c0392b; }

.rates__switch { display: flex; align-items: center; gap: 10px; }
.rates__label { font-size: 13px; color: #4b4b4b; }
.rates__btns { display: flex; gap: 6px; }
.rates__btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #e9e9e9;
  color: #0b0b0b;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.rates__btn--active { background: #0b0b0b; color: #fff; }

@media (max-width: 700px) {
  .rates { margin: 16px 12px 0; padding: 14px; }
  .rates__list { width: 100%; flex: none; }
  .rates__item { flex: 1 1 auto; justify-content: center; }
}