/* =========================
   GLOBAL
========================= */

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

body {
    font-family: var(--font-primary);
    background: #030616; /* فیکس شدن روی مشکی جذاب شما */
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =========================
   APP LAYOUT
========================= */

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #030616; /* حفظ دقیق رنگ مشکی پلتفرم */
}

/* ==========================================================================
   PREMIUM CHROMIUM & GLASSMORPHISM HEADER (THE SYSTEM CORE)
   ========================================================================== */

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
   
    /* مدیریت safe-area */
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(56px + env(safe-area-inset-top, 0px));
   
    border-radius: 0 0 20px 20px;
   
    padding-left: 20px;
    padding-right: 20px;
   
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    /* گرادیان */
    background: linear-gradient(
        180deg,
        rgba(3, 6, 22, 0.98) 0%,
        rgba(15, 23, 50, 0.92) 50%,
        rgba(20, 27, 54, 0.85) 100%
    );

    /* افکت شیشه‌ای */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);

    /* بردر فقط پایین (بالا کاملاً حذف شد) */
    border-top: none;           /* ← این خط اضافه شد */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-left: none;
    border-right: none;

    /* سایه */
    box-shadow:
        0 8px 32px -4px rgba(0, 0, 0, 0.7),
        0 4px 16px -2px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03);
   
    transition: all 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}


/* محتوای اصلی */
.main-content {
    padding-top: calc(76px + env(safe-area-inset-top, 0px)) !important;
}

/* استایل لوگو: نقره‌ای براق و آینده‌نگرانه */
.header-logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #ffffff 30%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: system-ui, -apple-system, sans-serif;
}

/* کانتینر دکمه‌های اکشن */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* دکمه‌های هدر: کپسول‌های گلاسی مینی‌مال با رفلکس نقره‌ای */
.header-actions button, 
.menu-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(226, 232, 240, 0.06);
    color: #e2e8f0; /* نقره‌ای روشن */
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 0;
}

/* استایل اختصاصی پدینگ و سایز برای دکمه منو و آیکون SVG آن */
.menu-btn {
    width: 40px;  
    height: 40px;
    font-size: 20px;
}

.menu-btn svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

/* افکت فوق‌العاده جذاب هوور دکمه‌ها */
.header-actions button:hover, 
.menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.menu-btn:hover svg {
    transform: scale(1.05);
}

.header-actions button:active, 
.menu-btn:active {
    transform: translateY(1px);
}

/* ==========================================================================
   POPUPS & DROP DOWNS (MATCHING THE CHROMIUM GLASS THEME)
   ========================================================================== */

/* ==========================================================================
   POPUPS & DROP DOWNS (PERFECTLY ALIGNED)
   ========================================================================== */

/* پاپ‌آپ‌های زبان و تم کاملاً هماهنگ با شیشه تاریک و لبه‌های نقره‌ای */
.language-popup, 
.theme-popup {
    display: none;
    position: absolute;
    top: 62px;
    background: rgba(11, 17, 36, 0.9); /* شیشه تیره با غلظت بیشتر برای خوانایی بهتر متن */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.08);
    border-radius: 14px;
    padding: 6px;
    min-width: 120px; /* اندازه بهینه برای متقارن شدن زیر دکمه‌ها */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    animation: popupAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* پوزیشن‌دهی دقیق و تراز شده با دکمه‌های بالا */
.language-popup { right: 112px; } /* تنظیم فاصله برای قرارگیری دقیق زیر دکمه زمین */
.theme-popup { right: 64px; }    /* تنظیم فاصله برای قرارگیری دقیق زیر دکمه تم */

