/* === Подвал всегда внизу страницы === */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

.page-wrapper {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
}

body {
    /* Цвет фона по умолчанию (низ страницы) */
    background-color: #050608;

    /* ДВА ФОНА:
       1) сверху — градиент-затемнение
       2) снизу — баннер на всю страницу
    */
    background-image:
        radial-gradient(circle at top, rgba(32, 36, 43, 0.85) 0, rgba(5, 6, 8, 0.98) 90%),
        url("../banners/banner.png");

    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    background-size: 100% 100vh, cover;
    background-position: top center, center;

    color: #e4e7ec;
    min-height: 100vh;
}



.page-wrapper {
    max-width: 1200px;
}

h1 {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f5f5f5;
}

/* ===== Вкладки ===== */
.nav-tabs {
    border-bottom: 1px solid #282c34;
}

.nav-tabs .nav-link {
    border: none;
    color: #a7b0bd;
    background-color: transparent;
    padding: 0.6rem 1.4rem;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: #ffffff;
}

.nav-tabs .nav-link.active {
    color: #ffffff;
    border-bottom: 2px solid #e34545; /* красный акцент */
    background-color: transparent;
}

/* ===== Блок контента ===== */
.content-block {
    border-radius: 16px;
    border: 1px solid #22252c;
    background: rgba(10, 12, 16, 0.96);
    padding: 18px 20px 14px;
    margin-top: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}

/* Карточка */
.item-card {
    background: #120b1b;
    border-radius: 14px;
    border: 1px solid #2d203e;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    padding: 10px;

    /* 🔥 ДЛЯ ВЫРАВНИВАНИЯ */
    display: flex;
    flex-direction: column;
}

/* Кнопка "Добавить/Удалить" всегда снизу */
.item-card .btn-toggle-item {
    margin-top: auto;
}

.item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.9);
    border-color: #e34545;
}

.item-icon {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.9));
}

.item-title {
    font-size: 0.95rem;
    color: #f1f1f1;
}

/* ID рядом с названием */
.item-id {
    color: #8f9aad;
    font-size: 0.85rem;
    margin-left: 4px;
}

/* ===== Основная кнопка (в стиле "ИГРАТЬ БЕСПЛАТНО") ===== */
.btn-gold {
    background: #e34545;
    border: 1px solid #a52727;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn-gold:hover {
    background: #f25454;
    border-color: #c52f2f;
    color: #ffffff;
}

/* ===== Описание ===== */
.section-title {
    font-size: 1.2rem;
    margin-bottom: 14px;
    color: #f5f5f5;
}

.muted {
    color: #f5f5f5;
    font-size: 0.9rem;
}

/* ===== Поиск ===== */
.search-input {
    background-color: #141820;
    border-radius: 999px;
    border: 1px solid #262b34;
    color: #d3d8e2;
    padding-left: 14px;
    padding-right: 14px;
}

.search-input::placeholder {
    color: #6e7785;
}

.search-input:focus {
    background-color: #181d26;
    border-color: #e34545;
    box-shadow: 0 0 0 0.15rem rgba(227,69,69,0.35);
    color: #e4e7ec;
}

/* ===== ДОП. СТИЛИ ТОЛЬКО ДЛЯ КАРТОЧКИ "МОЙ ТОВАР" ===== */

.my-item-card {
    padding: 12px;
}

.my-item-icon {
    max-height: 90px;
}

.label-text {
    color: #e4e7ec;
    font-size: 0.8rem;
}

