/* ========== [ STING WEB ] =========
~> Name Template     : Football Auto API
~> Version           : V 1.0 BETA
~> Last Updated      : 05 - 02 - 2025
~> Developer By      : STING WEB
==================================== */
:root {
    /* Light Mode Colors (Default) - Matching Mobile App */
    --A-Color: #FAFAFA;
    /* خلفية رئيسية فاتحة جداً */
    --B-Color: #FFFFFF;
    /* خلفية ثانوية بيضاء */
    --C-Color: #F5F5F5;
    /* خلفية كروت فاتحة */
    --Primary-A-Color: #E31E24;
    /* أحمر أساسي */
    --Primary-B-Color: #1A1A1A;
    /* نصوص داكنة رئيسية */
    --Primary-C-Color: #666666;
    /* نصوص ثانوية رمادي */
    --Primary-D-Color: #E0E0E0;
    /* حدود فاتحة */
    --Primary-E-Color: #333333;
    /* نصوص عادية داكنة */
    --Max-Size: 1170px;

    /* Brand Colors */
    --Brand-Red: #E31E24;
    --Brand-Dark: #1a1f2e;
    --Brand-Teal: #00d9ff;
    --Brand-Gold: #ffd700;

    /* Dark Mode Colors (stored as variables) */
    --Dark-A-Color: #0e1019;
    /* خلفية رئيسية داكنة */
    --Dark-B-Color: #191d2d;
    /* خلفية ثانوية داكنة */
    --Dark-C-Color: #151825;
    /* خلفية كروت داكنة */
    --Dark-Primary-B-Color: #FFFFFF;
    /* نصوص فاتحة */
    --Dark-Primary-C-Color: #b4bec7;
    /* نصوص ثانوية فاتحة */
    --Dark-Primary-D-Color: #2C2C2C;
    /* حدود داكنة */
    --Dark-Primary-E-Color: #F5F5F5;
    /* نصوص عادية فاتحة */
}

/* Dark Mode Override */
body.dark-mode {
    --A-Color: var(--Dark-A-Color);
    --B-Color: var(--Dark-B-Color);
    --C-Color: var(--Dark-C-Color);
    --Primary-B-Color: var(--Dark-Primary-B-Color);
    --Primary-C-Color: var(--Dark-Primary-C-Color);
    --Primary-D-Color: var(--Dark-Primary-D-Color);
    --Primary-E-Color: var(--Dark-Primary-E-Color);
}

/* Smooth transition for dark mode */
body,
.STING-WEB-Header,
.STING-WEB-Cup-Name,
.STING-WEB-Match-div-Here,
.STING-WEB-Footer,
.STING-WEB-Settings {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ======  FONT */
@font-face {
    font-family: "Neo Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Neo Sans Arabic"), url("/site/assets/font/Arabic.woff2") format("woff2");
}

/* ======  VIRTUAL */
* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    list-style-type: none;
    font-weight: 500;
    font-family: "Neo Sans Arabic", Changa, Segoe UI, sans-serif;
}

a {
    color: var(--Primary-B-Color);
}

body {
    background: var(--A-Color);
    color: var(--Primary-B-Color);
}

/* ======  SVG ICON */
.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='%23dddddd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: block;
}

/*.STING-WEB-Language { position: relative; }.STING-WEB-Lang_SVG:before { content: "قريبا"; position: absolute; top: -12px; right: -25px; font-size: 12px; background: #ff000082; color: #fff; padding: 2px 10px; border-radius: 50px; }*/
.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='%23dddddd' 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='%23dddddd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: block;
}

.STING-WEB-Matches_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 30' fill='%23666666'%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' id='Shape'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 25px;
    height: 25px;
    display: block;
}

.STING-WEB-Standings_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 25px;
    height: 25px;
    display: block;
}

.STING-WEB-News_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 25px;
    height: 25px;
    display: block;
}

.STING-WEB-Settings_SVG {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z' fill='%23666666'/%3E%3Cpath d='M12 15.25C13.7949 15.25 15.25 13.7949 15.25 12C15.25 10.2051 13.7949 8.75 12 8.75C10.2051 8.75 8.75 10.2051 8.75 12C8.75 13.7949 10.2051 15.25 12 15.25Z' fill='%23FAFAFA'/%3E%3C/svg%3E") center no-repeat;
    width: 25px;
    height: 25px;
    display: block;
}