.language-popup.active, 
.theme-popup.active {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* دکمه‌های داخل پاپ‌آپ: کاملاً وسط‌چین، خوانا و مدرن */
.language-popup button, 
.theme-popup button {
    background: transparent;
    border: none;
    color: #cbd5e1; /* نقره‌ای روشن‌تر برای کنتراست بهتر روی شیشه */
    padding: 10px 16px;
    text-align: center; /* متن‌ها کاملاً سنتر و متقارن شدند */
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600; /* وزین‌تر شدن فونت برای خوانایی بالا */
    font-family: system-ui, -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

/* هوور دکمه‌های درون پاپ‌آپ: افکت شیشه‌ای زنده */
.language-popup button:hover, 
.theme-popup button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff; /* سفید خالص درخشان موقع هوور */
    transform: scale(1.02); /* بزرگ‌نمایی بسیار مینی‌مال به جای جابجایی به سمت راست */
}

/* انیمیشن باز شدن پاپ‌آپ‌ها با جابجایی نرم از پایین به بالا */
@keyframes popupAppear {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* استایل دهی به آیکون جدید دکمه تم */
.theme-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* افکت هوور اختصاصی: یک چرخش مینی‌مال و جذاب نوری */
.theme-btn:hover svg {
    transform: scale(1.05) rotate(15deg);
    color: #ffffff;
}

/* استایل دهی به آیکون جدید دکمه زبان */
/*.lang-btn svg {*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);*/
/*}*/

/* افکت هوور جذاب: یک اسکیل بسیار مینی‌مال و نرم */
.lang-btn:hover svg {
    transform: scale(1.08);
    color: #ffffff;
}

/* ==========================================================================
   HAMBURGER MENU OVERLAY & MAIN MENU
   ========================================================================== */

/* کلاس اصلاح شده که از تداخل و ایجاد فاصله هدر جلوگیری میکند */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1, 3, 10, 0.6); 
    backdrop-filter: blur(8px);
    z-index: 1500;
    display: none;
}

/* منوی همبرگری کپسولی لوکس روی هوا */
.hamburger-menu {
    display: none;
    position: fixed;
    top: 80px;
    left: 16px;
    right: 16px;
    z-index: 2000;
    
    background: rgba(8, 12, 32, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    
    border: 1px solid rgba(226, 232, 240, 0.09);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
        
    transform: translateY(-15px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hamburger-menu.active {
    display: block;
    transform: translateY(0);
    opacity: 1;
}

/* محتوای اصلی اپلیکیشن */
.app-content {
    flex: 1;
    padding: 24px;
    padding-bottom: 100px;
    overflow-y: auto;
}

/* ==========================================================================
   INSIDE HAMBURGER MENU STYLES (PREMIUM FINISHING)
   ========================================================================== */

.profile-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(226, 232, 240, 0.06);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.profile-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b; 
    margin-bottom: 10px;
}

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

.profile-name {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

.signin-btn {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    border: none;
    color: #030616; 
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.signin-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.18);
    background: #ffffff;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.menu-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(226, 232, 240, 0.04);
    border-radius: 14px;
    padding: 18px 14px;
    color: #cbd5e1; 
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.menu-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(226, 232, 240, 0.15);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   KICKPREDICT HOME SLIDER REINFORCEMENT
   ========================================================================== */

.home-slider {
    width: 100%;
    overflow-x: auto;
    padding: 4px 0 16px 0;
    scroll-snap-type: x mandatory; /* اسکرول مگنتی و نرم روی موبایل */
    scroll-behavior: smooth;
}

.home-slider::-webkit-scrollbar {
    display: none; /* مخفی کردن اسکرول‌بار زشت */
}

.slider-track {
    display: flex;
    gap: 14px;
    padding: 0 4px;
}

/* هماهنگ‌سازی دایوهای اصلی اسلاید با ساختار کارت‌های شیشه‌ای لوکس */
.slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    margin-top: calc(46px + env(safe-area-inset-top, 0px)) !important;
}

/* استایل دهی به ردیف جداکننده VS */
.team-row-divider {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    color: #64748b;
    opacity: 0.5;
    text-align: center;
    margin: 2px 0;
    letter-spacing: 0.5px;
}

/* ریسپانسیو و خوانایی بهتر زمان بازی */
.match-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.team-score {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ==========================================================================
   PREMIUM MATCH SLIDER & MOTIF CARDS
   ========================================================================== */

.match-slider-container {
    width: 100%;
    overflow-x: auto;
    /*padding-bottom: 8px;*/
    scroll-behavior: smooth;
}

/* حذف اسکرول‌بار پیش‌فرض برای حفظ تمیزی UI */
.match-slider-container::-webkit-scrollbar {
    display: none;
}

.match-slider {
    display: flex;
    gap: 16px;
    padding: 4px 2px;
}

/* ==========================================================================
   PREMIUM FOOTBALL MATCH CARD - Ultimate Version
   ========================================================================== */

.premium-match-card {
    position: relative;
    min-width: 290px;
    max-width: 310px;
    height: 182px;
    border-radius: 22px;
    padding: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0e1f 0%, #111d3a 45%, #1a2547 100%);
    border: 1px solid rgba(100, 170, 255, 0.18);
    box-shadow: 
        0 18px 40px rgba(0, 0, 0, 0.6),
        0 6px 18px rgba(0, 0, 0, 0.4),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.1),
        inset 0 -3px 0 rgba(0, 0, 0, 0.5);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* ====================== BACKGROUND LAYERS ====================== */

/* 1. زمین چمن نئونی */
.premium-match-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, 
        rgba(0, 255, 130, 0.045) 0%, 
        rgba(0, 210, 100, 0.08) 45%, 
        rgba(0, 255, 130, 0.035) 100%);
    z-index: 1;
}

/* 2. خطوط زمین فوتبال */
.premium-match-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index: 2;
    opacity: 0.9;
}

