/* ========== [ STING WEB ] =========
~> Name Template     : Football Auto API (Glossy Black & Dark Gray)
~> Version           : V 2.2 DARKMODERN
~> Last Updated      : 2025-09-15
~> Developer By      : STING WEB (Glossy Black & Graphite)
==================================== */ 
:root {
    --A-Color: #101010;         /* خلفية رئيسية أسود لامع */
    --B-Color: #18191b;         /* خلفية ثانوية رمادي غامق */
    --C-Color: #202124;         /* مربعات/صناديق: رمادي أعمق */
    --Primary-A-Color: #e5e5e5; /* أبيض رمادي فاتح للعناوين والنصوص */
    --Primary-B-Color: #fafafa; /* أبيض تقني لبعض العناصر */
    --Primary-C-Color: #4caf50; /* أخضر للروابط أو الأزرار */
    --Primary-D-Color: #232323; /* رمادي داكن أقرب للأسود */
    --Primary-E-Color: #bdbdbd; /* رمادي فاتح للنصوص الثانوية */
    --Max-Size: 1180px;
}

/* ======  FONT */
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: local("Tajawal"), url("/assets/font/Tajawal-Regular.woff2") format("woff2"); }
* { margin: 0; padding: 0; text-decoration: none; list-style: none; list-style-type: none; font-weight: 500; font-family: "Tajawal", Changa, Segoe UI, Arial, sans-serif; box-sizing: border-box; }
a { color: var(--Primary-C-Color); transition: color 0.15s; }

/* ====== BODY */
body { background: var(--A-Color); color: var(--Primary-A-Color); line-height: 1.7; }

/* ====== SVG ICONS */
.STING-WEB-Lang_SVG { background: no-repeat center url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.913 17H20.087M12.913 17L11 21M12.913 17L15.7783 11.009C16.0092 10.5263 16.1246 10.2849 16.2826 10.2086C16.4199 10.1423 16.5801 10.1423 16.7174 10.2086C16.8754 10.2849 16.9908 10.5263 17.2217 11.009L20.087 17M20.087 17L22 21M2 5H8M8 5H11.5M8 5V3M11.5 5H14M11.5 5C11.0039 7.95729 9.85259 10.6362 8.16555 12.8844M10 14C9.38747 13.7248 8.76265 13.3421 8.16555 12.8844M8.16555 12.8844C6.81302 11.8478 5.60276 10.4266 5 9M8.16555 12.8844C6.56086 15.0229 4.47143 16.7718 2 18' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); display: block; }
.STING-WEB-Search_SVG { background: no-repeat center url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 6C13.7614 6 16 8.23858 16 11M16.6588 16.6549L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); display: block; }
.STING-WEB-Share_SVG { background: no-repeat center url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.7914 12.6074C21.0355 12.3981 21.1575 12.2935 21.2023 12.169C21.2415 12.0598 21.2415 11.9402 21.2023 11.831C21.1575 11.7065 21.0355 11.6018 20.7914 11.3926L12.3206 4.13196C11.9004 3.77176 11.6903 3.59166 11.5124 3.58725C11.3578 3.58342 11.2101 3.65134 11.1124 3.77122C11 3.90915 11 4.18589 11 4.73936V9.03462C8.86532 9.40807 6.91159 10.4897 5.45971 12.1139C3.87682 13.8845 3.00123 16.1759 3 18.551V19.1629C4.04934 17.8989 5.35951 16.8765 6.84076 16.1659C8.1467 15.5394 9.55842 15.1683 11 15.0705V19.2606C11 19.8141 11 20.0908 11.1124 20.2288C11.2101 20.3486 11.3578 20.4166 11.5124 20.4127C11.6903 20.4083 11.9004 20.2282 12.3206 19.868L20.7914 12.6074Z' stroke='%234caf50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); display: block; }

