/* =========================================
   MY ACCOUNT STYLES (FINAL LAYOUT)
   ========================================= */

body.account-page-body {
    background: url('../img/bg/Body-final-background.jpg') no-repeat center top;
    background-size: cover;
    background-attachment: fixed;
    background-color: #0b0e11;
    min-height: 100vh;
}

.account-section {
    padding-top: 180px;
    padding-bottom: 100px;
}

/* --- 1. ВЕРХНІЙ РЯД (САЙДБАР + ІНФО) --- */
.account-top-row {
    display: grid;
    grid-template-columns: 280px 1fr; /* Сайдбар 280px | Решта інфо */
    gap: 40px;
    align-items: start;
    margin-bottom: 50px; /* Відступ до персонажів */
}

/* --- 2. СТИЛІ КНОПОК (ПОВЕРНУВ ВАРІАНТ 1) --- */
.acc-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.acc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    
    text-decoration: none;
    font-family: 'Rajdhani', sans-serif; /* Повернув шрифт */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: white;
    
    background: rgba(13, 20, 36, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px; 
    transform: skewX(-10deg); /* Повернув нахил */
    
    transition: 0.3s;
}

/* Вирівнюємо текст назад, щоб не був кривим */
.acc-btn span { transform: skewX(10deg); }

.acc-btn:hover {
    border-color: #FFAD33;
    color: #FFAD33;
    background: rgba(13, 20, 36, 1);
}

/* Активна кнопка (Помаранчева) */
.acc-btn.active {
    background: linear-gradient(135deg, #FFAD33 0%, #D39231 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 5px 15px rgba(255, 173, 51, 0.3);
}

/* Кнопка виходу (Червона) */
.acc-btn.logout-btn {
    margin-top: 20px;
    background: linear-gradient(135deg, #cf2020 0%, #900d0d 100%);
    box-shadow: 0 5px 15px rgba(207, 32, 32, 0.3);
    border: none;
}
.acc-btn.logout-btn:hover {
    filter: brightness(1.1);
    transform: skewX(-10deg) translateY(-2px);
}


/* --- 3. ІНФО КАРТКА (СПРАВА ВІД КНОПОК) --- */
.account-info-box {
    background: rgba(13, 20, 36, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    height: 100%; /* Щоб висота була гарною */
}

.data-box-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-text-side { flex: 1; padding-right: 30px; }

.data-text-side h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: white;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.data-list-vertical {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}

.data-list-vertical li {
    display: flex; justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 5px;
}

.label { color: #8faab9; font-size: 0.95rem; }
.value { color: white; font-weight: 600; text-align: right; }
.status-online { color: #00e676; text-shadow: 0 0 8px rgba(0,230,118,0.4); }
.text-gold { color: #FFAD33; }
.text-white { color: white; }

.data-badge-side {
    width: 250px; 
    height: 250px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: radial-gradient(circle, rgba(255, 173, 51, 0.15) 0%, transparent 70%);
    /* Щоб курсор ставав вказівним пальцем при наведенні (опціонально) */
    cursor: pointer; 
}

.data-badge-side img { 
    width: 100%; 
    height: auto; 
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5));
    
    /* 1. Додаємо плавність для анімації (0.3 секунди) */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* 2. Ефект при наведенні на блок */
.data-badge-side:hover img {
    /* Зменшуємо картинку до 90% від розміру */
    transform: scale(1.1); 
    
    /* Опціонально: можна трохи посилити тінь при зменшенні, щоб додати глибини */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7)); 
}
/* --- 4. НИЖНІЙ РЯД: ПЕРСОНАЖІ (СКОШЕНИЙ СТИЛЬ) --- */
.full-width-section {
    width: 100%;
    margin-top: 40px; /* Більший відступ від верхнього блоку */
}

.my-characters-box {
    width: 100%;
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #aebfd6;
    margin-bottom: 25px;
    text-transform: uppercase;
    padding-left: 15px;
    border-left: 4px solid #FFAD33;
}

.chars-flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Відстань між картками */
    padding-left: 10px; /* Компенсація нахилу першої картки */
}

/* СТИЛЬ КАРТКИ (СКОШЕНИЙ) */
.char-card {
    position: relative;
    width: 180px;
    height: 100px;
    border-radius: 12px; /* Радіус */
    overflow: hidden;
    cursor: pointer;
    
    /* НАХИЛ КАРТКИ */
    transform: skewX(-10deg);
    
    background: rgba(13, 20, 36, 0.6);
    border: 1px solid rgba(255,255,255,0.15);
    transition: 0.3s ease;
}

/* ФОН КАРТКИ (Вирівнюємо назад + Збільшуємо) */
.char-card-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
    filter: brightness(0.7);
    
    /* КОМПЕНСАЦІЯ НАХИЛУ: 
       skewX(10deg) - вирівнює картинку
       scale(1.2) - збільшує її, щоб закрити пусті кути після нахилу */
    transform: skewX(10deg) scale(1.2); 
}

/* ТЕКСТ (Вирівнюємо назад) */
.char-info-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 8px 15px; /* Більші відступи бо картка скошена */
    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
    
    /* Вирівнюємо текст, щоб читався рівно */
    transform: skewX(10deg);
    
    /* Зміщуємо трохи вліво, щоб візуально було по центру після нахилу */
    margin-left: -5px; 
}