/* 3. پترن موجود در HTML (بهبود یافته) */
.card-pattern-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.11;
    background-image:
        radial-gradient(circle at 25% 32%, #fff 1.1px, transparent 2px),
        radial-gradient(circle at 78% 65%, #fff 0.9px, transparent 2px),
        linear-gradient(40deg, transparent 48%, rgba(255,255,255,0.12) 50%, transparent 52%);
    background-size: 68px 68px, 92px 92px, 36px 36px;
    z-index: 3;
    pointer-events: none;
}

/* 4. Glow نئونی استادیوم */
.premium-match-card::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -35%;
    width: 80%;
    height: 65%;
    background: radial-gradient(circle, rgba(80, 170, 255, 0.22) 0%, transparent 65%);
    z-index: 4;
    filter: blur(12px);
    opacity: 0.85;
}

/* 5. Overlay تیره پایین برای خوانایی */
.premium-match-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 28%,
        rgba(10, 14, 31, 0.65) 65%,
        rgba(10, 14, 31, 0.92) 88%
    );
    z-index: 5;
}

/* ====================== محتوا ====================== */
.match-header,
.match-content,
.prediction-buttons {
    position: relative;
    z-index: 10;
}

.match-header.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* لیگ */
.league-info {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #a3bffa;
    font-weight: 500;
    font-size: 11.5px;
}

.league-icon {
    font-size: 17px;
    filter: drop-shadow(0 0 4px currentColor);
}

.match-status {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3d8;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.1);
}

/* تیم‌ها */
.team-names {
    margin: 10px 0 14px;
    text-align: center;
}

.team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 7px 0;
    font-size: 15.5px;
    font-weight: 600;
    color: #e2e8f0;
}

