/* =====================================================================
   DONATIONS + SUPPORT PAGES POLISH
   Master ТЗ: Унификация страниц «Донат» и «Поддержка» с главной.
   ---------------------------------------------------------------------
   Использует только токены из design-tokens.css. Не вводим новых
   оттенков (по ТЗ §3 Дизайн-система — единый источник истины).

   Контекст: после redesign главной страницы (этапы 1-7) donations и
   support оставались на старой стилистике (чёрный/тёмно-серый фон,
   белые карточки платёжек, бирюзовая кнопка оплаты). Подтягиваем.
   ===================================================================== */


/* =====================================================================
   1. ОБЩИЕ: бэкграунды панели на обеих страницах
   Применяем navy палитру к .block / .block-content где Bootstrap-CMS
   вендорские классы дают серый/белый фон.
   ===================================================================== */

/* Главные .block-content контейнеры на /panel/donations */
#page-container .block-content.block-solid {
    background: var(--tbc-bg-card, #252942) !important;
    border-color: var(--tbc-border-default, #2F3454) !important;
}

/* "Хелперные" вендорские bg-classes — перекрашиваем под темную тему */
#page-container .bg-body-light {
    background-color: var(--tbc-bg-panel-end, #1A1D2E) !important;
    color: var(--tbc-text-primary, #FFFFFF);
}

/* Bg-pattern на support — фон с паттерном-картинкой убираем,
   мешает на тёмной теме */
#page-container .js-ticket-list.bg-pattern,
#page-container .js-new-ticket.bg-pattern {
    background-image: none !important;
    background-color: transparent !important;
}


/* =====================================================================
   2. DONATIONS: payment-title (шаги 1/2/3 — кружок с цифрой)
   ===================================================================== */

.payment-title {
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.payment-title > span {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tbc-accent-cta, #F5A623);
    color: #1A1D2E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(245, 166, 35, 0.35);
}


/* =====================================================================
   3. DONATIONS: input "количество B-Coins"
   ===================================================================== */

#page-container .info_to_pay_block_3 .input-group-text {
    background: var(--tbc-bg-card, #252942) !important;
    border-color: var(--tbc-border-default, #2F3454) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
}
#page-container #coin.form-control {
    background: var(--tbc-bg-panel-end, #1A1D2E) !important;
    border-color: var(--tbc-border-default, #2F3454) !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-size: 16px !important;
}
#page-container #coin.form-control:focus {
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2) !important;
}


/* =====================================================================
   4. DONATIONS: кнопки сумм (300/+3%, 1000/+10%, ...)
   ТЗ §2: фон --tbc-bg-card, hover/active — gold filled с белым текстом.
   ===================================================================== */

#page-container .btn_min_slider.btn_input_fixed {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
    border-radius: 6px !important;
    padding: 8px 14px !important;
    font-weight: 600 !important;
    transition: all 0.18s ease;
    flex: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
#page-container .btn_min_slider.btn_input_fixed:hover {
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    background: var(--tbc-bg-card-hover, #2C3050) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
}
#page-container .btn_min_slider.btn_input_fixed.active,
#page-container .btn_min_slider.btn_input_fixed:active,
#page-container .btn_min_slider.btn_input_fixed:focus {
    background: var(--tbc-accent-cta, #F5A623) !important;
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px -2px rgba(245, 166, 35, 0.45) !important;
}
/* Bаджик % внутри кнопки */
#page-container .btn_min_slider.btn_input_fixed > span {
    background: rgba(245, 166, 35, 0.15);
    color: var(--tbc-accent-cta, #F5A623);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
#page-container .btn_min_slider.btn_input_fixed.active > span,
#page-container .btn_min_slider.btn_input_fixed:hover > span {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
}


/* =====================================================================
   5. DONATIONS: ion-rangeslider (slider B-Coins)
   ТЗ §6: фон неактивной части #2F3454, активной — #F5A623,
   шкала — серый #5A5F7A.
   ===================================================================== */

#page-container .irs--flat .irs-line {
    background: var(--tbc-border-default, #2F3454) !important;
    height: 8px !important;
    top: 30px !important;
}
#page-container .irs--flat .irs-bar {
    background: var(--tbc-accent-cta, #F5A623) !important;
    height: 8px !important;
    top: 30px !important;
}
#page-container .irs--flat .irs-handle > i:first-child,
#page-container .irs--flat .irs-handle.state_hover > i:first-child,
#page-container .irs--flat .irs-handle:hover > i:first-child {
    background: var(--tbc-accent-cta, #F5A623) !important;
    width: 4px !important;
}
#page-container .irs--flat .irs-from,
#page-container .irs--flat .irs-to,
#page-container .irs--flat .irs-single {
    background: var(--tbc-accent-cta, #F5A623) !important;
    color: #1A1D2E !important;
    font-weight: 700 !important;
}
#page-container .irs--flat .irs-from::before,
#page-container .irs--flat .irs-to::before,
#page-container .irs--flat .irs-single::before {
    border-top-color: var(--tbc-accent-cta, #F5A623) !important;
}
#page-container .irs--flat .irs-min,
#page-container .irs--flat .irs-max {
    background: var(--tbc-bg-card, #252942) !important;
    color: var(--tbc-text-muted, #5A5F7A) !important;
}
#page-container .irs--flat .irs-grid-text {
    color: var(--tbc-text-muted, #5A5F7A) !important;
}
#page-container .irs--flat .irs-grid-pol {
    background: var(--tbc-text-muted, #5A5F7A) !important;
    opacity: 0.4;
}


/* =====================================================================
   6. DONATIONS: бонусы "От 5000 / От 10000" колонки
   ТЗ §7: активная gold, неактивная — outline.
   ===================================================================== */

#page-container .item_board_style,
#page-container .item_board_style_next {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 8px !important;
    overflow: hidden;
}
/* Активная (подсвеченная) — gold обводка */
#page-container .item_board_style {
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    box-shadow: 0 0 14px -4px rgba(245, 166, 35, 0.30);
}
/* Header колонки (ОТ 5000 МОНЕТ ВЫ ПОЛУЧИТЕ) */
#page-container .item_board_style .info_count_custom,
#page-container .item_board_style_next .info_count_custom {
    background: linear-gradient(180deg, var(--tbc-accent-cta, #F5A623) 0%, #D68813 100%) !important;
    color: #1A1D2E !important;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 10px 12px !important;
    margin: 0 !important;
}
/* Неактивная колонка — outline header */
#page-container .item_board_style_next .info_count_custom {
    background: var(--tbc-bg-card, #252942) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
    border: 1.5px solid var(--tbc-accent-cta, #F5A623);
}
/* Текст внутри строк бонусов */
#page-container .item_board_style .desc_item_gift,
#page-container .item_board_style_next .desc_item_gift {
    color: var(--tbc-text-primary, #FFFFFF) !important;
}
/* Бэйджи количества (+1000 монет, x3, x18) */
#page-container .item_board_style .info_count_custom span,
#page-container .item_board_style_next .info_count_custom span {
    color: inherit !important;
}


/* =====================================================================
   7. DONATIONS: карточки платёжных систем (Stripe, PayPal, HotSkins, Binance)
   ТЗ §3: navy фон, бренд лого, бордер #2F3454, hover/active gold.
   ===================================================================== */

/* Лейбл-обёртка вокруг лого. position:relative нужен для абсолютного
   позиционирования .paypal_info_pay внутри. И filter:none — иначе
   vendor's :hover filter (brightness 1.2 grayscale .5) ломает navy. */
#page-container .cc-selector-2 .drinkcard-cc,
#page-container .cc-selector-custom-paypal .drinkcard-cc,
#page-container .cc-selector-custom-binance .drinkcard-cc,
#page-container .cc-selector-custom .drinkcard-cc {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
    padding: 10px !important;
    opacity: 1 !important;
    position: relative !important; /* containing block для .paypal_info_pay */
    filter: none !important; /* перебиваем vendor :hover grayscale */
}
#page-container .cc-selector-2 .drinkcard-cc:hover,
#page-container .cc-selector-custom-paypal .drinkcard-cc:hover,
#page-container .cc-selector-custom-binance .drinkcard-cc:hover,
#page-container .cc-selector-custom .drinkcard-cc:hover {
    background: var(--tbc-bg-card-hover, #2C3050) !important;
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: pointer;
}
/* Выбранная платежка */
#page-container .cc-selector-2 input:checked + .drinkcard-cc {
    background: var(--tbc-bg-card-hover, #2C3050) !important;
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    box-shadow: 0 0 14px -4px rgba(245, 166, 35, 0.40) !important;
    opacity: 1 !important;
}
/* Подпись "ЧЕРЕЗ ОНЛАЙН ПОДДЕРЖКУ" в правом-верхнем углу карточки
   (vendor: position:absolute top:3px right:3px).
   Контраст: gold-tinted pill на фоне navy/image, читаемо на любом
   фоне (PNG лого с белым фоном перекрывает navy родителя). */
#page-container .paypal_info_pay {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
    background: rgba(26, 29, 46, 0.92) !important; /* navy-полупрозрачный */
    border: 1px solid rgba(245, 166, 35, 0.35) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 3px 7px !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
}


