/* ===========================================
   KURSLINE — Основной стиль сайта
   =========================================== */

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: #f6f7f9;
  color: #222;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* ---------- HEADER ---------- */
header {
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  padding: 15px 20px 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

header h1 img {
  height: 32px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 8px;
  display: inline-block;
}

.header-subtitle {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 14px;
  color: #444;
  border-left: 3px solid #007bff;
  padding-left: 10px;
  font-style: italic;
  opacity: 0.9;
}

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ---------- */
#themeToggle {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #444;
  transition: transform 0.2s, color 0.2s;
}

#themeToggle:hover {
  color: #007bff;
  transform: scale(1.15);
}
.lang-switcher{
  margin-left:auto;
}
/* ---------- ГОРОДА ---------- */

/* ---------- ГОРОДА ---------- */
#city-bar {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: none;     /* ✅ убрали ограничение */
  overflow: visible;    /* ✅ нет скролла */
}

/* полоса прокрутки */
#city-bar::-webkit-scrollbar {
  height: 5px;
}
#city-bar::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* стиль кнопок */
#city-bar button {
background: #eee; border: none; border-radius: 6px; padding: 6px 12px; cursor: pointer; transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; flex-shrink: 0;
}

#city-bar button:hover {
  background: #e2e6ea; transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#city-bar button.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
  box-shadow: 0 2px 6px rgba(0,123,255,0.4);
}

/* адаптация для мобильных устройств */
@media (max-width: 768px) {
  #city-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  #city-bar::-webkit-scrollbar {
    height: 5px;
  }
  #city-bar::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 4px;
  }
}
.city-select {
  display: none;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
  color: #222;
  font-size: 16px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  #city-bar {
    display: none !important;
  }

  #city-select,
  .city-select {
    display: block !important;
  }
}

body.dark-mode .city-select {
  background: #2d2d2d;
  color: #fff;
  border-color: #555;
}
/* --- ТЁМНАЯ ТЕМА для кнопок городов --- */
body.dark-mode #city-bar button {
  background: #3a3a3a;
  color: #ccc;
  border: 1px solid #444;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.dark-mode #city-bar button:hover {
  background: #444;
  border-color: #555;
  color: #fff;
}
body.dark-mode #city-bar button.active {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
  box-shadow: 0 2px 6px rgba(0,123,255,0.5);
}

/* --- 📱 Мобильная правка: компактные телефоны --- */
@media (max-width: 768px) {
  /* уменьшаем шрифт телефонов и запрещаем перенос */
  #rates-table th:nth-child(2),
  #rates-table td:nth-child(2),
  #rates-table td:nth-child(2) a {
    font-size: 12px !important;
    white-space: nowrap !important;
  }
}
/* ---------- MAIN + TABLE ---------- */
main {
  width: 95%;               /* 🔹 вместо max-width */
  max-width: 1600px;        /* 🔹 можно растянуть шире, но с ограничением */
  margin: 20px auto;
  background: #fff;
  padding: 20px 30px;       /* 🔹 немного больше внутренний отступ */
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 6px;
  overflow: hidden;
}

th, td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

tbody tr:nth-child(odd) {
  background: #fafafa;
}

tbody tr:hover {
  background: #eef4ff;
}

th {
  background: #f2f2f2;
  user-select: none;
}

th select {
  padding: 3px 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
}

.sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  color: #888;
}

.sort-btn.active {
  color: #007bff;
  font-weight: bold;
}

.best-buy { color: green; font-weight: bold; }
.best-sell { color: red; font-weight: bold; }

.exchange-name { font-weight: 600; }
.exchange-address { color: #555; font-size: 13px; }
.exchange-comment { font-size: 12px; color: #777; font-style: italic; }

#notice {
  background: #fff3cd;
  color: #856404;
  padding: 10px 15px;
  margin-top: 10px;
  border: 1px solid #ffeeba;
  border-radius: 6px;
  display: none;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}


#rates-table th:nth-child(1),
#rates-table td:nth-child(1){ width: 40%;text-align: left;  }

#rates-table th:nth-child(2),
#rates-table td:nth-child(2){ width: 16%; }

#rates-table th:nth-child(3),
#rates-table td:nth-child(3),
#rates-table th:nth-child(4),
#rates-table td:nth-child(4),
#rates-table th:nth-child(5),
#rates-table td:nth-child(5){
  width: 14%;
  padding: 8px 4px;
}

#rates-table th:nth-child(6),
#rates-table td:nth-child(6){
  width: 10%;
}

#rates-table td:nth-child(1) .exchange-address,
#rates-table td:nth-child(1) .exchange-comment{
  text-align: left;
}



/* ---------- ПОДСКАЗКА ---------- */
.hint-bar {
  background: #e8f4ff;
  color: #004a99;
  border: 1px solid #bcdfff;
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.hint-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.hint-text {
    margin-left: auto;               /* ← прижимает вправо */
    white-space: nowrap;             /* ← чтобы не ломался по словам */
    font-size: 14px;
}
#showAllBtn {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  margin-left: 8px;
}

/* ---------- ГРАФИК РАБОТЫ (popover) ---------- */

/* === Улучшенный поповер графика работы === */
.schedule-popover {
  position: absolute;

  background: #e9f5ff;                 /* 🔵 мягкий голубой фон */
  color: #0d2a42;                      /* тёмно-синий текст */

  border: 1px solid #b7d8f5;           /* голубая рамка */
  border-radius: 12px;

  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  padding: 10px 12px;

  z-index: 9999;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;

  width: 150px;
  max-width: 90vw;
}

.schedule-popover.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.schedule-popover .arrow {
  position: absolute;
  left: 18px;
  bottom: -6px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;

  border-top: 6px solid #e9f5ff;        /* 🔵 голубой треугольник */
  filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.15));
}

.schedule-popover .sched-row .left {
  color: #0d2a42;                       /* день недели */
  font-weight: 600;
}
.schedule-popover .sched-row .right {
  color: #084c96;                       /* время */
}




/* === Dark mode: голубой popover читабельный === */
body.dark-mode .schedule-popover {
  background: #1f2f3c;                 /* тёмно-синий */
  border-color: #345065;
  color: #e0f1ff;
}

body.dark-mode .schedule-popover .arrow {
  border-top-color: #1f2f3c;
}

body.dark-mode .schedule-popover .sched-row .left {
  color: #cfe6ff;
}
body.dark-mode .schedule-popover .sched-row .right {
  color: #9dcbff;
}




/* ---------- КАЛЬКУЛЯТОР ---------- */
.calc-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.55);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.calc-content {
background: #fff; 
	color: #111; 
	padding: 22px 25px; 
	border-radius: 12px; 
	box-shadow: 0 5px 20px rgba(0,0,0,0.3); 
	min-width: 280px; 
	max-width: 340px; 
	text-align: center; 
	position: relative; 
	animation: fadeIn .25s ease; 
	box-sizing: border-box;
}