.team-name {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-score {
    font-weight: 700;
    color: #60a5fa;
    min-width: 32px;
    text-align: right;
}

.team-row-divider {
    color: #64748b;
    font-size: 13px;
    margin: 4px 0;
    font-weight: 500;
}

/* دکمه‌های پیش‌بینی */
.prediction-buttons.odds-row {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.odd-button {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 6px 4px;
    transition: all 0.3s ease;
    color: white;
}

.odd-button:hover {
    background: rgba(74, 148, 255, 0.18);
    border-color: #60a5fa;
    transform: translateY(-1px);
}

.odd-label {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 2px;
}

.odd-value {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #bae6fd;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR MATCH CARD
   ========================================================================== */

[data-theme="light"] .premium-match-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(244, 246, 250, 0.8) 100%);
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 
        0 10px 30px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .card-pattern-overlay {
    opacity: 0.015; /* پترن در لایت‌مود ملایم‌تر می‌شود تا چشمان کاربر اذیت نشود */
    background-image: 
        radial-gradient(circle at 80% 20%, #000000 0%, transparent 40%),
        linear-gradient(45deg, transparent 45%, #000000 45%, #000000 55%, transparent 55%);
}

[data-theme="light"] .odd-button {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .odd-button:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.1);
}

/* ==========================================================================
   LEAGUE FILTERS & CHIPS (PREMIUM COMPACT)
   ========================================================================== */

.league-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 4px;
    margin-bottom: 16px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* مخفی کردن اسکرول‌بار */
.league-filters::-webkit-scrollbar {
    display: none;
}

.league-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 17px;
    border-radius: 9999px;           /* کاملاً گرد و مدرن */
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Glassmorphism ملایم و شیک */
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #a3bffa;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Hover */
.league-chip:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.18);
    color: #e0e7ff;
    transform: translateY(-1.5px);
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Active State - هماهنگ با تم آبی رویال */
.league-chip.active {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    border-color: rgba(147, 197, 253, 0.5);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 
        0 6px 18px rgba(59, 130, 246, 0.35),
        0 2px 8px rgba(30, 64, 175, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transform: scale(1.04);
}

/* افکت نورانی ملایم روی حالت فعال */
.league-chip.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.25) 0%,
        transparent 50%
    );
    border-radius: 9999px;
    pointer-events: none;
    opacity: 0.3;
}

/* آیکون داخل چیپ */
.league-chip .league-icon {
    font-size: 15px;
    line-height: 1;
    opacity: 0.9;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR LEAGUE FILTERS
   ========================================================================== */

[data-theme="light"] .league-chip {
    /* حالت عادی در لایت‌مود: کپسول‌های سفید-طوسی برفی */
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.04);
    color: #475569;
}

[data-theme="light"] .league-chip:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

/* حالت فعال در لایت‌مود: کپسول سرمه‌ای عمیق لوکس (کنتراست وارونه) */
[data-theme="light"] .league-chip.active {
    background: #0f172a; /* سرمه‌ای تیره متناسب با لوگو و دکمه ساین‌این */
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* ==========================================================================
   PREMIUM MATCH NAVIGATION BAR
   ========================================================================== */

.match-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    margin-bottom: 20px;
    border-radius: 18px;
    
    /* گرادیان عمیق و لوکس فوتبالی */
    background: linear-gradient(
        160deg,
        rgba(15, 23, 50, 0.85) 0%,
        rgba(10, 15, 38, 0.92) 50%,
        rgba(3, 6, 22, 0.95) 100%
    );
    
    /* بوردر شیشه‌ای ظریف */
    border: 1px solid rgba(148, 163, 184, 0.12);
    
    /* سایه و عمق پرمیوم */
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* اگر داخلش دکمه یا تب دارید */
.match-navigation button,
.match-navigation .nav-item {
    transition: all 0.3s ease;
}

.match-navigation button:hover,
.match-navigation .nav-item.active {
    color: #60a5fa;
}

/* استایل عمومی دکمه‌های مینی‌مال ناوبری */
.live-btn,
.calendar-btn,
.date-navigation button {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: #e2e8f0;
}

.live-btn {
    display: flex;
    align-items: center;
    gap: 6px; /* فاصله یکدست بین نقطه قرمز، آیکون و متن */
    padding: 6px 10px;
}

/* مدیریت آیکون وکتور نقره‌ای */
.live-btn svg {
    transition: transform 0.25s ease, filter 0.25s ease;
}

.live-btn span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #cbd5e1; /* رنگ نقره‌ای هماهنگ با دیزاین سیستم کپسول‌ها */
    transition: color 0.25s ease;
}