/* =====================================================================
   8. DONATIONS: "Перейти к оплате" — главный CTA
   ТЗ §4 вариант А: filled оранжевая (главное действие на странице).
   ===================================================================== */

#page-container .btn-alt-primary.submit-form,
#page-container button.submit-form.btn-alt-primary {
    background: linear-gradient(180deg, var(--tbc-accent-cta, #F5A623) 0%, #D68813 100%) !important;
    border: 1px solid #F4C66A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px !important;
    padding: 12px 28px !important;
    border-radius: 6px !important;
    box-shadow:
        0 2px 10px rgba(214, 136, 19, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transition: filter 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#page-container .btn-alt-primary.submit-form:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        0 4px 18px rgba(245, 166, 35, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
}


/* =====================================================================
   9. DONATIONS: блок "Пересчёт стоимости монет в валютах"
   ТЗ §8.
   ===================================================================== */

#page-container .block.pt-15.pb-15.block-solid {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 8px;
}
#page-container #calculation_board {
    color: var(--tbc-text-primary, #FFFFFF);
}
#page-container #calculation_board > span:first-child {
    color: var(--tbc-text-secondary, #8B90B0) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
#page-container #calculation_board .row.pt-5 {
    border-bottom: 1px solid var(--tbc-border-subtle, rgba(47, 52, 84, 0.5));
    padding: 6px 0 !important;
}
#page-container #calculation_board .row.pt-5:last-child {
    border-bottom: none;
}
#page-container #calculation_board .pull-right {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-weight: 600;
}


