/* TriRublya — тема «Монетный двор» (золото). Подключается после собранной темы iEX. */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Onest:wght@400;500;600;700&display=swap');

/* ---------- Светлая тема: шампань и тёмное золото ---------- */
html:root {
  --tr-gold-hi: #f6e2a6;
  --tr-gold: #d4a94e;
  --tr-gold-mid: #b8862f;
  --tr-gold-deep: #8a5f14;
  --tr-gold-ink: #2b1d06;
  --tr-metal: linear-gradient(160deg, #fbecc0 0%, #e2bb62 28%, #b8862f 52%, #e9c977 74%, #a0721f 100%);
  --tr-foil-text: linear-gradient(100deg, #8a5f14 0%, #c99a3d 30%, #e9c66f 48%, #b07f27 66%, #7a5210 100%);
  --tr-guilloche-opacity: 0.07;

  --font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 0.625rem;

  --app-background: #f3ead6;
  --section-background: #efe4cb;
  --background: #fffcf5;
  --foreground: #261c0c;
  --card: #fffcf5;
  --card-foreground: #261c0c;
  --popover: #fffcf5;
  --popover-foreground: #261c0c;
  --primary: #b8862f;
  --primary-foreground: #2b1d06;
  --secondary: #f6edd8;
  --secondary-foreground: #5a3f0e;
  --muted: #f7f0df;
  --muted-foreground: #7b6a47;
  --accent: #f3e6c4;
  --accent-foreground: #5a3f0e;
  --border: #e6d6ad;
  --input: #e1cf9f;
  --input-background: #fffdf8;
  --ring: #b8862f;

  --header-logotype-color: var(--tr-gold-deep);
  --primary-button-bg-color: var(--tr-gold-mid);
  --primary-button-text-color: var(--tr-gold-ink);
  --menu-active-bg-color: #f0e0b8;
  --menu-active-text-color: #4a3309;
  --exchange-selected-child-bg: color-mix(in oklab, var(--tr-gold) 16%, transparent);
  --exchange-selected-child-color: var(--foreground);
  --exchange-amount-background: #f8f0dc;
  --exchange-amount-foreground: #261c0c;
  --footer-background: #efe3c7;
  --footer-link-hover: var(--tr-gold-deep);
}

/* ---------- Тёмная тема: бронзово-чёрный и светлое золото ---------- */
html.dark,
html[data-theme="dark"] {
  --tr-gold-hi: #f5de9a;
  --tr-gold: #d9b25f;
  --tr-gold-mid: #c4973f;
  --tr-gold-deep: #9a6e22;
  --tr-gold-ink: #1c1405;
  --tr-metal: linear-gradient(160deg, #fff1c6 0%, #e8c46e 26%, #b98a33 50%, #f0d488 72%, #9a6e22 100%);
  --tr-foil-text: linear-gradient(100deg, #b98a33 0%, #f5de9a 34%, #fff4d2 46%, #d9b25f 62%, #9a6e22 100%);
  --tr-guilloche-opacity: 0.06;

  --app-background: #15110a;
  --section-background: #1b160d;
  --background: #17120b;
  --foreground: #f4ead4;
  --card: #1e180f;
  --card-foreground: #f4ead4;
  --popover: #221b11;
  --popover-foreground: #f4ead4;
  --primary: #d9b25f;
  --primary-foreground: #1c1405;
  --secondary: #2a2215;
  --secondary-foreground: #ecdcb6;
  --muted: #262015;
  --muted-foreground: #b4a27c;
  --accent: #2f2616;
  --accent-foreground: #f5de9a;
  --border: rgba(217, 178, 95, 0.18);
  --input: rgba(217, 178, 95, 0.24);
  --input-background: #1a150d;
  --ring: #d9b25f;

  --header-logotype-color: var(--tr-gold);
  --primary-button-bg-color: var(--tr-gold);
  --primary-button-text-color: var(--tr-gold-ink);
  --menu-active-bg-color: #342a17;
  --menu-active-text-color: #f5de9a;
  --exchange-selected-child-bg: color-mix(in oklab, var(--tr-gold) 14%, transparent);
  --exchange-amount-background: #241d12;
  --exchange-amount-foreground: #f8eed7;
  --footer-background: #120e08;
  --footer-border: rgba(217, 178, 95, 0.2);
  --footer-link: #d8c69d;
  --footer-link-hover: var(--tr-gold-hi);
}

/* ---------- Фон: гильоширная сетка, как на банкноте ----------
   Сетка — готовая картинка (Safari тормозит на repeating-radial-gradient),
   оба слоя неподвижные и не перерисовываются при прокрутке. */
.main-background {
  background-color: var(--app-background);
  isolation: isolate;
}
.main-background::before,
.main-background::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.main-background::before {
  background: url('/ng-custom/guilloche.webp?v=1') center / cover no-repeat;
  opacity: var(--tr-guilloche-opacity);
}
.main-background::after {
  background: radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--tr-gold) 14%, transparent), transparent 60%);
}

body { font-family: var(--font-sans); }

/* ---------- Шапка: плотная, без размытия фона ----------
   backdrop-filter над неподвижным фоном заставляет Safari перерисовывать размытие каждый кадр. */
ui-toolbar-shell {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: color-mix(in oklab, var(--toolbar, var(--background)) 97%, transparent) !important;
  border-bottom: 1px solid color-mix(in oklab, var(--tr-gold) 22%, transparent);
}

default-cookie-consent,
default-cookie-consent * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---------- Логотип: золотое тиснение ---------- */
.logo__text {
  font-family: 'Forum', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  background: var(--tr-foil-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* ---------- Заголовки панелей обмена ---------- */
.exchange-panel h2,
#exchange-give-title {
  font-family: 'Forum', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--foreground);
}
h1, h2.text-2xl, h2.text-3xl { font-family: 'Forum', Georgia, serif; font-weight: 400; }

/* ---------- Панели: тонкая золотая кромка ---------- */
.exchange-panel {
  border-color: color-mix(in oklab, var(--tr-gold) 34%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--tr-gold-hi) 35%, transparent);
}