.STING-WEB-Video_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17V7l8 5-8 5z'/%3E%3C/svg%3E") center no-repeat;
    width: 25px;
    height: 25px;
    display: block;
}

.STING-WEB-Transfers_SVG {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 10L21 14L17 18M21 14H3M7 14L3 10L7 6M3 10H21' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    width: 25px;
    height: 25px;
    display: block;
}

.STING-WEB-TITLE_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='M22 12H18L15 21L9 3L6 12H2' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: block;
}

.STING-WEB-TITLE_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='M22 12H18L15 21L9 3L6 12H2' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
    display: block;
}

.STING-WEB-Time_SVG {
    background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M2.2,12.8A7.5,7.5,0,1,1,12.8,2.2,7.5,7.5,0,1,1,2.2,12.8ZM1.364,7.5A6.136,6.136,0,1,0,7.5,1.364,6.143,6.143,0,0,0,1.364,7.5Zm7.7,2.528L7.018,7.982a.68.68,0,0,1-.2-.482V3.409a.682.682,0,1,1,1.364,0V7.218l1.846,1.846a.682.682,0,1,1-.964.964Z' fill='%23707480'%3E%3C/path%3E%3C/svg%3E");
    width: 12px;
    height: 12px;
    display: block;
}

/* ======  HEADER */
header {
    display: flex;
    align-items: center;
    padding: 30px 0;
}

.STING-WEB-Header {
    max-width: var(--Max-Size);
    width: 93%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.STING-WEB-Header-Right,
.STING-WEB-Header-Left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.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: 20px;
    margin: 0 10px 0 10px;
}

.STING-WEB-Menu ul {
    display: flex;
    align-items: center;
    gap: 25px;
}

.STING-WEB-Menu ul li a {
    font-size: 15px;
    color: var(--Primary-E-Color);
    white-space: nowrap;
}

.STING-WEB-Menu ul li a:hover,
.STING-WEB-Menu ul li a.active {
    color: var(--Brand-Red);
}

.STING-WEB-Language a,
.STING-WEB-Share a {
    background: transparent;
    border: 2px solid var(--Primary-D-Color);
    width: auto;
    min-width: 40px;
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 12px;
    transition: all 0.3s ease;
}

.STING-WEB-Language a:hover,
.STING-WEB-Share a:hover {
    background: var(--Primary-A-Color);
    border-color: var(--Primary-A-Color);
    transform: translateY(-2px);
}

.STING-WEB-Language a:hover .STING-WEB-Lang_SVG,
.STING-WEB-Share a:hover .STING-WEB-Share_SVG {
    filter: brightness(0) invert(1);
}

/* Button Labels */
.STING-WEB-Language,
.STING-WEB-Share {
    display: flex;
    align-items: center;
    gap: 8px;
}

.button-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--Primary-E-Color);
    white-space: nowrap;
    transition: color 0.3s ease;
}

.STING-WEB-Language a,
.STING-WEB-Share a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.STING-WEB-Language:hover .button-label,
.STING-WEB-Share a:hover .button-label {
    color: var(--Primary-A-Color);
}

.STING-WEB-Search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--B-Color);
    border: 2px solid var(--Primary-D-Color);
    padding: 8px 16px;
    border-radius: 25px;
    margin-left: 20px;
    transition: all 0.3s ease;
    min-width: 220px;
}

.STING-WEB-Search:focus-within {
    border-color: var(--Primary-A-Color);
    box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.1);
}

.STING-WEB-Search input[type="search"] {
    background: transparent;
    border: 0;
    font-size: 15px;
    width: 100%;
    padding: 5px;
    color: var(--Primary-E-Color);
}

.STING-WEB-Search input[type="search"]::placeholder {
    color: var(--Primary-C-Color);
}

.STING-WEB-Toggle-2 div:hover {
    color: var(--Primary-A-Color);
}

