:root {
            --primary: #2f2f30;
            --primary-dark: #1d4ed8;
            --secondary: #64748b;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --light: #f8fafc;
            --dark: #1e293b;
            --gray: #94a3b8;
            --border: #e2e8f0;
            --radius: 0px;
            --shadow: 0 0px 0px rgba(0,0,0,0.1);
        }
        
        body, h1, h2, h3, p, a, span, li, button, input {
            font-family: 'Noto Sans Arabic', Arial, sans-serif !important;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .btno { 
            padding: 10px 20px; 
            background: var(--primary); 
            color: white; 
            border: none; 
            borders-radius: 8px; 
            cursor: pointer; 
            font-weight: 600; 
            display: inline-flex; 
            align-items: center; 
            gap: 8px; 
            font-size: 0.95rem;
            white-space: nowrap;
            text-decoration: none;
        }
        
        .btno:hover { 
            background: var(--primary-dark); 
            text-decoration: none;
        }
        
        .btno-secondary { 
            background: var(--secondary); 
        }
        
        .btno-export { 
            background: var(--success); 
        }
        
        .btno-save { 
            background: var(--warning); 
        }
        
        .btno-api { 
            background: var(--primary-dark); 
        }
        
        .header { 
            padding: 30px 0; 
            text-align: center; 
        }
        
        .header h1 { 
            font-size: 2.2rem; 
            margin-bottom: 10px; 
        }
        
        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .nav-bar { 
            
            padding: 15px; 
            borders-radius: var(--radius); 
            box-shadow: var(--shadow); 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap; 
            gap: 15px; 
            margin-bottom: 20px; 
        }
        
        .nav-section {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .date-input { 
            padding: 10px 15px; 
            border: 2px solid var(--border); 
            borders-radius: 8px; 
            font-size: 1rem;
        }
        
        .stats-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
            gap: 20px; 
            margin-bottom: 30px; 
        }
        
        .stat-card { 
            
            padding: 25px; 
            borders-radius: var(--radius); 
            box-shadow: var(--shadow); 
        }
        
        .main-grid { 
            display: grid; 
            grid-template-columns: 2.2fr 1fr; /* العمود الأيمن أصبح أعرض */
            gap: 20px; 
            margin-bottom: 0px; 
        }
        
        @media (max-width: 992px) {
            .main-grid { 
                grid-template-columns: 1fr; 
            }
        }
        
        .trends-table { 
            
            borders-radius: var(--radius); 
            overflow: hidden; 
            box-shadow: var(--shadow); 
        }
        
        .table-controls { 
            padding: 20px 25px; 
            
            border-bottom: 1px solid var(--border); 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            flex-wrap: wrap; 
            gap: 15px; 
        }
        
        .table-controls select, 
        .table-controls input { 
            padding: 8px 12px; 
            border: 1px solid var(--border); 
            borders-radius: 8px; 
            font-size: 0.95rem;
        }
        
        .table-header { 
            padding: 15px 25px; 
            
            display: flex; 
            justify-content: space-between; 
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        table { 
            width: 100%; 
            border-collapse: collapse; 
        }
        
        th { 
            padding: 15px; 
            
            text-align: right; 
            font-weight: 600; 
        }
        
        td { 
            padding: 0px; 
            border-bottom: 1px solid var(--border); 
            
        }
        
        tbody tr:hover { 
            background: #f8fafc; 
        }
        
        .trend-title a { 
            
            text-decoration: none; 
            font-weight: 600; 
        }
        
        .trend-title a:hover { 
        
        }
        
        .category-badge { 
            padding: 6px 12px; 
            borders-radius: 20px; 
            font-size: 0.85rem; 
            font-weight: 600; 
            display: inline-block;
        }
        
        .category-news { 
            background: rgba(37,99,235,0.1); 
            color: #2563eb;
        }
        
        .category-economy { 
            background: rgba(16,185,129,0.1); 
             
        }
        
        .category-sports { 
            background: rgba(245,158,11,0.1); 
            color: var(--warning); 
        }
        
        .category-entertainment { 
            background: rgba(239,68,68,0.1); 
             
        }
        
        .trend-indicator { 
            display: flex; 
            align-items: center; 
            gap: 5px; 
            font-weight: 600; 
        }
        
        .trend-up { 
             
        }
        
        .trend-down { 
             
        }
        
        .trend-stable { 
             
        }
        
        .search-count { 
            font-weight: 600; 
        }
        
        .image-status { 
            text-align: center; 
        }
        
        .has-image { 
             
            font-size: 1.2rem; 
        }
        
        .no-image-icon { 
             
            font-size: 1.2rem; 
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 20px;
            
            flex-wrap: wrap;
        }
        
        .pagination button { 
            padding: 8px 15px; 
            
            border: 1px solid var(--border); 
            borders-radius: 8px; 
            cursor: pointer; 
            font-size: 0.95rem;
        }
        
        .pagination button.active { 
            background: var(--primary); 
            color: white; 
            border: none; 
        }
        
        .pagination button:disabled { 
            opacity: 0.5; 
            cursor: not-allowed; 
        }
        
        .charts-section {
            
            borders-radius: var(--radius);
            padding: 25px;
            box-shadow: var(--shadow);
            margin-bottom: 30px;
        }
        
        .chart-container { 
            height: 275px; 
            margin-top: 20px; 
            position: relative;
        }
        
        h2 {
            font-weight: 600;
            font-size: 1.8rem;
            margin-bottom: 1rem;
            font-family: 'Noto Sans Arabic', sans-serif;
        }
        
        .categories-section { 
            
            borders-radius: var(--radius); 
            padding: 0px; 
            box-shadow: var(--shadow); 
        }
        
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .category-item { 
            display: flex; 
            align-items: center; 
            gap: 15px; 
            padding: 15px; 
            
            borders-radius: 10px; 
            cursor: pointer; 
            transition: all 0.3s ease;
        }
        
        .category-item:hover { 
            background: #e2e8f0; 
            transform: translateY(-3px);
        }
        
        .category-icon { 
            width: 50px; 
            height: 50px; 
            borders-radius: 12px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 1.4rem; 
            flex-shrink: 0;
        }
        
        .empty-state { 
            text-align: center; 
            padding: 60px 20px; 
             
            
        }
        
        .empty-state i { 
            font-size: 4rem; 
            margin-bottom: 20px; 
            color: var(--gray); 
        }
        
        .auto-Refreshs { 
            display: flex; 
            align-items: center; 
            gap: 10px; 
            flex-wrap: wrap;
        }
        
        .auto-Refreshs select { 
            padding: 8px 12px; 
            border: 1px solid var(--border); 
            borders-radius: 8px; 
        }
        
        .Refreshs-btno { 
            padding: 10px 20px; 
            background: var(--success); 
            color: white; 
            border: none; 
            borders-radius: 8px; 
            cursor: pointer; 
            font-weight: 600; 
        }
        
        .Refreshs-btno.off { 
            background: var(--danger); 
        }
        
        .trend-detail-card { 
            
            padding: 25px; 
            borders-radius: 12px; 
            box-shadow: var(--shadow); 
            display: grid; 
            grid-template-columns: 1fr; 
            gap: 20px; 
        }
        
        .trend-image { 
            max-width: 100%; 
            borders-radius: 12px; 
            box-shadow: var(--shadow); 
            height: auto;
        }
        
        .no-image { 
            
            height: 200px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 3rem; 
            color: var(--gray); 
            borders-radius: 12px; 
        }
        
        .trend-detail-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        @media (max-width: 768px) {
            .trend-detail-layout {
                grid-template-columns: 1fr;
            }
        }
        
        .trend-history-section {
            
            padding: 25px;
            borders-radius: 12px;
            box-shadow: var(--shadow);
        }
        
        .trend-image-section {
            
            padding: 25px;
            borders-radius: 12px;
            box-shadow: var(--shadow);
        }
        
        .trend-info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        @media (max-width: 768px) {
            .trend-info-grid {
                grid-template-columns: 1fr;
            }
        }
        
.info-card {
    padding: 15px;
    borders-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.15); /* بوردر أسود خفيف */
}

        
        .info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .info-label {
            font-size: 0.9rem;
            
            margin-bottom: 8px;
            display: block;
        }
        
        .info-value {
            font-size: 1.2rem;
            font-weight: 700;
            
        }
        
        .breadcrumb {
            margin: 0px 0;
            font-size: 0.9rem;
            
            padding: 0px 0px;
            
            borders-radius: 8px;
        }
        
        .breadcrumb a {
        
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        
        .overview-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
            gap: 20px; 
            margin-bottom: 30px; 
        }
        
        .overview-card { 
            padding: 10px; 
            borders-radius: 12px; 
            box-shadow: var(--shadow); 
            color: white; 
            text-align: center; 
            transition: all 0.3s ease;
        }
        
        .overview-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .overview-card h3 { 
            font-size: 1.2rem; 
            margin-bottom: 15px; 
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .overview-card .stat {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .overview-card .label {
            font-size: 1rem;
            opacity: 0.9;
        }
        
        .card-daily { 
            background: var(--primary); 
        }
        
        .card-weekly { 
            background: var(--success); 
        }
        
        .card-monthly { 
            background: var(--warning); 
        }
        
        .card-top { 
            background: var(--danger); 
        }
        
        .api-description {
            
            padding: 25px;
            borders-radius: 12px;
            margin-top: 30px;
            border-right: 4px solid var(--primary);
            max-height: 400px;
            overflow-y: auto;
            line-height: 1.6;
        }
        
        .api-description-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .api-description h3 {
            
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }
        
        .api-status {
            font-size: 0.9rem;
            padding: 5px 10px;
            borders-radius: 20px;
            font-weight: 600;
        }
        
        .status-success { 
            background: rgba(16,185,129,0.1); 
             
        }
        
        .status-warning { 
            background: rgba(245,158,11,0.1); 
            color: var(--warning); 
        }
        
        .status-error { 
            background: rgba(239,68,68,0.1); 
             
        }
        
        .mobile-only {
            display: none;
        }
        
        
        @media (max-width: 768px) {
            .mobile-only {
                display: block;
            }
            
            .desktop-only {
                display: none;
            }
            
            .container {
                padding: 0 10px;
            }
            
            .header h1 {
                font-size: 1.8rem;
            }
            
            .nav-bar {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            
            .nav-section {
                width: 100%;
                justify-content: center;
            }
            
            .main-grid {
                gap: 15px;
            }
            
            .table-controls {
                flex-direction: column;
                gap: 10px;
            }
            
            .table-controls > div {
                width: 100%;
            }
            
            .table-controls select,
            .table-controls input {
                width: 100%;
            }
            
            .table-header {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
            
            .categories-grid {
                grid-template-columns: 1fr;
            }
            
            .chart-container {
                height: 250px;
            }
        }
        
        @media (max-width: 768px) {
            #trendsTable {
                display: none;
            }
            
            #mobileTrendsList {
                display: block;
            }
            
            .mobile-trend-item {
                
                padding: 15px;
                borders-radius: 8px;
                margin-bottom: 10px;
                box-shadow: var(--shadow);
                border: 1px solid var(--border);
            }
            
            .mobile-trend-item:last-child {
                margin-bottom: 0;
            }
        }
        
        @media (min-width: 769px) {
            #trendsTable {
                display: table;
            }
            
            #mobileTrendsList {
                display: none;
            }
        }
        
        .mobile-filters {
            display: none;
            
            padding: 15px;
            borders-radius: var(--radius);
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }
        
        @media (max-width: 768px) {
            .mobile-filters {
                display: block;
            }
        }
        
        .mobile-filters > div {
            margin-bottom: 15px;
        }
        
        .mobile-filters label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            
        }
        
        .mobile-filters select,
        .mobile-filters input {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border);
            borders-radius: 8px;
            font-size: 1rem;
        }
        