.form-label-sm {
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

/* Поле закупочной цены */
.buy-price-input {
    background-color: #141820;
    border: 1px solid #262b34;
    color: #11141a;
    border-radius: 8px;
}

.buy-price-input::placeholder {
    color: #6e7785;
    font-size: 0.8rem;
}

.buy-price-input:focus {
    background-color: #181d26;
    border-color: #e34545;
    box-shadow: 0 0 0 0.15rem rgba(227,69,69,0.35);
    color: #ffffff;
}

/* Цена аука */
.auction-price {
    font-weight: 600;
    color: #f1f1f1;
}

/* Блок под график */
.graph-block {
    margin-top: 6px;
    position: relative;
    height: 70px;
}

.graph-placeholder {
    border-radius: 10px;
    border: 1px dashed #262b34;
    background: #10141b;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.graph-placeholder-text {
    color: #6e7785;
    font-size: 0.8rem;
}

/* Canvas графика */
.graph-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* PROFIT — оставляем зелёным, чтобы сразу бросалось в глаза */
.item-card.profit {
    border: 2px solid #00ff66 !important;
    background: rgba(0, 255, 100, 0.15) !important;
    box-shadow: 0 0 14px rgba(0,255,80,0.45);
    transition: 0.25s;
}

/* ===== НОВЫЕ СТИЛИ ДЛЯ ИНПУТА + КНОПОК ✏ ✔ ✖ ===== */

.buy-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.buy-icon-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border-radius: 6px;
    background: #141820;
    border: 1px solid #262b34;
    color: #d3d8e2;
    padding: 0;
    transition: .15s;
}

.buy-icon-btn:hover {
    background: #1b2029;
    border-color: #e34545;
    color: #ffffff;
}

/* Галочка */
.btn-buy-save {
    border-color: #359b55;
}

.btn-buy-save:hover {
    background: rgba(40, 180, 90, 0.25);
    border-color: #56ce76;
}

/* Крестик */
.btn-buy-cancel {
    border-color: #a54444;
}

.btn-buy-cancel:hover {
    background: rgba(200, 70, 70, 0.2);
    border-color: #e86a6a;
}

/* === Всегда одинаковая высота карточек === */

/* Колонки делаем flex-контейнерами */
#myItemsContainer .item-col,
#itemsContainer .item-col {
    display: flex;
}

/* Карточка растягивается на всю высоту колонки */
#myItemsContainer .item-col .item-card,
#itemsContainer .item-col .item-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Блок с графиком можно слегка растягивать, чтобы кнопка "Удалить" всегда была внизу */
.my-item-card .graph-block {
    flex-grow: 1;
}

#admin-tab .section-title {
    color: #ffd56b !important; /* золотистый */
}

#admin-tab .text-muted {
    color: #c8c8c8 !important; /* серый, но читаемый */
}

.subscription-info {
    font-size: 0.9rem;
}

.subscription-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 215, 0, 0.15); /* мягкий золотистый фон */
    border: 1px solid #ffd700;            /* золотая обводка */
    color: #ffeaa7;                        /* яркий текст */
    font-weight: 600;
    white-space: nowrap;
}

/* ===== ПОДПИСКА / ТАРИФЫ ===== */

.pricing-card {
    background: #151515;
    border-radius: 18px;
    border: 1px solid #262626;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
    border-color: #ffdd55;
}

/* Центральная, “рекомендуемая” карточка */
.pricing-card--featured {
    border-color: #ffd94a;
    box-shadow: 0 0 35px rgba(255, 217, 74, 0.4);
    position: relative;
}

.pricing-card--featured::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    border: 1px solid rgba(255, 217, 74, 0.4);
    box-shadow: 0 0 40px rgba(255, 217, 74, 0.4);
    pointer-events: none;
}

/* Бейдж “Рекомендуем” */
.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffd94a;
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Строка с экономией */
.pricing-save {
    font-weight: 600;
    color: #ffd94a;
}

/* Кнопка оплаты */
.btn-subscribe {
    background: #ff4b4b;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem;
}

.btn-subscribe:hover,
.btn-subscribe:focus {
    background: #ff5f5f;
    box-shadow: 0 0 18px rgba(255, 75, 75, 0.5);
    transform: translateY(-1px);
}

