/* General Styles & Variables */
@font-face{
    font-family: 'myFont1';
    src: url('../fontParsi/B_Yekan.ttf') format('truetype');
}
@font-face{
    font-family: 'myFont2';
    src: url('../fontParsi/GillSansUltraBold.ttf') format('truetype');
}
@font-face{
    font-family: 'myFont3';
    src: url('../fontParsi/LilitaOne-Regular.ttf') format('truetype');
}

.myFont1 {
    font-family: 'myFont1' ,"myFont3", "Raleway" , sans-serif , Arial;
  }
  .myFont2 {
    font-family: 'myFont2' , "Raleway" , sans-serif , Arial;
  }
  .myFont3 {
    font-family: 'myFont3' , "Raleway" , sans-serif , Arial;
  }

:root {
    --dark-background: #0f0f1a;
    --card-background: #1a1a2e;
    --text-color: #e0e0e0;
    --text-color-1: #e0e0e08f;
    --success-color: #00ffee;
    --primary-color: #ff0046;
    --secondary-color: #ff00ff;
    --accent-color: #ff5733;
    --score-bg: rgba(0, 240, 255, 0.1);
    --border-radius: 10px;
    --card-border-radius: 15px;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    --neon-glow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--secondary-color), 0 0 20px var(--secondary-color);
    --font-main: 'myFont3', 'myFont1', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    background-color: var(--dark-background);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==================== Sidebar ==================== */
.sidebar {
    width: 250px;
    height: 100vh;
    background-color: var(--card-background);
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--box-shadow);
    z-index: 1000;
}

.sidebar-logo img {
    max-width: 100px;
    margin-bottom: 40px;
}

.sidebar-nav ul {
    list-style: none;
    width: 100%;
    padding: 0 20px;
}

.sidebar-nav li {
    margin-bottom: 15px;
}

.sidebar-nav a {
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: var(--border-radius);
    transition: background-color 0.3s, color 0.3s;
    font-family: var(--font-main);
}

.sidebar-nav a.active {
    background: linear-gradient(90deg, #e91e63 0%, #ff2d9b 100%);
    color: #fff;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(233, 30, 99, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: bold;
}

.sidebar-nav a:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-nav a i {
    margin-left: 15px;
    font-size: 1.2em;
}

.sidebar-profile {
    margin-top: auto;
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    width: calc(100% - 10px);
}

.sidebar-profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 10px;
    object-fit: cover;
}

/* ==================== Main Content ==================== */
.main-content {
    margin-right: 250px;
    padding: 30px;
    min-height: 100vh;
}

/* ==================== Header ==================== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tabs { display: flex; }

.tab {
    background: none;
    border: none;
    color: var(--text-color-1);
    font-family: var(--font-main);
    font-size: 1.1em;
    margin-left: 25px;
    cursor: pointer;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s;
}

.tab.active {
    color: var(--text-color);
    font-weight: bold;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--text-color);
    border-radius: 2px;
}

.search-container {
    position: relative;
    width: 300px;
}

.search-container input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    background-color: var(--card-background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    color: var(--text-color);
    font-family: var(--font-main);
}

.search-container input::placeholder {
    color: rgba(220, 220, 220, 0.5);
}

.search-container .icon-search-magnifier {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    font-size: 1.1em;
}

.user-notifications {
    position: relative;
    display: flex;
    align-items: center;
}

.user-notifications .icon-bell {
    font-size: 1.4em;
    color: var(--text-color);
    cursor: pointer;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-weight: bold;
}

/* ==================== Featured Games Slider ==================== */
.featured-games-section {
    margin-bottom: 40px;
    width: 100%;
}

/* کانتینر بیرونی — فقط همین است که overflow دارد */
.slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
}

/* ریل اسلاید — این بخش قبلاً وجود نداشت و علت کارنکردن اسلاید بود */
.featured-games-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* هر اسلاید دقیقاً به عرض کانتینر */
.featured-games-track .featured-card {
    flex: 0 0 100%;      /* هر کارت ۱۰۰٪ عرض wrapper */
    max-width: 100%;
    min-width: 100%;
    width: 100%;
}

/* ==================== Featured Card ==================== */
.featured-card {
    position: relative;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1f2a 0%, #123a3f 50%, #1a1030 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.featured-card-left .card-bg-image {
    filter: hue-rotate(0deg) brightness(1.05);
}

.featured-card-right .card-bg-image {
    filter: hue-rotate(0deg) brightness(1.1);
}

