/* ========================================
   1. Общие стили (Reset, шрифты, базовые настройки)
=========================================*/

@font-face {
    font-family: 'Metro';
    src: url('../fonts/Metro.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

/* Общие настройки */
body {
    background: #1a1a1a;
    color: white;
    text-align: center;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   2. Навигация и общие стили шапки (Navbar)
=========================================*/

/* ======== Шапка (Navbar) ======== */
.navbar {
    background-color: #101014;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    padding: 0 20px;
    position: relative;
}

.nav-left {
    display: flex;
    align-items: center;
}
.nav-middle {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 9999;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Логотип (десктоп) */
.logo-link img {
    max-width: 180px;
    height: auto;
    display: block;
}

/* Ссылки (десктоп) */
.header-link {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 400;
    color: #FFFFFF;
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid #D58F0E;
    border-radius: 6px;
    margin: 0 8px;
    transition: box-shadow 0.2s;
    text-align: center;
}
.header-link:hover {
    box-shadow: 0 0 8px #D58F0E;
}

/* Logout icon (десктоп) */
.logout-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #D58F0E;
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.logout-icon img {
    width: 18px;
    height: 18px;
}
.logout-icon:hover {
    box-shadow: 0 0 8px #D58F0E;
}

/* Кнопка Coins (десктоп) */
.header-coins {
    background-color: #0044cc;
    color: #ffffff;
    font-size: clamp(12px, 2vw, 16px);
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0,0,255,0.3);
    transition: background 0.2s ease-in-out;
}
.header-coins:hover {
    background-color: #0033aa;
}

/* Кнопка Coins (мобильная) — скрыта на десктопе */
.coins-mobile {
    display: none;
    background-color: #0044cc;
    color: #ffffff;
    font-size: clamp(12px, 2vw, 16px);
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0,0,255,0.3);
    transition: background 0.2s ease-in-out;
}
.coins-mobile:hover {
    background-color: #0033aa;
}

/* Logout (текст) для мобильного - скрываем на десктопе */
.logout-mobile {
    display: none;
}

/* Гамбургер - скрыт на десктопе */
.burger {
    display: none;
    cursor: pointer;
}
.burger .line {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #fff;
    transition: 0.3s;
}

/* Медиа-запрос для навигации (макс. 768px) */
@media (max-width: 768px) {

    .navbar {
        height: auto;
        justify-content: center;
        flex-wrap: nowrap;
    }

    /* Уменьшаем логотип ещё сильнее */
    .logo-link img {
        max-width: 100px;
        justify-content: center;
    }

    /* Прячем logout icon (десктоп), показываем logout-mobile */
    .logout-icon {
        display: none;
    }
    .logout-mobile {
        display: inline-flex;
    }

    /* Прячем десктопную кнопку coins, показываем coins-mobile */
    .header-coins {
        display: none;
    }
    .coins-mobile {
        display: block;
    }

    /* Показываем гамбургер */
    .burger {
        display: block;
    }

    /* Прячем центральное меню по умолчанию */
    .nav-middle {
        display: none;
        flex-direction: column;
        background-color: #101014;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        gap: 8px;
        padding-bottom: 10px;
        z-index: 9999;

        /* Линия разделения вверху */
        border-top: 2px solid #D58F0E;
        margin-top: 0;

        /* Небольшой отступ сверху, чтобы меню не липло к линии */
        padding-top: 8px;
    }

    /* Когда .nav-active добавлен, показываем */
    .nav-middle.nav-active {
        display: flex;
    }

    /* Делаем кнопки в выпадающем меню одинаковой ширины и по центру */
    .nav-middle.nav-active .header-link {
        display: block;
        width: 45%;
        margin: 0 auto;
        text-align: center;
    }

    /* Кнопка coins и гамбургер справа */
    .nav-right {
        margin-left: auto;
        gap: 8px;
    }
    .nav-left {
        width: 100%;
        justify-content: center;
    }

    /* Смещаем спиннер/загрузку влево в таблице */
    .row-loading {
        justify-content: flex-start !important;
        padding-left: 10px;
    }
}

/* ========================================
   3. Страницы 1 (Index) и 2 (Authpage)
   (Одиночный логотип по центру, заголовки, контейнеры, формы)
=========================================*/

/* Страницы 1 и 2 (одиночный логотип по центру)*/
.single-logo-nav {
    justify-content: center;
    height: 90px;
    padding: 0 20px;
}
.logo-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Переопределение логотипа для страниц 1 и 2 */
.logo-link img {
    max-width: 220px;
    height: auto;
}
/* Флюидная типографика */
h1 {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 40px;
    margin-bottom: 30px;
    font-family: 'Metro', sans-serif;
    text-shadow: 0 0 8px rgba(255,165,0,0.5);
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.container {
    margin: 20px auto;
    width: 80%;
}

/* Блок для первого экрана (Steam Login) */
.login-box {
    width: 100%;
    max-width: 544px;
    margin: 40px auto 60px auto;
    background: #23272a;
    border: 2.5px solid #D58F0E;
    /*box-shadow: 5px 5px 8px 4px rgba(255, 165, 0, 0.5);*/
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: clamp(80px, 20vh, 272px);
}

/* Универсальный блок .auth-box */
.auth-box {
    max-width: 1000px;
    margin: 20px auto;
    background: #23272a;
    border: 2px solid #D58F0E;
    /*box-shadow: 5px 5px 8px 4px rgba(255,165,0,0.5);*/
    border-radius: 16px;
    padding: 20px;
    text-align: left;
}

.auth-box label {
    display: block;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.auth-box input[type="text"],
.auth-box input[type="password"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background: #1c1c1c;
    border: 2px solid #64748B;
    border-radius: 6px;
    outline: none;
    margin-bottom: 15px;
}

.auth-box input::placeholder {
    color: #a0a0a0;
    opacity: 1;
}

.auth-box .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

/* Инструкции (instruction-box) */
.instruction-box {
    background: #23272a;
    border: 2.5px solid #D58F0E;
    /*box-shadow: 5px 5px 8px 4px rgba(255,165,0,0.5);*/
    border-radius: 16px;
    padding: 10px 20px 20px 20px;
    margin-bottom: 20px;
}
.special-title {
    font-size: clamp(20px, 4vw, 28px);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 4px 4px 6px rgba(255,165,0,0.5);
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.instruction-list {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: normal;
    line-height: 1.6;
    color: #fff;
    list-style: decimal outside;
    margin-left: 1.5rem;
    text-align: left;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* steam-box */
.steam-box {
    background: #23272a;
    border: 2.5px solid #D58F0E;
    /*box-shadow: 5px 5px 8px 4px rgba(255,165,0,0.5);*/
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 20px;
}
.steam-box img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ========================================
   4. Страницы 3 (Persstats) и 4 (Transhistory)
   (Таблицы, статистика, загрузка)
=========================================*/

/* ======================
   Таблицы (Страницы 3,4)
====================== */
.table-container {
    margin: 20px auto;
    width: 100%;
    background-color: #23272a;
    padding: 0;
    border-radius: 24px;
    overflow-x: auto;
    border: 2.5px solid #D58F0E;
    /*box-shadow: 5px 5px 8px 4px rgba(255,165,0,0.5);*/
    position: relative;
}

.table-container table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    opacity: 0.8;
}

.table-container thead {
    background-color: #00249F;
    color: #fff;
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 800;
    text-transform: uppercase;
    height: 64px;
}

.table-container th,
.table-container td {
    padding: 15px;
    text-align: center;
    white-space: nowrap;
}

.table-container tbody tr:nth-child(even) {
    background-color: #343437;
}
.table-container tbody tr:hover {
    background-color: rgba(255,165,0,0.2);
    transition: background 0.3s ease-in-out;
}

.table-section-title {
    font-family: 'Metro', sans-serif;
    font-size: clamp(24px, 5vw, 36px);
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 0 8px rgba(255,165,0,0.5);
    margin-bottom: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
/* Пагинация внизу таблицы */
.pagination-container {
    display: flex;
    justify-content: flex-end;  /* Выравниваем вправо */
    align-items: center;
    gap: 10px;                  /* Расстояние между кнопками и текстом */
    margin-top: 16px;           /* Отступ сверху, чтобы не прилипать к таблице */
}

.btn-page {
    background-color: #0044cc;
    color: #ffffff;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    padding: 8px 16px;
}

.btn-page:hover {
    background-color: #0033aa;
}

.page-info {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: normal;
    /* Можно добавить другие стили, например цвет текста */
    color: #fff;
}

/* Кнопка TOTAL POINTS */
.coins-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.btn-coins {
    background-color: #0044cc;
    color: #ffffff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,255,0.3);
    transition: background 0.3s ease-in-out;
}
.btn-coins:hover {
    background-color: #0033aa;
}

/* Загрузочная строка */
.spinner-container {
    display: inline-block;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.loading-row {
    background: #343437;
}
.row-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 0;
}
.spinner {
    width: 24px;
    height: 24px;
    border: 4px solid #666;
    border-top-color: #D58F0E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Кнопка .btn-ok (пример) */
.btn.btn-ok {
    padding: 14px 28px;
    font-size: 20px;
}
.btn.btn-ok:hover {
    background: #0033aa;
}

/* ========================================
   5. Страница 5 (Exchange)
   (Формы, обмен, кнопки, выбор локации)
=========================================*/

.form-container,
.exchange-box {
    background-color: #23272a;
    padding: 20px;
    border-radius: 10px;
    /*box-shadow: 0 0 10px rgba(255,165,0,0.8);*/
    width: 70%;
    max-width: 500px;
    text-align: left;
    margin: 20px auto;
    border: 2.5px solid #D58F0E;
}

/* При более узких экранах уменьшаем ширину постепенно */
@media (max-width: 992px) {
    .form-container,
    .exchange-box {
        width: 70%;
    }
}
@media (max-width: 768px) {
    .form-container,
    .exchange-box {
        width: 80%;
    }
}
@media (max-width: 576px) {
    .form-container,
    .exchange-box {
        width: 100%;
        max-width: 400px;
    }
}

/* Стили шрифта для exchange-box */
.exchange-box {
    font-family: 'Metro', sans-serif;
}
.exchange-box input {
    font-family: 'Metro', sans-serif;
    font-size: clamp(12px, 2vw, 16px);
}
.exchange-box input::placeholder {
    font-family: 'Metro', sans-serif;
    color: #a0a0a0;
}

/* Общие стили для label */
.form-container label,
.exchange-box label {
    display: block;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: bold;
    margin-bottom: 5px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Общие стили для input */
.form-container input,
.exchange-box input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #64748B;
    background: #333;
    color: white;
    margin-bottom: 15px;
    text-align: center;
    font-size: clamp(12px, 2vw, 16px);
}

/* Кнопки .buttons */
/* Контейнер кнопок */
.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Одинаковые размеры для обеих кнопок (.btn и .btn-back) */
.buttons button,
.buttons .btn-back {
    width: 130px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0;
}

/* Стандартная .btn (OK, Register) */
.btn {
    background: #0044cc;
    color: #fff;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}
.btn:hover {
    background: #0033aa;
}

/* Кнопка BACK */
.btn-back {
    background: #23272a;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 8px;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: bold;
    text-transform: uppercase;
    gap: 6px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}
.btn-back:hover {
    background: #000;
}

/* Поле выбора локации */
.location-input {
    width: 80%;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid #64748B;
    background-color: #333;
    color: white;
    text-align: center;
    font-size: clamp(12px, 2vw, 16px);
}

/* Кнопка Steam (иконка + текст) */
.btn-steam {
    background-color: #000;
    padding: 14px 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255,165,0,0.5);
    border: none;
}
.btn-steam img {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease-in-out;
}
.btn-steam img:hover {
    transform: scale(1.05);
}
.btn-steam:hover {
    background-color: #333;
    transition: background 0.3s ease-in-out;
}
.btn-steam span {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
}

/* Дополнительные правки для location-block и адаптивность */
@media (max-width: 576px) {
    .auth-box {
        padding: 15px 10px;
        max-width: 100%;
    }

    .auth-box label {
        margin-bottom: 5px;
    }

    .auth-box input[type="text"],
    .auth-box input[type="password"] {
        margin-bottom: 15px;
    }
    .exchange-box,
    .location-box {
        padding: 15px 10px;
        max-width: 100%;
    }
    .location-title {
        margin-top: 1rem;
        font-size: clamp(18px, 5vw, 24px);
    }
}
/* Уменьшение рамки (border) на узких экранах */
@media (max-width: 768px) {
    .exchange-box {
        border-width: 2px;
    }
    .location-box {
        border-width: 2px;
        display: flex;
        justify-content: center;
    }
    .location-box .location-input {
        max-width: 100%;
    }
}
/* ========================================
   Дополнительные стили для .steamid-box
   (ручной ввод SteamID на index.html)
=========================================*/
.steamid-box {
    width: 100%;
    max-width: 544px;
    margin: 20px auto;
    background: #23272a;
    border: 2px solid #D58F0E;
    border-radius: 16px;
    padding: 20px;
}

.steamid-box label.steamid-label {
    display: block;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    /* Добавляем Metro и выравнивание по центру */
    font-family: 'Metro', sans-serif;
    text-align: center;
    color: #fff;
    margin-bottom: 10px;
}

.steamid-box .input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.steamid-box .custom-input {
    flex: 1;
    background: #1c1c1c;
    border: 2px solid #64748B;
    border-radius: 6px;
    color: #fff;
    padding: 10px;
    font-size: 16px;
}
.steamid-box .custom-input::placeholder {
    color: #a0a0a0;
}

/* Кнопка отправки */
.steamid-box .custom-btn {
    background: #0044cc;
    color: #fff;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    transition: background 0.3s ease-in-out;
}
.steamid-box .custom-btn:hover {
    background: #0033aa;
}

/* Адаптивность очень узких экранах */
@media (max-width: 576px) {
    .steamid-box {
        padding: 15px 10px;
        max-width: 100%;
    }
    .steamid-box .custom-btn {
        padding: 10px 16px;
    }
}