/* mint-change.ru — свои стили (ng-custom).
   Единый приглушённый тёмный цвет для футера, кнопок и стрелки «наверх».
   Чтобы поменять оттенок — правь --mc-dark ниже. */
:root {
  --mc-dark: #242a34;        /* приглушённый графит, не чёрный */
  --mc-dark-hover: #2e3542;  /* чуть светлее — для наведения */
  --mc-on-dark: #eef0f4;     /* цвет текста/иконок на тёмном */
}

/* ===== Фирменный цвет: фиолетовый -> мятно-зелёный =====
   Меняет primary во всех кнопках, ховерах, аккордеоне футера, активных состояниях.
   Оттенок правится в --mc-primary ниже. */
:root {
  --mc-primary: #059669;         /* основной мятно-зелёный */
  --mc-primary-soft: #d1fae5;    /* светлый мятный (акценты/ховер-фон) */
  --mc-primary-softer: #ecfdf5;  /* совсем светлый мятный */
}
:root, .dark {
  --primary: var(--mc-primary) !important;
  --ring: var(--mc-primary) !important;
}
:root {
  --accent: var(--mc-primary-soft) !important;
  --secondary: var(--mc-primary-softer) !important;
}

/* ===== Футер (тёмный на светлой теме) ===== */
footer {
  --footer-background: var(--mc-dark);
  --footer-foreground: var(--mc-on-dark);
  --footer-muted-foreground: #9aa0aa;
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-link: #cfd3da;
  --footer-link-hover: var(--primary);
  --footer-accent: rgba(255, 255, 255, 0.06);
}

/* ===== Главная кнопка «создать заявку» (submit-кнопка формы обмена) ===== */
button[uibutton][type="submit"] {
  background-color: var(--mc-dark) !important;
  color: var(--mc-on-dark) !important;
  border-color: transparent !important;
}
button[uibutton][type="submit"]:hover {
  background-color: var(--mc-dark-hover) !important;
}

/* ===== Кнопка «наверх» (плавающая, слева внизу) ===== */
.fixed.bottom-5.left-5.z-50 > button,
button[aria-label="Прокрутить страницу наверх"] {
  background-color: var(--mc-dark) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--mc-on-dark) !important;
}
.fixed.bottom-5.left-5.z-50 > button:hover,
button[aria-label="Прокрутить страницу наверх"]:hover {
  background-color: var(--mc-dark-hover) !important;
}

/* ===== Фикс горизонтального переполнения на /contacts =====
   Грид-контейнер задаёт колонки только для xl: (>=1280px), ниже — растягивается
   по контенту (515px) вместо ширины экрана. Форсируем одну гибкую колонку. */