/* =====================================================================
   10. DONATIONS: модалки PayPal/Binance manual payments
   Уже работают через Bootstrap, но фон/текст подстроить.
   ===================================================================== */

#page-container #modal_paypal .modal-content.modal_monobank,
#page-container #modal_binance .modal-content.modal_monobank,
#page-container .modal-content.modal_monobank {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    color: var(--tbc-text-primary, #FFFFFF);
    border-radius: 8px !important;
}
#page-container .modal-body.modal_monobank h3.lw_server {
    color: var(--tbc-text-primary, #FFFFFF) !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
#page-container .modal-body.modal_monobank p {
    color: var(--tbc-text-secondary, #8B90B0);
    line-height: 1.5;
}
#page-container .modal-body.modal_monobank .btn-info {
    background: linear-gradient(180deg, var(--tbc-accent-cta, #F5A623) 0%, #D68813 100%) !important;
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    margin-right: 8px;
}
#page-container .modal-body.modal_monobank .btn-danger {
    background: var(--tbc-bg-panel-end, #1A1D2E) !important;
    border-color: var(--tbc-border-default, #2F3454) !important;
    color: var(--tbc-text-secondary, #8B90B0) !important;
}


/* =====================================================================
   11. SUPPORT: outer container + tabs
   ===================================================================== */

/* Nav-tabs (Все тикеты / Создать тикет) */
#page-container .js-chat-head.nav-tabs {
    background: var(--tbc-bg-panel-end, #1A1D2E) !important;
    border-bottom: 1px solid var(--tbc-border-default, #2F3454) !important;
}
#page-container .js-chat-head.nav-tabs .nav-link {
    color: var(--tbc-text-secondary, #8B90B0) !important;
    border: none !important;
    background: transparent !important;
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 12px 18px;
    font-weight: 600;
}
#page-container .js-chat-head.nav-tabs .nav-link:hover {
    color: var(--tbc-text-primary, #FFFFFF) !important;
    background: var(--tbc-bg-card, #252942) !important;
}
#page-container .js-chat-head.nav-tabs .nav-link.active {
    color: var(--tbc-accent-cta, #F5A623) !important;
    background: var(--tbc-bg-card, #252942) !important;
    box-shadow: 0 -2px 0 0 var(--tbc-accent-cta, #F5A623) inset;
}


/* =====================================================================
   12. SUPPORT: 3 крупные new-ticket карточки
   ТЗ §9: navy фон, бордер #2F3454, hover gold + translateY(-2px).
   ===================================================================== */

#page-container a.block.new-ticket-btn,
#page-container a.block.new-ticket-btn.bg-primary,
#page-container a.block.new-ticket-btn.bg-earth,
#page-container a.block.new-ticket-btn.bg-corporate {
    background: var(--tbc-bg-card, #252942) !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease;
}
#page-container a.block.new-ticket-btn:hover {
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4),
                0 0 18px -4px rgba(245, 166, 35, 0.35) !important;
    opacity: 1 !important;
}
/* Внутри карточек — текст/иконки */
#page-container .new-ticket-btn .block-content {
    border-bottom: none !important;
}
#page-container .new-ticket-btn .text-white {
    color: var(--tbc-text-primary, #FFFFFF) !important;
}
#page-container .new-ticket-btn .text-white-op {
    color: var(--tbc-text-secondary, #8B90B0) !important;
}
/* Иконки в карточках — все gold для единства */
#page-container .new-ticket-btn .text-primary-light,
#page-container .new-ticket-btn .text-earth-light,
#page-container .new-ticket-btn .text-corporate-light,
#page-container .new-ticket-btn i.fa-3x {
    color: var(--tbc-accent-cta, #F5A623) !important;
}


/* =====================================================================
   13. SUPPORT: статус-секции (Ожидают / Обрабатываются / Закрытые)
   ТЗ §9: бэйджи для статусов, единый стиль фон/подложка.
   ===================================================================== */

#page-container .h1.font-w300.text-success,
#page-container .h1.font-w300.text-warning,
#page-container .h1.font-w300.text-muted {
    color: var(--tbc-text-primary, #FFFFFF) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 8px 14px;
    background: var(--tbc-bg-card, #252942);
    border-radius: 6px;
    border-left: 3px solid var(--tbc-text-muted, #5A5F7A);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    line-height: 1.2;
}
/* Цветной индикатор слева по статусу */
#page-container .h1.font-w300.text-success {
    border-left-color: #FFC107; /* жёлтый — ожидают ответа */
}
#page-container .h1.font-w300.text-warning {
    border-left-color: #62B2FF; /* синий — обрабатываются */
}
#page-container .h1.font-w300.text-muted {
    border-left-color: var(--tbc-text-muted, #5A5F7A); /* серый — закрытые */
}
/* Refresh-кнопка внутри заголовка */
#page-container .h1.font-w300 .btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    color: var(--tbc-text-secondary, #8B90B0) !important;
    padding: 4px 8px !important;
}
#page-container .h1.font-w300 .btn-outline-primary:hover {
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    color: var(--tbc-accent-cta, #F5A623) !important;
}

/* Список тикетов внутри секции */
#page-container .nav-users a {
    background: var(--tbc-bg-card, #252942);
    border: 1px solid var(--tbc-border-default, #2F3454) !important;
    border-radius: 6px;
    color: var(--tbc-text-primary, #FFFFFF) !important;
    margin-bottom: 6px;
    transition: all 0.18s ease;
}
#page-container .nav-users a:hover {
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    background: var(--tbc-bg-card-hover, #2C3050);
}
#page-container .nav-users .badge-success {
    background: #FFC107 !important;
    color: #1A1D2E !important;
}
#page-container .nav-users .badge-warning {
    background: #62B2FF !important;
    color: #1A1D2E !important;
}
#page-container .nav-users .badge-secondary {
    background: var(--tbc-text-muted, #5A5F7A) !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
}


/* =====================================================================
   14. ОБЩИЕ form-controls (textarea, select, input) — navy
   ===================================================================== */

#page-container .form-control,
#page-container .input-group-text {
    background: var(--tbc-bg-panel-end, #1A1D2E) !important;
    border-color: var(--tbc-border-default, #2F3454) !important;
    color: var(--tbc-text-primary, #FFFFFF) !important;
}
#page-container .form-control:focus {
    border-color: var(--tbc-accent-cta, #F5A623) !important;
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2) !important;
}
#page-container .form-control::placeholder {
    color: var(--tbc-text-muted, #5A5F7A) !important;
}
#page-container label {
    color: var(--tbc-text-secondary, #8B90B0) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 6px;
}


@media (prefers-reduced-motion: reduce) {
    #page-container .btn_min_slider.btn_input_fixed,
    #page-container .cc-selector-2 .drinkcard-cc,
    #page-container a.block.new-ticket-btn,
    #page-container .nav-users a,
    #page-container .btn-alt-primary.submit-form {
        transition: none !important;
    }
}