@media (max-width: 768px) {
    header {
        padding: 10px 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        background-color: var(--B-Color);
        /* Ensure background is opaque */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        /* Nice shadow */
        z-index: 1000;
        backdrop-filter: blur(10px);
        /* Modern glass effect if supported, though B-Color is solid usually */
        overflow-x: hidden;
        margin: 0;
    }

    /* Push content down so it's not hidden behind fixed header */
    body {
        padding-top: 70px;
    }

    .STING-WEB-Menu {
        display: none;
    }

    .STING-WEB-Search {
        display: none !important;
    }

    .STING-WEB-Header-Right,
    .STING-WEB-Header-Left {
        gap: 10px !important;
    }

    .STING-WEB-Logo img {
        height: 32px;
        /* Slightly smaller logo for mobile */
        width: auto;
    }
}

/* ===== [ MOBILE ONLY HEADER ] ===== */
.STING-WEB-Mobile-Header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    height: 60px;
    background: var(--Primary-A-Color);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    margin: 0;
}

.mobile-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 15px;
    max-width: 100%;
    width: 100%;
}

.hamburger-menu {
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    /* إزاحة الهمبرجر للداخل قليلاً */
}

.mobile-search-btn {
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    /* إزاحة أيقونة البحث للداخل حسب طلب المستخدم */
}

.mobile-logo img {
    height: 30px;
    width: auto;
    filter: brightness(0) invert(1);
    /* Force logo to white on red background */
}

/* ===== [ SIDE DRAWER ] ===== */
.side-drawer {
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100%;
    background: var(--B-Color);
    z-index: 10001;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s, opacity 0.3s;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
}

body.dir-rtl .side-drawer {
    right: auto;
    left: -300px;
}

.side-drawer.active {
    transform: translateX(-300px);
    visibility: visible;
    opacity: 1;
}

body.dir-rtl .side-drawer.active {
    transform: translateX(300px);
    visibility: visible;
    opacity: 1;
}

.drawer-header {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--Primary-D-Color);
    background: var(--C-Color);
}

.drawer-logo img {
    height: 35px;
    width: auto;
}

.close-drawer {
    background: none;
    border: none;
    color: var(--Primary-B-Color);
    cursor: pointer;
    padding: 5px;
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
}

.drawer-nav ul li {
    margin-bottom: 5px;
}

.drawer-nav ul li a {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    color: var(--Primary-E-Color);
    font-size: 16px;
    transition: all 0.2s ease;
}

.drawer-nav ul li a:hover,
.drawer-nav ul li a.active {
    background: rgba(227, 30, 36, 0.05);
    color: var(--Primary-A-Color);
    border-right: 4px solid var(--Primary-A-Color);
}

body.dir-rtl .drawer-nav ul li a:hover,
body.dir-rtl .drawer-nav ul li a.active {
    border-right: none;
    border-left: 4px solid var(--Primary-A-Color);
}

.drawer-divider {
    height: 1px;
    background: var(--Primary-D-Color);
    margin: 15px 20px;
}

.drawer-section {
    padding: 0 20px 20px;
}