.close-btn {
  position: absolute;
  top: 8px; right: 12px;
  cursor: pointer;
  font-size: 20px;
  color: #777;
  transition: color .2s;
}
.close-btn:hover { color: #000; }

.calc-content h3 { margin: 0 0 4px; font-weight: 600; }
.calc-type { font-size: 15px; color: #555; margin: 2px 0; }
.calc-rate { font-size: 14px; color: #007bff; margin-bottom: 10px; font-weight: 500; }

.calc-direction { margin-bottom: 10px; text-align: left; }
.calc-direction label { display: block; font-size: 14px; color: #333; margin-bottom: 3px; }
.calc-direction select {
  width: 100%; 
	padding: 7px 10px; 
	font-size: 15px;
  border: 1px solid #ccc; 
	border-radius: 6px; 
	background: #fafafa;
	box-sizing: border-box;
}

#calc-amount {
  width: 100%;
  padding: 10px 20px 10px 14px;  /* 👉 добавили левый отступ, немного уменьшили правый */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: right;             /* выравнивание чисел по правому краю */
  margin-bottom: 12px;
  box-sizing: border-box;
  -moz-appearance: textfield;    /* убираем стрелки в Firefox */
}
#calc-amount::-webkit-inner-spin-button,
#calc-amount::-webkit-outer-spin-button {
  margin-left: 6px;              /* отступ между цифрами и стрелками */
}

.calc-result { font-size: 17px; font-weight: 600; color: #007bff; word-wrap: break-word;}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- ВАЖНАЯ ИНФОРМАЦИЯ ---------- */
.exchange-info {
  width: 90%;
  max-width: 1400px;
  margin: 60px auto 20px auto; /* ⬇ нижний отступ уменьшен с 60 до 40 */
  padding: 0 20px;
}

.exchange-info h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d3b66;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 18px;
  border-bottom: 2px solid #0d3b66;
  display: inline-block;
  padding-bottom: 4px;
}

.exchange-info h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 8px 0 30px 0;
  color: #1a1a1a;
  text-align: center;
}

.exchange-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.exchange-card {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;

}
.exchange-card p {
  font-size: 0.93rem;     /* немного меньше стандартного */
  line-height: 1.55;      /* читаемость сохраняется */
  color: #333;
  margin-bottom: 8px;
}

.exchange-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.exchange-card .icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

/* ---------- ДИСКЛЕЙМЕР ---------- */
.disclaimer {
  background: #f1f3f6;
  border-left: 4px solid #0d3b66;
  border-radius: 10px;
  padding: 10px 25px 18px 25px; /* ⬆️ уменьшили верхний padding с 18 до 10 */
  margin: 20px auto 50px auto;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  width: 90%;
  max-width: 1400px;
}

.disclaimer h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #0d3b66;
  text-align: left;
  margin-top: 0;        /* ⬆️ убрали возможный внешний отступ сверху */
  margin-bottom: 10px;
}

.disclaimer p {
  color: #333;
  line-height: 1.1;
  margin-bottom: 8px;
  font-size: 0.9rem;
}


/* ---------- FOOTER ---------- */
footer {
  text-align: center;
  font-size: 8px;
  color: #777;
  margin-top: 25px;
  padding: 15px;
}

/* ---------- ТЁМНАЯ ТЕМА ---------- */
body.dark-mode {
  background: #1e1e1e;
  color: #ddd;
}