/* Чтобы тень/подсветка не прилипала к краю контейнера */
.page-wrapper {
    padding-bottom: 3rem;
}

/* Первая покупка — акцентный текст */
.alert-warning {
    background-color: rgba(255, 221, 85, 0.08);
    border-color: #ffd94a;
    color: #ffeaa7;
}

.no-items-wrapper {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-items-btn {
    padding: 14px 26px;
    font-size: 1.05rem;
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(227,69,69,0.45);
    transition: 0.2s;
}

.no-items-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(227,69,69,0.65);
}

#mainCarousel .carousel-item img {
    max-height: 70vh;       /* 40% от высоты экрана */
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.header-bar {
    gap: 24px; /* расстояние между логотипом, баннером и кнопкой */
}

.promo-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 14px 24px;
    border-radius: 12px;
    color: #ffffffcc;
    font-size: 1.25rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.promo-box .gold {
    color: #f5d27a;
    font-weight: 700;
}

/* Кнопка, чтобы по высоте не выбивалась */
.btn-login {
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Блокировка доступа (когда подписка не активна) */
.locked-access {
    border-radius: 12px;
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.45);       /* тёмный полупрозрачный фон */
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: #e8e8e8;
    backdrop-filter: blur(4px);            /* лёгкое размытие */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

.locked-access p {
    font-size: 1.2rem;
}

.locked-access .btn-gold {
    font-size: 1.1rem;
    padding: 10px 24px;
}

/* ===== ФИЛЬТРЫ КАТЕГОРИЙ ===== */

#categoryFilters button {
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: 0.15s;
}

/* Активная кнопка */
#categoryFilters .btn-gold {
    background: #e34545 !important;
    border-color: #a52727 !important;
    color: #fff !important;
}

/* Неактивные */
#categoryFilters .btn-outline-light {
    border-color: #444;
    color: #ddd;
}

/* Наведение */
#categoryFilters .btn-outline-light:hover {
    background: #1f1f1f;
    border-color: #e34545;
    color: #fff;
}

/* Анимация скрытия карточек */
.item-col.d-none {
    opacity: 0;
    transform: scale(0.95);
    transition: 0.15s ease;
}

/* 📌 Информационный блок перед карточками */
.info-box {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #c59dff; /* неоновый фиолетовый акцент */
    border-radius: 8px;
    padding: 12px 18px;
    margin-bottom: 25px;
    box-shadow: 0 0 15px rgba(120, 60, 255, 0.15);
}

/* Текст в инфоблоке */
.info-box p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}


/* 📌 Чуть опустить блок с карточками подписки */
.pricing-wrapper {
    margin-top: 25px;
}


/* 📌 Карточки подписки — красивый отступ */
.pricing-card {
    margin-top: 10px;
}

/* === Общий фон и текст === */
body {
    background-color: #05070c; /* тёмный фон */
    color: #f8f9fa;
}

/* Контейнер с контентом страниц (index, offer, privacy и т.д.) */
.page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

/* Карточка текста (оферта / политика) */
.page-wrapper main.bg-dark {
    background: #0c1018;              /* чуть светлее фона, как карточка */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Заголовки внутри контента */
.page-wrapper h2,
.page-wrapper h3,
.page-wrapper h4 {
    color: #ffffff;
}

/* Ссылки в тексте (в том числе в оферте и политике) */
.page-wrapper a.link-light {
    color: #f8f9fa;
    text-decoration: underline dotted;
}

.page-wrapper a.link-light:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* Футер со ссылками на оферту и политику */
footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 32px;
}