.section-title {
    font-size: 14px;
    color: var(--Primary-C-Color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-settings {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
}

.lang-toggle {
    display: flex;
    background: var(--C-Color);
    border-radius: 20px;
    padding: 2px;
}

.lang-toggle a {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 18px;
    color: var(--Primary-C-Color);
}

.lang-toggle a.active {
    background: var(--Primary-A-Color);
    color: #FFFFFF;
}

.drawer-toggle {
    width: 44px;
    height: 24px;
    background: var(--Primary-D-Color);
    border-radius: 12px;
    border: none;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.drawer-toggle.active {
    background: var(--Primary-A-Color);
}

.toggle-circle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: left 0.3s;
}

.drawer-toggle.active .toggle-circle {
    left: 22px;
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.drawer-footer {
    padding: 20px;
    background: var(--C-Color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--B-Color);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .STING-WEB-Mobile-Header {
        display: block;
    }

    .desktop-header {
        display: none !important;
    }

    body {
        padding-top: 60px;
        /* Reduced from 70px to match new mobile header height */
    }
}

/* ======  TITLE */
.STING-WEB-PIN {
    display: flex;
    align-items: center;
    gap: 6px;
}

.STING-WEB-TITLE {
    font-size: 16px;
    color: var(--Primary-A-Color);
}

/* ======  HOME */
.STING-WEB-Home {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    max-width: var(--Max-Size);
    margin: 10px auto;
    width: 100%;
}

.STING-WEB-Home-Right,
.STING-WEB-Home-Left {
    width: 100%;
}

@media (max-width: 768px) {
    .STING-WEB-Home {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;
    }
}

/* ======  APP */
.STING-WEB-Install-App-PopUp {
    position: fixed;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: var(--B-Color);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--Primary-D-Color);
    z-index: 10000;
    animation: slideUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.STING-WEB-Install-App-PopUp-Right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.STING-WEB-App-Icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.STING-WEB-App-Icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.STING-WEB-App-Name {
    display: flex;
    flex-direction: column;
}

#STING-WEB-Install-App {
    background: var(--Primary-A-Color);
    color: #fff;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
    border: none;
    transition: all 0.2s;
}

.Close-Install-App {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 24px;
    height: 24px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .STING-WEB-Install-App-PopUp {
        bottom: 75px;
        /* Above mobile menu */
    }
}

@media (min-width: 990px) {
    .STING-WEB-Install-App-PopUp {
        display: none;
    }
}

/* ======  MOBILE MENU */
.STING-WEB-Mobile {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: var(--A-Color);
    z-index: 9999;
}

.STING-WEB-Mobile-Ico {
    display: grid;
    gap: 2px;
    align-items: center;
    justify-items: center;
    color: var(--Primary-E-Color);
    font-size: 12px;
    padding: 10px 0;
}

.STING-WEB-Mobile-Ico.active {
    color: var(--Primary-A-Color);
}

@media (max-width: 768px) {
    .STING-WEB-Mobile {
        display: grid !important;
    }
}

/* ======  FOOTER */
.STING-WEB-Footer {
    display: flex;
    justify-content: space-between;
    width: 88%;
    padding: 10px 20px;
    max-width: var(--Max-Size);
    margin: 20px auto;
    background: var(--B-Color);
    border-radius: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    height: 40px;
}


.STING-WEB-Footer-Right a {
    font-size: 16px;
    color: var(--Primary-A-Color);
}

.STING-WEB-Footer-Right a:hover {
    color: var(--Primary-E-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-A-Color);
}

.STING-WEB-Footer-Left ul {
    display: flex;
    gap: 12px;
    align-items: center;
}

@media (max-width: 768px) {
    .STING-WEB-Footer {
        display: none !important;
    }

    body {
        margin-bottom: 100px;
    }
}

/* ======  CIRCULAR PROGRESS */
.STING-WEB-Circular-Progress-Bar {
    transform: rotate(-90deg);
    /* Start from top center */
    transform-origin: center;
}

/* ======  ACCESSIBILITY */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ======  IMAGE ASPECT RATIO FIX */
img[src*="/assets/images/cup-logo/"],
img[src*="/assets/images/team-logo/"],
img[src*="/assets/images/player-logo/"] {
    object-fit: contain;
    aspect-ratio: 1/1;
}

/* ======  SCROLL */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--Primary-A-Color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--Primary-C-Color);
}

::-webkit-scrollbar-track {
    background-color: var(--A-Color);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* ======  SETTINGS */
.STING-WEB-Settings {
    position: fixed;
    bottom: -100%;
    width: 96%;
    left: 0;
    right: 0;
    background: var(--B-Color);
    margin: 0 auto;
    max-width: 600px;
    border-radius: 12px;
    z-index: 999;
    transition: bottom 0.5s ease-in-out;
    animation: slideUp 0.5s ease-out;
}

.STING-WEB-Settings-H {
    width: 90%;
    margin: 0 auto;
    padding: 12px 0;
}

.STING-WEB-Settings-Top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #303651;
}

.STING-WEB-Settings-Title,
.Close-Settings {
    font-size: 18px;
    color: var(--Primary-E-Color);
}

.STING-WEB-Setting {
    display: grid;
    gap: 12px;
}