/* ==========================================================
   افکت‌های هوور زنده (Hover Effects)
   ========================================================== */
.live-btn:hover span {
    color: #ef4444; /* تغییر رنگ متن به قرمز زنده */
}

.live-btn:hover svg {
    transform: scale(1.05);
    /* انداختن یک رفلکس نوری بسیار محو پشت خطوط نقره‌ای آیکون در زمان هوور */
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}


/* ==========================================================
   ۲. ناوبری تاریخ (دیروز، امروز، فردا)
   ========================================================== */
.date-navigation {
    display: flex;
    align-items: center;
    gap: 12px;
}

.current-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;     
    margin: 0 auto;         
    flex: 1;
}

.prev-day,
.next-day {
    font-size: 18px;
    color: var(--text-secondary);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.date-navigation button:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

/* ==========================================================
   ۳. دکمه تقویم (آیکون خطی گلاسی جدید)
   ========================================================== */
.calendar-btn {
    /* تبدیل دکمه تقویم به یک کپسول کریستالی مینی‌مال شبیه هدر */
    /*background: rgba(255, 255, 255, 0.03);*/
    /*border: 1px solid rgba(226, 232, 240, 0.06);*/
    /*color: #e2e8f0; */
    
    width: 38px;
    height: 38px;
    /*border-radius: 10px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    
    /*box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);*/
}

/* استایل اندازه خود SVG */
.calendar-btn svg {
    width: 19px;
    height: 19px;
    transition: transform 0.3s ease;
}

/* افکت هوور جذاب همگام با دکمه‌های هدر */
.calendar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff; /* تغییر رنگ آیکون به سفید درخشان */
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.calendar-btn:hover svg {
    transform: rotate(5deg) scale(1.05); /* یک چرخش و بزرگ‌نمایی بسیار مینی‌مال */
}

/* ==========================================================================
   MATCH LIST & LEAGUE SECTIONS (COMPACT & PRESTIGE)
   ========================================================================== */

.league-section {
    margin-bottom: 20px;
}

.league-header {
    margin-bottom: 10px;
    padding: 0 4px;
}

.league-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.league-logo {
    width: 24px; /* مینی‌مال‌تر شدن لوگوی لیگ */
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(226, 232, 240, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.league-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary); /* استفاده از متغیر برای خوانایی لایت‌مود */
}

/* ==========================================================================
   KICKPREDICT CENTERED MATCH CARD - MINIMAL (Matched with Navigation)
   ========================================================================== */

.match-card {
    background: linear-gradient(
        160deg,
        rgba(15, 23, 50, 0.85) 0%,
        rgba(10, 15, 38, 0.92) 50%,
        rgba(3, 6, 22, 0.95) 100%
    );
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4);
    
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

/* Hover - هماهنگ و ملایم */
.match-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(148, 163, 184, 0.18);
}

/* محتوای داخل کارت */
.match-card > * {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------------------------
   ردیف اول: تقارن نام تیم‌ها و اسکوربرد مرکزی
   ---------------------------------------------------------- */
.match-teams-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.team-block {
    flex: 1;
    display: flex;
    align-items: center;
}

.team-home {
    justify-content: flex-start;
    text-align: left;
}

.team-away {
    justify-content: flex-end;
    text-align: right;
}

.team-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* در صورت بسیار طولانی شدن نام، به صورت سه نقطه نمایش داده می‌شود */
}

/* بخش مرکزی نتیجه */
.match-score-center {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-divider {
    font-size: 12px;
    font-weight: 500;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 10px;
    border-radius: 6px;
}

/* ----------------------------------------------------------
   ردیف دوم: دیت، تایم و دکمه ناوبری آمار
   ---------------------------------------------------------- */
.match-meta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(226, 232, 240, 0.04);
    padding-bottom: 10px;
}

