/* ==================================================
   ГЛОБАЛЬНЫЕ СТИЛИ (фон тела, основной цвет текста)
   ================================================== */
body {
    background-color: #121212;  /* фон всей страницы */
    color: #FF4500;            /* основной цвет текста */
}

/* ==================================================
   КАРТОЧКИ (общие настройки)
   ================================================== */
.card {
    background-color: #1e1e1e;  /* фон карточки */
    border-color: #333;         /* рамка карточки */
}
.card-header {
    background-color: #FF8C00;               /* фон заголовка карточки */
    border-bottom: 1px solid #FF8C00;        /* оранжевая линия под заголовком */
    color: #fff;                             /* цвет текста заголовка */
}

/* ==================================================
   КНОПКИ (основные – класс btn-primary)
   ================================================== */
.btn-primary {
    background-color: #FF8C00;  /* оранжевый фон */
    border-color: #FF8C00;      /* оранжевая рамка */
}
.btn-primary:hover {
    background-color: #FF6500;  /* более тёмный оранжевый при наведении */
}

/* ==================================================
   ФОНОВЫЕ КЛАССЫ BOOTSTRAP (переопределены в оранжевый)
   ================================================== */
.bg-primary {
    background-color: #FF8C00;   /* теперь оранжевый, а не синий */
}
.text-primary {
    color: #FFFFFF;              /* цвет текста для класса text-primary */
}

/* ==================================================
   НАВИГАЦИОННАЯ ПАНЕЛЬ (логотип, ссылки)
   ================================================== */
.navbar-brand {
    color: #FF8C00;              /* цвет логотипа */
}
.navbar-dark .navbar-nav .nav-link:hover {
    color: #FF8C00;              /* цвет ссылок при наведении */
}

/* ==================================================
   ПОЛЯ ФОРМ (инпуты, селекты)
   ================================================== */
.form-control, .form-select {
    background-color: #2a2a2a;   /* тёмный фон полей */
    border-color: #444;          /* рамка */
    color: #FFFFFF;                 /* цвет текста внутри */
}
.form-control:focus {
    border-color: #FF8C00;       /* оранжевая рамка при фокусе */
    box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25); /* оранжевое свечение */
}

/* ==================================================
   УВЕДОМЛЕНИЯ (успех / ошибка)
   ================================================== */
.alert-success {
    background-color: #1e3a2a;   /* тёмно-зелёный фон */
    color: #b8ffc8;              /* светлый текст */
}
.alert-danger {
    background-color: #3a1a1a;   /* тёмно-красный фон */
    color: #ffb8b8;              /* светлый текст */
}

/* ==================================================
   ТАБЛИЦЫ (транзакции, пользователи)
   ================================================== */
.table, .table th, .table td {
    color: #fff;                 /* белый текст */
    background-color: #1e1e1e;  /* тёмный фон */
    border-color: #555;          /* серые границы */
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #2a2a2a;   /* чуть светлее для нечётных строк */
}

/* ==================================================
   КАРТОЧКА БАЛАНСА (градиентный оранжевый фон)
   ================================================== */
