/* =========================================================
   HiNEX Shop — Dark + Pastel Blue/Purple Theme
   Подключить ПОСЛЕ style.css и easydonate.css
   ========================================================= */

:root {
    --bg-main: #0b0d16;
    --bg-secondary: #11141f;
    --bg-card: #161a28;
    --bg-card-hover: #1d2233;
    --bg-input: #141826;

    --accent-1: #8ab4ff;   /* пастельный голубой */
    --accent-2: #a78bfa;   /* пастельный пурпурный */
    --accent-3: #c4b5fd;   /* светлый лавандовый */

    --accent-1-soft: rgba(138, 180, 255, 0.14);
    --accent-1-medium: rgba(138, 180, 255, 0.24);
    --accent-2-soft: rgba(167, 139, 250, 0.14);

    --text-main: #e7e9f5;
    --text-muted: #8d93ab;
    --border-soft: #262b3d;
}

/* ---------- База ---------- */
body {
    background: radial-gradient(ellipse at top, #141828 0%, var(--bg-main) 55%, #060710 100%) !important;
    color: var(--text-main) !important;
}

main.bg-elegant.bg-pattern {
    background: var(--bg-main) !important;
}

::selection {
    background: var(--accent-2-soft);
    color: var(--text-main);
}

/* ---------- Скроллбар ---------- */
.shop::-webkit-scrollbar {
    width: 8px;
}
.shop::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
.shop::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-1), var(--accent-2)) !important;
    border-radius: 10px;
}
.shop::-webkit-scrollbar-thumb:hover {
    background: var(--accent-3) !important;
}

/* ---------- Навбар ---------- */
.navbar {
    background: rgba(11, 13, 22, 0.55) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-soft);
}
.navbar .nav-link {
    color: var(--text-main) !important;
    transition: color .2s ease;
}
.navbar .nav-link:hover {
    color: var(--accent-1) !important;
}

/* ---------- Заголовки / акцентный текст ---------- */
.text-info {
    color: var(--accent-1) !important;
}
.text-shadow-info {
    text-shadow: 0 0 18px var(--accent-1-medium) !important;
}
.shop-name {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2) 60%, var(--accent-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none !important;
}
.shop-description,
h1.display-3, h2, h3, h4, h5, h6 {
    color: var(--text-main) !important;
}

/* ---------- Фоновые "заливки" карточек товаров ---------- */
.bg-light {
    background: var(--accent-1-soft) !important;
}
.bg-medium {
    background: var(--accent-1-medium) !important;
}
.bg-dark {
    background: var(--bg-secondary) !important;
}
.bg-dark-light {
    background: var(--bg-card) !important;
    border-color: var(--border-soft) !important;
}

/* ---------- Карточки / блоки товаров ---------- */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 14px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.card.animate-right-7:hover,
a.shop-item:hover .card {
    background: var(--bg-card-hover) !important;
    box-shadow: 0 6px 24px rgba(138, 180, 255, 0.12);
    transform: translateY(-2px);
}
.card-footer,
.card-body {
    background: transparent !important;
}

#shop-section .card[style*="border-bottom"] {
    border-bottom: 2px dashed var(--border-soft) !important;
}

/* ---------- Формы / инпуты ---------- */
.form-control,
.input-username {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-main) !important;
    border-radius: 10px !important;
}
.form-control::placeholder {
    color: var(--text-muted) !important;
}
.form-control:focus,
.form-group.focused .form-control {
    border-color: var(--accent-1) !important;
    box-shadow: 0 0 0 3px var(--accent-1-soft) !important;
}

/* ---------- Кнопки / выпадающие селекторы ---------- */
.btn-icon.chose-product-icon,
.button-username {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-soft) !important;
    color: var(--text-main) !important;
    border-radius: 10px !important;
}
.button-username:hover {
    border-color: var(--accent-1) !important;
}
.chosen-product,
.chosen-server {
    color: var(--text-main) !important;
}

/* Общая заливка "первичных" кнопок сайта под пастельный градиент */
.btn-primary,
.btn-info,
button[type="submit"],
.btn.btn-icon:not(.chose-product-icon):not(.button-username) {
    background: linear-gradient(120deg, var(--accent-1), var(--accent-2)) !important;
    border: none !important;
    color: #0b0d16 !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-info:hover {
    filter: brightness(1.08);
}

/* ---------- Цена товара ---------- */
.text-info.text-shadow-info {
    color: var(--accent-2) !important;
    text-shadow: 0 0 14px var(--accent-2-soft) !important;
}

/* ---------- Модалки (оплата) ---------- */
.modal-content {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-radius: 16px !important;
}
.modal-content .text-black {
    color: var(--text-main) !important;
}
.modal-body .card {
    background: var(--bg-secondary) !important;
}

/* ---------- "Последние покупки" ---------- */
#last-payments {
    background: var(--bg-secondary) !important;
}
#last-payments .card {
    background: var(--bg-card) !important;
}
#last-payments .text-muted {
    color: var(--text-muted) !important;
}

/* ---------- Футер ---------- */
.footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-soft);
}
.footer a.text-info {
    color: var(--accent-1) !important;
}
.footer a.text-info:hover {
    color: var(--accent-3) !important;
}

/* ---------- Иконки соцсетей ---------- */
#footer-social-links .btn-link {
    color: var(--text-muted) !important;
    transition: color .2s ease, transform .2s ease;
}
#footer-social-links .btn-link:hover {
    color: var(--accent-1) !important;
    transform: translateY(-2px);
}

/* ---------- Скелетоны загрузки ---------- */
.skeleton-box {
    background-color: var(--bg-secondary) !important;
}
.skeleton-box::after {
    background-image: linear-gradient(
        90deg,
        rgba(138, 180, 255, 0) 0,
        rgba(138, 180, 255, 0.18) 20%,
        rgba(167, 139, 250, 0.35) 60%,
        rgba(138, 180, 255, 0) 100%
    ) !important;
}