.meta-center-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.match-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #94a3b8);
}

.stats-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.stats-btn svg {
    width: 14px;
    height: 14px;
}

.stats-btn:hover {
    color: #3B82F6;
    transform: scale(1.1);
}

/* ----------------------------------------------------------
   ردیف سوم: دکمه‌های پردیکشن - نسخه رویال مدرن
   ---------------------------------------------------------- */

.match-predictions-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.prediction-options {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 280px;
}

.prediction-options button {
    flex: 1;
    height: 42px;                    /* کمی ارتفاع بیشتر برای حس بهتر */
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;                 /* خواناتر از ۱۰ پیکسل */
    font-weight: 600;
    border-radius: 16px;
    letter-spacing: -0.2px;
    
    /* گرادیان آبی رویال لوکس و هماهنگ با تم */
    background: linear-gradient(
        135deg,
        #1e40af 0%,
        #1e3a8a 45%,
        #172554 100%
    );
    
    border: 1px solid rgba(147, 197, 253, 0.25);
    color: #ffffff;
    
    box-shadow: 
        0 6px 14px rgba(30, 64, 175, 0.3),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* Hover - بسیار جذاب و درخشان */
.prediction-options button:hover {
    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #1d4ed8 45%,
        #1e40af 100%
    );
    border-color: rgba(165, 214, 255, 0.45);
    color: #f0f9ff;
    
    box-shadow: 
        0 8px 20px rgba(37, 99, 235, 0.45),
        0 0 12px rgba(59, 130, 246, 0.5),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.35);
    
    transform: translateY(-2px);
}