.char-name { 
    display: block; 
    color: white; 
    font-weight: 700; 
    font-size: 0.95rem; 
    text-transform: uppercase;
}

.char-class { 
    display: block; 
    color: #FFAD33; 
    font-size: 0.75rem; 
    font-weight: 600;
}

/* ЕФЕКТИ ПРИ НАВЕДЕННІ */
.char-card:hover {
    border-color: #FFAD33;
    transform: skewX(-10deg) translateY(-5px); /* Зберігаємо нахил при підйомі */
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

.char-card:hover .char-card-bg {
    filter: brightness(1.1);
    /* При ховері ще трохи збільшуємо */
    transform: skewX(10deg) scale(1.3); 
}

/* АКТИВНИЙ ПЕРСОНАЖ */
.char-card.active-char {
    border: 2px solid #FFAD33;
    box-shadow: 0 0 20px rgba(255, 173, 51, 0.4);
}
.char-card.active-char .char-card-bg {
    filter: brightness(1);
}/* --- MOBILE ADAPTATION (UPDATED) --- */
@media (max-width: 991px) {
    /* 1. ВЕРХНЯ ЧАСТИНА */
    .account-top-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Виправлення для блоку даних акаунта */
    .data-box-content {
        flex-direction: column;
        align-items: stretch; /* Розтягуємо елементи на всю ширину */
    }
    
    .data-text-side {
        padding-right: 0;
        margin-bottom: 25px;
        width: 100%; /* Гарантуємо ширину */
        text-align: left; /* Текст зліва, не по центру */
    }
    
    /* Таблиця даних: розтягуємо на всю ширину */
    .data-list-vertical {
        width: 100%;
    }
    
    .data-list-vertical li {
        display: flex;
        justify-content: space-between; /* Розводимо краї (ліво-право) */
        width: 100%;
        padding: 8px 0; /* Трохи більше повітря для пальців */
    }

    /* Логотип центруємо окремо */
    .data-badge-side {
        margin: 0 auto; /* Центрування блоку */
        width: 250px;
        height: 250px;
    }

    /* Кнопки меню */
    .acc-nav { flex-direction: row; flex-wrap: wrap; }
    .acc-btn { flex: 1 1 45%; }
}

@media (max-width: 768px) {
    .full-width-section, .my-characters-box {
        width: 100%;
        overflow-x: hidden;
        padding-bottom: 10px;
    }

    .chars-flex-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding-left: 5px;
        padding-right: 5px;
        justify-content: center;
    }

    .char-card { width: 100%; height: 90px; }
    .char-name { font-size: 0.8rem; }
    .char-class { font-size: 0.7rem; }
    .data-badge-side {
    width: 250px; height: 250px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle, rgba(255, 173, 51, 0.15) 0%, transparent 70%);
}
}

/* =========================================
   TAB SECTIONS (RESET & CLEAR)
   ========================================= */

/* Анімація появи */
.account-tab-section {
    width: 100%;
    animation: fadeIn 0.4s ease-out;
    margin-bottom: 40px;
}

/* Обгортка для скролу на мобільному */
.custom-table-wrapper {
    overflow-x: auto;
    border-radius: 10px;
}

/* Стиль таблиці */
.acc-custom-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0 10px; /* Відступи між рядками (ефект карток) */
    min-width: 800px; /* Щоб не ламалася на мобільному */
}

/* Заголовки */
.acc-custom-table thead th {
    text-align: left;
    color: #8faab9;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    padding: 10px 20px;
    text-transform: uppercase;
}