/* ====== HEADER */
header { display: flex; align-items: center; padding: 22px 0; background: var(--B-Color); box-shadow: 0 2px 24px #0006; }
.STING-WEB-Header { max-width: var(--Max-Size); width: 93%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; }
.STING-WEB-Header-Right,.STING-WEB-Header-Left { display: flex; align-items: center; gap: 18px; }
.STING-WEB-Logo { display: flex; align-items: center; }
.STING-WEB-Logo h1 { display: none; }
.STING-WEB-Logo img { width: 120px; height: 40px; display: flex; }
.STING-WEB-Menu { display: flex; align-items: center; gap: 26px; margin: 0 50px; }
.STING-WEB-Menu ul { display: flex; align-items: center; gap: 34px; }
.STING-WEB-Menu ul li a { font-size: 17px; letter-spacing: 0.5px; color: var(--Primary-A-Color); }
.STING-WEB-Menu ul li:nth-child(1) a { color: var(--Primary-C-Color); }
.STING-WEB-Menu ul li a:hover { color: var(--Primary-C-Color); text-decoration: underline; }
.STING-WEB-Language a, .STING-WEB-Share a { background: var(--C-Color); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.STING-WEB-Search { display: flex; align-items: center; gap: 15px; background: var(--C-Color); padding: 7px 22px; border-radius: 30px; margin-left: 32px; }
.STING-WEB-Search input[type="search"] { background: transparent; border: 0; font-size: 16px; width: 100%; padding: 5px; color: var(--Primary-A-Color); outline: none; }
.STING-WEB-Search input[type="search"]::placeholder { color: var(--Primary-E-Color); }
.STING-WEB-Toggle-2 div:hover { color: var(--Primary-C-Color); }
@media (max-width: 720px) {
    header { padding: 10px 0; }
    .STING-WEB-Menu { display: none; }
    .STING-WEB-Search { display: none !important; }
    .STING-WEB-Header-Right, .STING-WEB-Header-Left { gap: 8px; }
}

/* ====== TITLE */
.STING-WEB-PIN { display: flex; align-items: center; gap: 7px; }
.STING-WEB-TITLE { font-size: 17px; color: var(--Primary-C-Color); font-weight: bold; }

/* ====== HOME */
.STING-WEB-Home { display: grid; grid-template-columns: 1.5fr 2fr; max-width: var(--Max-Size); margin: 28px auto; width: 100%; }
.STING-WEB-Home-Right, .STING-WEB-Home-Left { width: 100%; }
@media (max-width: 720px) {
    .STING-WEB-Home { display: grid; grid-template-columns: 1fr; margin: 0 auto; }
}

/* ====== APP INSTALL POPUP */
.STING-WEB-Install-App-PopUp {
    position: fixed; bottom: 12px; display: grid; grid-template-columns: 2fr .5fr; align-items: center; width: 93%;
    margin: 0 auto; left: 0; right: 0; background: var(--D-Color); padding: 14px;
    justify-items: center; max-width: 350px; border-radius: 14px; gap: 12px;
    box-shadow: 0 2px 20px #000a;
    z-index: 10000;
}
.STING-WEB-Install-App-PopUp-Right { width: 100%; display: grid; grid-template-columns: .5fr 3fr; align-items: center; justify-items: center; gap: 14px; }
.STING-WEB-App-Name { display: grid; font-size: 15px; color: var(--Primary-A-Color); }
.STING-WEB-App-Icon { width: 60px; height: 60px; }
.STING-WEB-App-Icon img { width: 100%; height: 100%; border-radius: 10px; }
#STING-WEB-Install-App {
    width: 100%; max-width: 110px; padding: 7px 0;
    border: 0; background: var(--Primary-C-Color);
    color: var(--Primary-B-Color); font-size: 15px; border-radius: 8px; cursor: pointer;
    font-weight: 700; letter-spacing: 1px;
    box-shadow: 0 2px 8px #4caf5022;
    transition: background 0.2s, color 0.2s;
}
#STING-WEB-Install-App:hover { background: var(--Primary-E-Color); color: var(--Primary-C-Color); }
.Close-Install-App {
    position: absolute; left: 0; top: -22px; font-size: 15px;
    color: var(--Primary-E-Color); background: var(--D-Color);
    border-radius: 8px 8px 0 0; cursor: pointer; width: 30px; height: 30px; text-align: center;
    border: 1px solid #444;
}
.Close-Install-App:hover { color: var(--Primary-C-Color); }
@media (max-width: 720px) { .STING-WEB-Install-App-PopUp { bottom: 75px; } }

/* ====== TABLES & BOXES (مثل جدول الانتقالات) */
.table, .STING-WEB-Table, .STING-WEB-Box, .STING-WEB-Standings-C-Body, .STING-WEB-Home-News-Wrapper {
    background: var(--B-Color);
    border-radius: 7px;
    box-shadow: 0 2px 14px #0002;
    margin: 10px 0;
}
.table th, .table td, .STING-WEB-Standings-C-Header, .STING-WEB-Standings-C-row {
    background: var(--C-Color) !important;
    color: var(--Primary-A-Color);
    border-bottom: 1px solid #222;
}
.table th, .STING-WEB-Standings-C-Header {
    font-weight: 700;
    color: var(--Primary-A-Color);
    background: var(--D-Color) !important;
}

.table tr:last-child td, .STING-WEB-Standings-C-row:last-child {
    border-bottom: none;
}

/* ====== MOBILE MENU */
.STING-WEB-Mobile {
    display: none; grid-template-columns: 1fr 1fr 1fr; align-items: center;
    position: fixed; bottom: 0; right: 0; left: 0; padding: 10px; margin: 0 auto;
    background: var(--B-Color); z-index: 999; box-shadow: 0 -3px 20px #0004;
}
.STING-WEB-Mobile-Ico {
    display: grid; gap: 2px; align-items: center; justify-items: center; color: var(--Primary-E-Color); font-size: 13px;
    transition: color 0.2s;
}
.STING-WEB-Mobile-Ico.active,
.STING-WEB-Mobile-Ico:hover { color: var(--Primary-C-Color); }
@media (max-width: 720px) {
    .STING-WEB-Mobile { display: grid !important; }
}

/* ====== FOOTER */
.STING-WEB-Footer {
    display: flex; justify-content: space-between; width: 88%; padding: 13px 24px;
    max-width: var(--Max-Size); margin: 28px auto; background: var(--C-Color);
    border-radius: 15px; align-items: center; flex-wrap: wrap; margin-top: 50px; height: 54px;
    box-shadow: 0 2px 14px #0004;
}
.STING-WEB-Footer-Right a { font-size: 16px; color: var(--Primary-A-Color); }
.STING-WEB-Footer-Right a:hover { color: var(--Primary-C-Color); }
.STING-WEB-Footer-Left ul li a { font-size: 15px; color: var(--Primary-E-Color); }
.STING-WEB-Footer-Left ul li a:hover { color: var(--Primary-C-Color); }
.STING-WEB-Footer-Left ul { display: flex; gap: 15px; align-items: center; }
@media (max-width: 720px) { .STING-WEB-Footer { display: none !important; } body { margin-bottom: 100px; } }

/* ====== SCROLL */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background-color: #222; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background-color: #333; }
::-webkit-scrollbar-track { background-color: var(--A-Color); border-radius: 8px; }

/* ====== عناصر إضافية لتمييز الموقع */
.STING-WEB-TITLE,
.STING-WEB-Standings_SVG,
.STING-WEB-News_SVG,
.STING-WEB-Matches_SVG {
    filter: drop-shadow(0 2px 4px #0009);
}

button, a {
    transition: background 0.2s, color 0.2s;
}

.STING-WEB-Menu ul li a, .STING-WEB-Footer-Left ul li a {
    border-radius: 6px;
    padding: 3px 10px;
}

.STING-WEB-Home-News-Wrapper {
    display: flex; justify-content: center; margin-top: 40px;
    background: var(--B-Color);
    border-radius: 12px;
    box-shadow: 0 2px 14px #0002;
    padding: 10px 0;
}
.STING-WEB-Home-News {
    display: block;
}

@media (max-width: 720px) {
    .STING-WEB-Home-News { display: none !important; }
    .STING-WEB-Home-News-Wrapper { display: none !important; }
    .STING-WEB-Home-Right { width: 100%; max-width: none; }
}