.balance-card {
    background: linear-gradient(135deg, #FF8C00, #FF6500);
    border-radius: 10px;
}
.balance-amount {
    font-size: 2.5rem;
    font-weight: bold;
}

/* ==================================================
   КНОПКА "ИСТОРИЯ" (если используется)
   ================================================== */
.btn-info {
    background-color: #FF8C00;
    border-color: #FF8C00;
}
.btn-info:hover {
    background-color: #FF6500;
}

/* ==================================================
   КНОПКИ ИНДИГО (блок ТВОЙ БАЛАНС – если используются)
   ================================================== */
.btn-indigo {
    background-color: #4B0082;   /* индиго фон */
    border-color: #4B0082;
    color: white;
}
.btn-indigo:hover {
    background-color: #3A0060;
    border-color: #3A0060;
}
.btn-indigo:active, .btn-indigo:focus {
    background-color: #2F004D;
    border-color: #2F004D;
    box-shadow: 0 0 0 0.25rem rgba(75, 0, 130, 0.5);
}

/* ==================================================
   КНОПКИ CUSTOM (красно-оранжевые, скруглённые – используются в обоих блоках сейчас)
   ================================================== */
.btn-custom {
    background-color: #FF4500;          /* красно-оранжевый фон */
    border-color: #FFFFFF;              /* белая обводка (можно заменить на #4B0082 индиго) */
    border-width: 2px;
    border-radius: 30px;                /* сильное скругление углов */
    color: white;                       /* белый текст */
}
.btn-custom:hover {
    background-color: #E03E00;
    border-color: #3A0060;              /* при наведении рамка индиго */
    border-radius: 30px;
    color: white;
}
.btn-custom:active, .btn-custom:focus {
    background-color: #CC3700;
    border-color: #FFFFFF;              /* активная рамка белая */
    border-radius: 30px;
    box-shadow: 0 0 0 0.25rem rgba(75, 0, 130, 0.5);
}

/* ==================================================
   АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ (ширина до 480px)
   ================================================== */
@media (max-width: 480px) {
    /* Уменьшаем отступы контейнера */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Уменьшаем размер шрифта баланса */
    .balance-amount {
        font-size: 1.8rem;
    }
    
    /* Кнопки в блоках: чуть меньше и могут переноситься */
    .d-flex.gap-2 {
        gap: 0.5rem !important;
        flex-wrap: wrap;
    }
    .d-flex.gap-2 .btn-sm {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }
    
    /* Заголовки карточек */
    .card-title {
        font-size: 1rem;
    }
    
    /* Размер PIN-кода (бейдж) */
    .badge.fs-4 {
        font-size: 1.2rem !important;
    }
    
    /* Высота iframe на мобильных */
    iframe {
        height: 400px !important;
    }
    
    /* Таблица истории: мелкий шрифт и отступы */
    .table-responsive {
        font-size: 0.7rem;
    }
    .table td, .table th {
        padding: 0.3rem;
    }
    
    /* Отступы модального окна */
    .modal-content {
        margin: 0 10px;
    }
}

/* ==================================================
   ЦЕНТРИРОВАНИЕ IFRAME (принудительное)
   ================================================== */
.row .col-12 {
    text-align: center !important;
    float: none !important;
    display: block !important;
}
.row .col-12 iframe {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ==================================================
   ДОПОЛНИТЕЛЬНАЯ АДАПТАЦИЯ IFRAME ДЛЯ МОБИЛЬНЫХ
   ================================================== */
@media (max-width: 480px) {
    .row .col-12 {
        text-align: center !important;
    }
    .row .col-12 iframe {
        height: 300px !important;
        margin: 0 auto !important;
    }
}
/* ==================================================
   ИСПРАВЛЕНИЕ ЧИТАЕМОСТИ ТАБЛИЦЫ ПОЛЬЗОВАТЕЛЕЙ В АДМИНКЕ
   ================================================== */
/* Принудительно делаем все строки таблицы читаемыми */
.table-striped tbody tr,
.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(even) {
    background-color: #1e1e1e !important;  /* единый тёмный фон для всех строк */
    color: #ffffff !important;             /* белый текст для всех строк */
}

/* Для ячеек таблицы – белый текст */
.table-striped tbody td,
.table-striped tbody th {
    color: #ffffff !important;
}

/* Если хотите сохранить лёгкое чередование, но с контрастом:
   можно оставить разный фон, но убедиться, что текст читается */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #1e1e1e !important;  /* чуть светлее */
}
.table-striped tbody tr:nth-of-type(even) {
    background-color: #1e1e1e !important;  /* основной тёмный */
}
.table-striped tbody td {
    color: #ffffff !important;
}
/* Увеличение области касания кнопок на телефонах */
@media (max-width: 480px) {
    .btn-sm, .btn {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.85rem;
    }
    .nav-link {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
    h2.balance-amount {
        font-size: 1.6rem;
    }
    .card-title {
        font-size: 0.9rem;
    }
}
/* ==================================================
   УЛУЧШЕННАЯ МОБИЛЬНАЯ АДАПТАЦИЯ
   ================================================== */
@media (max-width: 768px) {
    /* Таблицы – прокрутка по горизонтали */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Карточки: уменьшаем отступы */
    .card-body {
        padding: 1rem;
    }
    
    /* Кнопки в блоках баланса и PIN: переносим на новые строки при необходимости */
    .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .d-flex.gap-2 .btn-sm {
        flex: 1 0 auto;
        min-width: 70px;
    }
    
    /* Увеличиваем область касания для кнопок в телефоне */
    .btn, .btn-sm {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Навигационные ссылки – больше для удобного нажатия */
    .navbar-nav .nav-link {
        padding: 0.6rem 1rem;
        font-size: 1rem;
    }
    
    /* Еслиrame – уменьшаем высоту */
    iframe {
        height: 300px !important;
    }
    
    /* Баланс – шрифт поменьше */
    .balance-amount {
        font-size: 1.8rem;
    }
    
    /* Заголовок карточки */
    .card-title {
        font-size: 1rem;
    }
    
    /* PIN-код (бейдж) */
    .badge.fs-4 {
        font-size: 1.2rem !important;
    }
    
    /* Модальное окно – отступы */
    .modal-dialog {
        margin: 0.5rem;
    }
    .modal-content {
        font-size: 0.9rem;
    }
}

/* Для очень узких экранов (до 480px) – дополнительная оптимизация */
@media (max-width: 480px) {
    .balance-amount {
        font-size: 1.5rem;
    }
    .btn, .btn-sm {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }
    .card-title {
        font-size: 0.9rem;
    }
    .d-flex.gap-2 .btn-sm {
        min-width: 60px;
    }
    .table {
        font-size: 0.7rem;
    }
    .table td, .table th {
        padding: 0.3rem;
    }
}
/* Навигационные кнопки – отступы между ними */
.navbar-nav .nav-item .btn {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
/* На мобильных убираем лишние отступы */
@media (max-width: 500px) {
    .navbar-nav .nav-item .btn {
        margin: 0.25rem 0;
    }
}

/* ==================================================
   БЕЗОПАСНЫЙ ФОН С ЗАТЕМНЕНИЕМ (НЕ МЕШАЕТ МОДАЛКАМ)
   ================================================== */

/* 1. Фоновое изображение (без дополнительных слоёв) */
body {
    background-image: url('MegaX.jpg') !important; /* ЗАМЕНИТЕ НА ВАШ ФАЙЛ */
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-color: #121212 !important; /* запасной цвет */
}

/* 2. Затемнение для читаемости текста (отдельный слой) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    pointer-events: none;
}

/* 3. Весь контент – поверх затемнения */
body > * {
    position: relative;
    z-index: 1;
}

/* 4. Модальные окна – поверх всего и кликабельны */
.modal {
    z-index: 99999 !important;
}
.modal-backdrop {
    z-index: 99998 !important;
}
.modal-content,
.modal-body,
.modal-footer,
.modal-header,
.modal-content *,
.modal-body *,
.modal-footer *,
.modal-header * {
    pointer-events: auto !important;
}

/* ==================================================
   ФОН + ЗАТЕМНЕНИЕ (БЕЗ КОНФЛИКТОВ С МОДАЛКАМИ)
   ================================================== */

/* Фоновое изображение для всего сайта */
body {
    background-image: url('MegaX.jpg'); /* ЗАМЕНИТЕ НА ВАШ ФАЙЛ */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #121212;
}

/* Затемняющий слой – он под контентом, но над фоном */
#bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* регулируйте прозрачность */
    z-index: 0; /* находится под контентом (z-index: 1) */
    pointer-events: none; /* НЕ ПЕРЕХВАТЫВАЕТ КЛИКИ */
}

/* Весь контент – поверх затемнения */
body > *:not(#bg-overlay) {
    position: relative;
    z-index: 1;
}

/* Модальные окна – поверх всего и кликабельны */
.modal {
    z-index: 9999 !important;
}
.modal-backdrop {
    z-index: 9998 !important;
}
.modal-content,
.modal-body,
.modal-footer,
.modal-header,
.modal-content *,
.modal-body *,
.modal-footer *,
.modal-header * {
    pointer-events: auto !important;
}