@import url('/assets/css/theme.css'); /* общий слой оформления сайта; убрать эту строку = полный откат темы */

/* Иконка Торговой площадки - SVG (стопка монет), рисуется маской: чёткая на любом
   размере, цвет берётся из currentColor (серая в сайдбаре, фиолетовая на активной).
   Тег <img src="/images/tp_icon.png"> на страницах остаётся, подменяется здесь одним местом. */
img[src="/images/tp_icon.png"] {
  width: 20px !important; height: 20px !important; flex-shrink: 0;
  content: url("data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C7.6 1 4 2.3 4 4s3.6 3 8 3 8-1.3 8-3-3.6-3-8-3zM4 6.5V9c0 1.7 3.6 3 8 3s8-1.3 8-3V6.5c-1.7 1.4-4.6 2.1-8 2.1S5.7 7.9 4 6.5zm0 5V14c0 1.7 3.6 3 8 3s8-1.3 8-3v-2.5c-1.7 1.4-4.6 2.1-8 2.1s-6.3-.7-8-2.1zm0 5V19c0 1.7 3.6 3 8 3s8-1.3 8-3v-2.5c-1.7 1.4-4.6 2.1-8 2.1s-6.3-.7-8-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C7.6 1 4 2.3 4 4s3.6 3 8 3 8-1.3 8-3-3.6-3-8-3zM4 6.5V9c0 1.7 3.6 3 8 3s8-1.3 8-3V6.5c-1.7 1.4-4.6 2.1-8 2.1S5.7 7.9 4 6.5zm0 5V14c0 1.7 3.6 3 8 3s8-1.3 8-3v-2.5c-1.7 1.4-4.6 2.1-8 2.1s-6.3-.7-8-2.1zm0 5V19c0 1.7 3.6 3 8 3s8-1.3 8-3v-2.5c-1.7 1.4-4.6 2.1-8 2.1s-6.3-.7-8-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-header img[src="/images/tp_icon.png"] { width: 34px !important; height: 34px !important; background-color: var(--p, #8b5cf6); }
/* Подсветка как у остальных иконок сайдбара: серая -> белая на hover -> цвет сайта со свечением на активной. */
.sidebar a.act img[src="/images/tp_icon.png"] { background-color: var(--p, #9c27b0); animation: tpIconGlow 2s ease-in-out infinite; }
.sidebar a:hover img[src="/images/tp_icon.png"] { animation: tpIconPulse .5s ease; }
@keyframes tpIconGlow { 0%,100% { filter: drop-shadow(0 0 4px var(--p, #9c27b0)); } 50% { filter: drop-shadow(0 0 9px var(--p, #9c27b0)) drop-shadow(0 0 16px var(--p, #9c27b0)); } }
@keyframes tpIconPulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
/* В выпадающем меню шапки - как остальные иконки пунктов: цвет сайта, ~ширина шрифтовой иконки. */
.u-drop a img[src="/images/tp_icon.png"] { width: 18px !important; height: 15px !important; background-color: var(--p, var(--acc, #9c27b0)); }
/* Общий виджет корзины (includes/cart_widget.php) - подключается на всех страницах
   сайта. Классы с префиксом ek-cart-/ek-ci- не пересекаются с локальными стилями
   каждой страницы (у разных страниц разные соглашения для модалок). */
.ek-cart-wrap { position: relative; }
.ek-cart-btn { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: 0.2s; position: relative; }
.ek-cart-btn:hover { border-color: var(--p, #9c27b0); color: #fff; }
.ek-cart-count { position: absolute; top: -6px; right: -6px; background: var(--p, #9c27b0); color: #fff; font-size: 0.65rem; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg, #0a0a0a); }

/* z-index выше баннера cookie (у него 9999) - иначе баннер перекрывает кнопку "Оформить заказ"
   в корзине и ловит клики на себя вместо неё (особенно заметно в режиме "В подарок" - форма
   становится выше и кнопка оказывается прямо под баннером). */
.ek-cart-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10050; align-items: center; justify-content: center; padding: 1rem; }
.ek-cart-modal.show { display: flex; }
.ek-cart-modal-box { background: #18181b; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; max-width: 900px; width: 100%; max-height: 85vh; overflow-y: auto; font-family: 'Manrope', -apple-system, sans-serif; animation: ekCartIn 0.25s ease; display: flex; }
.ek-cart-modal-box--empty { max-width: 460px; }
@keyframes ekCartIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ek-cart-col { padding: 1.5rem 1.6rem; }
.ek-cart-col-main { flex: 1.5; min-width: 0; }
.ek-cart-col-side { flex: 1; min-width: 240px; max-width: 300px; border-left: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.015); }
.ek-cart-modal-box--empty .ek-cart-col-main { flex: 1; }
.ek-cart-modal-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 1.3rem; gap: 0.5rem; }
.ek-cart-back { justify-self: start; background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.2rem; transition: 0.15s; }
.ek-cart-back:hover { color: #fff; }
.ek-cart-back i { font-size: 0.78rem; }
.ek-cart-modal-head h2 { font-size: 1.15rem; font-weight: 800; color: #fff; text-align: center; grid-column: 2; }
.ek-cart-modal-x-spacer { grid-column: 3; }
.ek-cart-flash { padding: 0.7rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-weight: 600; font-size: 0.83rem; }
.ek-cart-flash--success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); color: #22c55e; }
.ek-cart-flash--error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
.ek-cart-empty { text-align: center; padding: 2rem 1rem; color: #6b7280; }
.ek-cart-empty i { font-size: 2.2rem; color: #3f3f46; margin-bottom: 0.7rem; display: block; }
.ek-cart-thead { display: flex; justify-content: space-between; padding: 0 0.9rem 0.6rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; }
.ek-cart-items { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.ek-cart-item { display: flex; align-items: center; gap: 0.9rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 0.75rem 0.9rem; }
.ek-ci-cat { flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: #d1d5db; min-width: 90px; white-space: nowrap; }
.ek-ci-cat i { font-size: 0.9rem; margin-right: 0.35rem; }
.ek-ci-name { flex: 1; font-size: 0.86rem; font-weight: 700; color: #fff; }
.ek-ci-remove-form { margin: 0; flex: 0 0 auto; }
.ek-ci-remove-form button { background: none; border: none; color: #6b7280; cursor: pointer; font-size: 0.9rem; padding: 0.2rem 0.4rem; }
.ek-ci-remove-form button:hover { color: #ef4444; }
.ek-cart-side-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 0.7rem; }
.ek-cart-buyfor { display: flex; gap: 0.4rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 0.3rem; margin-bottom: 0.9rem; }
.ek-cart-buyfor button { flex: 1; background: none; border: none; color: #9ca3af; font-family: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.55rem 0.4rem; border-radius: 7px; cursor: pointer; transition: 0.15s; }
.ek-cart-buyfor button:hover { color: #fff; }
.ek-cart-buyfor button.act { background: var(--p, #9c27b0); color: #fff; }
.ek-cart-giftid { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 0.65rem 0.8rem; color: #fff; font-size: 0.83rem; font-family: inherit; outline: none; margin-bottom: 0.9rem; }
.ek-cart-giftid:focus { border-color: var(--p, #9c27b0); }
.ek-cart-giftid::placeholder { color: #6b7280; }
.ek-cart-side-total { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.95rem; color: #fff; font-weight: 700; margin-bottom: 0.9rem; font-family: 'JetBrains Mono', monospace; }
.ek-cart-side-total span { font-family: 'Manrope', -apple-system, sans-serif; font-weight: 600; color: #9ca3af; font-size: 0.82rem; }
.ek-cart-pay-btn { width: 100%; padding: 0.85rem; border-radius: 12px; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; border: none; color: #fff; background: linear-gradient(135deg, var(--p, #9c27b0), var(--s, #7b1fa2)); box-shadow: 0 10px 26px rgba(156,39,176,0.28); transition: 0.2s; }
.ek-cart-pay-btn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.ek-cart-lowbal { margin-top: 0.7rem; color: #ef4444; font-size: 0.78rem; text-align: center; }
.ek-cart-lowbal a { color: var(--p, #9c27b0); font-weight: 700; }
@media (max-width: 640px) {
  .ek-cart-modal-box { flex-direction: column; max-height: 90vh; }
  .ek-cart-col-side { max-width: none; border-left: none; border-top: 1px solid rgba(255,255,255,0.07); }
}

/* Иконка Extaler Coins - картинка-монетка вместо шрифтовой иконки (везде, где стоит
   класс fa-circle-dollar-to-slot: кошельки в шапке, цены, окна). Размер = размер шрифта. */
.fa-circle-dollar-to-slot::before {
  content: "" !important;
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background: url("/images/ec_coin.png") center / contain no-repeat;
  vertical-align: -0.22em;
}

/* ===== Иконки валют сайта (единый набор) =====
   Рубли (fa-coins, fa-ruble-sign) - монетка-рубль; звёзды (.star-icon, .ek-star, банк клана) - монетка-звезда;
   Extaler Coins (fa-circle-dollar-to-slot) - выше. Размер = размер шрифта, поэтому работает везде. */
.fa-coins::before,
.fa-ruble-sign::before {
  content: "" !important;
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  background: url("/images/coin_rub.png") center / contain no-repeat;
  vertical-align: -0.32em;
}
.star-icon {
  display: inline-block;
  width: 19px;
  height: 19px;
  font-size: 0 !important;
  line-height: 0;
  filter: none !important;
  background: url("/images/coin_star.png") center / contain no-repeat;
  vertical-align: -4px;
}
.ek-star {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  background: url("/images/coin_star.png") center / contain no-repeat;
  vertical-align: -0.2em;
}
/* Клановый банк хранится в звёздах: его иконки - монетка-звезда */
.fa-sack-dollar::before,
.fa-star-coin::before,
.fa-coins[style*="fb923c"]::before {
  content: "" !important;
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  background: url("/images/coin_star.png") center / contain no-repeat;
  vertical-align: -0.32em;
}

/* Кошелёк Extaler Coins в шапке - без золотой подсветки, как у остальных валют (рубли, звёзды).
   Стоит на всех страницах, поэтому перебиваем инлайн-стили из разметки. */
.wallet[href*="coins_topup"] { border-color: rgba(255,255,255,0.08) !important; background: rgba(255,255,255,0.04) !important; box-shadow: none !important; }
.wallet[href*="coins_topup"]:hover { border-color: var(--p, #9c27b0) !important; }
.wallet[href*="coins_topup"] i { color: inherit !important; filter: none !important; text-shadow: none !important; }

/* ===== Единый вид форм на всех страницах сайта и в админке =====
   Выпадающие списки раньше открывались белым окном с белым текстом (пункты не читались),
   теперь список тёмный, в цвет страницы, с аккуратной стрелкой и подсветкой выбранного пункта. */
select,
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"] { color-scheme: dark; }
select { cursor: pointer; scrollbar-width: thin; }
select:not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 12px 8px;
  padding-right: 2.1rem;
}
select option, select optgroup { background-color: var(--card, #141416); color: var(--txt, #e8e6e3); }
select option:checked { background-color: var(--p, #9c27b0); color: #fff; }
select option:disabled { color: #6b7280; }
select:disabled { opacity: .55; cursor: not-allowed; }
::selection { background: rgba(var(--p-rgb, 156,39,176), .45); color: #fff; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--p, #9c27b0); }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid rgba(var(--p-rgb, 156,39,176), .7); outline-offset: 2px; }
input[type="file"]::file-selector-button {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: inherit; border-radius: 8px;
  padding: .35rem .8rem; margin-right: .7rem; cursor: pointer; font-family: inherit; font-weight: 600; transition: .15s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--p, #9c27b0); }
textarea { scrollbar-width: thin; }

/* ===== Меню шапки (профиль, поиск, уведомления) на всех страницах =====
   Меню не должно уезжать за край экрана: у него есть предел высоты и своя прокрутка.
   Шапка закрепляется при прокрутке всегда: overflow-x:hidden у body ломал sticky,
   clip обрезает горизонтальную прокрутку так же, но sticky не трогает. */
body { overflow-x: clip; }
.hdr { position: sticky; top: 0; z-index: 100; }
.u-drop, .n-drp, .s-drp { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.u-drop { min-width: 220px; }
.u-drop a { white-space: nowrap; }

/* ===== Полностью оформленные выпадающие списки (Chrome/Edge 135+) =====
   Вместо системного окна со синей подсветкой список рисуется самим сайтом: тёмная карточка со скруглением,
   пункты с плавной подсветкой в цвет темы, выбранный отмечен галочкой. В остальных браузерах остаётся тёмный системный список выше. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) { appearance: base-select; }

  select:not([multiple]):not([size]) { background-image: none; padding-right: .8rem; }
  select:not([multiple]):not([size])::picker-icon { color: #9ca3af; transition: rotate .2s ease; margin-left: auto; padding-left: .6rem; }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }

  select:not([multiple]):not([size])::picker(select) {
    background: var(--card, #141416);
    color: var(--txt, #e8e6e3);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    padding: 6px;
    margin-block: 6px;
    box-shadow: 0 18px 44px -12px rgba(0,0,0,.75);
    max-height: min(340px, 55vh);
    overflow-y: auto;
    scrollbar-width: thin;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, display .16s allow-discrete, overlay .16s allow-discrete;
  }
  select:not([multiple]):not([size])::picker(select):popover-open { opacity: 1; transform: none; }
  @starting-style { select:not([multiple]):not([size])::picker(select):popover-open { opacity: 0; transform: translateY(-6px); } }

  select:not([multiple]):not([size]) option {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem; border-radius: 8px;
    background: transparent; color: var(--txt, #e8e6e3);
    font-size: .88rem; font-weight: 500; cursor: pointer;
    transition: background .12s;
  }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible { background: rgba(var(--p-rgb, 156,39,176), .18); outline: none; }
  select:not([multiple]):not([size]) option:checked { background: rgba(var(--p-rgb, 156,39,176), .30); color: #fff; font-weight: 700; }
  select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; color: var(--p, #9c27b0); }
  select:not([multiple]):not([size]) option:disabled { opacity: .45; cursor: not-allowed; }
  select:not([multiple]):not([size]) optgroup { color: #9ca3af; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .4rem .75rem .2rem; background: transparent; }
}