.STING-WEB-Settings-Bottom {
    margin: 12px auto;
}

.STING-WEB-Setting-Name {
    font-size: 13px;
    color: var(--Primary-C-Color);
}

.STING-WEB-Setting-View {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid #303651;
}

.STING-WEB-Setting-Name-B {
    font-size: 16px;
    color: var(--Primary-E-Color);
}

.language-selector {
    display: flex;
    gap: 15px;
}

.STING-WEB-language-option {
    font-size: 14px;
    padding: 2px 15px;
    text-decoration: none;
    color: var(--Primary-E-Color);
    border-radius: 6px;
    background-color: var(--A-Color);
    transition: all 0.3s ease;
}

.STING-WEB-language-option.actine {
    color: var(--Primary-A-Color);
    background: var(--C-Color);
}

.STING-WEB-Settings.closed {
    display: none;
}

.STING-WEB-Ver {
    text-align: center;
    display: block;
    font-size: 12px;
    color: var(--Primary-C-Color);
}

.STING-WEB-Dev {
    text-align: center;
    display: block;
    font-size: 12px;
    color: var(--Primary-C-Color);
}

.STING-WEB-Standings-Top {
    width: 93%;
    max-width: 1050px;
    margin: 20px auto;
    background: var(--C-Color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.STING-WEB-Standings-Top-Right-Wrap h2 {
    color: var(--Primary-A-Color);
    font-size: 22px;
}

.STING-WEB-Standings-Top-Right-Path {
    display: flex;
    gap: 6px;
    font-size: 15px;
    color: var(--Primary-B-Color);
}

.STING-WEB-Standings-Top-Right-Wrap {
    display: grid;
    gap: 12px;
}

.STING-WEB-Standings-Top-Right-Path a {
    color: var(--Primary-E-Color);
}

.STING-WEB-Search-Standings {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--B-Color);
    padding: 2px 20px;
    border-radius: 50px;
    margin-left: 25px;
}

.STING-WEB-Search-Standings input[type="search"] {
    background: transparent;
    border: 0;
    font-size: 15px;
    width: 100%;
    padding: 5px;
    color: var(--Primary-E-Color);
}

/* ======  APP DOWNLOAD BANNER ====== */
.app-download-banner {
    background: linear-gradient(135deg, #f6f9fc 0%, #edf2f7 100%);
    border-radius: 20px;
    margin: 40px auto;
    padding: 0;
    position: relative;
    max-width: var(--Max-Size);
    width: 93%;
    overflow: hidden;
    transition: all 0.3s ease;
}

body.dark-mode .app-download-banner {
    background: linear-gradient(135deg, var(--Dark-B-Color) 0%, var(--Dark-C-Color) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 60px;
    gap: 40px;
}

.banner-left {
    flex: 1;
    text-align: right;
    z-index: 2;
}

.banner-right {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

.banner-title {
    font-size: 32px;
    color: var(--Primary-E-Color);
    margin-bottom: 15px;
    font-weight: 800;
}

.banner-desc {
    font-size: 16px;
    color: var(--Primary-C-Color);
    margin-bottom: 30px;
    line-height: 1.6;
}

.download-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.store-btn img {
    height: 45px;
    transition: transform 0.3s ease;
}

.store-btn:hover img {
    transform: translateY(-3px);
}

.iphone-mockup img {
    max-width: 300px;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transform: rotate(-5deg);
    transition: transform 0.3s ease;
}

.iphone-mockup:hover img {
    transform: rotate(0deg) scale(1.02);
}

@media (max-width: 900px) {
    .banner-content {
        flex-direction: column-reverse;
        padding: 30px 20px;
        text-align: center;
    }

    .banner-left {
        text-align: center;
    }

    .download-buttons {
        justify-content: center;
    }

    .iphone-mockup img {
        max-width: 220px;
        transform: rotate(0);
        margin-bottom: 20px;
    }
}

/* Footer Fixes */
.footer-container {
    padding-bottom: 0;
    margin-bottom: 0;
}

body {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    body {
        margin-bottom: 80px !important;
        /* Keep mobile menu space */
    }
}