footer a {
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Золотой текст, если где-то используешь (например, скидка 50%) */
.gold {
    color: #ffd86b;
    font-weight: 600;
}

.footer-brand {
    color: #b3b3b3; /* твой цвет */
    font-weight: 600;
}

/* ===========================================================
   Стили для страниц Оферты / Политики (offer.html, privacy.html)
   =========================================================== */

/* Контейнер карточки с текстом */
.offer-content,
.privacy-content,
.page-wrapper main.bg-dark {
    background: rgba(10, 12, 16, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 32px 36px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.65);
}

/* Заголовок страницы */
.page-wrapper h2 {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Подзаголовок "редакция" */
.page-wrapper .text-muted {
    color: #b9bdc7 !important;
}

/* Заголовки секций */
.page-wrapper h3 {
    color: #f0f0f0;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 14px;
}

/* Подзаголовки уровня 4 */
.page-wrapper h4 {
    color: #f5f5f5;
    font-weight: 500;
}

/* Основной текст */
.page-wrapper p {
    font-size: 1rem;
    line-height: 1.6;
    color: #dfe2e7;
    margin-bottom: 14px;
}

/* Списки */
.page-wrapper ul {
    margin-left: 20px;
    margin-bottom: 18px;
}

.page-wrapper ul li {
    margin-bottom: 6px;
    color: #dce0e6;
}

/* Ссылки внутри текста */
.page-wrapper a.link-light {
    color: #ffd56b;
    font-weight: 600;
    text-decoration: underline;
}

.page-wrapper a.link-light:hover {
    color: #ffefb0;
    text-decoration: underline;
}

/* Горизонтальные линии */
.page-wrapper hr {
    border-color: rgba(255, 255, 255, 0.15);
}

/* Акцент (важный текст) */
.page-wrapper strong {
    color: #ffffff;
    font-weight: 700;
}

/* Блок реквизитов */
.rekvizity p {
    margin-bottom: 4px;
}

/* Кнопка “На главную” */
.btn-outline-light {
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 0.95rem;
    transition: .15s;
}

.btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
}

/* Чтобы текстовые страницы не прилипали к верху/низу */
.page-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ===== ЧЕКБОКС "Я ОЗНАКОМЛЕН С ПУБЛИЧНОЙ ОФЕРТОЙ" ===== */

.form-check-input.offer-checkbox {
    cursor: pointer;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.1rem;
    background-color: #141820;
    border: 1px solid #444b57;
}

/* Цвет галочки / акцент чекбокса */
.form-check-input.offer-checkbox:checked {
    background-color: #e34545;
    border-color: #e34545;
}

/* При фокусе (когда кликаешь/табаешь) */
.form-check-input.offer-checkbox:focus {
    box-shadow: 0 0 0 0.15rem rgba(227, 69, 69, 0.35);
}

/* Текст рядом с чекбоксом */
.form-check-label.small {
    cursor: pointer;
    color: #dfe2e7;
}

/* Ссылка внутри текста "Публичной офертой" */
.form-check-label.small a {
    color: #ffd86b;
    text-decoration: underline;
}

.form-check-label.small a:hover {
    color: #ffefb0;
}

/* Немного уплотним блок, чтобы он смотрелся аккуратно под тарифом */
.form-check.mb-3 {
    margin-bottom: 0.75rem !important;
}

/* Обёртка чекбокса, чтобы к ней привязать баллон */
.offer-check {
    position: relative;
}

/* Состояние ошибки: показываем всплывающее сообщение */
.offer-check.offer-error::after {
    content: "Подтвердите, что вы ознакомлены с Публичной офертой.";
    position: absolute;
    left: 0;
    top: 125%;
    z-index: 20;

    white-space: nowrap;
    background-color: #ffffff;
    color: #333;
    font-size: 0.85rem;
    border-radius: 6px;
    padding: 6px 10px;
    border: 1px solid #e0a800;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Треугольничек-стрелка, как у системного тултипа */
.offer-check.offer-error::before {
    content: "";
    position: absolute;
    left: 10px;
    top: calc(125% - 6px);
    z-index: 21;

    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

/* Можно добавить иконку ⚠ слева, если хочешь
   (встроим её прямо в текст, но можно и отдельным ::before поверх) */