@media (max-width: 1279.98px) {
  main [class*="xl:grid-cols-"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ===== ТЁМНАЯ ТЕМА: мягкий графит вместо чёрного =====
   Почти чёрный фон + белый текст резали глаз, светлая мятная картинка фона
   просвечивала по краям. Здесь всё на 2–3 ступени мягче, текст не чисто белый,
   кнопки и поля отделены от фона. */
html.dark {
  --mc-dark: #2a3238;
  --mc-dark-hover: #333c43;
  --mc-primary: #19b38a;          /* мята светлее — читается на тёмном */

  --app-background: #121619 !important;
  --app-foreground: #e3e7ea !important;
  --section-background: #161b1f !important;
  --background: #181d21 !important;
  --foreground: #e3e7ea !important;
  --card: #181d21 !important;
  --card-foreground: #e3e7ea !important;
  --popover: #1d2327 !important;
  --popover-foreground: #e3e7ea !important;
  --primary-foreground: #062a1f !important;
  --secondary: #232a2f !important;
  --secondary-foreground: #e3e7ea !important;
  --muted: #222a2f !important;
  --muted-foreground: #9aa5ad !important;
  --accent: #252d33 !important;
  --accent-foreground: #e3e7ea !important;
  --border: #2a3238 !important;
  --input: #323b42 !important;
  --input-background: #14191c !important;
  --ring: #19b38a !important;

  --toolbar: #181d21 !important;
  --toolbar-foreground: #e3e7ea !important;
  --toolbar-border: #2a3238 !important;
  --exchange-amount-background: #20272c !important;
  --exchange-amount-foreground: #eef1f3 !important;
  --exchange-text-background: #20272c !important;
  --exchange-text-foreground: #9aa5ad !important;
  --exchange-text-border: #2a3238 !important;
  --exchange-selected-child-bg: color-mix(in oklab, #19b38a 13%, transparent) !important;
  --menu-active-bg-color: #252d33 !important;
  --menu-active-text-color: #e3e7ea !important;
  --ui-skeleton-base: #222a2f !important;
}

/* Фон страницы: вместо светлой картинки — тёмный с лёгким мятным свечением сверху */
html.dark .main-background.has-site-background::before {
  background-image: radial-gradient(90% 55% at 50% -5%, rgba(25, 179, 138, 0.10), transparent 65%) !important;
  opacity: 1 !important;
}
html.dark .main-background { background-color: var(--app-background) !important; }

/* Главная кнопка «Создать заявку» — мятная, видна на тёмном */
html.dark button[uibutton][type="submit"] {
  background-color: var(--mc-primary) !important;
  color: #062a1f !important;
}
html.dark button[uibutton][type="submit"]:hover { background-color: #22c497 !important; }
html.dark button[uibutton][type="submit"]:disabled { background-color: #2a3238 !important; color: #8d979f !important; opacity: 1 !important; }

/* Кнопка «наверх» и футер */
html.dark footer {
  --footer-background: #161b1f;
  --footer-border: #2a3238;
  --footer-link: #c3cbd1;
  --footer-muted-foreground: #8d979f;
}
html.dark .fixed.bottom-5.left-5.z-50 > button,
html.dark button[aria-label="Прокрутить страницу наверх"] { border-color: #3a444b !important; }

/* Тёмные иконки валют (₽, $) сливались с фоном — даём им светлую подложку */
html.dark .exchange__item img {
  background-color: #3a444b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Неактивные фильтры (Coin/USDT) — видны, но понятно, что выключены */
html.dark .filter-form__chip:disabled { opacity: 0.75 !important; color: #7f8a92 !important; }

/* Чекбоксы: рамка заметнее */
html.dark input[type="checkbox"], html.dark button[role="checkbox"] { border-color: #4a555d !important; }

/* ===== СВЕТЛАЯ ТЕМА: мягче и чище =====
   Чисто белые панели почти без рамки на светло-сером сливались, текст был
   почти чёрный, мелкие элементы (бейдж «В сети», неактивные фильтры,
   светлые иконки валют) терялись. */
html:not(.dark) {
  --app-background: #f3f6f5 !important;   /* чуть мятно-серый фон под карточками */
  --section-background: #eef2f1 !important;
  --foreground: #1c2428 !important;       /* мягче чёрного */
  --card-foreground: #1c2428 !important;
  --popover-foreground: #1c2428 !important;
  --muted: #f1f4f3 !important;
  --muted-foreground: #5f6b72 !important; /* подписи контрастнее */
  --border: #e0e7e4 !important;
  --input: #d9e1de !important;
  --exchange-amount-background: #f1f4f3 !important;
  --exchange-text-background: #f1f4f3 !important;
  --exchange-text-foreground: #5f6b72 !important;
}

html:not(.dark) .main-background { background-color: var(--app-background) !important; }

/* Карточки и панели: тонкая рамка + мягкая тень, чтобы отделялись от фона */
html:not(.dark) .bg-card {
  border-color: #e0e7e4 !important;
  box-shadow: 0 1px 2px rgba(16, 40, 32, 0.04), 0 8px 24px -12px rgba(16, 40, 32, 0.10) !important;
}

/* Поля ввода: рамка видна, при фокусе — мятная */
html:not(.dark) input:focus-visible,
html:not(.dark) textarea:focus-visible { border-color: var(--mc-primary) !important; }

/* Бейдж «В сети»: текст был бледно-зелёным на бледно-зелёном */
html:not(.dark) .bg-green-200.text-green-600 {
  background-color: #d1fae5 !important;
  color: #047857 !important;
  font-weight: 500;
}

/* Неактивные фильтры (Coin/USDT) почти пропадали */
html:not(.dark) .filter-form__chip:disabled { opacity: 0.8 !important; color: #9aa4aa !important; }

/* Светлые иконки валют (KZT, Т-Банк) терялись на белом — тонкое кольцо */
html:not(.dark) .exchange__item img { box-shadow: 0 0 0 1px rgba(16, 40, 32, 0.08); }

/* Чекбоксы: рамка заметнее */
html:not(.dark) input[type="checkbox"], html:not(.dark) button[role="checkbox"] { border-color: #b9c4c0 !important; }