/* Рядки даних */
.acc-custom-table tbody tr {
    background: rgba(19, 26, 42, 0.95); /* Темно-синій фон */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.acc-custom-table tbody tr:hover {
    transform: translateY(-3px);
    background: rgba(30, 40, 60, 1);
    box-shadow: 0 5px 20px rgba(255, 173, 51, 0.1);
}

/* Комірки */
.acc-custom-table td {
    padding: 15px 20px;
    color: white;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    vertical-align: middle;
}

/* Заокруглення першого і останнього елемента в рядку */
.acc-custom-table td:first-child { border-radius: 10px 0 0 10px; }
.acc-custom-table td:last-child { border-radius: 0 10px 10px 0; }

/* Специфічні колонки */
.col-class-icon img {
    width: 30px; height: 30px;
    border-radius: 4px;
    vertical-align: middle;
}

.highlight-name { font-weight: 700; color: white; }
.center { text-align: center; }
.right { text-align: right; color: #FFAD33; } /* Zen золотим */

/* Червона кнопка RESET */
.action-btn-red {
    background: linear-gradient(135deg, #ff3d3d 0%, #b30000 100%);
    color: white;
    border: none;
    padding: 8px 25px;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 61, 61, 0.4);
    transition: 0.3s;
}

.action-btn-red:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 61, 61, 0.7);
}

/* Примітка знизу */
.section-note {
    margin-top: 15px;
    color: #8faab9;
    font-size: 0.9rem;
    padding-left: 10px;
}
.section-note b { color: white; }

/* Мобільна адаптація */
@media (max-width: 991px) {
    .section-title { margin-top: 30px; }
}/* =========================================
   BUY CREDIT SECTION (FINAL TWEAKS)
   ========================================= */

/* Жовта лінія заголовків */
.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #aebfd6;
    margin-bottom: 25px;
    text-transform: uppercase;
    padding-left: 15px;
    border-left: 4px solid #FFAD33;
    display: block;
}

.credit-purchase-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

/* --- ЧЕРВОНА ЗОНА: ВИРІВНЯНІ БЛОКИ З РАДІУСОМ 20PX --- */

/* Основні контейнери кроків */
.cp-step-box {
    background: rgba(13, 20, 36, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* ВИРІВНЯНО (без skew) та R-20px */
    border-radius: 20px; 
    padding: 30px;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.cp-header {
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 15px;
}

/* Номер кроку (залишаємо скошеним для стилю) */
.step-num {
    background: linear-gradient(135deg, #FFAD33 0%, #d39231 100%);
    color: black;
    width: 36px; height: 36px;
    border-radius: 8px; /* Трохи округліший ромб */
    transform: skewX(-10deg);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem;
    box-shadow: 0 0 15px rgba(255, 173, 51, 0.3);
}
.step-num::before { content: attr(data-step); }
.step-num { text-align: center; } 

.cp-header h4 {
    margin: 0; color: white; font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem; letter-spacing: 1px; text-transform: uppercase;
}

/* Блок відображення ціни */
.amount-input-row {
    display: flex; justify-content: space-between;
    background: rgba(0,0,0,0.4);
    padding: 20px; 
    /* ВИРІВНЯНО та R-20px */
    border-radius: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255,255,255,0.05);
}

.amount-display, .price-display {
    font-family: 'Rajdhani', sans-serif; color: white; font-size: 1.8rem; font-weight: 700;
}
.amount-display small, .price-display small {
    font-size: 0.9rem; color: #8faab9; font-weight: 600; text-transform: uppercase;
}
.price-display { color: #00e676; text-shadow: 0 0 10px rgba(0, 230, 118, 0.2); }


/* --- ЗЕЛЕНА ЗОНА: СКОШЕНІ КНОПКИ ЗІ ЗБІЛЬШЕНИМ РАДІУСОМ --- */

.quick-select-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 25px;
}

.qs-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.15);
    color: #aebfd6;
    padding: 15px 5px;
    text-align: center; cursor: pointer;
    font-family: 'Rajdhani', sans-serif; font-weight: 700;
    transition: 0.3s;
    
    transform: skewX(-10deg); /* Скошені */
    /* ЗБІЛЬШЕНИЙ РАДІУС */
    border-radius: 15px; 
}

.qs-btn .qs-text, .qs-btn .bonus-badge { display: block; transform: skewX(10deg); }