/* Active / Pressed */
.prediction-options button:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 
        0 3px 8px rgba(30, 64, 175, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* حالت انتخاب شده (اگر بعداً نیاز داشتید) */
.prediction-options button.selected {
    background: linear-gradient(
        135deg,
        #22d3ee 0%,
        #3b82f6 100%
    );
    border-color: #67e8f9;
    color: #0f172a;
    box-shadow: 
        0 0 15px rgba(103, 232, 249, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   SHOW MORE BUTTON - PREMIUM ROYAL BLUE
   ========================================================================== */

.show-more-container {
    display: flex;
    justify-content: center;
    margin: 20px 0 28px;
}

.show-more-btn {
    padding: 12px 32px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 9999px;           /* کاملاً کپسولی و مدرن */
    letter-spacing: -0.3px;
    
    /* گرادیان رویال آبی لوکس و عمیق‌تر */
    background: linear-gradient(
        135deg,
        #1e40af 0%,
        #1d4ed8 35%,
        #1e3a8a 65%,
        #172554 100%
    );
    
    border: 1px solid rgba(165, 214, 255, 0.3);
    color: #ffffff;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    /* سایه و عمق پرمیوم */
    box-shadow: 
        0 6px 16px rgba(30, 64, 175, 0.35),
        0 2px 6px rgba(15, 23, 42, 0.3),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Effect - بسیار جذاب و درخشان */
.show-more-btn:hover {
    background: linear-gradient(
        135deg,
        #2563eb 0%,
        #3b82f6 35%,
        #1e40af 70%,
        #1e3a8a 100%
    );
    border-color: rgba(186, 230, 253, 0.5);
    color: #f0f9ff;
    
    box-shadow: 
        0 10px 24px rgba(37, 99, 235, 0.45),
        0 4px 12px rgba(59, 130, 246, 0.3),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.4);
    
    transform: translateY(-3px);
}

/* Active State */
.show-more-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 
        0 3px 8px rgba(30, 64, 175, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* افکت نورانی داخل دکمه (برای حس لوکس) */
.show-more-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 40%;
    height: 80%;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: all 0.5s ease;
    border-radius: 9999px;
}

.show-more-btn:hover::before {
    opacity: 1;
    left: 60%;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (PERFECT CONTRAST FIX)
   ========================================================================== */

[data-theme="light"] .match-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.015);
}

[data-theme="light"] .match-card:hover {
    background: #f8fafc;
}

[data-theme="light"] .prediction-options button {
    background: #f1f5f9; /* حل مشکل مربع‌های بزرگ سفید در لایت‌مود */
    border: 1px solid rgba(15, 23, 42, 0.05);
    color: #0f172a;
}

[data-theme="light"] .prediction-options button:hover {
    background: #e2e8f0;
    color: #0f172a;
}

[data-theme="light"] .show-more-btn {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .show-more-btn:hover {
    background: rgba(15, 23, 42, 0.06);
}

/* ==========================================================================
   PREMIUM BOTTOM NAVIGATION - FIXED & POLISHED
   ========================================================================== */

.bottom-nav {
    height: var(--bottom-nav-height, 74px);
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    
    border-radius: 24px 24px 0 0;
    
    background: linear-gradient(
        180deg,
        rgba(15, 23, 50, 0.92) 0%,
        rgba(7, 10, 25, 0.96) 100%
    );
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    
    box-shadow: 
        0 -12px 35px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    
    padding-bottom: env(safe-area-inset-bottom, 12px);
}

/* آیتم‌های نوار */
.bottom-nav .nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;           /* وسط‌چین عمودی بهتر */
    gap: 4px;
    padding: 20px 12px 20px;
    cursor: pointer;
    position: relative;
    color: #64748b;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 60px;
}

/* رنگ SVGها (مهم‌ترین فیکس) */
.bottom-nav .nav-item svg {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
    fill: currentColor;           /* فیکس رنگ */
    stroke: currentColor;         /* فیکس رنگ stroke */
}

.bottom-nav .nav-item span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.2px;
    margin-top: 2px;
}

/* Hover */
.bottom-nav .nav-item:hover {
    color: #94a3b8;
}

.bottom-nav .nav-item:hover svg {
    transform: translateY(-3px) scale(1.08);
}

/* ==========================================================
   ACTIVE STATE - آبی نئونی
   ========================================================== */
/*.bottom-nav .nav-item.active {*/
/*    color: #60a5fa;*/
/*}*/

.bottom-nav .nav-item.active svg {
    transform: scale(1.12) translateY(-2px);
    filter: drop-shadow(0 3px 10px rgba(96, 165, 250, 0.6));
}

.bottom-nav .nav-item.active span {
    font-weight: 700;
    color: #bae6fd;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR BOTTOM NAV
   ========================================================================== */

[data-theme="light"] .bottom-nav {
    /* حالت لایت‌مود: شیشه برفی فوق‌العاده شفاف سفید یخی */
    background: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 
        0 -10px 30px rgba(15, 23, 42, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .nav-item {
    color: #64748b; /* طوسی ملایم در حالت غیرفعال */
}

[data-theme="light"] .nav-item:hover {
    color: #0f172a;
}

[data-theme="light"] .nav-item.active {
    color: #3B82F6; /* رنگ آبی برند برای دکمه فعال در لایت‌مود */
}

[data-theme="light"] .nav-item.active svg {
    filter: drop-shadow(0 2px 6px rgba(59, 130, 246, 0.25));
}

.profile-page{
    padding: 90px 20px 120px;
}

.pools-page{
    padding: 90px 20px 120px;
}

.invite-page{
    padding: 90px 20px 120px;
}

.rules-page{
    padding: 90px 20px 120px;
}

.support-page{
    padding: 90px 20px 120px;
}

.contact-page{
    padding: 90px 20px 120px;
}

.ranking-page{
    padding: 90px 20px 120px;
}

.wallet-page{
    padding: 90px 20px 120px;
}

.nav-item.active{
    opacity:1;
}

.nav-item{
    opacity:.6;
}