/* ---------- Суммы: ровные цифры ---------- */
.exchange-amount-input {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}

/* ---------- Выбранная валюта: золотая метка слева ---------- */
.exchange__item[aria-pressed="true"],
.exchange__item[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--tr-gold);
}

/* ---------- Главные кнопки: полированный слиток ---------- */
button[data-variant="default"],
a[data-variant="default"] {
  background: var(--tr-metal) !important;
  background-size: 140% 140% !important;
  color: var(--tr-gold-ink) !important;
  border: 1px solid color-mix(in oklab, var(--tr-gold-deep) 60%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(90, 60, 10, 0.25),
    0 6px 18px -8px color-mix(in oklab, var(--tr-gold-deep) 70%, transparent);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.45);
  position: relative;
  overflow: hidden;
  transition: background-position 0.5s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
button[data-variant="default"]:hover,
a[data-variant="default"]:hover {
  background-position: 100% 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -2px 0 rgba(90, 60, 10, 0.25),
    0 10px 24px -10px color-mix(in oklab, var(--tr-gold-deep) 80%, transparent);
}
button[data-variant="default"]:active { transform: translateY(1px); }
button[data-variant="default"]:focus-visible,
a[data-variant="default"]:focus-visible {
  outline: 2px solid var(--tr-gold-hi);
  outline-offset: 2px;
}
button[data-variant="default"]:disabled { filter: saturate(0.55) brightness(0.92); }

/* ---------- Кнопка «Поменять местами»: монета с гуртом ---------- */
button[aria-label="Поменять валюты местами"] {
  background:
    radial-gradient(circle at 35% 30%, #fff3cf 0%, var(--tr-gold) 38%, var(--tr-gold-deep) 100%) padding-box,
    repeating-conic-gradient(var(--tr-gold-deep) 0 4deg, var(--tr-gold-hi) 4deg 8deg) border-box !important;
  border: 3px solid transparent !important;
  color: var(--tr-gold-ink) !important;
  box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--tr-gold-deep) 80%, transparent);
  transition: transform 0.5s cubic-bezier(.3,.7,.3,1);
}
button[aria-label="Поменять валюты местами"]:hover { transform: rotate(180deg); }

/* ---------- Ссылки и чекбоксы ---------- */
a.text-primary, .text-primary { color: var(--tr-gold-deep) !important; }
.dark a.text-primary, .dark .text-primary,
html[data-theme="dark"] a.text-primary, html[data-theme="dark"] .text-primary { color: var(--tr-gold) !important; }

::selection { background: color-mix(in oklab, var(--tr-gold) 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
  button[aria-label="Поменять валюты местами"],
  button[data-variant="default"],
  a[data-variant="default"] { transition: none; }
  button[aria-label="Поменять валюты местами"]:hover { transform: none; }
}