.country-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    borders-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}
        
        .country-flag {
            font-size: 1.2rem;
        }
        
        .country-selector {
            padding: 10px 15px;
            border: 2px solid var(--border);
            borders-radius: 8px;
            font-size: 1rem;
            
            min-width: 200px;
        }
        
        .country-selector option {
            font-size: 1rem;
            padding: 5px;
        }
        
        .country-color-eg { background: #000000; }      /* مصر */
        .country-color-sa { background: #1a9850; }      /* السعودية */
        .country-color-ae { background: #e31a1c; }      /* الإمارات */
        .country-color-qa { background: #800026; }      /* قطر */
        .country-color-kw { background: #ff7f00; }      /* الكويت */
        .country-color-bh { background: #d73027; }      /* البحرين */
        .country-color-om { background: #f46d43; }      /* عمان */
        .country-color-jo { background: #66c2a5; }      /* الأردن */
        .country-color-lb { background: #fee08b; }      /* لبنان */
        .country-color-sy { background: #4575b4; }      /* سوريا */
        .country-color-iq { background: #313695; }      /* العراق */
        .country-color-ps { background: #fdae61; }      /* فلسطين */
        .country-color-ma { background: #a6d96a; }      /* المغرب */
        .country-color-dz { background: #1f78b4; }      /* الجزائر */
        .country-color-tn { background: #e41a1c; }      /* تونس */
        .country-color-ly { background: #66c2a5; }      /* ليبيا */
        .country-color-sd { background: #f46d43; }      /* السودان */
        .country-color-ye { background: #984ea3; }      /* اليمن */
        .country-color-so { background: #4daf4a; }      /* الصومال */
        .country-color-dj { background: #377eb8; }      /* جيبوتي */
        .country-color-mr { background: #ff7f00; }      /* موريتانيا */
        .country-color-com { background: #984ea3; }     /* جزر القمر */
        .country-color-all { background: #575756; }     /* كل الدول */
		
		
		.seo-content {
    
    borders-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 20px 25px;
    margin: 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.6;
    transition: transform 0.3s, box-shadow 0.3s;
}

.seo-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.seo-content h2 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    
    display: flex;
    align-items: center;
    gap: 10px;
}

.seo-content h2 i {
    color: #ff6b6b; /* أيقونة حمراء أنيقة */
}

.seo-content p {
    font-size: 1rem;
    margin-bottom: 12px;
}

.seo-content p strong {
    color: #ff6b6b;
}

@media (max-width: 768px) {
    .seo-content {
        padding: 15px 20px;
    }
    .seo-content h2 {
        font-size: 1.4rem;
    }
}
.trend-countries {
    margin-top: 25px;
    
    borders-radius: 14px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.trend-countries h3 {
    font-size: 1.3rem;
    margin-bottom: 6px;
    
    display: flex;
    align-items: center;
    gap: 8px;
}

.trend-countries p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

#countriesGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.country-item {
    
    border: 1px solid #e5e5e5;
    borders-radius: 12px;
    padding: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}

.country-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    border-color: #ff6b6b;
}

.country-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.country-flag-big {
    font-size: 2.1rem;
}

.country-name {
    font-weight: 700;
    font-size: 1rem;

}

.trend-indicator {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 8px;
    font-size: 0.75rem;
    borders-radius: 8px;
    font-weight: 600;
    color: #fff;
}

.trend-up {
    background: linear-gradient(135deg, #28a745, #4cd964);
}

.trend-down {
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
}

.country-search-count {
    font-size: 1rem;
    font-weight: 700;
    
    margin-bottom: 6px;
}

.category-badge {
    display: inline-block;
    padding: 4px 10px;
    borders-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.category-news {
    background: linear-gradient(135deg, #007bff, #4dabff);
}
.category-economy {
    background: linear-gradient(135deg, #ffc107, #ffd666);
    
}
.category-sports {
    background: linear-gradient(135deg, #17a2b8, #5bc0de);
}
.category-entertainment {
    background: linear-gradient(135deg, #6f42c1, #9b6dff);
}

#mobileCountriesGrid {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    #mobileCountriesGrid {
        display: block;
    }

    #mobileCountriesGrid .country-item {
        margin-bottom: 12px;
    }

    .country-flag-big {
        font-size: 1.7rem;
    }
}


#mobileMonthlyTrends {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-trend-item {
    background: linear-gradient(135deg, #ffffff, #fafafa);
    borders-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border: 1px solid #eaeaea;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mobile-trend-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

.mobile-trend-item strong {
    font-size: 1rem;
    color: #ff6b6b;
}

.search-count {
    font-weight: 700;
    font-size: 1rem;
    
}

.mobile-trend-item a {
    font-size: 1.05rem;
    
    text-decoration: none;
}

.mobile-trend-item a:hover {
    text-decoration: underline;
}

.country-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    borders-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.country-flag {
    font-size: 1rem;
}

.country-color-eg { background: linear-gradient(135deg, #dc3545, #ff6b6b); }
.country-color-jo { background: linear-gradient(135deg, #28a745, #5cd97c); }
.country-color-ma { background: linear-gradient(135deg, #c82333, #ff4d4d); }
.country-color-kw { background: linear-gradient(135deg, #007bff, #4dabff); }

.category-badge {
    padding: 4px 10px;
    borders-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.category-news {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
}

.category-entertainment {
    background: linear-gradient(135deg, #6f42c1, #9b6dff);
}

.trend-indicator {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    borders-radius: 8px;
    color: #fff;
}

.trend-up {
    background: linear-gradient(135deg, #28a745, #4cd964);
}

.trend-down {
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
}

.change-percent {
    font-weight: 700;
    font-size: 0.85rem;
}

.change-up {
    color: #28a745;
}

.change-down {
    color: #dc3545;
}
#mobileMonthlyTrends {
    display: none;
}

@media (max-width: 768px) {
    #mobileMonthlyTrends {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
}
.chart-tabs {
    display: flex;
    gap: 10px;
    background: #f7f7f7;
    padding: 6px;
    borders-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    width: fit-content;
}

.chart-tab {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    borders-radius: 8px;
    transition: all 0.25s ease;
    background: transparent;
    user-select: none;
}

.chart-tab:hover {
    background: rgba(0,0,0,0.06);
    color: #000;
}

.chart-tab.active {
    background: #000;
    color: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .chart-tabs {
        width: 100%;
        justify-content: space-between;
    }

    .chart-tab {
        flex: 1;
        text-align: center;
        font-size: 0.85rem;
        padding: 10px 0;
    }
}