.qs-btn:hover {
    border-color: #FFAD33; color: white;
    background: rgba(255, 173, 51, 0.1);
    transform: skewX(-10deg) translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.qs-btn.active {
    background: linear-gradient(135deg, #FFAD33 0%, #b8860b 100%);
    color: black; border-color: transparent;
    box-shadow: 0 0 20px rgba(255, 173, 51, 0.4);
}
.qs-btn .qs-text { font-size: 1.1rem; }
.qs-btn .bonus-badge { font-size: 0.75rem; margin-top: 2px; color: #FFAD33; }
.qs-btn.active .bonus-badge { color: rgba(0,0,0,0.7); font-weight: 800; }


/* --- ЖОВТА ЗОНА: СЛАЙДЕР (ВИПРАВЛЕНИЙ) --- */
.range-slider-container { padding: 15px 0; }

/* Сам інпут (трек) */
.custom-range-slider {
    -webkit-appearance: none; 
    width: 100%; 
    height: 8px; /* Висота треку */
    background: #151b24; /* Колір незаповненої частини (сірий) */
    border-radius: 4px; 
    outline: none;
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    /* ВАЖЛИВО: Прибрали overflow: hidden, щоб не різати бігунок */
}

/* Ручка слайдера (Thumb) */
.custom-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 24px; 
    height: 24px;
    
    /* КРУГЛА РУЧКА */
    border-radius: 50%; 
    background: #FFAD33;
    cursor: pointer; 
    
    /* Центруємо ручку відносно треку висотою 8px */
    /* (24px - 8px) / 2 = 8px. Зсуваємо вгору на 8px */
    margin-top: -9px; 
    
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(255, 173, 51, 0.8); /* Тільки світіння */
    
    transition: transform 0.1s;
}

/* Ефект натискання */
.custom-range-slider:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

.range-labels {
    display: flex; justify-content: space-between;
    margin-top: 15px; color: #5d6f85; font-size: 0.85rem; font-family: 'Rajdhani', sans-serif; font-weight: 600;
}

/* --- BOTTOM ROW --- */
.credit-bottom-row {
    display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 30px;
}

.payment-methods-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;
}

/* Картки оплати (ЗЕЛЕНА ЗОНА) */
.pay-card {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 25px 15px; cursor: pointer; position: relative;
    transition: 0.3s; display: flex; flex-direction: column;
    align-items: center; justify-content: center; min-height: 110px;
    
    transform: skewX(-10deg); /* Скошені */
    /* ЗБІЛЬШЕНИЙ РАДІУС */
    border-radius: 18px;
}

.pay-card .pay-logo, .pay-card .pay-subtext, .pay-card .check-icon { transform: skewX(10deg); }
.pay-logo { font-size: 1.2rem; color: white; font-weight: 700; }
.pay-logo i { margin-right: 8px; font-size: 1.5rem; }
.pay-subtext { font-size: 0.7rem; color: #8faab9; margin-top: 5px; }

.pay-card:hover { 
    border-color: #FFAD33; transform: skewX(-10deg) translateY(-5px); 
    background: rgba(255,255,255,0.02);
}
.pay-card.active {
    border: 1px solid #00e676; background: rgba(0, 230, 118, 0.05);
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.15);
}
.check-icon {
    position: absolute; top: 10px; right: 10px;
    color: #00e676; opacity: 0; transition: 0.3s;
}
.pay-card.active .check-icon { opacity: 1; }


/* --- SUMMARY SECTION (ЧЕРВОНА ЗОНА) --- */
.summary-section {
    display: flex; flex-direction: column; justify-content: space-between;
}

/* Блок деталей (ВИРІВНЯНИЙ) */
.checkout-details { 
    margin-bottom: 20px; 
    background: rgba(0,0,0,0.3);
    padding: 25px;
    /* ВИРІВНЯНО (без skew) та R-20px */
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.05);
}

.summary-row {
    display: flex; justify-content: space-between;
    margin-bottom: 12px; color: #aebfd6; font-size: 1rem;
}
.summary-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 20px 0; }
.total-row { font-size: 1.2rem; font-weight: 700; color: white; }
.val-white { color: white; font-weight: 700; }
.val-gold { color: #FFAD33; font-weight: 700; }
.val-total { color: #00e676; font-size: 1.4rem; text-shadow: 0 0 10px rgba(0, 230, 118, 0.3); }


/* --- КНОПКА ОПЛАТИ (ЗЕЛЕНА ЗОНА) --- */
.btn-checkout {
    width: 100%; padding: 15px;
    background: linear-gradient(135deg, #00C853 0%, #009624 100%); 
    color: white; border: none;
    
    transform: skewX(-10deg); /* Скошена */
    /* ЗБІЛЬШЕНИЙ РАДІУС */
    border-radius: 15px;
    
    cursor: pointer; transition: 0.3s;
    box-shadow: 0 5px 20px rgba(0, 200, 83, 0.3);
    margin-top: auto; border: 1px solid #00e676;
}
.btn-checkout .btn-text {
    display: block; transform: skewX(10deg);
    font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; font-weight: 700; text-transform: uppercase;
}
.btn-checkout:hover {
    filter: brightness(1.15); transform: skewX(-10deg) translateY(-3px);
    box-shadow: 0 0 30px rgba(0, 200, 83, 0.6);
}

@media (max-width: 991px) {
    .credit-bottom-row { grid-template-columns: 1fr; }
    .quick-select-grid { grid-template-columns: repeat(3, 1fr); }
}




.form-alert {
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}
.alert-success { background: rgba(40, 167, 69, 0.15); border: 1px solid #28a745; color: #58ff58; }
.alert-error { background: rgba(220, 53, 69, 0.15); border: 1px solid #dc3545; color: #ff5858; }