/* تصویر کاراکتر = پس‌زمینه کامل کارت */
.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* لوگوی بازی سمت راست */
.card-logo {
    position: absolute;
    top: 1%;
    right: 2%;
    width: 100px;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.6));
}

/* بج Free to play — بالا راست */
.badge-coming {
    position: absolute;
    top: 20px;
    right: 120px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

/* حلقه امتیاز — بالا چپ */
.score-ring {
    position: absolute;
    top: 20px;
    left: 28px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(20, 10, 40, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(#f5c542 0deg 260deg, rgba(255, 255, 255, 0.15) 260deg 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.score {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--text-color);
}

.score-stars {
    font-size: 11px;
    margin-top: 4px;
}

/* محتوای پایین کارت */
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 32px;
    background: linear-gradient(to top, rgba(5, 10, 25, 0.85) 0%, rgba(5, 10, 25, 0.4) 60%, transparent 100%);
}

.game-title {
    font-size: 34px;
    font-weight: 800;
    color: #fff;
    max-width: 340px;
    margin-bottom: 10px;
}

.game-description {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
    max-width: 60%;
    margin: 0 0 18px;
}

/* ردیف پایین: نظرات + دکمه‌ها */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reviews-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

.review-stars {
    color: #f5c542;
    font-size: 14px;
    letter-spacing: 2px;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* دکمه گرادیانی صورتی */
.btn-primary {
    padding: 14px 44px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, #e91e63 0%, #ff2d9b 100%);
    color: #fff;
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(233, 30, 99, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(233, 30, 99, 0.6);
}

/* دکمه گرد + */
.btn-plus {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: rgba(233, 30, 99, 0.9);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(233, 30, 99, 0.35);
    transition: transform 0.2s;
}

.btn-plus:hover {
    transform: translateY(-2px);
}

/* ==================== دکمه‌های قبلی / بعدی اسلایدر ==================== */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.slider-btn:hover {
    background: rgba(233, 30, 99, 0.85);
    border-color: #ff2d9b;
    color: #fff;
    box-shadow: 0 0 15px rgba(233, 30, 99, 0.5);
}

.prev-btn { left: 16px; }
.next-btn { right: 16px; }

/* ==================== نقاط راهنما (Dots) ==================== */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dots .dot.active {
    width: 28px;
    border-radius: 6px;
    background: #ff2d9b;
    box-shadow: 0 0 10px rgba(255, 45, 155, 0.6);
}

/* ==================== Carousel ==================== */
.game-carousel {
    margin-bottom: 10px;
    padding-top: 10px;
}

.game-carousel h3 {
    font-size: 1.8em;
    margin-bottom: 20px;
    font-weight: bold;
}

.carousel-items {
    display: flex;
    flex-wrap: wrap; 
    padding-bottom: 15px;
    gap: 20px;
    scroll-snap-type: x mandatory;
}

.carousel-items::-webkit-scrollbar { height: 8px; }
.carousel-items::-webkit-scrollbar-track { background: var(--card-background); border-radius: 4px; }
.carousel-items::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; }

.carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 120px;
    scroll-snap-align: start;
}

.carousel-item img {
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-item:hover img {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 240, 255, 0.3);
}

.carousel-item span {
    font-size: 0.9em;
    font-family: var(--font-main);
}

/* ==================== Game Grid ==================== */
.game-grid {
    margin-bottom: 40px;
    padding-top: 20px;
}

.game-grid h3 {
    font-size: 1.8em;
    margin-bottom: 20px;
    font-weight: bold;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.game-card.small-card {
    background-color: var(--card-background);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card.small-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 240, 255, 0.2);
}

.small-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card-info {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-info h4 {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.rating {
    color: var(--primary-color);
    font-weight: bold;
    font-family: var(--font-main);
}

/* ==================== Responsive ==================== */
@media (max-width: 1200px) {
    .featured-card { height: 400px; }
    .grid-wrapper { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .sidebar { width: 70px; }
    .main-content { margin-right: 70px; }
    .sidebar-nav a span,
    .sidebar-profile span { display: none; }
    .sidebar-logo img { max-width: 50px; }
    .sidebar-profile img { margin-left: 0; }
    .header { flex-wrap: wrap; justify-content: center; padding: 20px; }
    .tabs { order: 3; margin-top: 15px; width: 100%; justify-content: center; }
    .search-container { order: 2; width: 80%; margin: 0 10px 15px 10px; }
    .user-notifications { order: 1; margin-left: auto; margin-bottom: 15px; }
    .featured-card { height: 350px; }
    .game-title { font-size: 26px; }
    .game-description { max-width: 100%; }
    .grid-wrapper { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .featured-card { height: 320px; }
    .card-content { padding: 20px; }
    .card-logo { width: 70px; }
    .score-ring { width: 76px; height: 76px; }
    .btn-primary { padding: 10px 24px; }
    .grid-wrapper { grid-template-columns: repeat(2, 1fr); }
    .small-card img { height: 140px; }
}

@media (max-width: 480px) {
    .sidebar {
        display: none;
    }
    .main-content {
        margin-right: 0;
        padding: 15px;
    }
    .header {
        padding-bottom: 15px;
    }
    .tab {
        font-size: 1em;
        margin-left: 15px;
    }
    .featured-card {
        height: 380px;
    }
    .card-content {
        padding: 15px;
    }
    .game-title {
        font-size: 22px;
    }
    .game-description {
        font-size: 12px;
        max-width: 100%;
        margin-bottom: 12px;
    }
    .card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .btn-primary {
        font-size: 0.9em;
        padding: 10px 18px;
    }
    .btn-plus {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .game-carousel h3, 
    .game-grid h3 {
        font-size: 1.5em;
    }
    .grid-wrapper {
        grid-template-columns: 1fr;
    }
    .small-card img {
        height: 180px;
    }
}


/* css modal enter user */
/* پس‌زمینه تیره و مات پشت مودال */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* نمایش مودال هنگام فعال شدن */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* کارت مودال */
.modal-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #11141d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 255, 170, 0.1);
    direction: rtl;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-card {
    transform: translateY(0) scale(1);
}

/* دکمه بستن */
.modal-close {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    color: #8a8f9d;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #fff;
}

/* هدر مودال */
.modal-header h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #fff;
}

.modal-header p {
    margin: 0 0 20px;
    font-size: 13px;
    color: #7b8293;
}

/* فیلدهای ورودی */
.form-group {
    margin-bottom: 16px;
    text-align: right;
}

.form-group label {
    display: block;
    font-size: 12px;
    color: #a0a6b5;
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    background: #191e2b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    border-color: #00ffaa;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.25);
}

/* گزینه‌ها (مرا به خاطر بسپار و فراموشی) */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 20px;
    color: #8a8f9d;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.forgot-link {
    color: #00ffaa;
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* دکمه ارسال */
.btn-submit {
    width: 100%;
    padding: 12px;
    background: #00ffaa;
    color: #0c1017;
    font-weight: bold;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s, filter 0.2s;
}

/* دکمه ارسال ورود */
.btn-submit {
    width: 100%;
    padding: 12px;
    background: #00ffaa;
    color: #0c1017;
    font-weight: bold;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-submit:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 170, 0.35);
}

.btn-submit:active {
    transform: translateY(0);
}

/* فوتر مودال (لینک ثبت‌نام) */
.modal-footer {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: #7b8293;
}

.modal-footer a {
    color: #00ffaa;
    text-decoration: none;
    font-weight: 600;
}

.modal-footer a:hover {
    text-decoration: underline;
}
/* end css enter user */
/* css table */
/* ظرف اصلی جدول */
.table-container {
    background: rgba(18, 22, 34, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 10px;
    margin: 15px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    direction: rtl;
    font-family: inherit;
    color: #e2e8f0;
  }
  
  .table-header-title h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    border-right: 4px solid #7c3aed; /* یا رنگ تم داشبورد شما */
    padding-right: 12px;
  }
  
  .responsive-table-wrapper {
    width: 100%;
    overflow-x: hidden;
  }
  
  /* ساختار جدول دسکتاپ */
  .gaming-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    text-align: right;
  }
  
  .gaming-table th {
    padding: 14px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .gaming-table tbody tr {
    background: rgba(30, 36, 53, 0.5);
    transition: all 0.25s ease-in-out;
  }
  
  .gaming-table tbody tr:hover {
    background: rgba(45, 53, 77, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
  }
  
  .gaming-table td {
    padding: 16px 18px;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  
  .gaming-table td:first-child {
    border-radius: 0 10px 10px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
  }
  
  .gaming-table td:last-child {
    border-radius: 10px 0 0 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.04);
  }
  
  /* برچسب‌ها و نشانگرها */
  .badge-software {
    background: rgba(124, 58, 237, 0.15);
    color: #a78bfa;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    font-weight: 500;
    font-size: 0.82rem;
  }
  
  .status-active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    font-size: 0.8rem;
  }
  
  .status-warning {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    font-size: 0.8rem;
  }
  
  /* حالت واکنش‌گرا (موبایل و تبلت‌های کوچک) */
  @media (max-width: 768px) {
    .gaming-table thead {
      display: none; /* مخفی کردن هدر جدول */
    }
  
    .gaming-table, 
    .gaming-table tbody, 
    .gaming-table tr, 
    .gaming-table td {
      display: block;
      width: 100%;
    }
  
    .gaming-table tbody tr {
      margin-bottom: 16px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 8px 12px;
    }
  
    .gaming-table td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 8px;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
  
    .gaming-table td:last-child {
      border-bottom: none;
      border-radius: 0;
    }
  
    .gaming-table td:first-child {
      border-radius: 0;
    }
  
    /* نمایش عنوان ستون در موبایل با data-label */
    .gaming-table td::before {
      content: attr(data-label);
      font-weight: 600;
      color: #94a3b8;
      font-size: 0.82rem;
    }
  }
  /* end table  */
  /* css tab */
  /* مخفی/نمایان کردن تب‌ها */
.tab-pane {
    display: none;
    animation: fadeInTab 0.3s ease-in-out;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* استایل فرم ثبت‌نام شبیه تم داشبورد */
.registration-section {
    max-width: 850px;
    margin: 20px auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.85rem;
    color: #94a3b8;
}

.form-group input,
.form-group select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}

.form-group select option {
    background: #1e2435;
    color: #fff;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}

.form-actions {
    margin-top: 25px;
    text-align: left;
}

.btn-submit {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border: none;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.4);
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}
/* end css tab */
/* css massage */
.msg-success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.msg-error {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 15px;
}
/* end css massge */
/* style new customer aanimation */
@keyframes rowGlow {
    0% { background: rgba(124, 58, 237, 0.4); transform: scale(1.01); }
    100% { background: transparent; transform: scale(1); }
}

.new-row-highlight {
    animation: rowGlow 2s ease-out;
}
/* end style new customer aanimation */
/* ==================== Icons ==================== */
.icon {
    display: inline-block;
    width: 24px; /* Default icon size */
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-crown-logo {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5 L8 9 L12 4 L16 9 L20 5 L19 14 C19 18 16 20.5 12 20.5 C8 20.5 5 18 5 14 Z"/><path d="M9 14.5 C10 15.8 14 15.8 15 14.5"/></svg>');
}
.icon-home { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M10 20v-6h4v6h5v-8h3L11 3 2 12h3v8z"/></svg>'); }
.icon-star { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>'); }
.icon-search { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 17 9.5 6.5 6.5 0 1 0 10.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>'); }
.icon-library { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 6h18v2H4zm0 8h18v2H4zm0 8h18v2H4z"/></svg>'); }
.icon-settings { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19.43 12.98c.04.32.07.64.07.98s-.03.66-.07.98l2.11 1.65c.19.15.24.42.12.64l-2 3.46c-.09.17-.27.27-.46.27l-2.49-1c-.71.53-1.47.97-2.29 1.31l-.69 2.46c-.05.2-.18.33-.38.33h-4c-.2 0-.33-.13-.38-.33l-.69-2.46c-.82-.34-1.58-.78-2.29-1.31l-2.49 1c-.19 0-.37-.1-.46-.27l-2-3.46c-.12-.22-.07-.49.12-.64l2.11-1.65c-.04-.32-.07-.65-.07-.98s.03-.66.07-.98l-2.11-1.65c-.19-.15-.24-.42-.12-.64l2-3.46c.09-.17.27-.27.46-.27l2.49 1c.71-.53 1.47-.97 2.29-1.31l.69-2.46c.05-.2.18-.33.38-.33h4c.2 0 .33.13.38.33l.69 2.46c.82.34 1.58.78 2.29 1.31l2.49-1c.19 0 .37.1.46.27l2 3.46c.12.22.07.49-.12.64l-2.11 1.65zM12 15.5c-3.03 0-5.5-2.47-5.5-5.5s2.47-5.5 5.5-5.5 5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5z"/></svg>'); }
.icon-bell { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5S10.5 3.17 10.5 4v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>'); }
.icon-search-magnifier { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 17 9.5 6.5 6.5 0 1 0 10.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>'); }
.icon-login { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>');}
.icon-logout {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>');}
.icon-power {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="crimson" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/></svg>');}

/* css me */
.text-light{color: var(--text-color);}
.text-danger{color: var(--primary-color);}
.text-success{color: var(--success-color);}
.no-dec{text-decoration: none;}
/* end css me */