body.dark-mode header { background: #2b2b2b; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
body.dark-mode h1 { color: #fff; }
body.dark-mode #city-bar button { background: #3a3a3a; color: #ccc; }
body.dark-mode #city-bar button.active { background: #007bff; color: #fff; }
body.dark-mode main { background: #2a2a2a; box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
body.dark-mode th { background: #333; color: #ccc; }
body.dark-mode td { border-color: #444; }
body.dark-mode tbody tr:nth-child(odd) { background: #2d2d2d; }
body.dark-mode tbody tr:hover { background: #3a3a3a; }
body.dark-mode .exchange-address,
body.dark-mode .exchange-comment { color: #aaa; }
body.dark-mode #notice { background: #3d3419; border-color: #5a4d24; color: #f1d87a; }
body.dark-mode footer { color: #aaa; }
body.dark-mode footer a { color: #66aaff; }
body.dark-mode .hint-bar { background: #2b3a4a; color: #cce6ff; border-color: #3f556d; }

body.dark-mode .schedule-popover {
  background: #2b2b2b;
  color: #ddd;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}
body.dark-mode .schedule-popover .arrow { border-top-color: #2b2b2b; }
body.dark-mode .schedule-popover .sched-row .left,
body.dark-mode .schedule-popover .sched-row .right { color: #aaa; }

body.dark-mode .calc-content { background: #2b2b2b; color: #ddd; }
body.dark-mode .calc-rate { color: #66aaff; }
body.dark-mode .calc-direction select,
body.dark-mode #calc-amount { background: #3a3a3a; border-color: #555; color: #fff; }

body.dark-mode .exchange-info h2 { color: #cce6ff; border-color: #4d9eff; }
body.dark-mode .exchange-info h3 { color: #e0e0e0; }
body.dark-mode .exchange-card { background: #2b2b2b; border-color: #444; color: #ddd; }
body.dark-mode .exchange-card:hover { box-shadow: 0 4px 12px rgba(255,255,255,0.1); }
body.dark-mode .exchange-card .icon { color: #66aaff; }
body.dark-mode .disclaimer {
  background: #242b34;
  border-left-color: #4d9eff;
  color: #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
body.dark-mode .disclaimer h2 { color: #cce6ff; }
body.dark-mode .disclaimer p  { color: #e0e0e0; }
body.dark-mode .header-subtitle { color: #e0e0e0; }
body.dark-mode .exchange-card p { color: #e0e0e0; }
.rate-cell {
  cursor: pointer;                 /* 👈 восстановили указатель */
  transition: color 0.2s, transform 0.15s;
}

.rate-cell:hover {
  color: #007bff;
  transform: scale(1.1);
}

body.dark-mode .rate-cell:hover {
  color: #66aaff;
}
/* === Ввод в калькуляторе: выравнивание placeholder === */ 
#calc-amount::placeholder { 
	text-align: left; 
	color: #888; 
} 
/* --- анимация появления --- */ 
@keyframes fadeIn { 
	from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* --- Предупреждающий текст внутри карточек --- */
.warning-text {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
}

/* --- Тёмная тема --- */
body.dark-mode .warning-text {
  color: #f2d98b; /* мягкий тёплый оттенок для тёмного фона */
}


/* === Комментарий в таблице (фикс ширины + перенос строк) === */
.exchange-comment {
  max-width: 35ch;          /* ширина примерно 35 символов */
  white-space: normal;      /* разрешаем перенос строк */
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.3;
  font-size: 12px;
  color: #777;
  font-style: italic;
  margin-top: 3px;
}

/* Чтобы таблица не растягивалась под длинные тексты */
#rates-table {
  table-layout: fixed;
  width: 100%;
}

#rates-table td {
  vertical-align: top;
}

/* === 📱 Мобильная версия: показываем только 3 колонки (ОП, Телефон, 1-й курс) === */
@media (max-width: 768px) {
  /* Скрываем колонки 4, 5 и 6 */
  #rates-table th:nth-child(4),
  #rates-table td:nth-child(4),
  #rates-table th:nth-child(5),
  #rates-table td:nth-child(5),
  #rates-table th:nth-child(6),
  #rates-table td:nth-child(6) {
    display: none;
  }

  /* Корректируем ширины оставшихся */
  #rates-table th:nth-child(1),
  #rates-table td:nth-child(1) {
    width: 45%;
    text-align: left;
  }

  #rates-table th:nth-child(2),
  #rates-table td:nth-child(2) {
    width: 30%;
    text-align: left;
  }

  #rates-table th:nth-child(3),
  #rates-table td:nth-child(3) {
    width: 25%;
    text-align: right;
    font-size: 1rem;
    font-weight: 600;
  }

  #rates-table {
    table-layout: fixed;
    width: 100%;
  }

  #rates-table td {
    padding: 8px 6px;
    vertical-align: top;
  }
}
/* --- 📱 Компактные телефоны на узких экранах --- */
@media (max-width: 900px) {
  /* сильная специфичность, чтобы перебить любые прежние правила */
  table#rates-table tbody tr td:nth-child(2),
  table#rates-table tbody tr td:nth-child(2) a,
  table#rates-table thead tr th:nth-child(2) {
    font-size: 12px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  /* фикс ширины колонки и отсечение лишнего без переноса */
  table#rates-table tbody tr td:nth-child(2) {
    width: 30% !important;
    max-width: 30% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;  /* если не влезает, троеточие вместо переноса */
  }

  /* ссылка как единый блок, чтобы не рвалась на дефисах */
  table#rates-table tbody tr td:nth-child(2) a {
    display: inline-block;
    text-decoration: none;
  }
}

/* === КУРСЫ КРИПТО === */
.crypto-section {
  margin: 40px auto;
  max-width: 700px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
  text-align: center;
}

.crypto-section h2 {
  background: #007bff;
  color: #fff;
  margin: 0;
  padding: 12px 20px;
  font-size: 1.2rem;
}

#crypto-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

#crypto-table th, #crypto-table td {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

#crypto-table tr:hover {
  background: #f9f9f9;
}

.crypto-up { color: #28a745; font-weight: 600; }
.crypto-down { color: #dc3545; font-weight: 600; }

/* --- Dark Mode --- */
body.dark-mode .crypto-section {
  background: #2b2b2b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

body.dark-mode .crypto-section h2 {
  background: #4d9eff;
  color: #fff;
}

body.dark-mode #crypto-table th,
body.dark-mode #crypto-table td {
  border-color: #444;
  color: #ddd;
}

body.dark-mode #crypto-table tr:hover {
  background: #333;
}
/* === КУРСЫ КРИПТО (КАРТОЧКИ) === */
.crypto-section {
  margin: 40px auto;
  max-width: 1200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  padding: 10px 20px 25px;
  text-align: center;
}

.crypto-section h2 {
  background: #007bff;
  color: #fff;
  margin: -10px -20px 20px -20px;
  padding: 12px 20px;
  font-size: 1.2rem;
  border-radius: 12px 12px 0 0;
}

.crypto-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px;
  justify-content: center;
  align-items: stretch;
}

.crypto-card {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
  padding: 14px 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.crypto-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.crypto-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.crypto-icon {
  width: 26px;
  height: 26px;
}

.crypto-name .name {
  font-weight: 600;
  font-size: 0.95rem;
}

.crypto-name .symbol {
  display: block;
  font-size: 0.8rem;
  color: #777;
}

.crypto-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111;
  margin-top: 4px;
}

.crypto-change {
  font-size: 0.9rem;
  margin-top: 4px;
  font-weight: 600;
}

.crypto-up { color: #28a745; }
.crypto-down { color: #dc3545; }

.crypto-cards .loading,
.crypto-cards .error {
  text-align: center;
  width: 100%;
  padding: 10px;
  color: #666;
}

/* --- Dark Mode --- */
body.dark-mode .crypto-section {
  background: #2b2b2b;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
body.dark-mode .crypto-section h2 {
  background: #4d9eff;
  color: #fff;
}
body.dark-mode .crypto-card {
  background: #333;
  border-color: #444;
}
body.dark-mode .crypto-card:hover {
  box-shadow: 0 4px 12px rgba(255,255,255,0.08);
}
body.dark-mode .crypto-name .name { color: #fff; }
body.dark-mode .crypto-price { color: #fff; }
body.dark-mode .crypto-name .symbol { color: #aaa; }

/* === МИНИ-КРИПТО ВИДЖЕТ === */

/* === МИНИ-КРИПТО ВИДЖЕТ (компактная финальная версия) === */
.rates-flex {
  display: flex;
  align-items: flex-start;
  gap: 25px;                /* 🔹 чуть больше расстояние между таблицей и виджетом */
  justify-content: space-between;
}

#rates-table-wrapper {
  flex: 1;
  min-width: 0;
}

.crypto-side {
  width: 140px; /* 🔹 чуть уже */
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  padding: 8px 10px;
  font-size: 11.5px; /* 🔹 общий размер меньше */
  line-height: 1.25;
  max-height: none;      /* ✅ разрешаем высоту по содержимому */
  overflow: visible;     /* ✅ не обрезаем */
}

.crypto-side h3 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #007bff;
  text-align: center;
}

.crypto-list {
 display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: none;      /* ✅ не ограничиваем высоту */
  overflow: visible;     /* ✅ показываем всё */
}

.crypto-item {
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
  margin-bottom: 3px;
}
.crypto-item:last-child {
  border-bottom: none;
}

.crypto-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.crypto-name {
  color: #333;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
}
.crypto-price {
  color: #000;
  font-weight: 600;
  font-size: 12px;
}
.crypto-change {
  font-size: 10.5px;
  text-align: right;
  margin-top: 1px;
}

.crypto-up { color: #28a745; }
.crypto-down { color: #dc3545; }

.crypto-list .loading,
.crypto-list .error {
  text-align: center;
  color: #666;
  padding: 6px 0;
  font-size: 11px;
}

/* --- тёмная тема --- */
body.dark-mode .crypto-side {
  background: #2b2b2b;
  border-color: #444;
  color: #ddd;
}
body.dark-mode .crypto-side h3 { color: #4d9eff; }
body.dark-mode .crypto-item { border-color: #444; }
body.dark-mode .crypto-name { color: #ccc; }
body.dark-mode .crypto-price { color: #fff; }

/* --- адаптация под мобильные --- */
@media (max-width: 900px) {
  .rates-flex {
    flex-direction: column;
  }
  .crypto-side {
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
  }
}


@media (min-width: 1920px) {
  main {
    max-width: 1800px;      /* ограничение для ультрашироких экранов */
  }
}



/* --- адаптация для мобильных --- */
@media (max-width: 900px) {
  .rates-flex {
    flex-direction: column;
  }
  .crypto-side {
    width: 100%;
    margin-top: 10px;
  }
}

/* === Фикс: показывать все криптовалюты === */
#crypto-widget,
.crypto-side,
.crypto-list {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
/* === Кнопка "Показать все" для блока НБ РК === */
.nbk-btn-more {
  margin-top: 8px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}
.nbk-btn-more:hover {
  background: #1e40af;
}

/* Темная тема */
body.dark-mode .nbk-btn-more {
  background: #1d4ed8;
}
body.dark-mode .nbk-btn-more:hover {
  background: #3b82f6;
}


/* === Унификация блоков Криптовалют и Курсов НБ РК === */
.crypto-side {
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 10px 12px 15px;
  font-size: 13px;
  line-height: 1.4;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crypto-side h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: #007bff;
  text-align: center;
  margin: 5px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e5eaf0;
}

.crypto-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* --- Каждая карточка валюты (и крипты, и НБРК) --- */
.crypto-item {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.crypto-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

/* --- Контент внутри карточки --- */
.crypto-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.crypto-name {
  font-weight: 600;
  color: #111;
  font-size: 12px;
  text-transform: uppercase;
}
.crypto-price {
  font-weight: 600;
  color: #111;
  font-size: 12.5px;
}

/* --- Изменение (только для крипты) --- */
.crypto-change {
  font-size: 11px;
  margin-top: 3px;
  text-align: right;
}

/* --- Кнопка для НБРК --- */
.nbk-btn-more {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12.5px;
  padding: 7px 0;
  cursor: pointer;
  width: 100%;
  font-weight: 600;
  margin-top: 5px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nbk-btn-more:hover {
  background: #1e40af;
  transform: translateY(-1px);
}

/* --- Тёмная тема --- */
body.dark-mode .crypto-side {
  background: #2b2b2b;
  border-color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
body.dark-mode .crypto-side h3 { color: #4d9eff; border-color: #3f3f3f; }
body.dark-mode .crypto-item {
  background: #333;
  border-color: #444;
  color: #ddd;
}
body.dark-mode .crypto-item:hover { box-shadow: 0 4px 8px rgba(255,255,255,0.08); }
body.dark-mode .crypto-name, 
body.dark-mode .crypto-price { color: #f1f1f1; }
body.dark-mode .nbk-btn-more {
  background: #1d4ed8;
}
body.dark-mode .nbk-btn-more:hover {
  background: #3b82f6;
}

.gold-filter-btn {
  margin-left: 12px;
  padding: 4px 10px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.gold-filter-btn:hover {
  background: #ffe9a8;
}

.gold-filter-btn.active {
  background: #ffd55a;
  border-color: #e0a800;
  font-weight: 600;
}

/* === Метка "Фильтр" перед кнопкой === */
.filter-label {
  margin-left: 10px;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

body.dark-mode .filter-label {
  color: #ccc;
}

/* === 🌙 Dark Mode для кнопки "Только с GOLD" === */
body.dark-mode .gold-filter-btn {
  background: #2d2d2d;
  color: #ffd55a;
  border: 1px solid #555;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

body.dark-mode .gold-filter-btn:hover {
  background: #3a3a3a;
  color: #ffe27a;
}

body.dark-mode .gold-filter-btn.active {
  background: #ffd55a;
  color: #000;
  border-color: #e0a800;
  font-weight: 600;
  box-shadow: 0 0 6px rgba(255, 213, 90, 0.4);
}
.hint-bar {
    display: flex;
    justify-content: space-between;  /* ← фильтр слева, текст справа */
    align-items: center;
    flex-wrap: wrap;                  /* ← на мобильных переходит вниз */
    gap: 10px;
}

.cart-filter-btn {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    background: #f2f2f2;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.cart-filter-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}
/* === Унификация внешнего вида кнопок фильтров === */
.filter-btn,
.gold-filter-btn,
.cart-filter-btn, 
.airport-filter-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;        /* одинаковая высота */
    font-size: 14px;
    font-weight: 500;

    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;

    height: 32px;             /* фиксированная высота */
    line-height: 1;
    box-sizing: border-box;
}

/* Ховер */
.filter-btn:hover,
.gold-filter-btn:hover,
.cart-filter-btn:hover,
.airport-filter-btn:hover{
    background: #e6e6e6;
}

/* Активные */
.filter-btn.active,
.gold-filter-btn.active,
.cart-filter-btn.active,
.airport-filter-btn.active:{
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}

/* === Тёмная тема === */
body.dark-mode .filter-btn,
body.dark-mode .gold-filter-btn,
body.dark-mode .cart-filter-btn,
body.dark-mode .airport-filter-btn{
    background: #2d2d2d;
    border-color: #555;
    color: #ddd;
}

body.dark-mode .filter-btn:hover,
body.dark-mode .gold-filter-btn:hover,
body.dark-mode .cart-filter-btn:hover ,
body.airport-filter-btn:hover {
    background: #3a3a3a;
}

body.dark-mode .filter-btn.active,
body.dark-mode .gold-filter-btn.active,
body.dark-mode .cart-filter-btn.active,
body.dark-mode .airport-filter-btn.active{
    background: #4d9eff;
    border-color: #4d9eff;
    color: #fff;
}
a.exchange-name {
  color: #0056b3;
  text-decoration: none;
  font-weight: 600;
}

/* visited одинаковый */
a.exchange-name:visited {
  color: #0056b3;
}

/* hover */
a.exchange-name:hover {
  color: #007bff;
  text-decoration: underline;
}

a.exchange-name:active {
  color: #003d80;
}
body.dark-mode a.exchange-name {
  color: #66aaff;
  text-decoration: none;
}

body.dark-mode a.exchange-name:visited {
  color: #66aaff;
}

body.dark-mode a.exchange-name:hover {
  color: #99cfff;
  text-decoration: underline;
}

body.dark-mode a.exchange-name:active {
  color: #3b82f6;
}


/* === Малые карточки на странице обменника (Телефон + График) === */
.ex-small-card {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ex-small-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.ex-small-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #007bff;
  border-bottom: 1px solid #e5eaf0;
  padding-bottom: 4px;
}

/* dark mode */
body.dark-mode .ex-small-card {
  background: #333;
  border-color: #444;
  box-shadow: 0 2px 6px rgba(255,255,255,0.08);
  color: #ddd;
}
body.dark-mode .ex-small-card h3 {
  color: #4da8ff;
  border-color: #3f3f3f;
}
/* === ГРИД ДЛЯ ДВУХ КАРТОЧЕК === */
.ex-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 20px 0;
}

/* на мобильных — по одному */
@media (max-width: 700px) {
  .ex-card-row {
    grid-template-columns: 1fr;
  }
}

/* === КРАСИВЫЕ КАРТОЧКИ === */
.ex-info-card, 
.ex-small-card {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: 0.25s;
}

.ex-info-card:hover,
.ex-small-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.ex-info-card h3,
.ex-small-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #007bff;
  border-bottom: 1px solid #e5eaf0;
  padding-bottom: 4px;
}

/* dark mode */
body.dark-mode .ex-info-card,
body.dark-mode .ex-small-card {
  background: #333;
  border-color: #444;
  box-shadow: 0 2px 6px rgba(255,255,255,0.08);
  color: #ddd;
}

body.dark-mode .ex-info-card h3,
body.dark-mode .ex-small-card h3 {
  color: #4da8ff;
  border-color: #3f3f3f;
}

/* Иконки вдоль заголовков */
.ex-title-icon {
  margin-right: 6px;
  font-size: 18px;
  position: relative;
  top: 2px;
}


/* ===============================
   СТРАНИЦА exchange.html
=============================== */

.exchange-wrapper {
  max-width: 900px;
  margin: 25px auto;
  padding: 0 15px;
}

/* --- большая карточка ОП --- */
.exchange-card-big {
  background: #fff;
  border-radius: 14px;
  padding: 25px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 25px;
  transition: 0.25s;
}

body.dark-mode .exchange-card-big {
  background: #2a2a2a;
  color: #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.exchange-card-big h1 {
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: 700;
  color: #007bff;
}

body.dark-mode .exchange-card-big h1 {
  color: #4da8ff;
}

/* --- строки информации --- */
.ex-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.ex-row strong {
  width: 130px;
  font-weight: 600;
  color: #555;
}

body.dark-mode .ex-row strong {
  color: #aaa;
}

.ex-row .value {
  font-weight: 500;
  color: #222;
}

body.dark-mode .ex-row .value {
  color: #e6e6e6;
}

/* --- телефоны --- */
.ex-phones a {
  color: #007bff;
  text-decoration: none;
  display: block;
  margin-bottom: 2px;
}

.ex-phones a:hover {
  text-decoration: underline;
}

body.dark-mode .ex-phones a {
  color: #4da8ff;
}

/* --- график --- */
.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 4px;
}

.schedule-list li {
  display: flex;
  justify-content: space-between;
  max-width: 260px;
  padding: 2px 0;
  font-size: 15px;
}

.schedule-list .day {
  font-weight: 600;
  color: #777;
}

body.dark-mode .schedule-list .day {
  color: #bbb;
}

.schedule-list .time {
  text-align: right;
  font-weight: 500;
  color: #222;
}

body.dark-mode .schedule-list .time {
  color: #eee;
}

/* --- таблица курсов (как на главной) --- */
.ex-table-box {
  background: #fff;
  border-radius: 14px;
  padding: 20px 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 25px;
}

body.dark-mode .ex-table-box {
  background: #2a2a2a;
  color: #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.ex-table-box h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
  color: #007bff;
}

/* === 🔥 Улучшенная таблица exchange (поверх имеющихся стилей) === */

.ex-rates {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  width: 100%;
}

.ex-rates thead th {
  background: #007bff !important;
  color: #fff !important;
  font-weight: 600;
  padding: 12px 10px !important;
  font-size: 16px;
  border: none !important;
}

.ex-rates thead th:first-child {
  border-top-left-radius: 10px;
}
.ex-rates thead th:last-child {
  border-top-right-radius: 10px;
}

.ex-rates tbody td {
  background: #f8f9fa !important;
  padding: 12px 10px !important;
  border: 1px solid #e3e6eb !important;
  border-width: 1px 0 !important;
  font-size: 15px;
}

.ex-rates tbody tr td:first-child {
  border-left: 1px solid #e3e6eb !important;
  border-radius: 10px 0 0 10px !important;
  font-weight: 600;
}

.ex-rates tbody tr td:last-child {
  border-right: 1px solid #e3e6eb !important;
  border-radius: 0 10px 10px 0 !important;
}

.ex-rates tbody tr:hover td {
  background: #eef4ff !important;
  transition: 0.2s;
}

/* === Dark Mode === */
body.dark-mode .ex-rates thead th {
  background: #4da8ff !important;
  color: #fff !important;
}

body.dark-mode .ex-rates tbody td {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

body.dark-mode .ex-rates tbody tr:hover td {
  background: #3a3a3a !important;
}


body.dark-mode .ex-table-box h2 {
  color: #4ca3ff;
}

table.ex-rates {
  width: 100%;
  border-collapse: collapse;
  margin-top: 5px;
}

table.ex-rates th,
table.ex-rates td {
  padding: 10px 8px;
  border-bottom: 1px solid #ddd;
  text-align: center;
  font-size: 15px;
}

table.ex-rates th {
  background: #f2f2f2;
}

body.dark-mode table.ex-rates th {
  background: #333;
  color: #ddd;
}

body.dark-mode table.ex-rates td {
  border-color: #444;
}

table.ex-rates tr:nth-child(odd) {
  background: #fafafa;
}

body.dark-mode table.ex-rates tr:nth-child(odd) {
  background: #2d2d2d;
}

/* --- карта --- */
.ex-map-box {
  background: #fff;
  border-radius: 14px;
  padding: 20px 25px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

body.dark-mode .ex-map-box {
  background: #2a2a2a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

#ex-map {
  width: 100%;
  height: 350px;
  border-radius: 12px;
  margin: 15px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.map-link {
  text-decoration: none;
  font-weight: 600;
  color: #007bff;
}

.map-link:hover {
  text-decoration: underline;
}

body.dark-mode .map-link {
  color: #4da8ff;
}

/* === FIX: правильное размещение строк внутри поповера === */
.schedule-popover .sched-row {
  display: flex;
  justify-content: space-between;   /* ← день слева, время справа */
  gap: 16px;
  min-width: 140px;
}

.schedule-popover .left {
  font-weight: 600;
}

.schedule-popover .right {
  text-align: right;
  flex-shrink: 0;
}
/* === FIX: нормальный темный голубой фон для поповера === */
body.dark-mode .schedule-popover {
  background: #1b2b3c !important;   /* тёмно-голубой */
  border-color: #35516a !important;
  color: #e0f1ff !important;
}

body.dark-mode .schedule-popover .arrow {
  border-top-color: #1b2b3c !important;
}

body.dark-mode .schedule-popover .sched-row .left {
  color: #cfe6ff !important;
}

body.dark-mode .schedule-popover .sched-row .right {
  color: #9dcbff !important;
}

.back-btn {
  display: inline-block;
  margin: 15px 0 10px 15px;
  padding: 8px 14px;
  background: #007bff;
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.back-btn:hover {
  background: #005fcc;
}

body.dark-mode .back-btn {
  background: #4da8ff;
  color: #000;
}
body.dark-mode .back-btn:hover {
  background: #1e90ff;
}

/	

/* === ФИКС КАРТОЧКИ ОПИСАНИЯ — убираем лишние пустые зоны === */
.ex-info-card.desc-card {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.ex-info-card.desc-card h3 {
    margin-bottom: 8px !important;
}

/* === Описание — убрать все переносы строк === */
.ex-info-card.desc-card .value {
    white-space: nowrap !important;   /* ❗ не переносить строки */
    overflow: hidden;                 /* скрывать лишнее */
    text-overflow: ellipsis;          /* троеточие в конце */
    line-height: 1.4;
}



/* Крупнее шрифт только на странице exchange.html */
body.exchange-page {
  font-size: 15px;
}

/* Чуть крупнее заголовки и таблица */
body.exchange-page .exchange-card-big h1 {
  font-size: 20px;
}

body.exchange-page .ex-rates th,
body.exchange-page .ex-rates td {
  font-size: 15px;
}

/* ======================================================
      🎯 СТИЛЬ SELECT .currency-filter + ИКОНКА 💱
   ====================================================== */
.currency-filter {
    padding-left: 32px !important;
    height: 32px !important;

    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;

    color: #222; /* текст обычный */

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230a8f5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c0-2-2-3-4-3S4 4 4 6c0 3 8 1 8 5 0 2-2 3-4 3s-4-1-4-3'/%3E%3Cline x1='8' y1='1' x2='8' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 8px center;

    cursor: pointer;
}

.currency-filter:hover {
    background-color: #e8e8e8; /* вместо background */
}

.currency-filter:focus {
    outline: none;
    border-color: #007bff;
}
body.dark-mode .currency-filter {
    background-color: #2d2d2d;
    border-color: #555;
    color: #ddd; /* текст обычный */

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2348ffd2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c0-2-2-3-4-3S4 4 4 6c0 3 8 1 8 5 0 2-2 3-4 3s-4-1-4-3'/%3E%3Cline x1='8' y1='1' x2='8' y2='15'/%3E%3C/svg%3E");
}

body.dark-mode .currency-filter:hover {
    background-color: #3a3a3a;
}

.lang-switcher {
  display: flex;
  gap: 6px;
}

.lang-switcher button {
  padding: 4px 10px;
  font-size: 13px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
}

.lang-switcher button.active {
  background: #2D8CFF;
  color: #fff;
  border-color: #2D8CFF;
}

body.dark-mode .lang-switcher button {
  background: #333;
  border-color: #555;
  color: #eee;
}

body.dark-mode .lang-switcher button.active {
  background: #4da3ff;
  color: #000;
}

/* ===========================================
   ГОРОДСКИЕ SEO-СТРАНИЦЫ
   =========================================== */

body.city-page main {
  width: 95%;
  max-width: 1600px;
  margin: 8px auto 14px;
  background: #fff;
  padding: 8px 20px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.city-hero,
.city-text-block,
.city-faq-block,
.city-more-links {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.city-hero h1,
.city-text-block h2,
.city-faq-block h2,
.city-more-links h2 {
  margin: 0 0 10px;
  font-size: 1.9rem;
  font-weight: 700;
  color: #0d3b66;
  line-height: 1.2;
}

.city-hero p,
.city-text-block p,
.city-faq-block p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin: 0 0 10px;
}

.city-hero p:last-child,
.city-text-block p:last-child,
.city-faq-block p:last-child {
  margin-bottom: 0;
}

/* ссылки-кнопки */
.city-links-row,
.city-more-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.city-links-row a,
.city-more-links-row a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1c4d99;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.city-links-row a:hover,
.city-more-links-row a:hover {
  background: #d8e8ff;
  transform: translateY(-1px);
  text-decoration: none;
}

/* карточки лучших курсов */
.best-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.best-card-city{
  background: linear-gradient(145deg,#ffffff,#f3f6fa);
  border: 1px solid #dfe6ee;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}

.best-card-city:hover{
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

.best-card-city::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,#007bff,#4da3ff);
}

.best-card-city.best-card-gold::before {
  background: linear-gradient(90deg,#f6c343,#ffdf70);
}

.best-card-city.best-card-gold {
  border-color: #e4c15c;
}

.best-card-city.best-card-gold h3 {
  color: #b8860b;
}

.best-card-city h3{
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: #0d3b66;
}

.best-card-city .best-label{
  color: #5f6b7a;
  font-size: .9rem;
}

.best-card-city .best-value{
  font-size: 2rem;
  font-weight: 800;
  color: #111;
  letter-spacing: .5px;
}

.best-card-city:hover .best-value{
  color: #007bff;
  transform: scale(1.05);
}

.best-card-city .best-exchange {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.45;
  word-break: break-word;
  color: #0056b3;
}

body.dark-mode .best-card-city {
  background: linear-gradient(145deg,#2c2c2c,#343434);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

body.dark-mode .best-card-city h3 {
  color: #7fc2ff;
}

body.dark-mode .best-card-city .best-label {
  color: #9aa7b4;
}

body.dark-mode .best-card-city .best-value {
  color: #ffffff;
}

body.dark-mode .best-card-city .best-exchange {
  color: #66aaff;
}

body.dark-mode .best-card-city:hover .best-value {
  color: #4da3ff;
}

.best-card-city:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,0.5);
}
.best-card-city::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,#007bff,#4da3ff);
}

.best-card-city.best-card-gold::before {
  background: linear-gradient(90deg,#f6c343,#ffdf70);
}

.best-card-city.best-card-gold {
  border-color: #caa63a;
}

.best-card-city.best-card-gold h3 {
  color: #ffd86b;
}

.best-card-city h3{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.5px;
  color:#7fc2ff;
}

.best-card-city .best-label{
  color:#9aa7b4;
  font-size:.9rem;
}
.best-card-city:hover .best-value{
  color:#4da3ff;
  transform:scale(1.05);
}
.best-card-city .best-value{
  font-size:2rem;
  font-weight:800;
  color:#ffffff;
  letter-spacing:.5px;
}

.best-card-city .best-exchange {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.95rem;
  line-height: 1.45;
  word-break: break-word;
}
.best-card-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.best-card-city .best-value { color: #1f2937; }
.best-card-city .best-label { color: #7b8794; }
.best-side {
  min-width: 0;
  padding: 10px 10px 8px;
  border: 1px solid #dfe6ee;
  border-radius: 10px;
  background: rgba(0,0,0,0.02);
}

.best-side + .best-side {
  margin-top: 10px;
}

.best-side .best-value {
  margin-bottom: 4px;
}

.best-side .best-exchange {
  word-break: break-word;
}

body.dark-mode .best-card-city .best-side {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.best-side .best-value {
  margin-bottom: 4px;
}

.best-side .best-exchange {
  word-break: break-word;
}

/* faq */
.city-faq-item {
  margin-bottom: 16px;
}

.city-faq-item:last-child {
  margin-bottom: 0;
}

.city-faq-item h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0d3b66;
  line-height: 1.3;
}

/* темная тема */
body.dark-mode .city-hero,
body.dark-mode .city-text-block,
body.dark-mode .city-faq-block,
body.dark-mode .city-more-links,

body.dark-mode main {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

body.dark-mode .city-hero h1,
body.dark-mode .city-text-block h2,
body.dark-mode .city-faq-block h2,
body.dark-mode .city-more-links h2,
body.dark-mode .city-faq-item h3,
body.dark-mode .best-card-city h3 {
  color: #cce6ff;
}

body.dark-mode .city-hero p,
body.dark-mode .city-text-block p,
body.dark-mode .city-faq-block p,
body.dark-mode .best-card-city .best-label {
  color: #ddd;
}

body.dark-mode .best-card-city .best-value {
  color: #fff;
}

body.dark-mode .city-links-row a,
body.dark-mode .city-more-links-row a {
  background: #2d446f;
  color: #d9e8ff;
}

body.dark-mode .city-links-row a:hover,
body.dark-mode .city-more-links-row a:hover {
  background: #36558d;
}

/* адаптив */
@media (max-width: 1200px) {
  .best-cards {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 900px) {
  .best-cards {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 700px) {
  body.city-page main {
    margin: 6px auto 10px;
    padding: 6px 14px 12px;
  }

  .city-hero,
  .city-text-block,
  .city-faq-block,
  .city-more-links {
    padding: 14px 14px;
    margin-bottom: 10px;
  }

  .best-card-city {
    padding: 16px 16px 14px;
  }

  .city-hero h1,
  .city-text-block h2,
  .city-faq-block h2,
  .city-more-links h2 {
    font-size: 1.55rem;
  }

  .best-cards {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 10px;
  }

  .best-card-split {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
  }

  .best-side {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 10px 8px;
  }

  .best-card-city h3 {
    margin: 0 0 10px;
    font-size: 22px;
  }

  .best-card-city .best-label {
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .best-card-city .best-value {
    font-size: 16px;
    line-height: 1.15;
    margin-bottom: 5px;
  }

  .best-card-city .best-exchange {
    display: block;
    font-size: 13px;
    line-height: 1.3;
  }

  .city-links-row,
  .city-more-links-row {
    gap: 8px;
  }

  .city-links-row a,
  .city-more-links-row a {
    width: 100%;
    justify-content: center;
  }
}

/* ===========================================
   ГОРОДСКАЯ СТРАНИЦА: таблица на 5 валют
   =========================================== */

body.city-page #rates-table th:nth-child(1),
body.city-page #rates-table td:nth-child(1) {
  width: 26%;
  text-align: left;
}

body.city-page #rates-table th:nth-child(2),
body.city-page #rates-table td:nth-child(2) {
  width: 14%;
}

body.city-page #rates-table th:nth-child(3),
body.city-page #rates-table td:nth-child(3),
body.city-page #rates-table th:nth-child(4),
body.city-page #rates-table td:nth-child(4),
body.city-page #rates-table th:nth-child(5),
body.city-page #rates-table td:nth-child(5),
body.city-page #rates-table th:nth-child(6),
body.city-page #rates-table td:nth-child(6),
body.city-page #rates-table th:nth-child(7),
body.city-page #rates-table td:nth-child(7) {
  width: 9%;
  padding: 8px 4px;
}

body.city-page #rates-table th:nth-child(8),
body.city-page #rates-table td:nth-child(8) {
  width: 8%;
}

/* === Уменьшаем верхний отступ на city page === */

body.city-page main{
  margin-top: 6px;
  padding-top: 10px;
}

/* уменьшаем внутренний отступ блока */
.city-hero{
  padding-top: 12px;
  padding-bottom: 16px;
}

/* уменьшаем расстояние заголовка */
.city-hero h1{
  margin-bottom: 8px;
}
/* === стиль как у disclaimer, но без изменения текста === */

.city-text-block,
.city-faq-block{
  background:#f1f3f6;
  border-left:4px solid #0d3b66;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* dark mode */
body.dark-mode .city-text-block,
body.dark-mode .city-faq-block{
  background:#242b34;
  border-left-color:#4d9eff;
}

/* === Привести city-блоки к стилю disclaimer === */

.city-text-block,
.city-faq-block {
  background: #242b34;
  border-left: 4px solid #4d9eff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  padding: 10px 25px 18px 25px;
}

/* заголовки как у disclaimer */
.city-text-block h2,
.city-faq-block h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #cce6ff;
  text-align: left;
  margin-top: 0;
  margin-bottom: 10px;
  line-height: 1.2;
}

/* текст как у disclaimer */
.city-text-block p,
.city-faq-block p {
  color: #e0e0e0;
  line-height: 1.1;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

/* вопросы внутри FAQ */
.city-faq-item {
  margin-bottom: 14px;
}

.city-faq-item:last-child {
  margin-bottom: 0;
}

.city-faq-item h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #cce6ff;
  text-align: left;
  margin: 0 0 8px 0;
  line-height: 1.2;
}
/* ===========================================
   КАРТА ГОРОДА С ОБМЕННЫМИ ПУНКТАМИ
   =========================================== */

.city-map-section {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.city-map-section h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0d3b66;
  line-height: 1.2;
}

#city-map {
  width: 100%;
  height: 520px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

body.dark-mode .city-map-section {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

body.dark-mode .city-map-section h2 {
  color: #cce6ff;
}

@media (max-width: 700px) {
  #city-map {
    height: 360px;
  }
}

/* ===========================================
   СТРАНИЦЫ ВАЛЮТ (USD / EUR / RUB / CNY)
   =========================================== */

.currency-page-wrap {
  width: 95%;
  max-width: 1600px;
  margin: 20px auto;
  padding: 0;
  box-sizing: border-box;
}

.currency-breadcrumbs {
  font-size: 14px;
  margin: 0 0 12px;
  color: #666;
}

.currency-breadcrumbs a {
  color: #007bff;
  text-decoration: none;
}

.currency-breadcrumbs a:hover {
  text-decoration: underline;
}

/* --- HERO --- */
.currency-hero,
.currency-card,
.currency-fact {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.currency-hero:hover,
.currency-card:hover,
.currency-fact:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.currency-hero {
  margin-bottom: 16px;
}

.currency-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  align-items: center;
}

.currency-hero h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  font-weight: 700;
  color: #0d3b66;
  line-height: 1.2;
}

.currency-hero p {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.currency-hero-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* --- BADGES --- */
.currency-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.currency-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1c4d99;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

/* --- GRID --- */
.currency-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}

.currency-card {
  margin-bottom: 16px;
}

.currency-card h2 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d3b66;
  line-height: 1.25;
}

.currency-card h3 {
  margin: 18px 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0d3b66;
  line-height: 1.25;
}

.currency-card p {
  margin: 0 0 12px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #333;
}

.currency-card ul {
  margin: 0;
  padding-left: 20px;
}

.currency-card li {
  margin-bottom: 8px;
  color: #333;
  line-height: 1.6;
}

/* --- GALLERY --- */
.currency-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.currency-gallery figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.currency-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.currency-gallery figcaption {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
}

/* --- RIGHT COLUMN --- */
.currency-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.currency-fact h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0d3b66;
}

.currency-fact p {
  margin: 0;
  color: #333;
  line-height: 1.6;
  font-size: 0.96rem;
}

/* --- CTA --- */
.currency-cta {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.currency-cta h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0d3b66;
}

.currency-cta p {
  margin: 0 0 14px;
  line-height: 1.6;
  color: #333;
}

.currency-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1c4d99;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.currency-cta a:hover {
  background: #d8e8ff;
  transform: translateY(-1px);
}

/* --- LINKS --- */
.currency-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.currency-links-row a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #eaf2ff;
  color: #1c4d99;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.currency-links-row a:hover {
  background: #d8e8ff;
  transform: translateY(-1px);
}

/* --- DARK MODE --- */
body.dark-mode .currency-breadcrumbs {
  color: #aaa;
}

body.dark-mode .currency-breadcrumbs a {
  color: #66aaff;
}

body.dark-mode .currency-hero,
body.dark-mode .currency-card,
body.dark-mode .currency-fact,
body.dark-mode .currency-cta {
  background: #2b2b2b;
  border-color: #444;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  color: #ddd;
}

body.dark-mode .currency-hero h1,
body.dark-mode .currency-card h2,
body.dark-mode .currency-card h3,
body.dark-mode .currency-fact h3,
body.dark-mode .currency-cta h3 {
  color: #cce6ff;
}

body.dark-mode .currency-hero p,
body.dark-mode .currency-card p,
body.dark-mode .currency-card li,
body.dark-mode .currency-fact p,
body.dark-mode .currency-cta p {
  color: #e0e0e0;
}

body.dark-mode .currency-badge,
body.dark-mode .currency-links-row a,
body.dark-mode .currency-cta a {
  background: #2d446f;
  color: #d9e8ff;
}

body.dark-mode .currency-badge:hover,
body.dark-mode .currency-links-row a:hover,
body.dark-mode .currency-cta a:hover {
  background: #36558d;
}

body.dark-mode .currency-gallery figure {
  background: #333;
  border-color: #444;
}

body.dark-mode .currency-gallery figcaption {
  color: #ccc;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .currency-hero-grid,
  .currency-grid {
    grid-template-columns: 1fr;
  }

  .currency-hero-image img {
    height: 240px;
  }
}

@media (max-width: 700px) {
  .currency-page-wrap {
    width: calc(100% - 16px);
    margin: 12px auto;
  }

  .currency-hero,
  .currency-card,
  .currency-fact,
  .currency-cta {
    padding: 16px;
  }

  .currency-hero h1 {
    font-size: 1.7rem;
  }

  .currency-card h2 {
    font-size: 1.3rem;
  }

  .currency-gallery {
    grid-template-columns: 1fr;
  }

  .currency-links-row a {
    width: 100%;
    justify-content: center;
  }
}

/* ===========================================
   USD PAGE — ПРИВЯЗКА К ДИЗАЙНУ САЙТА
   =========================================== */

.page-wrap {
  width: 95%;
  max-width: 1600px;
  margin: 20px auto;
}

/* --- хлебные крошки --- */
.breadcrumb {
  font-size: 14px;
  margin-bottom: 12px;
  color: #666;
}
.breadcrumb a {
  color: #007bff;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* --- HERO --- */
/* --- HERO --- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 520px);
  gap: 24px;
  align-items: center;

  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.hero h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  color: #0d3b66;
}

.hero p {
  color: #333;
  line-height: 1.6;
}

.hero > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hero img {
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}		

/* --- BADGES --- */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.badge {
  background: #eaf2ff;
  color: #1c4d99;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}

/* --- GRID --- */
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

/* --- CARD --- */
.card {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.card h2 {
  color: #0d3b66;
  margin-bottom: 10px;
}

.card h3 {
  margin-top: 18px;
  color: #0d3b66;
}

.card p,
.card li {
  color: #333;
  line-height: 1.6;
}

/* --- LIST --- */
.info-list {
  padding-left: 20px;
}

/* --- GALLERY --- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.gallery figure {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.gallery figcaption {
  font-size: 13px;
  padding: 10px;
  color: #666;
}

/* --- TABLE --- */
.mini-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.mini-table th,
.mini-table td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.mini-table th {
  background: #f2f2f2;
}

/* --- SIDE --- */
.side-image {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 12px;
}

.fact-box {
  background: #eef4ff;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* --- CTA --- */
.cta-box {
  background: #f8f9fa;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 20px;
}

.cta-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* ===========================================
   🌙 DARK MODE
   =========================================== */

body.dark-mode .hero,
body.dark-mode .card,
body.dark-mode .cta-box {
  background: #2b2b2b;
  border-color: #444;
  color: #ddd;
}

body.dark-mode .hero h1,
body.dark-mode .card h2,
body.dark-mode .card h3 {
  color: #cce6ff;
}

body.dark-mode .hero p,
body.dark-mode .card p,
body.dark-mode .card li {
  color: #e0e0e0;
}

body.dark-mode .badge {
  background: #2d446f;
  color: #d9e8ff;
}

body.dark-mode .fact-box {
  background: #2d446f;
  color: #d9e8ff;
}

body.dark-mode .mini-table th {
  background: #333;
}

body.dark-mode .mini-table td {
  border-color: #444;
}

body.dark-mode .gallery figure {
  background: #333;
}

body.dark-mode .gallery figcaption {
  color: #ccc;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  .hero,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .hero > div:last-child {
    justify-content: center;
  }

  .hero img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  .gallery {
    grid-template-columns: 1fr;
  }
}

.bill-preview {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

/* контейнер */
.bill-item {
  border-radius: 12px;
  overflow: hidden;                /* 🔥 вот ключ */
  transform: rotate(-10deg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

/* сама картинка */
.bill-item img {
  display: block;
  width: 220px;
  height: auto;
}

/* hover */
.bill-item:hover {
  transform: rotate(-10deg) scale(1.04);
  box-shadow: 0 24px 46px rgba(0,0,0,0.26);
}

/* mobile */
@media (max-width: 700px) {
  .bill-item {
    transform: rotate(-8deg);
  }

  .bill-item img {
    width: 160px;
  }
}



body.dark-mode .bill-preview img {
  border-color: #555;
  background: #fff;
}

/* МОДАЛКА */
.image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}

.image-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

/* ===========================================
   INDEX /currencies/ — карточки валют
   =========================================== */

/* ===========================================
   /currencies/ — карточки валют
   =========================================== */

/* ===========================================
   /currencies/ — страница валют
   =========================================== */

/* ===========================================
   /currencies/ — страница списка валют
   =========================================== */

.hero.hero-no-image {
  display: block;
}

.currencies-section {
  margin: 0 0 18px;
}

.currency-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.currency-tile {
  display: block;
  text-decoration: none;
  background: linear-gradient(145deg,#ffffff,#f4f6f9);
  border: 1px solid #dfe6ee;
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.currency-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.12);
  border-color: #9fc5ff;
  text-decoration: none;
}

.currency-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.currency-tile-code {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.4px;
  color: #0d3b66;
}

.currency-tile-flag {
  font-size: 1.9rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

.currency-tile-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1f2937;
}

.currency-tile-placeholder {
  text-align: center;
  color: #666;
  padding: 30px 20px;
}

.currencies-info-card {
  margin-bottom: 16px;
}

/* dark mode */
body.dark-mode .currency-tile {
  background: linear-gradient(145deg,#343434,#2f2f2f);
  border-color: #4a4a4a;
  box-shadow: 0 12px 26px rgba(0,0,0,0.38);
}

body.dark-mode .currency-tile:hover {
  border-color: #5ea9ff;
  box-shadow: 0 18px 34px rgba(0,0,0,0.5);
}

body.dark-mode .currency-tile-code {
  color: #cfe6ff;
}

body.dark-mode .currency-tile-name,
body.dark-mode .currency-tile-placeholder {
  color: #f3f4f6;
}

@media (max-width: 900px) {
  .currency-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .currency-cards-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .currency-tile {
    padding: 18px 18px 16px;
    border-radius: 16px;
  }

  .currency-tile-code {
    font-size: 1.8rem;
  }

  .currency-tile-name {
    font-size: 1.05rem;
  }

  .currency-tile-flag {
    font-size: 1.7rem;
  }
}

.best-cards .best-card-city .best-value {
  display: block !important;
  text-align: right !important;
}