/* MAJURE POLIT: доработка темы Spirit (EasyDonate).
   Собрано tools/easydonate/build.py из store.css.tpl, руками не править.
   Селекторы начинаются с html, чтобы перебивать правила темы независимо от порядка подключения файлов. */

/* 1. Одна тёмная палитра и для light-theme, и для dark-theme: тему выбирает система игрока, переключатель скрыт. */
html body.light-theme, html body.dark-theme {
    --color-accent: #c45dfa;
    --color-accent-125: #c45dfa30;
    --color-accent-15: #c45dfa26;
    --color-accent-25: #c45dfa40;
    --color-accent-50: #c45dfa80;
    --color-accent-75: #c45dfaC0;

    --body-background-color: #050507;
    --spirit-btn-transparent-background-color-hover: #1e1e23;
    --color-default: #f2f0f5;
    --color-default-inverse: #ffffff;
    --color-muted: rgba(242, 240, 245, .75);
    --color-muted-inverse: rgba(255, 255, 255, .75);
    --color-neutral: rgba(242, 240, 245, .5);
    --color-neutral-inverse: rgba(255, 255, 255, .5);
    --spirit-bg-05: rgba(255, 255, 255, .05);
    --spirit-bg-10: rgba(255, 255, 255, .1);
    --border-color-default: rgba(255, 255, 255, .1);
    --spirit-card-background-color: #121216;
    --spirit-card-background-color-opacity-0: #12121600;
    --spirit-card-background-color-hover: #1c1c22;
    --spirit-navbar-color: rgba(10, 10, 13, .82);
    --spirit-cart-background-color: #121216;
    --spirit-product-image-border-color: rgba(255, 255, 255, .1);
    --spirit-product-image-background-color: #121216;
    --spirit-cart-order-form-background-color: #050507;
    --spirit-shop-category-icon-color: #c45dfa;
    --spirit-shop-category-icon-color-inverse: #ffffff;
    --spirit-input-border-color: rgba(255, 255, 255, .15);
    --spirit-input-border-width: 1px;
    --spirit-input-background-color: #121216;
    --spirit-badge-background-color: #F1F1F1;
    --spirit-server-address-background-color: #EFEFEF;
    --spirit-vk-post-background-color: #121216;
    --spirit-shop-category-background-color-active: #121216;
    --spirit-shop-category-background-color: #121216;
    --spirit-easydonate-brand-color: #FFFAEF;
    --spirit-footer-background-color: #121216;
    --spirit-skeleton-background-color: #1c1c22;
    --spirit-skeleton-gradient: linear-gradient(90deg, #51545500 0, #51545520 20%, #51545580 60%, #51545500);
    --spirit-product-group-product-background-color: #2a2a31;
}

/* 2. Шапка: без переключателя темы, без пунктов «Магазин» и «Наши серверы» (в меню и в мобильном списке);
   остаётся только «Инструкция по покупке». Стекло через переменную. */
html .btn-switch-theme { display: none !important; }
html .spirit-navbar-item:has(> a[href="#servers"]),
html .navbar-dropdown-menu-item:has(> a[href="#servers"]),
html .spirit-navbar-item:has(> a[href="#shop"]),
html .navbar-dropdown-menu-item:has(> a[href="#shop"]) { display: none !important; }

/* 2а. Название магазина из панели в цвете магазина после логотипа, перед ним разделитель.
   NAME_PREFIX в build.py: '' если логотип уже со словом MAJURE (сейчас), 'MAJURE' градиентом сайта, если логотип-значок. */
html .spirit-logo-wrapper .spirit-shop-name {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c45dfa;
    font-weight: 700;
    letter-spacing: .02em;
}
html .spirit-logo-wrapper .spirit-shop-name::before {
    content: '';
    align-self: stretch;
    padding-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, .25);
    background: linear-gradient(90deg, #f857f5 0%, #8a2be2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@media (max-width: 575.98px) {
    html .spirit-logo-wrapper .spirit-shop-name { display: none; }
}

/* 2б. Логотип в карточке «Проект» на странице товара: широкий словесный знак не обрезать, вписать целиком. */
html .spirit-product .card img.flex-shrink-0[style*="object-fit"] {
    object-fit: contain !important;
    padding: 4px;
    background: rgba(255, 255, 255, .06);
}

/* 2в. Категории: активная таблетка не заливается, а обводится цветом магазина; текст белый, иконка цветная. */
html .spirit-shop-categories-wrapper .spirit-shop-category.active {
    border-color: #c45dfa;
    box-shadow: inset 0 0 0 1px #c45dfa, 0 6px 24px #c45dfa26;
}
html .spirit-shop-categories-wrapper .spirit-shop-category.active .category-name { color: #f2f0f5; }
html .spirit-shop-categories-wrapper .spirit-shop-category.active .category-products-count { color: rgba(242, 240, 245, .75); }
html .spirit-shop-categories-wrapper .spirit-shop-category.active svg path[stroke] { stroke: #c45dfa; }
html .spirit-shop-categories-wrapper .spirit-shop-category.active svg path[fill] { fill: #c45dfa; }
html .spirit-shop-categories-wrapper .spirit-shop-category.all-products svg path[stroke] { stroke: #c45dfa; }

/* 2г. Подпись «Проект» в карточке на странице товара показывается как «Сервер» (текст шаблона EasyDonate, в
   разметке остаётся «Проект»). */
html .spirit-product .card-body p.color-neutral.mb-6px { font-size: 0; }
html .spirit-product .card-body p.color-neutral.mb-6px::before {
    content: 'Сервер';
    font-size: 16px;
    line-height: 19px;
}

/* 3. Баннер скрыт на всех страницах; следующая секция получает отступ под фиксированную шапку. */
html .section-jumbotron { display: none !important; }
html .section-jumbotron + .section,
html main:has(> .section-jumbotron) + .section { padding-top: 125px !important; }
@media (min-width: 576px) {
    html .section-jumbotron + .section,
    html main:has(> .section-jumbotron) + .section { padding-top: 165px !important; }
}

/* 3а. Заголовок «Магазин» над полками и кнопка «Подробнее» на карточках убраны (карточка остаётся ссылкой). */
html #shop .shop > .row > [class*="col-"] > h3 { display: none !important; }
html .product-card .card-footer { display: none !important; }

/* 4. Фон: чёрный, ровная сетка (два градиента), свечение цвета магазина вверху; у верхнего и нижнего края окна
   сетка уходит в чёрный. Частицы цвета магазина на html::before и html::after поднимаются вверх (transform, без
   скриптов) и лежат под сеткой и контентом. Секции прозрачные, страница не короче окна, футер прижат к низу. */
html { background-color: #050507 !important; }
html body, html section, html .section { background-color: transparent !important; }
html body { display: flex; flex-direction: column; min-height: 100vh; }
html footer.footer { margin-top: auto; }
html body::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: -900px; /* запас над окном: при оттягивании страницы (Safari) там чёрное, и частицы туда не залетают */
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(ellipse 80vw 60vh at 50% 900px, #c45dfa40 0%, #c45dfa00 70%),
        linear-gradient(180deg, #050507 0, #050507 900px, #05050700 calc(900px + 10vh), #05050700 calc(900px + 30vh), #050507 calc(900px + 90vh)),
        linear-gradient(90deg, rgba(143, 143, 143, .25) 1px, transparent 1px),
        linear-gradient(180deg, rgba(143, 143, 143, .25) 1px, transparent 1px);
    background-size: auto, auto, 40px 40px, 40px 40px;
    background-position: center top, center top, 0 900px, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
}

/* 4а. Частицы: два слоя точек с разной скоростью и размером; плитка 900px по высоте, сдвиг ровно на плитку,
   поэтому цикл бесшовный. Внизу выныривают из чёрного, вверху гаснут (затухания сетки лежат выше). */
html::before, html::after {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100vh + 900px);
    z-index: -2;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 520px 900px;
    will-change: transform;
    animation: majure-rise 38s linear infinite;
}
html::before {
    background-image:
        radial-gradient(circle at 60px 130px, #c45dfa 0, #c45dfa 1.2px, #c45dfa00 3px),
        radial-gradient(circle at 210px 420px, #c45dfacc 0, #c45dfa99 1.5px, #c45dfa00 4px),
        radial-gradient(circle at 380px 250px, #c45dfa 0, #c45dfa 1px, #c45dfa00 2.5px),
        radial-gradient(circle at 470px 700px, #c45dfacc 0, #c45dfa80 1.5px, #c45dfa00 4px),
        radial-gradient(circle at 130px 800px, #c45dfa 0, #c45dfa 1px, #c45dfa00 3px),
        radial-gradient(circle at 300px 610px, #c45dfaaa 0, #c45dfa66 1px, #c45dfa00 3px);
}
html::after {
    background-size: 640px 900px;
    animation-duration: 24s;
    background-image:
        radial-gradient(circle at 90px 300px, #c45dfa 0, #c45dfa 2px, #c45dfa66 3px, #c45dfa00 7px),
        radial-gradient(circle at 400px 120px, #c45dfa 0, #c45dfa 1.6px, #c45dfa55 2.5px, #c45dfa00 6px),
        radial-gradient(circle at 560px 520px, #c45dfa 0, #c45dfa 2px, #c45dfa66 3px, #c45dfa00 8px),
        radial-gradient(circle at 250px 760px, #c45dfa 0, #c45dfa 1.4px, #c45dfa55 2.5px, #c45dfa00 5px);
}
@keyframes majure-rise {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -900px, 0); }
}
@media (prefers-reduced-motion: reduce) {
    html::before, html::after { animation: none; }
}

/* 5. Кнопки и значки цвета магазина: цвет текста по контрасту (тёмный на оранжевом, белый на фиолетовом). */
html .btn-accent { color: #ffffff !important; }
html .btn-accent path { stroke: #ffffff; }
html .btn-outline-accent:hover { color: #ffffff; }
html .btn-outline-accent:hover path { stroke: #ffffff !important; }
html .badge-accent { color: #ffffff; }
html .cart-counter { color: #ffffff; }

/* 5а. Корзина: кнопка закрытия цвета магазина, при наведении белая (в теме наоборот). */
html .cart-close { background: #c45dfa; }
html .cart-close path { stroke: #ffffff; }
html .cart-close:hover { background: #ffffff; }
html .cart-close:hover path { stroke: #0b0b0d; }

/* 5б. Стопка товаров группы на карточке: обводка цвета магазина вместо белой. */
html .product-group-products-wrapper { background-color: #c45dfa; }
html .product-group-product { border-color: #c45dfa; }

/* 6. Карточка при наведении: свечение цвета магазина и тонкая рамка вместо чёрной тени. Формы не меняются. */
html .product-card:hover {
    box-shadow: 0 8px 40px #c45dfa26;
    border-color: #c45dfa80;
}

/* 7. Футер: цвет карточек и тонкая рамка, чтобы не сливался с чёрным фоном. Подпись EasyDonate остаётся. */
html footer.footer {
    border: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 0;
}