/* ============================================================
   v2-upgrade.css — تحسينات فوق v1.css بدون كسر أي شيء
   أضف هذا السطر في header.php بعد سطر v1.css:
   <link rel="stylesheet" href="/assets/style/v2-upgrade.css?v=1">
   ============================================================ */

/* ======================================================
   1. HEADER — تحسين الهيدر
   ====================================================== */

/* تثبيت الهيدر بشكل صحيح مع تأثير زجاجي */
header {
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 0 !important;
    height: 64px;
    background: rgba(14, 16, 25, 0.92) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 2px 20px rgba(0,0,0,0.4);
    transition: background 0.3s ease;
}

/* الهيدر في الوضع الفاتح */
[data-theme="light"] header {
    background: rgba(247, 249, 252, 0.95) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.STING-WEB-Header {
    height: 64px;
    align-items: center;
}

/* الشعار */
.STING-WEB-Logo img {
    width: 110px;
    height: 36px;
    object-fit: contain;
    transition: opacity 0.2s;
}
.STING-WEB-Logo img:hover { opacity: 0.85; }

/* روابط القائمة */
.STING-WEB-Menu ul li a {
    font-size: 14px !important;
    color: var(--Primary-E-Color);
    padding: 6px 4px;
    border-radius: 6px;
    transition: color 0.2s ease;
    position: relative;
}
.STING-WEB-Menu ul li a:hover,
.STING-WEB-Menu ul li:nth-child(1) a {
    color: var(--Primary-A-Color) !important;
}

/* خط تحت الرابط النشط */
.STING-WEB-Menu ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 2px;
    background: var(--Primary-A-Color);
    border-radius: 2px;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.STING-WEB-Menu ul li:nth-child(1) a::after { transform: scaleX(1); }
.STING-WEB-Menu ul li a:hover::after { transform: scaleX(1); }

/* شريط البحث */
.STING-WEB-Search {
    border: 1px solid rgba(255,255,255,0.07) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.STING-WEB-Search:focus-within {
    border-color: var(--Primary-A-Color) !important;
    box-shadow: 0 0 0 3px rgba(57,219,191,0.12);
}
.STING-WEB-Search input[type="search"] {
    font-size: 13px !important;
    min-width: 160px;
}

/* أزرار اللغة والمشاركة */
.STING-WEB-Language a,
.STING-WEB-Share a,
.STING-WEB-Theme a {
    border: 1px solid rgba(255,255,255,0.07) !important;
    transition: background 0.2s, border-color 0.2s;
}
.STING-WEB-Language a:hover,
.STING-WEB-Share a:hover,
.STING-WEB-Theme a:hover {
    background: var(--Primary-A-Color) !important;
    border-color: var(--Primary-A-Color) !important;
}
.STING-WEB-Language a:hover span,
.STING-WEB-Share a:hover span {
    filter: brightness(10);
}

@media (max-width: 720px) {
    header { height: 56px; }
    .STING-WEB-Header { height: 56px; }
}


/* ======================================================
   2. MOBILE MENU — تحسين قائمة الجوال
   ====================================================== */

.STING-WEB-Mobile {
    background: rgba(14,16,25,0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
    height: 62px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

[data-theme="light"] .STING-WEB-Mobile {
    background: rgba(247,249,252,0.97) !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}

.STING-WEB-Mobile-Ico {
    transition: transform 0.15s ease;
}
.STING-WEB-Mobile a:active .STING-WEB-Mobile-Ico {
    transform: scale(0.88);
}

/* تكبير الأيقونات قليلاً */
.STING-WEB-Matches_SVG,
.STING-WEB-Standings_SVG,
.STING-WEB-News_SVG {
    width: 26px !important;
    height: 26px !important;
}

/* الأيقونة النشطة */
.STING-WEB-Mobile-Ico.active .Tab {
    color: var(--Primary-A-Color);
    font-weight: 700;
}
.STING-WEB-Mobile-Ico.active .STING-WEB-Matches_SVG {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 30' fill='%2339dbbf'%3E%3Cpath d='M43.8181818,0.00272727273 L2.72727273,0.00272727273 C1.22345455,0.00272727273 0,1.22618182 0,2.73 L0,27.27 C0,28.7738182 1.22345455,29.9972727 2.72727273,29.9972727 L43.8181818,29.9972727 C45.322,29.9972727 46.5454545,28.7738182 46.5454545,27.27 L46.5454545,2.73 C46.5454545,1.22618182 45.322,0.00272727273 43.8181818,0.00272727273 Z M43.8193636,19.8143636 L39.7110909,19.8143636 L39.7110909,10.1856364 L43.8187273,10.1856364 L43.8193636,19.8143636 Z M24.6363636,11.6269091 C25.9792727,12.1656364 26.9299091,13.4740909 26.9299091,15 C26.9299091,16.5259091 25.9792727,17.8344545 24.6363636,18.3730909 L24.6363636,11.6269091 Z M2.72727273,10.1856364 L6.83436364,10.1856364 L6.83436364,19.8143636 L2.72727273,19.8143636 L2.72727273,10.1856364 Z M21.9090909,18.3730909 C20.5661818,17.8343636 19.6155455,16.5259091 19.6155455,15 C19.6155455,13.4740909 20.5661818,12.1655455 21.9090909,11.6269091 L21.9090909,18.3730909 Z M21.9090909,8.784 C19.0419091,9.40845455 16.8882727,11.9576364 16.8882727,15 C16.8882727,18.0423636 19.0419091,20.5915455 21.9090909,21.216 L21.9090909,27.27 L2.72727273,27.27 L2.72727273,22.5416364 L8.198,22.5416364 C8.95109091,22.5416364 9.56163636,21.9310909 9.56163636,21.178 L9.56163636,8.822 C9.56163636,8.06890909 8.95109091,7.45836364 8.198,7.45836364 L2.72727273,7.45836364 L2.72727273,2.73 L21.9090909,2.73 L21.9090909,8.784 Z M43.8181818,27.27 L24.6363636,27.27 L24.6363636,21.216 C27.5035455,20.5915455 29.6571818,18.0423636 29.6571818,15 C29.6571818,11.9576364 27.5035455,9.40845455 24.6363636,8.784 L24.6363636,2.73 L43.8181818,2.73 L43.8185455,7.45836364 L38.3475455,7.45836364 C37.5944545,7.45836364 36.9839091,8.06890909 36.9839091,8.822 L36.9839091,21.178 C36.9839091,21.9310909 37.5944545,22.5416364 38.3475455,22.5416364 L43.8196364,22.5416364 L43.8199091,27.27 C43.8199091,27.27 43.8193636,27.27 43.8181818,27.27 Z'/%3E%3C/svg%3E") !important;
}


/* ======================================================
   3. MATCH CARDS — تحسين بطاقات المباريات
   ====================================================== */

/* اسم البطولة */
.STING-WEB-Cup-Name {
    background: var(--B-Color) !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    margin: 8px auto 4px !important;
    border-right: 3px solid var(--Primary-A-Color);
    transition: background 0.2s;
}
.STING-WEB-Cup-Name:hover {
    background: var(--C-Color) !important;
}
.STING-WEB-Cup-Name-Right h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
}
.STING-WEB-Cup-Name-Right img {
    width: 28px !important;
    height: 28px !important;
}

/* بطاقة المباراة */
.STING-WEB-Match-div-Here {
    border-radius: 12px !important;
    margin-bottom: 6px !important;
    padding: 8px 10px !important;
    background: var(--C-Color) !important;
    border: 1px solid rgba(255,255,255,0.04);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    cursor: pointer;
}
.STING-WEB-Match-div-Here:hover {
    background: var(--B-Color) !important;
    border-color: rgba(57,219,191,0.18);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* المباراة المباشرة — إبراز خاص */
.STING-WEB-Match-div.LIVE .STING-WEB-Match-div-Here {
    background: var(--B-Color) !important;
    border: 1px solid rgba(255,49,49,0.3) !important;
    border-right: 3px solid #ff3131 !important;
    box-shadow: 0 2px 16px rgba(255,49,49,0.12);
    height: auto !important;
    min-height: 80px;
}

/* أسماء الفرق */
.STING-WEB-Match-div-Team-Name {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

/* شعارات الفرق */
.STING-WEB-Match-div-Team-Logo {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background: var(--B-Color);
    padding: 2px;
}
.STING-WEB-Match-div.LIVE .STING-WEB-Match-div-Team-Logo {
    width: 34px !important;
    height: 34px !important;
}

/* الوقت / النتيجة في المنتصف */
.STING-WEB-div-Time-Display {
    font-size: 7px !important;
    width: 48px !important;
    height: 48px !important;
    border-color: var(--Primary-A-Color) !important;
    box-shadow: 0 0 10px rgba(57,219,191,0.15);
    letter-spacing: 0.5px !important;
}

/* أهداف المباراة المباشرة */
.STING-WEB-Match-div.LIVE .Goal-Team {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-shadow: 0 0 12px rgba(255,255,255,0.2);
}

/* بطاقة المباراة المنتهية */
.STING-WEB-Match-div.END .STING-WEB-Match-div-Here {
    opacity: 0.72;
}
.STING-WEB-Match-div.END .STING-WEB-Match-div-Goal {
    background: rgba(255,255,255,0.06) !important;
    border-radius: 50px !important;
    max-width: 68px !important;
    height: 26px !important;
}

/* شريط الوقت الدائري */
.STING-WEB-Progress {
    filter: drop-shadow(0 0 4px rgba(57,219,191,0.25));
}


/* ======================================================
   4. MATCHES SETTINGS BAR — شريط إعدادات المباريات
   ====================================================== */

.STING-WEB-Matches-Zone {
    background: var(--B-Color);
    border-radius: 12px;
    margin: 10px auto;
    width: 96% !important;
    max-width: var(--Max-Size);
    border: 1px solid rgba(255,255,255,0.05);
}

.STING-WEB-Matches-Settings {
    width: 96% !important;
    padding: 8px 4px;
    gap: 4px;
}

/* التاريخ */
.STING-WEB-Date-Here {
    font-size: 11px !important;
    color: var(--Primary-E-Color) !important;
    background: var(--C-Color);
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* اسم اليوم */
.STING-WEB-Day-Matches {
    font-size: 13px !important;
    font-weight: 700;
}

/* أزرار الأمس/الغد */
.STING-WEB-Yesterday_SVG,
.STING-WEB-Tomorrow_SVG {
    background-color: var(--C-Color) !important;
    border-radius: 8px !important;
    width: 28px !important;
    height: 28px !important;
    transition: background 0.2s;
}
.STING-WEB-Yesterday_SVG:hover,
.STING-WEB-Tomorrow_SVG:hover {
    background-color: var(--Primary-A-Color) !important;
    filter: brightness(0) invert(1);
}

/* فلتر مباشر/الكل */
.STING-WEB-Filter .LiveNow,
.STING-WEB-Filter #Matches-All,
.STING-WEB-Filter .ActiveNow {
    background: var(--C-Color) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    height: 28px !important;
    transition: all 0.2s ease;
    padding: 0 10px !important;
}
.STING-WEB-Filter .LiveNow:hover {
    background: rgba(255,49,49,0.15) !important;
    border-color: rgba(255,49,49,0.3) !important;
    color: #ff3131 !important;
}


/* ======================================================
   5. FOOTER — تحسين الفوتر
   ====================================================== */

footer .STING-WEB-Footer {
    border-radius: 16px 16px 0 0 !important;
    padding: 30px 0 0 0 !important;
    background: var(--B-Color) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px 0 0 0 !important;
}

footer .STING-WEB-Footer > div:first-child {
    padding: 0 5% !important;
}

footer .STING-WEB-Footer a:hover {
    color: var(--Primary-A-Color) !important;
    transition: color 0.2s;
}


/* ======================================================
   6. STANDINGS PAGE — تحسين صفحة الترتيب
   ====================================================== */

.STING-WEB-Standings a {
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    background: var(--C-Color) !important;
    transition: all 0.18s ease !important;
    padding: 10px 14px !important;
    height: auto !important;
}
.STING-WEB-Standings a:hover {
    background: var(--B-Color) !important;
    border-color: rgba(57,219,191,0.25) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.STING-WEB-Standing img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 6px;
}
.STING-WEB-Standing span {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--Primary-B-Color);
}
.STING-WEB-Standings a:hover .STING-WEB-Standing span {
    color: var(--Primary-A-Color) !important;
}

/* شريط بحث الترتيب */
.STING-WEB-Search-Standings {
    border: 1px solid rgba(255,255,255,0.07) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.STING-WEB-Search-Standings:focus-within {
    border-color: var(--Primary-A-Color) !important;
    box-shadow: 0 0 0 3px rgba(57,219,191,0.1);
}


/* ======================================================
   7. SCROLLBAR — شريط التمرير
   ====================================================== */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb {
    background: var(--Primary-A-Color);
    border-radius: 10px;
}
::-webkit-scrollbar-track { background: var(--A-Color); }


/* ======================================================
   8. ANIMATIONS — حركات خفيفة
   ====================================================== */

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

.STING-WEB-Cup-Matches {
    animation: fadeInUp 0.25s ease both;
}

.STING-WEB-Match-div {
    animation: fadeInUp 0.2s ease both;
}


/* ======================================================
   9. PERFORMANCE — تحسينات الأداء
   ====================================================== */

/* تحميل الصور بكسل بدلاً من التعطل */
img {
    content-visibility: auto;
}

/* منع الرسم غير الضروري للعناصر الثابتة */
.STING-WEB-Cup-Name,
.STING-WEB-Match-div-Here,
.STING-WEB-Mobile {
    will-change: auto;
    contain: layout style;
}

/* ======================================================
   10. SEO SECTIONS — تحسين أقسام النص التعريفي
   ====================================================== */

section h1 {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--Primary-A-Color) !important;
    margin-bottom: 6px;
}
section h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--Primary-E-Color) !important;
    margin-bottom: 10px;
}
section h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--Primary-A-Color) !important;
    margin-bottom: 6px;
}
section p {
    font-size: 13px !important;
    line-height: 1.8 !important;
    color: var(--Primary-C-Color) !important;
    max-width: 800px;
    margin: 0 auto;
}
section a {
    color: var(--Primary-A-Color) !important;
}
section {
    padding: 0 16px;
    margin-bottom: 10px !important;
}

@media (max-width: 720px) {
    section h1 { font-size: 18px !important; }
    section h2 { font-size: 14px !important; }
    section p  { font-size: 12px !important; }
    section    { margin: 10px auto !important; }
}