.STING-WEB-Yesterday_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b4bec7' viewBox='0 0 24 24' data-testid='ChevronRightIcon'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    transition: all 0.2s ease;
}

.STING-WEB-Yesterday_SVG:hover {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2339dbbf' viewBox='0 0 24 24' data-testid='ChevronRightIcon'%3E%3Cpath d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}

.STING-WEB-Tomorrow_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b4bec7' viewBox='0 0 24 24' data-testid='ChevronLeftIcon'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    transition: all 0.2s ease;
}

.STING-WEB-Tomorrow_SVG:hover {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2339dbbf' viewBox='0 0 24 24' data-testid='ChevronLeftIcon'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
}

/* Flip arrows for Inward look in RTL */
[dir="rtl"] .STING-WEB-Yesterday_SVG,
[dir="rtl"] .STING-WEB-Tomorrow_SVG {
    transform: scaleX(-1);
}

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

.STING-WEB-Mute-Toggle {
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
    background: var(--C-Color);
}

.STING-WEB-Mute-Toggle:hover {
    background: var(--Primary-D-Color);
    transform: scale(1.1);
}

.STING-WEB-Mute-Toggle.muted .speaker-on {
    display: none;
}

.STING-WEB-Mute-Toggle:not(.muted) .speaker-off {
    display: none;
}

.STING-WEB-Mute-Toggle svg {
    width: 20px;
    height: 20px;
    fill: var(--Primary-C-Color);
}

.STING-WEB-Mute-Toggle.muted svg {
    fill: var(--Primary-A-Color);
}

.STING-WEB-Matches-Zone {
    width: 100%;
    padding: 10px 0;
}

.STING-WEB-Matches-Settings {
    display: grid;
    grid-template-columns: 1.5fr .5fr 1fr .5fr 1fr 1fr;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    justify-items: center;
}

@media (max-width: 720px) {
    .STING-WEB-Matches-Settings {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        width: 95%;
    }

    .STING-WEB-Day-Matches {
        grid-column: span 3;
        justify-content: center;
        margin-bottom: 5px;
    }
}

.STING-WEB-Name-Zone {
    width: 100%;
    text-align: center;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.STING-WEB-Matches-UI {
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 6px;
}

.STING-WEB-Day-Matches {
    display: flex;
    gap: 4px;
    color: var(--Primary-A-Color);
    font-size: 14px;
}

#STING-WEB-Visitor {
    padding: 0;
    border: 0;
    border-radius: 5px;
    font-size: 15px;
    width: 18px;
    height: 20px;
    color: transparent;
    cursor: pointer !important;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='20' viewBox='0 0 18 20'%3E%3Cpath id='Combined_Shape' data-name='Combined Shape' d='M2.7,20A2.716,2.716,0,0,1,0,17.273V4.546A2.717,2.717,0,0,1,2.7,1.818H4.5V.909a.9.9,0,1,1,1.8,0v.909h5.4V.909a.9.9,0,1,1,1.8,0v.909h1.8A2.717,2.717,0,0,1,18,4.546V17.273A2.716,2.716,0,0,1,15.3,20Zm-.9-2.727a.905.905,0,0,0,.9.909H15.3a.905.905,0,0,0,.9-.909V9.091H1.8Zm14.4-10V4.546a.906.906,0,0,0-.9-.91H13.5v.91a.9.9,0,1,1-1.8,0v-.91H6.3v.91a.9.9,0,1,1-1.8,0v-.91H2.7a.906.906,0,0,0-.9.91V7.273Z' fill='%23b4bec7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 20px;
    margin-left: 12px;
}

.STING-WEB-Date-Here {
    color: var(--Primary-E-Color);
    font-size: 12px;
    margin: 0 4px;
    margin-top: 2px;
    min-width: 105px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
}

.STING-WEB-Match-div.END .STING-WEB-Progress {
    display: none;
}

.STING-WEB-Filter {
    width: 100%;
    text-align: center;
    align-items: center;
    display: grid;
    justify-items: center;
}

.STING-WEB-Filter .LiveNow,
.STING-WEB-Filter #Matches-All,
.STING-WEB-Filter .ActiveNow {
    font-size: 12px;
    border-radius: 50px;
    background: var(--C-Color);
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 3px;
    padding: 0 5px;
}

.STING-WEB-Filter .LiveNow {
    color: #b4bec7;
}

.LiveNow:before {
    content: "";
    width: 6px;
    height: 6px;
    background: #ff0000;
    display: flex;
    align-items: center;
    border-radius: 50px;
    animation: 0.7s ease-in-out infinite blinker;
}

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

.LiveNow.ActiveNow {
    display: none;
}

.STING-WEB-Matches-Center {
    width: 96%;
    margin: 10px auto;
    display: grid;
}


/* Fix minor header shifts */
.STING-WEB-Menu {
    min-height: 20px;
}

.STING-WEB-Header-Left {
    min-height: 20px;
}

/* Fix minor footer shift */
.STING-WEB-Top-Footer {
    min-height: 30px;
}

.STING-WEB-Cup-Matches {
    order: 2;
    display: grid;
}

.STING-WEB-Cup-Name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 10px auto;
    background: var(--B-Color);
    border-radius: 12px;
    padding: 10px 15px;
    position: relative;
    border: 1px solid var(--Primary-D-Color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.STING-WEB-Name-Setting {
    font-size: 12px;
    padding: 6px 0;
    color: var(--Primary-B-Color);
}

.STING-WEB-One-Setting {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.STING-WEB-Cup-Name-Right,
.STING-WEB-Cup-Name-Left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.STING-WEB-Cup-Matches.pinned {
    order: 1;
}

.league-group.collapsed .STING-WEB-Match-div {
    display: none !important;
}

.STING-WEB-Mute-Toggle {
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
    background: var(--C-Color);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.STING-WEB-Mute-Toggle:hover {
    background: var(--Primary-A-Color);
    transform: scale(1.05);
}

.STING-WEB-Mute-Toggle svg {
    width: 20px;
    height: 20px;
    fill: var(--Primary-B-Color);
    transition: all 0.2s ease;
}

.STING-WEB-Mute-Toggle:hover svg {
    fill: #fff !important;
}

/* Speaker Icons Toggle */
.STING-WEB-Mute-Toggle .speaker-off {
    display: none;
}

.STING-WEB-Mute-Toggle .speaker-on {
    display: block;
}

.STING-WEB-Mute-Toggle.muted {
    background: rgba(255, 82, 82, 0.1);
    border-color: #ff5252;
}

.STING-WEB-Mute-Toggle.muted .speaker-on {
    display: none;
}

.STING-WEB-Mute-Toggle.muted .speaker-off {
    display: block;
    fill: #ff5252 !important;
}

.STING-WEB-Cup-Name-Right img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.STING-WEB-Cup-Name-Right a {
    font-size: 17px;
    color: var(--Primary-B-Color);
    font-weight: 800;
}

.STING-WEB-Cup-Name-Left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.STING-WEB-Cup-Name-Left a.STING-WEB-Standing {
    font-size: 15px;
    color: var(--Primary-B-Color);
    font-weight: 700;
    text-decoration: none;
    background: var(--C-Color);
    padding: 4px 12px;
    border-radius: 6px;
    transition: all 0.3s;
}

.STING-WEB-Cup-Name-Left a.STING-WEB-Standing:hover {
    background: var(--Primary-A-Color);
    color: #fff !important;
}

.STING-WEB-unShow_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='M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213' stroke='%23fc4d4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Show_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.42012 12.7132C2.28394 12.4975 2.21584 12.3897 2.17772 12.2234C2.14909 12.0985 2.14909 11.9015 2.17772 11.7766C2.21584 11.6103 2.28394 11.5025 2.42012 11.2868C3.54553 9.50484 6.8954 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7766C21.8517 11.9015 21.8517 12.0985 21.8231 12.2234C21.785 12.3897 21.7169 12.4975 21.5807 12.7132C20.4553 14.4952 17.1054 19 12.0004 19C6.8954 19 3.54553 14.4952 2.42012 12.7132Z' stroke='%23b4bec7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.0004 15C13.6573 15 15.0004 13.6569 15.0004 12C15.0004 10.3431 13.6573 9 12.0004 9C10.3435 9 9.0004 10.3431 9.0004 12C9.0004 13.6569 10.3435 15 12.0004 15Z' stroke='%23b4bec7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.STING-WEB-unPinned_SVG {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23bfc3d4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0004 15L12.0004 22M8.00043 7.30813V9.43875C8.00043 9.64677 8.00043 9.75078 7.98001 9.85026C7.9619 9.93852 7.93194 10.0239 7.89095 10.1042C7.84474 10.1946 7.77977 10.2758 7.64982 10.4383L6.08004 12.4005C5.4143 13.2327 5.08143 13.6487 5.08106 13.9989C5.08073 14.3035 5.21919 14.5916 5.4572 14.7815C5.73088 15 6.26373 15 7.32943 15H16.6714C17.7371 15 18.27 15 18.5437 14.7815C18.7817 14.5916 18.9201 14.3035 18.9198 13.9989C18.9194 13.6487 18.5866 13.2327 17.9208 12.4005L16.351 10.4383C16.2211 10.2758 16.1561 10.1946 16.1099 10.1042C16.0689 10.0239 16.039 9.93852 16.0208 9.85026C16.0004 9.75078 16.0004 9.64677 16.0004 9.43875V7.30813C16.0004 7.19301 16.0004 7.13544 16.0069 7.07868C16.0127 7.02825 16.0223 6.97833 16.0357 6.92937C16.0507 6.87424 16.0721 6.8208 16.1149 6.71391L17.1227 4.19423C17.4168 3.45914 17.5638 3.09159 17.5025 2.79655C17.4489 2.53853 17.2956 2.31211 17.0759 2.1665C16.8247 2 16.4289 2 15.6372 2H8.36368C7.57197 2 7.17611 2 6.92494 2.1665C6.70529 2.31211 6.55199 2.53853 6.49838 2.79655C6.43707 3.09159 6.58408 3.45914 6.87812 4.19423L7.88599 6.71391C7.92875 6.8208 7.95013 6.87424 7.96517 6.92937C7.97853 6.97833 7.98814 7.02825 7.99392 7.07868C8.00043 7.13544 8.00043 7.19301 8.00043 7.30813Z' stroke='%23b4bec7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Pinned_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='M8.3767 15.6163L2.71985 21.2732M11.6944 6.64181L10.1335 8.2027C10.0062 8.33003 9.94252 8.39369 9.86999 8.44427C9.80561 8.48917 9.73616 8.52634 9.66309 8.555C9.58077 8.58729 9.49249 8.60495 9.31592 8.64026L5.65145 9.37315C4.69915 9.56361 4.223 9.65884 4.00024 9.9099C3.80617 10.1286 3.71755 10.4213 3.75771 10.7109C3.8038 11.0434 4.14715 11.3867 4.83387 12.0735L11.9196 19.1592C12.6063 19.8459 12.9497 20.1893 13.2821 20.2354C13.5718 20.2755 13.8645 20.1869 14.0832 19.9928C14.3342 19.7701 14.4294 19.2939 14.6199 18.3416L15.3528 14.6771C15.3881 14.5006 15.4058 14.4123 15.4381 14.33C15.4667 14.2569 15.5039 14.1875 15.5488 14.1231C15.5994 14.0505 15.663 13.9869 15.7904 13.8596L17.3512 12.2987C17.4326 12.2173 17.4734 12.1766 17.5181 12.141C17.5578 12.1095 17.5999 12.081 17.644 12.0558C17.6936 12.0274 17.7465 12.0048 17.8523 11.9594L20.3467 10.8904C21.0744 10.5785 21.4383 10.4226 21.6035 10.1706C21.7481 9.95025 21.7998 9.68175 21.7474 9.42348C21.6875 9.12813 21.4076 8.84822 20.8478 8.28839L15.7047 3.14526C15.1448 2.58543 14.8649 2.30552 14.5696 2.24565C14.3113 2.19329 14.0428 2.245 13.8225 2.38953C13.5705 2.55481 13.4145 2.91866 13.1027 3.64636L12.0337 6.14071C11.9883 6.24653 11.9656 6.29944 11.9373 6.34905C11.9121 6.39313 11.8836 6.43522 11.852 6.47496C11.8165 6.51971 11.7758 6.56041 11.6944 6.64181Z' stroke='%23b4bec7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Lineup_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.5 14'%3E%3Cpath d='M-144.319,20h-16.875a.563.563,0,0,0-.563.563h0V32.937a.563.563,0,0,0,.563.563h16.875a.563.563,0,0,0,.563-.563h0V20.563a.563.563,0,0,0-.563-.563Zm-7.875,4.58a2.239,2.239,0,0,1,1.619,2.721,2.239,2.239,0,0,1-1.619,1.619Zm-8.437,0a2.239,2.239,0,0,1,1.619,2.721,2.239,2.239,0,0,1-1.619,1.619Zm7.313,4.34a2.239,2.239,0,0,1-1.619-2.721,2.239,2.239,0,0,1,1.619-1.619Zm0-5.495a3.371,3.371,0,0,0-2.765,3.884,3.371,3.371,0,0,0,2.765,2.765v2.3h-7.313v-2.3a3.371,3.371,0,0,0,2.765-3.884,3.371,3.371,0,0,0-2.765-2.765v-2.3h7.313Zm8.437,5.495A2.239,2.239,0,0,1-146.5,26.2a2.239,2.239,0,0,1,1.619-1.619Zm0-5.495a3.371,3.371,0,0,0-2.765,3.884,3.371,3.371,0,0,0,2.765,2.765v2.3h-7.313v-2.3a3.371,3.371,0,0,0,2.765-3.884,3.372,3.372,0,0,0-2.765-2.765v-2.3h7.312Z' transform='translate(162.006 -19.75)' fill='%235a83ff' stroke='%235a83ff' stroke-width='0.5'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 20px;
    height: 20px;
    display: none;
    cursor: pointer;
    transform: rotate(90deg);
}

/* Hide lineup SVG on mobile to prevent overlap with team names */
@media (max-width: 880px) {
    .STING-WEB-Lineup_SVG {
        display: none !important;
    }
}

.STING-WEB-Live_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.5 13.5'%3E%3Cpath d='M12,8.75A3.25,3.25,0,1,0,15.25,12,3.25,3.25,0,0,0,12,8.75Z' transform='translate(-2.75 -5.25)' fill='%23ff3131c2'%3E%3C/path%3E%3Cpath d='M8.634,7.462a.75.75,0,0,1,.015,1.061,5.022,5.022,0,0,0,0,6.954.75.75,0,0,1-1.075,1.046,6.522,6.522,0,0,1,0-9.046A.75.75,0,0,1,8.634,7.462Zm6.733,0a.75.75,0,0,1,1.061.015,6.522,6.522,0,0,1,0,9.046.75.75,0,1,1-1.075-1.046,5.022,5.022,0,0,0,0-6.954A.75.75,0,0,1,15.366,7.462Z' transform='translate(-2.75 -5.25)' fill='%23ff3131c2' fill-rule='evenodd'%3E%3C/path%3E%3Cpath d='M6.52,5.47a.75.75,0,0,1,0,1.061,7.725,7.725,0,0,0,0,10.938.75.75,0,1,1-1.06,1.062,9.225,9.225,0,0,1,0-13.062A.75.75,0,0,1,6.52,5.47Zm10.959,0a.75.75,0,0,1,1.061,0,9.225,9.225,0,0,1,0,13.062.75.75,0,0,1-1.06-1.062,7.725,7.725,0,0,0,0-10.938A.75.75,0,0,1,17.48,5.47Z' transform='translate(-2.75 -5.25)' fill='%23ff3131c2' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 18px;
    height: 18px;
    display: none;
    cursor: pointer;
    animation: 0.7s ease-in-out infinite blinker;
}

.STING-WEB-Match-div.NOT .STING-WEB-Match-div-Here {
    height: 45px;
}

.STING-WEB-Match-Event {
    display: none;
    align-items: center;
    border-radius: 8px;
}

/* .STING-WEB-Match-div-Here { display: flex; align-items: center; width: 90%; margin: 0 auto; background: var(--C-Color); border-radius: 10px; margin-bottom: 5px; padding: 5px 12px; } */
.STING-WEB-Match-div-Here {
    display: grid;
    align-items: center;
    width: 93%;
    margin: 0 auto;
    background: var(--C-Color);
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 10px;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 15px;
    position: relative;
    color: var(--Primary-B-Color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.STING-WEB-Match-div-Here:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.STING-WEB-Match-div-Right {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: end;
    width: 100%;
}

.STING-WEB-Match-div-Team-Name {
    font-size: 14px;
    color: var(--Primary-B-Color);
    font-weight: 600;
}

.STING-WEB-Match-div-Team-Logo {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    object-fit: contain;
}

.STING-WEB-Cup-Settings {
    position: absolute;
    top: 40px;
    background: var(--B-Color);
    padding: 15px;
    border-radius: 10px;
    width: 60px;
    left: 0;
    display: none;
    gap: 20px;
    z-index: 9;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.STING-WEB-Name-Setting:hover {
    color: var(--Primary-A-Color);
}

.STING-WEB-Match-div-Center {
    width: 100%;
    justify-items: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
}

.STING-WEB-div-Time-Display.ExtraTime {
    fill: #ff3131;
    font-size: 8px;
    font-weight: 600;
}

.Match-div-Status {
    font-size: 12px;
    color: var(--Primary-B-Color);
    opacity: 0.9;
}

.Match-div-Status.Not-Start {
    font-size: 14px;
}

.STING-WEB-Match-div-Goal {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.STING-WEB-Time-Match {
    position: absolute;
    right: 5px;
    top: 2px;
    color: var(--Primary-C-Color);
    font-size: 0;
}

.STING-WEB-Match-div.END .STING-WEB-Match-div-Goal {
    background: var(--A-Color);
    border-radius: 50px;
    height: 24px;
    max-width: 70px;
}

.STING-WEB-Match-Event:hover {
    transform: scale(1.1);
    transition: 300ms all ease-in-out;
}

.Goal-Team {
    font-size: 14px;
}

.STING-WEB-Match-div.LIVE a .STING-WEB-Match-div-Center .STING-WEB-Match-div-Goal {
    gap: 20px;
}

.STING-WEB-Circular-Progress {
    position: relative;
    width: 100%;
    height: 100%;
}

.STING-WEB-Match-div.NOT .STING-WEB-Match-div-Goal {
    display: none;
}

.STING-WEB-div-Time-Display {
    text-align: center;
    font-size: 7px;
    color: var(--Primary-A-Color);
    letter-spacing: 1px;
    width: 50px;
    height: 50px;
    border: 1px solid var(--Primary-A-Color);
    align-content: center;
    border-radius: 50px;
    display: block;
}

.STING-WEB-One-Setting:nth-child(1) .STING-WEB-Name-Setting {
    color: #fc4d4d;
}

.Goal-Team-Part {
    color: #445463;
    font-style: normal;
    margin: 0 4px;
}

.STING-WEB-Match-div-Left {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    gap: 5px;
}

.STING-WEB-Match-div.END .STING-WEB-Circular-Progress {
    display: none;
}

.STING-WEB-Match-div.LIVE {
    order: 1;
}

.STING-WEB-Match-div.NOT {
    order: 2;
}

.STING-WEB-Match-div.END {
    order: 3;
}

.STING-WEB-PenaltyScore {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    place-self: center;
    gap: 4px;
    font-size: 10px;
}

.STING-WEB-PenaltyScore svg {
    width: 20px;
    height: 20px;
}

.STING-WEB-Match-div.LIVE .STING-WEB-Match-div-Here {
    height: 95px;
}

.STING-WEB-Match-div.LIVE .STING-WEB-Match-div-Right,
.STING-WEB-Match-div.LIVE .STING-WEB-Match-div-Left {
    display: grid;
    gap: 5px;
    width: 100%;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.STING-WEB-Match-div.LIVE .STING-WEB-Match-div-Team-Name {
    grid-row: none;
    text-align: center;
}

.STING-WEB-Match-div.LIVE .STING-WEB-Match-div-Team-Logo {
    width: 30px !important;
    height: 30px !important;
}

.STING-WEB-Match-div.LIVE .Goal-Team {
    font-size: 20px;
    font-weight: 600;
}

.STING-WEB-Match-div.LIVE .Goal-Team-Part {
    display: none;
}

.STING-WEB-Yesterday_SVG,
.STING-WEB-Tomorrow_SVG,
#STING-WEB-Visitor,
.STING-WEB-Filter div {
    cursor: pointer !important;
}

.STING-WEB-Progress {
    position: relative;
    width: 40px;
    height: 40px;
}

.STING-WEB-Progress::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 3px;
    height: 8px;
    background-color: #22C55E;
    transform: translateX(-50%) rotate(0deg);
    z-index: 99;
    border-radius: 50px;
}

@media (max-width: 720px) {
    .STING-WEB-Standing {
        display: none;
    }

    .STING-WEB-Match-div-Team-Name {
        font-size: 12px;
    }
}

/* Modern Calendar Styles */
input#STING-WEB-Visitor {
    cursor: pointer !important;
}

input#STING-WEB-Visitor::-webkit-calendar-picker-indicator {
    display: none !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

input#STING-WEB-Visitor::-webkit-inner-spin-button,
input#STING-WEB-Visitor::-webkit-clear-button {
    display: none !important;
}

input[type="date"]#STING-WEB-Visitor {
    cursor: pointer !important;
    font-family: inherit !important;
}


#STING-WEB-Visitor:focus,
#STING-WEB-Visitor:active,
#STING-WEB-Visitor:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    transform: none !important;
    animation: none !important;
}

#STING-WEB-Visitor::-webkit-datetime-edit,
#STING-WEB-Visitor::-webkit-datetime-edit-fields-wrapper,
#STING-WEB-Visitor::-webkit-datetime-edit-text,
#STING-WEB-Visitor::-webkit-datetime-edit-month-field,
#STING-WEB-Visitor::-webkit-datetime-edit-day-field,
#STING-WEB-Visitor::-webkit-datetime-edit-year-field {
    color: transparent !important;
    background: transparent !important;
    display: none !important;
}

.date-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

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

.modern-calendar {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 340px;
    max-width: 90vw;
    background: var(--B-Color);
    border-radius: 16px;
    padding: 20px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modern-calendar.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.calendar-title {
    font-size: 18px;
    color: var(--Primary-A-Color);
    font-weight: 600;
}

.calendar-nav {
    display: flex;
    gap: 8px;
}

.calendar-nav button {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--C-Color);
    color: var(--Primary-E-Color);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.calendar-nav button:hover {
    background: var(--Primary-A-Color);
    color: var(--C-Color);
    transform: scale(1.1);
}

.calendar-nav button:active {
    transform: scale(0.95);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-weekday {
    text-align: center;
    padding: 8px 0;
    font-size: 11px;
    color: var(--Primary-C-Color);
    font-weight: 600;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--C-Color);
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--Primary-E-Color);
    border: 2px solid transparent;
    transition: all 0.2s;
    position: relative;
}

.calendar-day:hover:not(.other-month) {
    background: rgba(57, 219, 191, 0.2);
    border-color: var(--Primary-A-Color);
    transform: scale(1.05);
}

.calendar-day.other-month {
    opacity: 0.3;
}

.calendar-day.other-month:hover {
    opacity: 0.5;
    background: rgba(57, 219, 191, 0.1);
}

.calendar-day.today {
    background: rgba(57, 219, 191, 0.1);
    border-color: var(--Primary-A-Color);
}

.calendar-day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background: var(--Primary-A-Color);
    border-radius: 50%;
}

.calendar-day.selected {
    background: var(--Primary-A-Color);
    color: var(--C-Color);
    font-weight: 600;
}

.calendar-day.selected:hover {
    transform: scale(1.05);
}

.calendar-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-today-btn {
    padding: 8px 16px;
    background: var(--C-Color);
    border: none;
    border-radius: 8px;
    color: var(--Primary-E-Color);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-today-btn:hover {
    background: var(--Primary-A-Color);
    color: var(--C-Color);
}

.calendar-close-btn {
    padding: 8px 16px;
    background: rgba(244, 63, 94, 0.2);
    border: none;
    border-radius: 8px;
    color: #f43f5e;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-close-btn:hover {
    background: #f43f5e;
    color: white;
}

@media (max-width: 380px) {
    .modern-calendar {
        width: 320px;
        padding: 15px;
    }

    .calendar-day {
        font-size: 13px;
    }

    .calendar-title {
        font-size: 16px;
    }
}

/* Halftime status styling */
.STING-WEB-div-Time-Display[style*="color: #ffc107"] {
    color: #ffc107 !important;
}

.STING-WEB-Circular-Progress-Bar[style*="stroke: #ffc107"] {
    stroke: #ffc107 !important;
}

.Time-Start[style*="color: #ffc107"] {
    color: #ffc107 !important;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid #ffc107;
}

/* Halftime text styling */
.Match-div-Status.Live:contains("نهاية الشوط الأول") {
    color: #ffc107;
    font-weight: 600;
}

.STING-WEB-First-News {
    display: grid;
    align-items: center;
    background: var(--B-Color);
    border-radius: 12px;
    transition: transform 0.3s;
    gap: 8px;
    margin-bottom: 12px;
    grid-template-columns: 1.5fr 1.5fr;
    min-height: 266px;
}

.STING-WEB-First-News-Right {
    display: flex;
    height: 100%;
    max-height: 270px;
}

.STING-WEB-First-News-Left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.STING-WEB-Four-News-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.STING-WEB-Two-News {
    display: grid;
    gap: 10px;
    background: var(--B-Color);
    border-radius: 12px;
    width: 97%;
    margin: 2px auto;
    height: 265px;
    transition: transform 0.3s;
}

.STING-WEB-Two-News-Top {
    width: 100%;
    height: 170px;
}

.STING-WEB-Two-News-Bottom {
    display: grid;
    justify-items: center;
    width: 93%;
    margin: 0 auto;
    padding-bottom: 5px;
}

#loadMoreBtn,
#sideLoadMoreBtn {
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px auto;
    width: 200px;
    height: 50px;
    justify-content: center;
    font-size: 16px;
    border-radius: 50px;
    border: 0;
    color: var(--Primary-B-Color);
    background: var(--B-Color);
    cursor: pointer;
}

.STING-WEB-Four-News-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.STING-WEB-Three-News {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px auto;
    transition: transform 0.3s;
    background: var(--B-Color);
}

.STING-WEB-Three-News-Right {
    flex: 1;
    max-width: 200px;
}

.STING-WEB-Three-News-Left {
    flex: 2;
    padding: 15px;
    align-content: center;
}

.STING-WEB-Short-Content {
    font-size: 11px;
    color: var(--Primary-C-Color);
    line-height: 28px;
}

.STING-WEB-Match-div.NOT .STING-WEB-Match-div-Here {
    height: 45px;
}

.STING-WEB-First-News-Right img {
    width: 100%;
    height: 100%;
    border-radius: 0 12px 12px 0;
    margin: 0 auto;
    object-fit: cover;
}

.STING-WEB-Two-News-Top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.STING-WEB-Three-News-Right img {
    width: 100%;
    height: 100px;
    border-radius: 0 8px 8px 0;
    object-fit: cover;
}

.STING-WEB-Double {
    width: 93%;
    max-width: var(--Max-Size);
    margin: 20px auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    align-items: start;
}

.STING-WEB-League {
    width: 100%;
    margin: 0px auto;
    max-width: var(--Max-Size);
}

.STING-WEB-League-Info {
    width: 90%;
    background: var(--C-Color);
    border-radius: 30px;
    padding: 20px;
    margin: 0 auto;
    align-content: center;
    margin-bottom: 20px;
}

.STING-WEB-League-Top {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 25px;
}

.STING-WEB-League-Top img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    padding: 0 10px;
}

.STING-WEB-League-Top h2 {
    font-size: 18px;
    color: #fff;
}

.STING-WEB-League-Bottom {
    display: flex;
    font-size: 14px;
    margin: 5px auto 0 auto;
    width: 96%;
    overflow-x: auto;
    padding: 10px 0;
    justify-content: flex-start;
    min-height: 50px;
    align-items: center;
}

.STING-WEB-League-Bottom .active {
    font-weight: 600;
    background: transparent;
    color: #39dbbf;
    border-bottom: 2px solid #39dbbf;
}

.STING-WEB-League-Bottom button {
    padding: 0 5px 10px 5px;
    margin: 0 2px;
    color: var(--Primary-B-Color);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}

.STING-WEB-Standings-C.active,
.STING-WEB-Scorers.active {
    display: block;
}

.STING-WEB-Group-Name {
    font-size: 14px;
    margin: 12px 15px;
    color: var(--Primary-C-Color);
    display: none !important;
}


.STING-WEB-Standings-C-Header {
    height: 35px;
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr .5fr .5fr .5fr;
    align-items: center;
    text-align: center;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--Primary-E-Color);
    background: var(--B-Color);
    border-radius: 8px;
    margin-bottom: 8px;
}

.STING-WEB-Standings-C-Header .Position,
.STING-WEB-Scorers-Header .Position {
    text-align: center;
    padding-right: 1px;
    margin-right: -3px;
}

.STING-WEB-Standings-C-Header .Teams,
.STING-WEB-Scorers-Header .Player {
    text-align: right;
    padding-right: 12px;
}

.Phone-Show {
    display: none;
}

.STING-WEB-Scorers-Tabs {
    display: flex;
    margin: 10px auto;
    align-items: center;
    width: 93%;
    max-width: 450px;
    background: var(--B-Color);
    border-radius: 50px;
    margin-bottom: 15px;
}

.STING-WEB-Scorers-Tab.active {
    color: var(--A-Color);
    font-weight: 600;
    background: var(--Primary-A-Color);
}

.STING-WEB-Scorers-Tab {
    background: var(--B-Color);
    color: #ddddddb5;
    padding: 8px;
    border: 0;
    font-size: 14px;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.STING-WEB-Scorers-Content {
    transition: all 0.3s ease;
    opacity: 1;
}

.STING-WEB-Scorers-Header {
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr;
    align-items: center;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--Primary-E-Color);
    border-radius: 8px;
    width: 93%;
    margin: 0 auto;
}

.STING-WEB-Scorers-Header .Position {
    text-align: start;
    margin-right: 18px;
}

.STING-WEB-Standings-C-Header .Teams,
.STING-WEB-Scorers-Header .Player {
    text-align: right;
    padding-right: 12px;
}

.Club {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-self: center;
}

.STING-WEB-Scorers-row {
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr;
    align-items: center;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--Primary-E-Color);
    background: var(--C-Color);
    border-radius: 6px;
    margin: 5px 0;
}

.Match-Date-Group {
    display: grid;
    background: var(--A-Color);
    border-radius: 12px;
    margin-bottom: 12px;
}

.Match-Teams {
    display: grid;
    grid-template-columns: 1fr .5fr 1fr;
    align-items: center;
    background: var(--C-Color);
    width: 96%;
    margin: 0 auto;
    padding: 6px;
    border-radius: 8px;
    margin-bottom: 5px;
    gap: 8px;
}

.Match-Center {
    display: grid;
    align-items: center;
}

.Match-Date-Title {
    background: var(--B-Color);
    width: 93%;
    padding: 4px 12px;
    border-radius: 7px;
    margin: 5px auto;
    color: var(--Primary-E-Color);
    font-size: 14px;
    text-align: center;
    display: block;
}

.Right-Team {
    direction: ltr;
}

.Right-Team,
.Left-Team {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.STING-WEB-Standings-C-row {
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr .5fr .5fr .5fr;
    align-items: center;
    text-align: center;
    background: var(--C-Color);
    padding: 1px 0;
    font-size: 14px;
    color: var(--Primary-E-Color);
    border-radius: 6px;
    margin: 5px 0;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.STING-WEB-Standings-C-row span,
.STING-WEB-Standings-C-row div {
    line-height: 1.4;
    min-height: 20px;
}

.Team-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.STING-WEB-Standings-C-row:hover {
    transform: translateX(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.STING-WEB-Scorers-row .Player {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.Player img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.Player-Info {
    display: grid;
    text-align: start;
    font-size: 13px;
}

.Player-zone {
    font-size: 11px;
    color: var(--Primary-C-Color);
}

.Club {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-self: center;
}

.Club img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.STING-WEB-Scorers-row .Goals {
    background: #7074881c;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    align-content: center;
}

.Right-Team {
    direction: ltr;
}

.Right-Team img,
.Left-Team img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.Right-Team span,
.Left-Team span {
    font-size: 13px;
}

.Match-Center {
    display: grid;
    align-items: center;
}

.Match-Time,
.Match-Goals {
    text-align: center;
    font-size: 15px;
    color: var(--Primary-E-Color);
}

.Match-Round {
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
    color: var(--Primary-C-Color);
}

.Team-logo img {
    width: 30px;
    height: 45px;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.STING-WEB-Post {
    width: 93%;
    margin: 20px auto;
    max-width: var(--Max-Size);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}

.STING-WEB-Post-Top-IMG {
    width: 100%;
    height: 450px;
    margin: 0 auto;
}

.STING-WEB-Post-Top-IMG img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 30px 30px 0 0;
}

.STING-WEB-Post-Right {
    border-radius: 12px;
    display: grid;
}

.STING-WEB-Post-Top-Title {
    padding: 12px;
    margin: 10px auto;
    width: 90%;
}

.STING-WEB-Post-Top-Title h2 {
    font-size: 18px;
}

.STING-WEB-Post-Top {
    background: var(--C-Color);
    border-radius: 30px;
    width: 96%;
    margin: 0 auto;
}

.STING-WEB-Post-Top-Detils {
    display: flex;
    gap: 30px;
    width: 88%;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 30px;
}

.STING-WEB-Wrap {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--Primary-E-Color);
    font-size: 12px;
    letter-spacing: 1px;
}

.STING-WEB-Post-Center {
    margin: 30px auto;
    width: 88%;
}

.STING-WEB-Post-Center p {
    text-align: justify;
    font-size: 15px;
    line-height: 33px;
    margin-bottom: 20px;
}

.STING-WEB-Post-Center-Left img {
    display: flex;
    align-items: center;
    justify-self: center;
    margin: 10px auto;
    border-radius: 8px;
}

@media (max-width: 720px) {
    .STING-WEB-Post {
        grid-template-columns: 1fr;
    }

    .STING-WEB-Post-Top-IMG {
        height: 300px;
    }
}

.STING-WEB-Date_SVG {
    background: no-repeat center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M2.7,20A2.716,2.716,0,0,1,0,17.273V4.546A2.717,2.717,0,0,1,2.7,1.818H4.5V.909a.9.9,0,1,1,1.8,0v.909h5.4V.909a.9.9,0,1,1,1.8,0v.909h1.8A2.717,2.717,0,0,1,18,4.546V17.273A2.716,2.716,0,0,1,15.3,20Zm-.9-2.727a.905.905,0,0,0,.9.909H15.3a.905.905,0,0,0,.9-.909V9.091H1.8Zm14.4-10V4.546a.906.906,0,0,0-.9-.91H13.5v.91a.9.9,0,1,1-1.8,0v-.91H6.3v.91a.9.9,0,1,1-1.8,0v-.91H2.7a.906.906,0,0,0-.9.91V7.273Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E") !important;
}

.STING-WEB-Post-Share li a:hover span {
    transform: scale(1.2);
}

.STING-WEB-Facebook_SVG {
    background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23ddddddb5;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D .st1%7Bfill:none;stroke:%23707488;stroke-width:2;%7D .st2%7Bfill:none;stroke:%23707488;stroke-width:2;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpath class='st0' d='M23,31H9c-4.4,0-8-3.6-8-8V9c0-4.4,3.6-8,8-8h14c4.4,0,8,3.6,8,8v14C31,27.4,27.4,31,23,31z'/%3E%3Cpath class='st0' d='M26,16h-5v-2.8c0-0.7,0.5-1.2,1.2-1.2H25V7h-4h0c-2.8,0-5,2.2-5,5v0v4h-4v5h4v10h5V21h3L26,16z'/%3E%3C/svg%3E") center no-repeat;
    width: 28px;
    height: 28px;
    display: block;
    cursor: pointer;
}

.STING-WEB-X_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' fill='%23ddddddb5' stroke-width='1.5' viewBox='0 0 50 50'%3E%3Cpath d='M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Telegram_SVG {
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.1117 4.49449C23.4296 2.94472 21.9074 1.65683 20.4317 2.227L2.3425 9.21601C0.694517 9.85273 0.621087 12.1572 2.22518 12.8975L6.1645 14.7157L8.03849 21.2746C8.13583 21.6153 8.40618 21.8791 8.74917 21.968C9.09216 22.0568 9.45658 21.9576 9.70712 21.707L12.5938 18.8203L16.6375 21.8531C17.8113 22.7334 19.5019 22.0922 19.7967 20.6549L23.1117 4.49449ZM3.0633 11.0816L21.1525 4.0926L17.8375 20.2531L13.1 16.6999C12.7019 16.4013 12.1448 16.4409 11.7929 16.7928L10.5565 18.0292L10.928 15.9861L18.2071 8.70703C18.5614 8.35278 18.5988 7.79106 18.2947 7.39293C17.9906 6.99479 17.4389 6.88312 17.0039 7.13168L6.95124 12.876L3.0633 11.0816ZM8.17695 14.4791L8.78333 16.6015L9.01614 15.321C9.05253 15.1209 9.14908 14.9366 9.29291 14.7928L11.5128 12.573L8.17695 14.4791Z' fill='%23ddddddb5'/%3E%3C/svg%3E") center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Whatsapp_SVG {
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.5129 3.4866C18.2882 1.24722 15.2597 -0.00837473 12.1032 4.20445e-05C5.54964 4.20445e-05 0.216056 5.33306 0.213776 11.8883C0.210977 13.9746 0.75841 16.0247 1.80085 17.8319L0.114014 23.9932L6.41672 22.34C8.15975 23.2898 10.1131 23.7874 12.0981 23.7874H12.1032C18.6556 23.7874 23.9897 18.4538 23.992 11.8986C24.0022 8.74248 22.7494 5.71347 20.5129 3.4866ZM12.1032 21.7768H12.0992C10.3294 21.7776 8.59195 21.3025 7.06888 20.4012L6.70803 20.1874L2.96836 21.1685L3.96713 17.52L3.73169 17.1461C2.74331 15.5709 2.22039 13.7484 2.22328 11.8889C2.22328 6.44185 6.65615 2.00783 12.1072 2.00783C14.7284 2.00934 17.2417 3.05207 19.0941 4.90662C20.9465 6.76117 21.9863 9.27564 21.9848 11.8969C21.9825 17.3456 17.5496 21.7768 12.1032 21.7768ZM17.5234 14.3755C17.2264 14.2267 15.7659 13.5085 15.4934 13.4064C15.2209 13.3044 15.0231 13.2576 14.8253 13.5552C14.6275 13.8528 14.058 14.5215 13.8847 14.7199C13.7114 14.9182 13.5381 14.9427 13.241 14.794C12.944 14.6452 11.9869 14.3316 10.8519 13.3198C9.96884 12.5319 9.36969 11.5594 9.19867 11.2618C9.02765 10.9642 9.18043 10.8057 9.32922 10.6552C9.46261 10.5224 9.62622 10.3086 9.77444 10.1348C9.92266 9.9609 9.97283 9.83776 10.0714 9.63938C10.1701 9.44099 10.121 9.26769 10.0469 9.1189C9.97283 8.97011 9.37824 7.50788 9.13083 6.9133C8.88969 6.3341 8.64513 6.4122 8.46271 6.40023C8.29169 6.39168 8.09102 6.38997 7.89264 6.38997C7.58822 6.39793 7.30097 6.53267 7.10024 6.76166C6.82831 7.05923 6.061 7.77752 6.061 9.23976C6.061 10.702 7.12532 12.1146 7.27354 12.313C7.42176 12.5114 9.36855 15.5117 12.3472 16.7989C12.9004 17.0375 13.4657 17.2468 14.0409 17.426C14.7523 17.654 15.3999 17.6204 15.9118 17.544C16.4819 17.4585 17.6694 16.8251 17.9173 16.1313C18.1653 15.4376 18.1648 14.8424 18.0884 14.7187C18.012 14.595 17.8204 14.5266 17.5234 14.3778V14.3755Z' fill='%23ddddddb5'/%3E%3C/svg%3E") center no-repeat;
    width: 28px;
    height: 28px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Messenger_SVG {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0015 2C6.36855 2 1.99997 6.12644 1.99997 11.7011C1.99997 14.6169 3.19537 17.1356 5.1402 18.8751C5.30189 19.0215 5.40074 19.2238 5.4084 19.4444L5.46357 21.2245C5.46753 21.3554 5.50362 21.4833 5.56865 21.5969C5.63368 21.7106 5.72567 21.8065 5.8365 21.8762C5.94733 21.9459 6.07361 21.9873 6.2042 21.9968C6.3348 22.0062 6.46572 21.9834 6.58541 21.9303L8.57085 21.0552C8.7402 20.9816 8.92794 20.9671 9.10418 21.0146C10.0161 21.2651 10.9869 21.4008 11.9984 21.4008C17.6314 21.4008 22 17.2751 22 11.7004C22 6.12644 17.6322 2 12.0015 2ZM17.2528 9.57854L14.7486 13.5502C14.6544 13.6997 14.5302 13.8281 14.3839 13.9272C14.2376 14.0263 14.0724 14.0941 13.8986 14.1262C13.7248 14.1583 13.5462 14.154 13.3742 14.1137C13.2021 14.0734 13.0403 13.9979 12.8988 13.892L10.9065 12.3992C10.8178 12.3329 10.71 12.2971 10.5992 12.2971C10.4884 12.2971 10.3807 12.3329 10.2919 12.3992L7.6038 14.4398C7.24748 14.7119 6.77621 14.282 7.0153 13.9034L9.51951 9.9318C9.61375 9.7823 9.73793 9.65394 9.88424 9.55481C10.0305 9.45568 10.1958 9.38793 10.3696 9.35582C10.5434 9.32371 10.7219 9.32795 10.894 9.36826C11.066 9.40857 11.2279 9.48408 11.3693 9.59004L13.3617 11.0828C13.4504 11.149 13.5582 11.1849 13.6689 11.1849C13.7797 11.1849 13.8875 11.149 13.9762 11.0828L16.6643 9.04215C17.0245 8.76628 17.4958 9.19617 17.2528 9.57854Z' stroke='%23ddddddb5' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E") center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Email_SVG {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='style=linear'%3E%3Cg id='email'%3E%3Cpath id='vector' d='M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5Z' stroke='%23ddddddb5' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='vector_2' d='M18.7698 7.7688L13.2228 12.0551C12.5025 12.6116 11.4973 12.6116 10.777 12.0551L5.22998 7.7688' stroke='%23ddddddb5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center no-repeat;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Send_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17'%3E%3Cpath id='Shape' d='M14.5,16.89,8,13.883,1.5,16.89c-.811.374-1.757-.274-1.434-.983l7-15.378a1.1,1.1,0,0,1,1.876,0l7,15.378C16.192,16.473,15.642,17,15,17A1.18,1.18,0,0,1,14.5,16.89Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 40px;
    height: 40px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Post-Bottom {
    width: 93%;
    margin: 0 auto;
    background: var(--C-Color);
    border-radius: 0 0 30px 30px;
    padding: 20px 0;
    margin-bottom: 30px;
}

.STING-WEB-Post-Share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.STING-WEB-Post-Comment-Form form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.STING-WEB-Post-Comments {
    width: 88%;
    margin: 20px auto;
    background: var(--C-Color);
    padding: 20px;
    border-radius: 30px;
}

.STING-WEB-Post-Comment-Form form input[type="text"] {
    padding: 8px;
    border-radius: 50px;
    border: none;
    background: var(--B-Color);
    text-align: center;
    color: var(--Primary-E-Color);
    width: 50%;
    outline: none;
    height: 25px;
    margin: 0 auto;
}

.Not-Comments {
    text-align: center;
    background: var(--B-Color);
    margin: 20px auto;
    padding: 30px;
    border-radius: 12px;
    color: #ddddddb5;
    font-size: 15px;
}

.STING-WEB-Post-Comment-Form form textarea {
    padding: 8px;
    border-radius: 50px;
    border: none;
    background: var(--B-Color);
    text-align: center;
    color: var(--Primary-E-Color);
    width: 85%;
    resize: none;
    height: 25px;
    overflow: hidden;
    outline: none;
    margin: 0 auto;
}

.STING-WEB-Post-Comment-Form form button {
    background: var(--Primary-A-Color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: none;
    transform: rotate(270deg);
}

.STING-WEB-Post-Comment-Form form input[type="text"]::placeholder {
    color: var(--Primary-C-Color);
}

.STING-WEB-Post-Comment-Form form textarea::placeholder {
    color: var(--Primary-C-Color);
}

.STING-WEB-Post-Comments-Show-User-Top-Right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.STING-WEB-Post-Comments-Show-User-Info {
    display: grid;
}

.STING-WEB-Post-Comments-Show-User-Top-Right .Name-User {
    font-size: 15px;
    color: var(--Primary-B-Color);
}

.STING-WEB-Post-Comments-Show-User-Top-Right .Date-Comment {
    color: var(--Primary-E-Color);
    font-size: 12px;
    letter-spacing: 1px;
}

.STING-WEB-Post-Comments-Show-User-Top-Left button.report-button {
    font-size: 12px;
    background: transparent;
    color: var(--Primary-E-Color);
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.STING-WEB-Post-Comments-Show-User-Top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.STING-WEB-Post-Comments-Show-User-Bottom {
    margin: 15px auto;
}

.STING-WEB-Post-Comments-Show-User-Bottom span {
    font-size: 15px;
    color: var(--Primary-B-Color);
}

.STING-WEB-Post-Comments-Show-User {
    padding-bottom: 12px;
    border-bottom: 1px solid #bfc3d412;
}

.STING-WEB-Post-Comments-Show-User-Top-Left button.report-button:hover {
    color: var(--Primary-A-Color);
}

.STING-WEB-Post-Comments-Show-User-Icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
}

.STING-WEB-Post-Comments-Show-User-Icon img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
}

.STING-WEB-Done-Send-Report {
    color: green;
    font-weight: 600;
    text-align: center;
    display: block;
    padding: 10px 0;
    font-size: 15px;
}

.STING-WEB-Post-Comment-Form {
    padding-bottom: 20px;
    border-bottom: 1px solid #bfc3d412;
}

.STING-WEB-First-News {
    display: grid;
    align-items: center;
    background: var(--B-Color);
    border-radius: 12px;
    transition: transform 0.3s;
    gap: 8px;
    margin-bottom: 12px;
    grid-template-columns: 1.5fr 1.5fr;
    min-height: 266px;
}

.STING-WEB-First-News-Right {
    display: flex;
    height: 100%;
    max-height: 270px;
}

.STING-WEB-First-News-Left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.STING-WEB-First-News-Right img {
    width: 100%;
    height: 100%;
    border-radius: 0 12px 12px 0;
    margin: 0 auto;
    object-fit: cover;
}

.STING-WEB-First-News-Left h2 {
    font-size: 17px;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 93%;
    margin: 0 auto;
    line-height: 33px;
}

.STING-WEB-First-News-Left .STING-WEB-Date-Post {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--Primary-C-Color);
    width: 93%;
    margin: 0 auto;
    margin-top: 12px;
    align-items: center;
}

.STING-WEB-Two-News .STING-WEB-Date-Post {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: var(--Primary-C-Color);
    width: 93%;
    margin: 0 auto;
    margin-top: 12px;
    align-items: center;
}

@media (max-width: 720px) {
    .STING-WEB-First-News {
        grid-template-columns: 1fr;
        height: auto;
    }

    .STING-WEB-First-News-Left span {
        display: flex;
    }
}

.STING-WEB-Four-News-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.STING-WEB-Two-News {
    display: grid;
    gap: 10px;
    background: var(--B-Color);
    border-radius: 12px;
    width: 97%;
    margin: 2px auto;
    height: 265px;
    transition: transform 0.3s;
}

.STING-WEB-Two-News-Top {
    width: 100%;
    height: 170px;
}

.STING-WEB-Two-News-Top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

.STING-WEB-Two-News-Bottom {
    display: grid;
    justify-items: center;
    width: 93%;
    margin: 0 auto;
    padding-bottom: 5px;
}

.STING-WEB-Two-News-Bottom h2 {
    font-size: 13px;
    width: 100%;
    margin: 0 auto;
    line-height: 28px;
}

.STING-WEB-Three-News {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    margin: 8px auto;
    transition: transform 0.3s;
    background: var(--B-Color);
}

.STING-WEB-Three-News-Right {
    flex: 1;
    max-width: 200px;
}

.STING-WEB-Short-Content {
    font-size: 11px;
    color: var(--Primary-C-Color);
    line-height: 28px;
}

.STING-WEB-Post-Center h2,
.STING-WEB-Post-Center h3 {
    color: var(--Primary-C-Color);
    font-size: 17px;
    background: var(--C-Color);
    padding: 5px 20px;
    border-radius: 6px;
    margin: 15px auto;
    width: 93%;
    line-height: 33px;
}

.STING-WEB-Three-News-Right img {
    width: 100%;
    height: 100px;
    border-radius: 0 8px 8px 0;
    object-fit: cover;
}

.STING-WEB-Three-News-Left {
    flex: 2;
    padding: 15px;
    align-content: center;
}

.STING-WEB-Three-News-Left h2 {
    font-size: 14px;
    color: var(--Primary-E-Color);
}

/*.STING-WEB-First-News:hover,.STING-WEB-Two-News:hover,.STING-WEB-Three-News:hover { transform: scale(1.02); }*/
.STING-WEB-First-News:hover h2,
.STING-WEB-Two-News:hover h2,
.STING-WEB-Three-News:hover h2 {
    color: var(--Primary-A-Color);
    ;
}

#loadMoreBtn {
    display: flex;
    align-items: center;
    justify-items: center;
    margin: 20px auto;
    width: 200px;
    height: 50px;
    justify-content: center;
    font-size: 16px;
    border-radius: 50px;
    border: 0;
    color: var(--Primary-B-Color);
    background: var(--B-Color);
    cursor: pointer;
}

#loadMoreBtn:hover {
    color: var(--Primary-A-Color);
}

@media (max-width: 720px) {
    .STING-WEB-First-News-Right img {
        border-radius: 12px 12px 0 0;
    }

    .STING-WEB-First-News-Left h2 {
        font-size: 14px;
    }

    .STING-WEB-Two-News-Top {
        height: 155px;
    }

    .STING-WEB-Two-News {
        height: 260px;
    }

    .STING-WEB-Four-News-item {
        gap: 10px;
    }

    .STING-WEB-First-News-Left {
        margin-bottom: 12px;
    }

    .STING-WEB-Two-News-Bottom h2 {
        font-size: 12px;
    }

    .STING-WEB-Short-Content {
        display: none;
    }

    .Read.also {
        display: none !important;
    }
}

.STING-WEB-Match-Page {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    /* تبسيط التوزيع الأساسي */
    width: 100%;
    margin: 0 auto;
    max-width: var(--Max-Size);
    gap: 25px;
    min-height: 800px;
}

/* تحسين التوزيع للشاشات الكبيرة فقط */
@media (min-width: 1024px) {
    .STING-WEB-Match-Page {
        grid-template-columns: minmax(400px, 1.6fr) 1fr;
    }
}

@media (max-width: 880px) {
    .STING-WEB-Match-Page {
        display: block;
        width: 100% !important;
        overflow-x: hidden !important;
        /* منع الإزاحة العرضية */
    }

    .STING-WEB-Match-Page .STING-WEB-MATCHES {
        display: none !important;
    }
}

.match-global-interactions {
    margin-top: 20px;
    padding-bottom: 30px;
}

.match-social-bar {
    max-width: 600px;
    margin: 0 auto !important;
}

.STING-WEB-Match-UI-Top {
    width: 98%;
    margin: 10px auto;
    background: transparent !important;
    border-radius: 30px;
    object-fit: contain;
    min-height: 210px;
    position: relative;
    overflow: hidden;
}

.STING-WEB-Match-Card {
    padding: 10px 0;
    width: 96%;
    margin: 0 auto;
    border-radius: 8px;
    background-size: cover;
    min-height: 120px;
}

.STING-WEB-Match-UI {
    width: 100%;
    max-width: var(--Max-Size);
    margin: 0 auto;
}

#Live {
    display: none;
}

.STING-WEB-Not-Events_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='M18.11 22.71H5.9C5.1936 22.71 4.51599 22.4301 4.01555 21.9315C3.51511 21.433 3.23264 20.7564 3.23 20.05V4.00001C3.22469 3.64603 3.28984 3.29453 3.42164 2.96596C3.55345 2.63739 3.74928 2.33831 3.99774 2.08612C4.2462 1.83394 4.54233 1.63368 4.86891 1.49701C5.19548 1.36033 5.54598 1.28997 5.9 1.29001H18.11C18.4636 1.28995 18.8136 1.36037 19.1396 1.49716C19.4656 1.63396 19.7611 1.83437 20.0088 2.0867C20.2565 2.33902 20.4514 2.63819 20.5821 2.96671C20.7127 3.29523 20.7766 3.64651 20.77 4.00001V20.1C20.7569 20.7968 20.4709 21.4606 19.9734 21.9487C19.476 22.4368 18.8069 22.7101 18.11 22.71ZM5.9 2.79001C5.74252 2.7885 5.58639 2.81908 5.44112 2.87987C5.29585 2.94066 5.16447 3.0304 5.05501 3.14361C4.94554 3.25682 4.86027 3.39114 4.80439 3.53837C4.74851 3.68561 4.7232 3.84267 4.73 4.00001V20.1C4.74295 20.4007 4.87223 20.6845 5.09054 20.8916C5.30885 21.0987 5.59909 21.2129 5.9 21.21H18.11C18.4177 21.21 18.7127 21.0878 18.9302 20.8703C19.1478 20.6527 19.27 20.3577 19.27 20.05V4.00001C19.27 3.69236 19.1478 3.39731 18.9302 3.17976C18.7127 2.96222 18.4177 2.84001 18.11 2.84001L5.9 2.79001Z' fill='%23fff'/%3E%3Cpath d='M20 12.75H14.47C14.2711 12.75 14.0803 12.671 13.9397 12.5303C13.799 12.3897 13.72 12.1989 13.72 12C13.72 11.8011 13.799 11.6103 13.9397 11.4697C14.0803 11.329 14.2711 11.25 14.47 11.25H20C20.1989 11.25 20.3897 11.329 20.5303 11.4697C20.671 11.6103 20.75 11.8011 20.75 12C20.75 12.1989 20.671 12.3897 20.5303 12.5303C20.3897 12.671 20.1989 12.75 20 12.75Z' fill='%23fff'/%3E%3Cpath d='M9.54 12.75H4C3.80109 12.75 3.61032 12.671 3.46967 12.5303C3.32902 12.3897 3.25 12.1989 3.25 12C3.25 11.8011 3.32902 11.6103 3.46967 11.4697C3.61032 11.329 3.80109 11.25 4 11.25H9.54C9.73891 11.25 9.92968 11.329 10.0703 11.4697C10.211 11.6103 10.29 11.8011 10.29 12C10.29 12.1989 10.211 12.3897 10.0703 12.5303C9.92968 12.671 9.73891 12.75 9.54 12.75Z' fill='%23fff'/%3E%3Cpath d='M15.36 6.13001H8.64C8.44189 6.12742 8.25263 6.04757 8.11253 5.90747C7.97244 5.76738 7.89259 5.57811 7.89 5.38001V2.00001C7.89 1.8011 7.96902 1.61033 8.10967 1.46968C8.25032 1.32903 8.44109 1.25001 8.64 1.25001H15.36C15.4589 1.24866 15.557 1.26714 15.6486 1.30436C15.7402 1.34157 15.8234 1.39677 15.8933 1.46668C15.9632 1.53659 16.0184 1.61981 16.0557 1.71141C16.0929 1.80301 16.1113 1.90114 16.11 2.00001V5.38001C16.11 5.57892 16.031 5.76969 15.8903 5.91034C15.7497 6.05099 15.5589 6.13001 15.36 6.13001ZM9.36 4.63001H14.58V2.79001H9.39L9.36 4.63001Z' fill='%23fff'/%3E%3Cpath d='M15.36 22.71H8.64C8.44783 22.7103 8.26288 22.6368 8.12332 22.5047C7.98377 22.3726 7.90025 22.1919 7.89 22V18.62C7.89259 18.4219 7.97244 18.2326 8.11253 18.0925C8.25263 17.9524 8.44189 17.8726 8.64 17.87H15.36C15.5589 17.87 15.7497 17.949 15.8903 18.0897C16.031 18.2303 16.11 18.4211 16.11 18.62V22C16.1022 22.1928 16.0194 22.3749 15.8793 22.5075C15.7392 22.6401 15.5529 22.7128 15.36 22.71ZM9.36 21.21H14.58V19.37H9.39L9.36 21.21Z' fill='%23fff'/%3E%3Cpath d='M12 15.15C11.3627 15.15 10.7398 14.9609 10.21 14.6066C9.68029 14.2524 9.26758 13.7489 9.02416 13.1599C8.78075 12.571 8.71757 11.923 8.84262 11.2981C8.96768 10.6732 9.27535 10.0995 9.72667 9.64959C10.178 9.19966 10.7527 8.89378 11.378 8.77066C12.0032 8.64755 12.651 8.71275 13.2392 8.958C13.8274 9.20324 14.3296 9.61752 14.6822 10.1484C15.0348 10.6792 15.222 11.3027 15.22 11.94C15.2174 12.7923 14.8769 13.6087 14.2734 14.2104C13.6698 14.8121 12.8523 15.15 12 15.15ZM12 10.22C11.6598 10.22 11.3273 10.3209 11.0444 10.5099C10.7616 10.6989 10.5411 10.9675 10.4109 11.2818C10.2807 11.5961 10.2467 11.9419 10.313 12.2756C10.3794 12.6092 10.5432 12.9157 10.7838 13.1562C11.0243 13.3968 11.3308 13.5606 11.6644 13.627C11.9981 13.6933 12.3439 13.6593 12.6582 13.5291C12.9725 13.3989 13.2411 13.1784 13.4301 12.8956C13.6191 12.6127 13.72 12.2802 13.72 11.94C13.72 11.4838 13.5388 11.0463 13.2162 10.7238C12.8937 10.4012 12.4562 10.22 12 10.22Z' fill='%23fff'/%3E%3C/svg%3E");
    width: 50px;
    height: 50px;
    display: block;
    opacity: .7;
}

.STING-WEB-Card-Vs {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    align-items: center;
    justify-items: center;
    padding: 10px 0;
}

.STING-WEB-Card-Vs-Right,
.STING-WEB-Card-Vs-Left,
.STING-WEB-Card-Vs-Center {
    display: grid;
    gap: 12px;
    text-align: center;
    justify-items: center;
}

.STING-WEB-Card-Vs-Right img,
.STING-WEB-Card-Vs-Left img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    aspect-ratio: 1/1;
    background: var(--B-Color);
    border-radius: 8px;
}

.STING-WEB-Card-Vs-Right span,
.STING-WEB-Card-Vs-Left span {
    font-size: 12px;
}

.STING-WEB-Event-Toggle::-webkit-scrollbar {
    height: 0px;
}

.STING-WEB-Card-Vs-Center .VS {
    font-size: 25px;
    color: var(--Primary-E-Color);
}

.Time-Start {
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    width: max-content;
}

.STING-WEB-Card-Vs .Goal {
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 600;
    background: var(--A-Color);
}

.STING-WEB-Event-Toggle {
    display: flex;
    font-size: 14px;
    margin: 5px auto 0 auto;
    width: 96%;
    overflow-x: auto;
    padding: 10px 0;
    justify-content: center;
    min-height: 50px;
    align-items: center;
}

.STING-WEB-Event-Toggle div {
    padding: 0 5px 10px 5px;
    margin: 0 2px;
    color: var(--Primary-B-Color);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: visible;
}

/* Advanced Events Structure */
.STING-WEB-Events-Match.fade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 15px 8px;
    margin: 0 auto 8px auto;
    gap: 0px;
    position: relative;
    border-bottom: 1px solid var(--C-Color);
    min-height: 80px;
    align-items: center;
    transition: opacity 0.3s ease-in-out;
    max-width: 600px;
}

.STING-WEB-Event-Match-Center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.STING-WEB-Event-Match-Center .Event-Wrap {
    background: var(--B-Color);
    color: var(--Primary-E-Color);
    font-weight: bold;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 10px;
    min-width: 35px;
    text-align: center;
    position: relative;
    z-index: 1;
    border: 1px solid var(--C-Color);
}

.STING-WEB-Event-Match-Right,
.STING-WEB-Event-Match-Left {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 5px;
}

.STING-WEB-Player-Names {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    min-height: 60px;
    align-items: stretch;
    justify-content: center;
    padding: 2px 0;
}

/* Substitution player spacing */
.STING-WEB-Player-Names .sub-player-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 0;
}

.STING-WEB-Player-Names .sub-player-row img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.STING-WEB-Player-Names .sub-player-row .sub-arrow {
    font-size: 16px !important;
    font-weight: bold;
    line-height: 1;
    margin: 0 1px;
}

.STING-WEB-Player-Names .sub-player-row .player-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2;
}

/* Event tabs styling */
.events-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--C-Color);
    padding-bottom: 10px;
}

.events-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--A-Color);
    border: 1px solid var(--C-Color);
    border-radius: 20px;
    color: var(--Primary-C-Color);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
}

.events-tab:hover {
    background: var(--B-Color);
    border-color: var(--Primary-C-Color);
}

.events-tab.active {
    background: var(--Primary-A-Color);
    color: #fff;
    border-color: var(--Primary-A-Color);
}

.events-tab svg {
    width: 16px;
    height: 16px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.events-content {
    min-height: 400px;
}

/*.STING-WEB-Events-Match:before { content: ""; position: absolute; left: 0; right: -32px; bottom: -13px; width: 5px; height: 23px; background: #1a3429a8; text-align: center; justify-self: center; border-radius: 50px; }*/
/* .STING-WEB-Events-Match:last-child:before { content: "ط§ظ†طھظ‡طھ ط§ظ„ظ…ط¨ط§ط±ط§ط©"; width: max-content; color: #fff; font-size: 12px; bottom: -35px; padding: 2px 10px; border-radius: 8px; } */
/* STING-WEB-Match-Widget responsive styles */
.STING-WEB-Match-Widget {
    width: 100%;
    margin: 10px 0;
}

.STING-WEB-Match-Widget iframe {
    width: 100%;
    height: 120px;
    border: none;
    border-radius: 8px;
    background: var(--C-Color);
}

.STING-WEB-Event-Match-Center {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.Lasted-Vs {
    font-size: 14px;
    display: block;
    margin: 14px auto;
    color: var(--Primary-C-Color);
    width: 93%;
}

.STING-WEB-Event-Match-Right {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 10px;
    justify-content: flex-end;
}

.STING-WEB-Event-Match-Left {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 10px;
    justify-content: flex-start;
}

.STING-WEB-Player-Names {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    height: 40px;
    /* Fixed height for horizontal alignment */
}

/* Make player names consistent sizing */
.STING-WEB-Player-Names span {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.STING-WEB-Player-Names span:last-child {
    font-size: 10px !important;
    font-weight: 400 !important;
}

/* Player images */
.STING-WEB-Player-Names img {
    width: 55px !important;
    height: 55px !important;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

/* Substitution player images */
.STING-WEB-Player-Names .sub-player-row img {
    width: 29px !important;
    height: 29px !important;
    border: 1px solid;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.STING-WEB-Player-Names span:nth-child(2) {
    font-size: 10px;
}

.STING-WEB-Event-Player {
    display: grid;
}

.STING-WEB_MatchInfo-Table.info:before {
    font-size: 14px;
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
    color: var(--Primary-C-Color);
    width: 93%;
}

.STING-WEB_MatchInfo-Table.channels:before {
    font-size: 14px;
    display: block;
    margin: 14px auto;
    color: var(--Primary-C-Color);
    width: 93%;
}

.STING-WEB-H2H.h2h-section:before {
    font-size: 14px;
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
    color: var(--Primary-C-Color);
    width: 93%;
    text-align: center;
}

.STING-WEB-H2H-Matches.matches-section:before {
    font-size: 14px;
    display: block;
    margin: 0 auto;
    margin-bottom: 14px;
    color: var(--Primary-C-Color);
    width: 93%;
    text-align: center;
}

.Lasted-Vs {
    font-size: 14px;
    display: block;
    margin: 14px auto;
    color: var(--Primary-C-Color);
    width: 93%;
    text-align: center;
}

.STING-WEB-Event-Match-Left .STING-WEB-Event-Player {
    order: 1;
}

.STING-WEB-Event-Match-Left .STING-WEB-Extra-Players {
    order: 2;
}

.STING-WEB-Events {
    display: block;
    width: 93%;
    margin: 0 auto;
    background: var(--C-Color);
    border-radius: 12px;
    padding: 5px;
}

.events-content {
    display: flex;
    flex-direction: column;
}

.STING-WEB-Events-Match img {
    width: 25px;
    height: 25px;
}

.fade {
    opacity: 0;
    animation: fadeIn 400ms ease-in-out forwards;
    will-change: opacity;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Removed duplicate - using the updated version above */

.STING-WEB-Event-Match-Center .event-logo {
    width: 17px !important;
    height: 17px !important;
    display: block;
    flex-shrink: 0;
    z-index: 2;
}

.event-text {
    background: var(--Primary-C-Color);
    color: var(--A-Color);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    min-width: max-content;
    text-align: center;
}

.STING-WEB-H2H h3 {
    font-size: 15px;
    margin: 12px auto;
    width: 96%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #ddddddb5;
}

/*.STING-WEB-H2H h3:before { content: ""; width: 15px; height: 5px; background: #ddddddb5; display: block; border-radius: 50px; }*/
.STING-WEB-Comments,
.STING-WEB-Team,
.STING-WEB-Statistics,
.STING-WEB-Feraq,
.STING-WEB-Hadafin {
    width: 96%;
    margin: 0 auto;
}

.STING-WEB-Details {
    width: 93%;
    margin: 0 auto;
    min-height: 400px;
}

.STING-WEB-H2H {
    width: 93%;
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--Primary-B-Color);
}

.STING-WEB_MatchInfo-Table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
}

.STING-WEB_MatchInfo-Table tr {
    font-size: 14px;
    border-radius: 10px;
    display: flex;
    margin-bottom: 7px;
    background: var(--C-Color);
    height: 45px;
    align-items: center;
    padding: 0 8px;
}

.STING-WEB_MatchInfo-Table td,
.STING-WEB_MatchInfo-Table th {
    font-weight: 500;
    padding: 12px;
    line-height: 25px;
}

.STING-WEB_MatchInfo-Table td {
    font-size: 13px;
    font-weight: 300;
    display: flex;
    align-items: center;
}

.STING-WEB_MatchInfo-Table td img {
    margin-left: 6px;
    width: 20px;
    height: 20px;
    display: flex;
}

.STING-WEB-Live {
    width: 96%;
    margin: 0 auto;
    border-radius: 12px;
}

.lived {
    position: relative;
    z-index: 9;
}

.lived:before {
    content: "LIVE";
    position: absolute;
    left: -8px;
    font-size: 10px;
    background: #ff3131;
    padding: 0 4px;
    border-radius: 5px;
    z-index: -1;
    top: -18px;
    color: #ffffff;
}

.STING-WEB-Toggle-Event-Button.active {
    font-weight: 600;
    background: transparent;
    color: var(--Primary-A-Color);
    border-bottom: 2px solid var(--Primary-A-Color);
}

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

.STING-WEB_MatchInfo-Table th {
    color: var(--Primary-C-Color);
    width: 25%;
    text-align: start;
}

.STING-WEB-Home-Field-Map,
.STING-WEB-Away-Field-Map {
    display: flex;
    /* 1. White Field Lines SVG */
    /* 2. Horizontal Stripes Gradient */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 740 1100'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='4'%3E%3Crect x='25' y='25' width='690' height='1050' rx='0' ry='0' /%3E%3Cline x1='25' y1='550' x2='715' y2='550' /%3E%3Ccircle cx='370' cy='550' r='90' /%3E%3Ccircle cx='370' cy='550' r='6' fill='rgba(255,255,255,0.5)' stroke='none'/%3E%3Crect x='160' y='25' width='420' height='175' /%3E%3Crect x='260' y='25' width='220' height='60' /%3E%3Ccircle cx='370' cy='135' r='5' fill='rgba(255,255,255,0.5)' stroke='none'/%3E%3Cpath d='M 300,200 A 90,90 0 0,0 440,200' /%3E%3Crect x='160' y='900' width='420' height='175' /%3E%3Crect x='260' y='1015' width='220' height='60' /%3E%3Ccircle cx='370' cy='965' r='5' fill='rgba(255,255,255,0.5)' stroke='none'/%3E%3Cpath d='M 300,900 A 90,90 0 0,1 440,900' /%3E%3Cpath d='M 25,60 A 35,35 0 0,0 60,25' /%3E%3Cpath d='M 715,60 A 35,35 0 0,1 680,25' /%3E%3Cpath d='M 25,1040 A 35,35 0 0,1 60,1075' /%3E%3Cpath d='M 715,1040 A 35,35 0 0,0 680,1075' /%3E%3C/g%3E%3C/svg%3E"),
        repeating-linear-gradient(to bottom, #00b140 0%, #00b140 5%, #009637 5%, #009637 10%);

    background-color: #00b140;
    /* Fallback */

    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 100% 100%;
    background-position: center center;

    align-items: center;
    margin: 20px auto;
    flex-direction: column;

    /* Responsive sizing */
    width: 100%;
    max-width: 500px;
    aspect-ratio: 2/3.1;

    gap: 0;
    border-radius: 12px;
    margin-top: 30px;
    justify-content: space-around;
    overflow: hidden;
    padding: 2% 0;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: none;
}

/* Football field background for lineup section */
.Starting-Players {
    display: block;
    background-image: url('/site/assets/images/football-field.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 10px 15px 20px 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
}

.STING-WEB-Team-Up-Right,
.STING-WEB-Team-Up-Left {
    background: transparent;
    border-radius: 20px;
    margin: 10px auto;
    width: 98%;
}

.position {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    direction: ltr;
    gap: 15px;
    width: 100%;
    padding: 0 20px;
    margin: 10px 0;
    min-height: 70px;
}

/* RTL-specific positioning for Arabic website */
.lineup-rtl .position {
    direction: rtl;
    flex-direction: row;
}

.lineup-ltr .position {
    direction: ltr;
    flex-direction: row;
}

/* Use normal row direction and let JavaScript handle positioning */
.STING-WEB-Home-Field-Map .position {
    flex-direction: row;
}

.STING-WEB-Away-Field-Map .position {
    flex-direction: row;
}

/* Spacing for different formation types on desktop */
.complex-formation .position {
    margin: 6px 0;
    /* Tight spacing for 4+ line formations */
}

.simple-formation .position {
    margin: 15px 0;
    /* More spacing for 3-line formations like 5-3-2 */
}

/* Special handling for 5-defender formations on desktop */
.position:has(.player:nth-child(5):last-child) {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 0 20px !important;
    max-width: 70% !important;
    margin: 0 auto !important;
}

/* Fallback for browsers that don't support :has() */
@supports not (selector(:has(*))) {
    .five-defenders-position {
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 0 20px !important;
        max-width: 70% !important;
        margin: 0 auto !important;
    }
}

.STING-WEB-Home-Field-Map .player img,
.STING-WEB-Away-Field-Map .player img {
    width: 45px;
    height: 45px;
}

.STING-WEB-Home-Field-Map .player,
.STING-WEB-Away-Field-Map .player {
    display: grid;
    justify-items: center;
    margin: 5px;
    width: 90px;
    height: 85px;
    flex-shrink: 0;
    position: relative;
}

.STING-WEB-Home-Field-Map .player span,
.STING-WEB-Away-Field-Map .player span {
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 19px;
    margin-top: 4px;
}

.Team-Buttons {
    display: flex;
    margin: 20px auto;
    align-items: center;
    width: 93%;
    max-width: 350px;
    background: transparent;
    border-radius: 50px;
    border: 1px solid var(--Primary-D-Color, #eee);
    overflow: hidden;
}

.Team-Button {
    background: transparent;
    color: #ddddddb5;
    padding: 12px 20px;
    border: 0;
    font-size: 14px;
    border-radius: 50px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.Team-Button:hover {
    color: #3dcdc2;
}

.Bench-Players {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.Team-Button.Lenup {
    color: #0a0e17;
    font-weight: 600;
    background: #3dcdc2;
    border-radius: 50px;
}

.STING-WEB-Player-Repeat {
    width: 86%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 12px;
    background: var(--C-Color);
    border-radius: 10px;
    border: 1px solid var(--B-Color);
}

.STING-WEB-Player-Repeat-Right {
    width: 32px;
    height: 32px;
}

.STING-WEB-Player-Repeat-Right img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: flex;
    align-items: center;
    border-radius: 8px;
}

.Substitutes-Label {
    font-size: 15px;
    display: block;
    margin: 14px auto;
    color: #ddddddb5;
    width: 93%;
}

.STING-WEB-Formation {
    background: #fff;
    color: #000;
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    display: block;
    width: max-content;
    position: absolute;
    bottom: 10px;
    left: 5px;
    z-index: 10;
    margin: 8px auto 5px auto;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.Bench {
    display: grid;
    grid-template-columns: 1fr;
    width: 96%;
    margin: 20px auto;
    margin-top: 10px;
}

.Event-Wrap {
    min-width: 35px;
    height: 24px;
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--Primary-D-Color);
    color: var(--Primary-E-Color);
    font-weight: 600;
    padding: 0 6px;
}

.Starting {
    position: relative;
    overflow: visible;
}

.Starting-Players {
    display: block;
}

.STING-WEB-Team .STING-WEB-TITLE-ODO:before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--Primary-B-Color);
    display: flex;
    align-self: center;
    border-radius: 50px;
}

.STING-WEB-Player-Repeat-Left {
    display: grid;
    gap: 2px;
    font-size: 12px;
    align-items: center;
    color: #ffffff;
}

.STING-WEB-WatchTV {
    text-align: center;
    display: none;
    margin: 15px auto;
    font-size: 18px;
    background: #ff000069;
    width: 80%;
    padding: 5px;
    border-radius: 8px;
    animation: 800ms ease-in-out infinite blinker;
    margin-bottom: 30px;
}

.STING-WEB-WatchTV.block {
    display: block;
}

.STING-WEB-Stats-Section {
    width: 93%;
    margin: 15px auto;
}

.STING-WEB-Stats {
    display: grid;
    gap: 8px;
    align-items: center;
    text-align: center;
    width: 93%;
    margin: 0 auto;
    background: var(--C-Color);
    border-radius: 2px;
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 10px;
}

.STING-WEB-Statistics {
    width: 93%;
    border-radius: 10px;
}

.STING-WEB-Value-Name {
    color: var(--Primary-C-Color);
}

.STING-WEB-Team-Right-Stats,
.STING-WEB-Team-Left-Stats {
    display: flex;
    width: 100%;
    text-align: center;
}

.STING-WEB-Team-Right-Stats img,
.STING-WEB-Team-Left-Stats img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.STING-WEB-Team-Right-Stats .Value,
.STING-WEB-Team-Left-Stats .Value {
    width: 100%;
    font-size: 13px;
    color: var(--Primary-C-Color);
}

.STING-WEB-Events,
.STING-WEB-Team,
.STING-WEB-Statistics,
.STING-WEB-H2H,
.STING-WEB-Comments,
.STING-WEB-Live,
.STING-WEB-Feraq,
.STING-WEB-Hadafin {
    display: none;
    min-height: 400px;
}

.STING-WEB-Events[style*="display: block"],
.STING-WEB-Team[style*="display: block"],
.STING-WEB-Statistics[style*="display: block"],
.STING-WEB-H2H[style*="display: block"],
.STING-WEB-Comments[style*="display: block"],
.STING-WEB-Live[style*="display: block"],
.STING-WEB-Feraq[style*="display: block"],
.STING-WEB-Hadafin[style*="display: block"] {
    display: block !important;
}

/* Ensure sections display properly on PC by strengthening the inline style override */
@media (min-width: 881px) {

    .STING-WEB-Events[style="display: block;"],
    .STING-WEB-Team[style="display: block;"],
    .STING-WEB-Statistics[style="display: block;"],
    .STING-WEB-Comments[style="display: block;"] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Better widget sizing for PC */
    .STING-WEB-Match-Widget iframe {
        height: 150px;
        max-width: 100%;
    }
}

.STING-WEB-Match-Card,
.STING-WEB-Details {
    display: block;
}

@media (max-width: 880px) {
    .STING-WEB-Event-Toggle {
        justify-content: flex-start !important;
    }

    .Bench {
        grid-template-columns: 1fr;
    }

    header,
    .STING-WEB-Match-UI .STING-WEB-PIN {
        display: none !important;
    }

    /* Hide lineup SVG on mobile to prevent overlap with team names */
    .STING-WEB-Lineup_SVG {
        display: none !important;
    }

    /* Mobile lineup container with proper responsive behavior */
    .Starting {
        position: relative;
        margin-bottom: 32px;
        width: calc(100% + 60px);
        margin-right: -30px;
    }

    .STING-WEB-Home-Field-Map,
    .STING-WEB-Away-Field-Map {
        height: 380px;
        width: calc(100% + 40px);
        margin: 15px -20px 15px 0;
        padding: 10px 20px;
        background-size: cover;
        position: relative;
        gap: 5px;
    }

    /* Mobile player styling with better spacing for complex formations */
    .STING-WEB-Home-Field-Map .lineup-player-item,
    .STING-WEB-Away-Field-Map .lineup-player-item {
        width: 48px;
        margin: 0 1px;
        flex-shrink: 0;
        min-width: 40px;
    }

    .STING-WEB-Home-Field-Map .lineup-player-item .image-wrapper,
    .STING-WEB-Away-Field-Map .lineup-player-item .image-wrapper {
        width: 40px;
        height: 40px;
        margin-bottom: 4px;
    }

    .STING-WEB-Home-Field-Map .lineup-player-item .img,
    .STING-WEB-Away-Field-Map .lineup-player-item .img {
        width: 40px;
        height: 40px;
    }

    .STING-WEB-Home-Field-Map .lineup-player-item .img img,
    .STING-WEB-Away-Field-Map .lineup-player-item .img img {
        width: 40px;
        height: 40px;
    }

    .STING-WEB-Home-Field-Map .lineup-player-item .player-name h3,
    .STING-WEB-Away-Field-Map .lineup-player-item .player-name h3 {
        font-size: 9px;
        line-height: 1.1;
        margin-top: 2px;
    }

    /* Standard position spacing for mobile */
    .position {
        gap: 6px;
        padding: 0 5px;
        justify-content: space-evenly;
        margin: 4px 0;
        flex-wrap: wrap;
        min-height: 55px;
    }

    /* Formation-based spacing for mobile */
    .complex-formation .position {
        margin: -2px 0;
        /* Very tight for complex formations */
    }

    .simple-formation .position {
        margin: 8px 0;
        /* More spacing for simple 3-line formations */
    }

    /* Override 5-defender styling for mobile - keep mobile perfect */
    .five-defenders-position {
        justify-content: space-evenly !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 0 5px !important;
        max-width: 100% !important;
        margin: 4px 0 !important;
    }

    /* Mobile rating adjustments */
    .STING-WEB-Home-Field-Map .lineup-player-item .image-wrapper .rate,
    .STING-WEB-Away-Field-Map .lineup-player-item .image-wrapper .rate {
        bottom: -1px;
        right: -10px;
        width: 20px;
        height: 12px;
        font-size: 9px;
    }

    /* Mobile goal/assist icons adjustments */
    .STING-WEB-Home-Field-Map .lineup-player-item .image-wrapper .goals,
    .STING-WEB-Away-Field-Map .lineup-player-item .image-wrapper .goals {
        left: -16px;
        height: 16px;
        font-size: 9px;
        padding: 0 3px;
    }

    .STING-WEB-Home-Field-Map .lineup-player-item .image-wrapper .assist,
    .STING-WEB-Away-Field-Map .lineup-player-item .image-wrapper .assist {
        bottom: -3px;
        left: -6px;
        width: 16px;
        height: 16px;
    }

    .STING-WEB-Formation {
        bottom: 15px;
        left: 55px;
    }

    /* Team buttons responsive */
    .Team-Buttons {
        width: 100%;
        max-width: none;
        margin: 10px 0;
    }

    /* Mobile responsive scorers tabs */
    .STING-WEB-Scorers-Tabs {
        width: 100%;
        max-width: none;
        margin: 10px 0;
    }

    /* Mobile spacing for Goals+Assists tab - same as other tabs */
    #match-goalsassists-content .STING-WEB-Scorers-Header {
        grid-template-columns: .5fr 2fr .5fr .5fr;
    }

    #match-goalsassists-content .STING-WEB-Scorers-row {
        grid-template-columns: .5fr 2fr .5fr .5fr;
    }


    .STING-WEB-Match-Widget iframe {
        height: 80px !important;
    }

    .STING-WEB-Match-UI-Top {
        border-radius: 20px;
        padding: 10px 0 0 0;
    }

    .STING-WEB-Events {
        width: 93% !important;
        margin: 0 auto;
        padding: 5px;
    }

    .STING-WEB-Events-Match {
        padding: 8px;
        min-height: 45px;
    }

    .STING-WEB-Player-Names span:first-child {
        font-size: 11px !important;
    }

    .STING-WEB-Player-Names span:last-child {
        font-size: 9px !important;
    }

    .Event-Wrap {
        min-width: 28px;
        height: 20px;
        font-size: 11px;
    }
}

.STING-WEB-Post-Comments {
    width: 88%;
    margin: 20px auto;
    background: var(--C-Color);
    padding: 20px;
    border-radius: 30px;
}

.STING-WEB-Post-Comment-Form form {
    display: flex;
    gap: 6px;
    align-items: center;
}

.STING-WEB-Post-Comment-Form form input[type="text"] {
    padding: 8px;
    border-radius: 10px;
    border: none;
    background: var(--A-Color);
    text-align: center;
    color: #fff;
    width: 50%;
    outline: none;
    height: 25px;
    margin: 0 auto;
}

.STING-WEB-Post-Comment-Form form textarea {
    padding: 8px;
    border-radius: 10px;
    border: none;
    background: var(--A-Color);
    text-align: center;
    color: #BFC3D4;
    width: 85%;
    resize: none;
    height: 25px;
    overflow: hidden;
    outline: none;
    margin: 0 auto;
}

.STING-WEB-Post-Comment-Form form button {
    background: var(--Primary-A-Color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: none;
    transform: rotate(270deg);
}

.STING-WEB-Send_SVG {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17'%3E%3Cpath id='Shape' d='M14.5,16.89,8,13.883,1.5,16.89c-.811.374-1.757-.274-1.434-.983l7-15.378a1.1,1.1,0,0,1,1.876,0l7,15.378C16.192,16.473,15.642,17,15,17A1.18,1.18,0,0,1,14.5,16.89Z' fill='%23ffffff'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
    width: 40px;
    height: 40px;
    display: block;
    cursor: pointer;
}

.STING-WEB-Post-Comments-Show-User {
    padding-bottom: 12px;
    border-bottom: 1px solid #bfc3d412;
}

.STING-WEB-Post-Comments-Show-User-Top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.STING-WEB-Post-Comments-Show-User-Top-Right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.STING-WEB-Post-Comments-Show-User-Icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
}

.STING-WEB-Post-Comments-Show-User-Icon img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
}

.STING-WEB-Post-Comments-Show-User-Info {
    display: grid;
}

/* Player Rating Styles */
.player-rating-wrapper {
    position: relative;
    display: inline-block;
}

.player-rate {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 16px;
    border-radius: 20px;
    text-align: center;
    line-height: 16px;
    color: #fff !important;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translate(25%, -25%);
}

/* Rating color classes based on value */
.player-rate.rate-A {
    background: #4766C4;
    /* 8.5+ Excellent */
}

.player-rate.rate-B {
    background: #56CF82;
    /* 7.5-8.4 Very Good */
}

.player-rate.rate-C {
    background: #ffc107;
    /* 6.5-7.4 Good */
}

.player-rate.rate-D {
    background: #e38218;
    /* 5.5-6.4 Average */
}

.player-rate.rate-F {
    background: #FC4D4D;
    /* Below 5.5 Poor */
}

.player-rate.rate-NA {
    background: #707488;
    /* N/A or no rating */
    font-size: 8px;
}

/* Lineup player item styling inspired by modern design */
.lineup-player-item {
    text-align: center;
    width: 80px;
    white-space: nowrap;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 3px;
    flex-shrink: 0;
}

.lineup-player-item .image-wrapper {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-block;
    margin-bottom: 6px;
}

.lineup-player-item .img {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    background: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lineup-player-item .img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.lineup-player-item .player-name h3 {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Player rating positioned like the inspiration */
.lineup-player-item .image-wrapper .rate {
    position: absolute;
    bottom: -5px;
    right: -8px;
    width: 24px;
    height: 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Goals and assists icons positioned like inspiration */
.lineup-player-item .image-wrapper .goals {
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    width: auto;
    height: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: #131521;
    color: #fff;
    font-weight: bold;
    padding: 0 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 15;
}

.lineup-player-item .image-wrapper .assist {
    position: absolute;
    bottom: -8px;
    left: -12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #131521;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 15;
}

/* Adjust player container for rating */
.STING-WEB-Home-Field-Map .player,
.STING-WEB-Away-Field-Map .player {
    position: relative;
    padding-bottom: 8px;
}

/* Substitute player rating */
.STING-WEB-Player-Repeat {
    position: relative;
}

.STING-WEB-Player-Repeat .player-rate-sub {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(30%, 55%);
    width: 24px;
    height: 15px;
    border-radius: 20px;
    text-align: center;
    line-height: 15px;
    color: #fff !important;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.STING-WEB-Player-Repeat .player-rate-sub.rate-A {
    background: #4766C4;
}

.STING-WEB-Player-Repeat .player-rate-sub.rate-B {
    background: #56CF82;
}

.STING-WEB-Player-Repeat .player-rate-sub.rate-C {
    background: #ffc107;
}

.STING-WEB-Player-Repeat .player-rate-sub.rate-D {
    background: #e38218;
}

.STING-WEB-Player-Repeat .player-rate-sub.rate-F {
    background: #FC4D4D;
}

.STING-WEB-Player-Repeat .player-rate-sub.rate-NA {
    background: #707488;
    font-size: 8px;
}

/* Goal and Assist Icons */
.player-goals {
    position: absolute;
    top: 50%;
    left: -20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: auto;
    height: 18px;
    border-radius: 20px;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 10px;
    background: #131521;
    color: #fff;
    font-weight: bold;
    padding: 0 4px;
    pointer-events: none;
    z-index: 10;
}

.goal-icon {
    display: flex;
    align-items: center;
    gap: 2px;
}

.goal-icon svg {
    width: 12px;
    height: auto;
}

.goal-icon i {
    font-style: normal;
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.player-assists {
    position: absolute;
    bottom: -3px;
    left: -3px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #131521;
    pointer-events: none;
    z-index: 10;
}

.assist-icon svg {
    width: 11px;
    height: 5px;
}


/* Mobile adjustments */
@media (max-width: 880px) {
    .player-goals {
        left: -18px;
        height: 14px;
        font-size: 8px;
        padding: 0 3px;
    }

    .goal-icon svg {
        width: 10px;
    }

    .goal-icon i {
        font-size: 8px;
    }

    .player-assists {
        bottom: -5px;
        left: -8px;
        width: 14px;
        height: 14px;
    }

    .assist-icon svg {
        width: 8px;
        height: 4px;
    }

    .lineup-player-item .image-wrapper .goals {
        left: -20px;
    }

    .lineup-player-item .image-wrapper .assist {
        left: -10px;
    }

    .player-rate {
        width: 20px;
        height: 13px;
        font-size: 9px;
        line-height: 13px;
        bottom: -5px;
        right: 0;
        transform: translate(30%, -10%);
    }

    .STING-WEB-Player-Repeat .player-rate-sub {
        width: 20px;
        height: 13px;
        font-size: 9px;
        line-height: 13px;
    }
}

.STING-WEB-Post-Comments-Show-User-Top-Right .Name-User {
    font-size: 15px;
    color: var(--Primary-E-Color);
}

.STING-WEB-Post-Comments-Show-User-Top-Right .Date-Comment {
    color: var(--Primary-C-Color);
    font-size: 10px;
}

.STING-WEB-Post-Comments-Show-User-Top-Left button.report-button {
    font-size: 12px;
    background: transparent;
    color: #ddddddb5;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
}

.STING-WEB-Post-Comments-Show-User-Bottom {
    margin: 15px auto;
    margin-top: 30px;
}

.STING-WEB-Post-Comments-Show-User-Bottom span {
    font-size: 14px;
    color: var(--Primary-B-Color);
}

.Not-Comments {
    text-align: center;
    background: var(--A-Color);
    margin: 20px auto;
    padding: 30px;
    border-radius: 12px;
    color: #757577;
    font-size: 14px;
}

.STING-WEB-Post-Comment-Form {
    padding-bottom: 20px;
    border-bottom: 1px solid #bfc3d412;
}

.STING-WEB-Done-Send-Report {
    color: green;
    font-weight: 600;
    text-align: center;
    display: block;
    padding: 10px 0;
    font-size: 15px;
}

.STING-WEB-TITLE {
    font-size: 14px !important;
    margin-top: 6px !important;
}

.STING-WEB-Vote {
    display: grid;
    gap: 12px;
    width: 96%;
    margin: 0 auto;
}

.STING-WEB-Vote span {
    font-size: 14px;
    color: #ddddddb5;
}

.STING-WEB-Votes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: linear-gradient(to left, #f4433626, #00dd751f);
    padding: 12px;
    border-radius: 10px;
    align-items: center;
    justify-items: center;
}

.STING-WEB-Votes button {
    display: flex;
    gap: 6px;
    border: 0;
    align-items: center;
    cursor: pointer;
    width: 100%;
    background: #0b0d10;
    border-radius: 50px;
    justify-content: center;
    padding: 5px 0;
    max-width: 120px;
    height: 35px;
}

.STING-WEB-Vs-Center-Goals {
    display: grid;
    grid-template-columns: 1fr .5fr 1fr;
    align-items: center;
    gap: 12px;
}

.STING-WEB-Votes button img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.STING-WEB-Votes button span {
    color: #fff;
    font-size: 14px;
}

.STING-WEB-Votes-Show ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    width: 96%;
    margin: 20px auto;
    font-size: 14px;
    margin-bottom: 40px;
}

.STING-WEB-Votes-Show ul li {
    width: 100%;
    display: flex;
    place-content: center;
    text-align: center;
}

.STING-WEB-Last-Vs-Matches {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    width: 90%;
    background: var(--C-Color);
    border: 1px solid var(--B-Color);
    height: 40px;
    border-radius: 10px;
    margin-bottom: 6px;
    padding: 0 18px;
}

.STING-WEB-Last-Vs-Matches-Right {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr .5fr 1fr;
    font-size: 12px;
    color: var(--Primary-B-Color);
    align-items: center;
    max-width: 320px;
}

.STING-WEB-Last-Vs-Matches-Left {
    display: grid;
    width: 100%;
    grid-template-columns: .5fr 1fr;
    font-size: 11px;
    color: var(--Primary-C-Color);
    align-items: center;
    text-align: center;
}

.STING-WEB-Last-Vs-Matches-Right span img {
    width: 0;
    height: 0;
    object-fit: contain;
}

.STING-WEB-Last-Vs {
    display: grid;
    align-items: center;
    margin: 0 auto;
    justify-items: center;
}

.STING-WEB-Last-Vs-Matches-Right .N-A {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-items: center;
    width: 100%;
}

.STING-WEB-Events-Match:nth-child(odd) {
    background: var(--B-Color);
    border-radius: 10px;
    width: 96%;
}

@media (max-width: 720px) {
    #LivedMatch {
        height: 300px;
    }

    .STING-WEB-Last-Vs-Matches {
        grid-template-columns: 1fr;
    }

    .none-phone {
        text-align: center;
        display: none;
    }

    .STING-WEB-Last-Vs-Matches-Left {
        display: none;
    }

    .STING-WEB-Last-Vs-Matches-Right {
        max-width: none;
    }
}

.STING-WEB-Progress-background {
    width: 100%;
    height: 5px;
    background-color: #21263B;
    border-radius: 5px;
}

.STING-WEB-Stats-Top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.STING-WEB-Stats-Progress {
    height: 100%;
    border-radius: 5px;
}

.Value {
    position: relative;
    font-size: 16px;
    font-weight: bold;
}

.STING-WEB-Team-Right-Stats,
.STING-WEB-Team-Left-Stats {
    display: inline-block;
    vertical-align: middle;
    width: 45%;
}

.STING-WEB-Value-Name {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    width: 100%;
}

.STING-WEB-Progress-Stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.STING-WEB-Scorers .no-scorers,
.STING-WEB-Standings-C .no-standings,
.STING-WEB-Previous-Matches .no-matches,
.STING-WEB-Matches .no-matches {
    text-align: center;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--C-Color);
    border-radius: 30px;
    font-size: 14px;
    color: var(--Primary-E-Color);
}

.STING-WEB-Standings-C-Header {
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr .5fr .5fr .5fr;
    align-items: center;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--Primary-E-Color);
    border-radius: 8px;
}

.STING-WEB-Double {
    width: 93%;
    max-width: var(--Max-Size);
    margin: 20px auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.STING-WEB-Standings-C-row {
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr .5fr .5fr .5fr;
    align-items: center;
    text-align: center;
    background: var(--C-Color);
    padding: 8px 0;
    font-size: 14px;
    color: var(--Primary-E-Color);
    border-radius: 6px;
    margin: 5px 0;
}

.Team-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.Team-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.STING-WEB-Standings-C-row .Position {
    font-size: 13px;
    color: var(--Primary-E-Color);
}

.STING-WEB-Standings-C-row .Points {
    color: var(--Primary-B-Color);
}

.STING-WEB-Scorers-row .Goals {
    background: #7074881c;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    align-content: center;
}

.STING-WEB-Group-Name {
    font-size: 14px;
    margin: 12px 15px;
    color: var(--Primary-C-Color);
    display: block;
}

.Phone-Show {
    display: none;
}

.PC-Show {
    display: block;
}

.Player-Info {
    display: grid;
    text-align: start;
    font-size: 13px;
}

.Player-zone {
    font-size: 11px;
    color: var(--Primary-C-Color);
}

.STING-WEB-Scorers-row .Position {
    font-size: 13px;
    color: var(--Primary-E-Color);
}

.STING-WEB-Scorers-Header {
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr;
    align-items: center;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--Primary-E-Color);
    border-radius: 8px;
    width: 93%;
    margin: 0 auto;
}

.STING-WEB-Scorers-row {
    display: grid;
    grid-template-columns: .5fr 2fr .5fr .5fr;
    align-items: center;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--Primary-E-Color);
    background: var(--C-Color);
    border-radius: 6px;
    margin: 5px 0;
}

.Player img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.STING-WEB-Match:hover * {
    color: #39dbbfc7;
}

.STING-WEB-Scorers-row .Player {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.STING-WEB-Scorers-Header .Position {
    text-align: start;
    margin-right: 18px;
}

/* Scorers Tabs Styling - Matching Team-Buttons */
.STING-WEB-Scorers-Tabs {
    display: flex;
    margin: 10px auto;
    align-items: center;
    width: 93%;
    max-width: 450px;
    background: var(--B-Color);
    border-radius: 50px;
    margin-bottom: 15px;
}

.STING-WEB-Scorers-Tab {
    background: var(--B-Color);
    color: #ddddddb5;
    padding: 8px;
    border: 0;
    font-size: 14px;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.STING-WEB-Scorers-Tab:hover {
    color: var(--Primary-B-Color);
}

.STING-WEB-Scorers-Tab.active {
    color: var(--A-Color);
    font-weight: 600;
    background: var(--Primary-A-Color);
}

.STING-WEB-Scorers-Content {
    transition: all 0.3s ease;
    opacity: 1;
}

.STING-WEB-Scorers-Content:not(.active) {
    opacity: 0;
    transform: translateY(10px);
}


/* Goals+Assists uses same spacing as other tabs */
#match-goalsassists-content .STING-WEB-Scorers-Header {
    grid-template-columns: .5fr 2fr .5fr .5fr;
}

#match-goalsassists-content .STING-WEB-Scorers-row {
    grid-template-columns: .5fr 2fr .5fr .5fr;
}

.Match-Teams {
    display: grid;
    grid-template-columns: 1fr .5fr 1fr;
    align-items: center;
    background: var(--C-Color);
    width: 96%;
    margin: 0 auto;
    padding: 6px;
    border-radius: 8px;
    margin-bottom: 5px;
    gap: 8px;
}

.Right-Team,
.Left-Team {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.Right-Team {
    direction: ltr;
}

.Right-Team img,
.Left-Team img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.Match-Date-Group {
    display: grid;
    background: var(--A-Color);
    border-radius: 12px;
    margin-bottom: 12px;
}

.Match-Round {
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
    color: var(--Primary-C-Color);
}

.Match-Time,
.Match-Goals {
    text-align: center;
    font-size: 15px;
    color: var(--Primary-E-Color);
}

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

.Match-Center {
    display: grid;
    align-items: center;
}

.Club {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-self: center;
}

.Match-Date-Title {
    background: var(--B-Color);
    width: 93%;
    padding: 4px 12px;
    border-radius: 7px;
    margin: 5px auto;
    color: var(--Primary-E-Color);
    font-size: 14px;
    text-align: center;
    display: block;
}

.Right-Team span,
.Left-Team span {
    font-size: 13px;
}

.Club img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 720px) {
    header {
        display: none;
    }

    .STING-WEB-Scorers-Header .Position {
        margin-right: 8px;
    }

    .STING-WEB-Standings-C-row,
    .Team-logo {
        font-size: 12px;
    }

    .STING-WEB-Scorers-row .Goals {
        font-weight: 600;
        font-size: 17px;
    }

    .STING-WEB-Double {
        grid-template-columns: 1fr;
    }

    .Match-Round {
        font-size: 10px;
    }

    .STING-WEB-League-Bottom button,
    .Match-Time {
        font-size: 13px;
    }

    .Right-Team img,
    .Left-Team img,
    .Team-logo img {
        width: 25px;
        height: 25px;
    }

    .Phone-Show {
        display: block;
    }

    .Right-Team span,
    .Left-Team span {
        font-size: 12px;
    }

    .PC-Show,
    .STING-WEB-Double #STING-WEB-Standings {
        display: none;
    }

    .Club {
        width: 25px;
        height: 25px;
    }

    .STING-WEB-H2H.h2h-section:before {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .STING-WEB-H2H-Matches.matches-section:before {
        font-size: 13px;
        margin-bottom: 12px;
    }
}

/* Events tabs styling - matching Team-Buttons design */
.events-tabs {
    display: flex;
    margin: 15px auto;
    align-items: center;
    width: 93%;
    max-width: 300px;
    background: var(--B-Color);
    border-radius: 50px;
    padding: 2px;
}

/* Hidden state for live matches without tabs */
.events-tabs.hidden {
    display: none !important;
}

.events-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--B-Color);
    color: #ddddddb5;
    padding: 10px;
    border: 0;
    font-size: 14px;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.events-tab:hover {
    color: var(--Primary-B-Color);
}

.events-tab.active {
    color: var(--A-Color);
    font-weight: 600;
    background: var(--Primary-A-Color);
}

.events-tab svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

.events-tab.active svg {
    opacity: 1;
}

.events-content {
    position: relative;
}

.tab-content {
    display: none !important;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block !important;
}

/* Clear Player Names */
.STING-WEB-Player-Names span:first-child {
    font-weight: 600;
    color: #fff;
}

.STING-WEB-Player-Names span:last-child {
    color: var(--Primary-C-Color);
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@media (max-width: 880px) {
    .events-tab {
        padding: 10px 16px;
        font-size: 13px;
    }

    .events-tab svg {
        width: 14px;
        height: 14px;
    }

    .events-tabs {
        padding: 0 8px;
    }
}

/* ===== CLS Prevention Styles ===== */
/* Skeleton loading for match card */
.STING-WEB-Match-Card:empty::before {
    content: "";
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    align-items: center;
    justify-items: center;
    padding: 10px 0;
    height: 120px;
    background-image:
        /* Team logos */
        radial-gradient(circle at 15% 50%, var(--C-Color) 30px, transparent 31px),
        radial-gradient(circle at 85% 50%, var(--C-Color) 30px, transparent 31px),
        /* Team names */
        linear-gradient(var(--C-Color) 12px, transparent 12px),
        linear-gradient(var(--C-Color) 12px, transparent 12px),
        /* Score */
        linear-gradient(var(--C-Color) 20px, transparent 20px),
        linear-gradient(var(--C-Color) 20px, transparent 20px),
        linear-gradient(var(--C-Color) 20px, transparent 20px),
        /* Time */
        linear-gradient(var(--C-Color) 15px, transparent 15px);
    background-size:
        100% 100%, 100% 100%,
        /* Team logos */
        60px 12px, 60px 12px,
        /* Team names */
        25px 20px, 15px 20px, 25px 20px,
        /* Score (goal-vs-goal) */
        50px 15px;
    /* Time */
    background-position:
        0 0, 0 0,
        /* Team logos overlay */
        15% 75%, 85% 75%,
        /* Team names */
        42% 35%, 50% 35%, 58% 35%,
        /* Score */
        50% 60%;
    /* Time */
    background-repeat: no-repeat;
    border-radius: 8px;
    position: relative;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position:
            0 0, 0 0,
            /* Team logos */
            15% 75%, 85% 75%,
            /* Team names */
            42% 35%, 50% 35%, 58% 35%,
            /* Score */
            50% 60%;
        /* Time */
        opacity: 0.6;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        background-position:
            0 0, 0 0,
            /* Team logos */
            15% 75%, 85% 75%,
            /* Team names */
            42% 35%, 50% 35%, 58% 35%,
            /* Score */
            50% 60%;
        /* Time */
        opacity: 0.6;
    }
}

/* Reserve space for images */
.STING-WEB-Match-Card img,
.STING-WEB-Card-Vs img,
.Team-logo img,
.Player img {
    display: block;
    background: var(--B-Color);
    border-radius: 4px;
}

/* Prevent reflow on tab content */
.STING-WEB-Match-UI .fade {
    position: relative;
    contain: layout style;
}

/* Stabilize the matches list on desktop */
@media (min-width: 881px) {
    .STING-WEB-MATCHES {
        min-height: 600px;
        contain: layout;
    }

    .STING-WEB-Match-UI {
        min-height: 800px;
    }

    /* Reserve space for dynamic content */
    .STING-WEB-Match-Card:not(:empty) {
        min-height: 120px;
    }

    .STING-WEB-Event-Toggle {
        min-height: 60px;
    }

    /* Prevent jump when content switches */
    .STING-WEB-Details.fade,
    .STING-WEB-Statistics.fade,
    .STING-WEB-Events.fade,
    .STING-WEB-Team.fade,
    .STING-WEB-Comments.fade,
    .STING-WEB-H2H.fade {
        min-height: 400px;
    }
}

/* ==== Team/Lineup overrides ported from style2 (auto) ==== */

*/ .STING-WEB-Comments,
.STING-WEB-Team,
.STING-WEB-Statistics,
.STING-WEB-Feraq,
.STING-WEB-Hadafin {
    width: 96%;
    margin: 0 auto;
}

.STING-WEB-Home-Field-Map,
.STING-WEB-Away-Field-Map {
    display: flex;
    background-image: url("/assets/images/Lineup-BG.png?v=1.0.1");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    align-items: center;
    margin: 20px auto;
    flex-direction: column;
    height: 500px;
    gap: 8px;
    border-radius: 6px;
    width: 500px;
    margin-top: 30px;
}

.STING-WEB-Home-Field-Map .player img,
.STING-WEB-Away-Field-Map .player img {
    width: 45px;
    height: 45px;
}

.STING-WEB-Home-Field-Map .player,
.STING-WEB-Away-Field-Map .player {
    display: grid;
    justify-items: center;
    margin: 2px;
    width: 90px;
    height: 90px;
}

.STING-WEB-Home-Field-Map .player span,
.STING-WEB-Away-Field-Map .player span {
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 19px;
    margin-top: 4px;
}

.Team-Buttons {
    display: flex;
    margin: 20px auto;
    align-items: center;
    width: 93%;
    max-width: 350px;
    background: transparent;
    border-radius: 50px;
    border: 1px solid var(--Primary-D-Color, #eee);
    overflow: hidden;
}

.Team-Button {
    background: transparent;
    color: #ddddddb5;
    padding: 12px 20px;
    border: 0;
    font-size: 14px;
    border-radius: 50px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.Team-Button:hover {
    color: #3dcdc2;
}

.Team-Button.Lenup {
    color: #0a0e17;
    font-weight: 600;
    background: #3dcdc2;
    border-radius: 50px;
}

.STING-WEB-Formation {
    background: #fff;
    color: #000;
    padding: 2px 15px;
    border-radius: 20px;
    font-size: 15px;
    text-align: center;
    display: block;
    width: max-content;
    position: absolute;
    bottom: 50px;
    left: 100px;
    font-weight: 600;
    z-index: 10;
}

.Starting {
    position: relative;
}

.Starting-Players {
    display: block;
}

.STING-WEB-Team .STING-WEB-TITLE-ODO:before {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--Primary-B-Color);
    display: flex;
    align-self: center;
    border-radius: 50px;
}

.STING-WEB-Team-Right-Stats,
.STING-WEB-Team-Left-Stats {
    display: inline-block;
    vertical-align: middle;
    width: 45%;
}

.STING-WEB-Team-Right-Stats img,
.STING-WEB-Team-Left-Stats img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.STING-WEB-Team-Right-Stats .Value,
.STING-WEB-Team-Left-Stats .Value {
    width: 100%;
    font-size: 13px;
    color: var(--Primary-C-Color);
}

.STING-WEB-Events,
.STING-WEB-Team,
.STING-WEB-Statistics,
.STING-WEB-H2H,
.STING-WEB-Comments,
.STING-WEB-Live,
.STING-WEB-Feraq,
.STING-WEB-Hadafin {
    display: none;
    min-height: 400px;
}

.STING-WEB-Events[style*="display: block"],
.STING-WEB-Team[style*="display: block"],
.STING-WEB-Statistics[style*="display: block"],
.STING-WEB-H2H[style*="display: block"],
.STING-WEB-Comments[style*="display: block"],
.STING-WEB-Live[style*="display: block"],
.STING-WEB-Feraq[style*="display: block"],
.STING-WEB-Hadafin[style*="display: block"] {
    display: block !important;
}

/* Adjust player container for rating */
.STING-WEB-Home-Field-Map .player,
.STING-WEB-Away-Field-Map .player {
    position: relative;
    padding-bottom: 8px;
}

/* Events tabs styling - matching Team-Buttons design */
.events-tabs {
    display: flex;
    margin: 15px auto;
    align-items: center;
    width: 93%;
    max-width: 300px;
    background: var(--B-Color);
    border-radius: 50px;
    padding: 2px;
}

@media (max-width: 880px) {

    .STING-WEB-Home-Field-Map,
    .STING-WEB-Away-Field-Map {
        height: 340px;
        width: 340px;
    }

    .STING-WEB-Home-Field-Map .player img,
    .STING-WEB-Away-Field-Map .player img {
        width: 40px;
        height: 40px;
    }

    .STING-WEB-Home-Field-Map .player,
    .STING-WEB-Away-Field-Map .player {
        width: 50px;
        height: 50px;
    }

    .STING-WEB-Home-Field-Map .player span,
    .STING-WEB-Away-Field-Map .player span {
        font-size: 9px;
        line-height: 15px;
    }

    .STING-WEB-Formation {
        font-size: 12px;
        bottom: 15px;
        left: 55px;
        padding: 2px 12px;
        z-index: 15;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

}

/* Head-to-Head Section Styles */

.STING-WEB-H2H-Summary {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 20px;
    margin: 5px auto !important;
    padding: 20px;
    background: var(--B-Color);
    border-radius: 12px;
    direction: ltr;
}

.STING-WEB-H2H-Team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


.STING-WEB-H2H-Team-Logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    background: #151825;
}

.STING-WEB-H2H-Stats {
    background: var(--C-Color);
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 20px;
}

.STING-WEB-H2H-Performance {
    background: var(--C-Color);
    border-radius: 30px;
    padding: 20px;
}


.STING-WEB-H2H-Team-Name {
    font-size: 14px;
    font-weight: 600;
    color: var(--Primary-E-Color);
    text-align: center;
}

.STING-WEB-H2H-Center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.STING-WEB-H2H-Stats-Numbers {
    display: flex;
    align-items: center;
    gap: 15px;
}

.STING-WEB-H2H-Stat-Number {
    font-size: 32px;
    font-weight: bold;
    color: var(--Primary-A-Color);
    min-width: 40px;
    text-align: center;
}


.STING-WEB-H2H-Match-Score .winner {
    color: var(--Primary-A-Color);
}

.STING-WEB-H2H-Stat-Separator {
    font-size: 24px;
    color: var(--Primary-C-Color);
    font-weight: 300;
}

.STING-WEB-H2H-Stats-Labels {
    display: flex;
    gap: 25px;
    justify-content: center;
}

.STING-WEB-H2H-Stat-Label {
    font-size: 12px;
    color: var(--Primary-C-Color);
    min-width: 50px;
    text-align: center;
}

/* Match History Styles */
.STING-WEB-H2H-Matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.STING-WEB-H2H-Match-Link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.STING-WEB-H2H-Match-Row {
    display: grid;
    grid-template-columns: 1fr 100px;
    align-items: center;
    padding: 8px 15px;
    background: var(--C-Color);
    border-radius: 8px;
    gap: 10px;
    transition: background 0.2s ease;
}

.STING-WEB-H2H-Match-Row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.STING-WEB-H2H-Match-Row:nth-child(even) {
    background: var(--B-Color);
}

.STING-WEB-H2H .STING-WEB-H2H-Match-Competition {
    font-size: 10px !important;
    color: var(--Primary-C-Color) !important;
    text-align: center !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.STING-WEB-H2H-Match-Score {
    font-size: 13px;
    color: var(--Primary-E-Color);
    text-align: center;
}

.STING-WEB-H2H-Match-Score .score-winner {
    color: #39dbbf;
    font-weight: bold;
}

.STING-WEB-H2H-Match-Score .winner {
    font-weight: bold;
    color: var(--Primary-A-Color);
}

.STING-WEB-H2H-Match-Info {
    text-align: right;
}

.STING-WEB-H2H-Match-Date {
    font-size: 12px;
    color: var(--Primary-E-Color);
    text-align: left;
    justify-self: start;
    margin: 0;
    padding: 0;
}

/* Team Performance Styles */
.STING-WEB-H2H-Performance {
    background: var(--C-Color);
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 20px;
}

.STING-WEB-H2H-Team-Performance {
    margin-bottom: 25px;
    background: var(--C-Color);
    border-radius: 12px;
    padding: 15px;
    width: 96%;
    margin: 0 auto 25px auto;
}

.STING-WEB-H2H-Team-Header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--Primary-C-Color);
}

.STING-WEB-H2H-Team-Small-Logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--A-Color);
}

.STING-WEB-H2H-Team-Perf-Name {
    font-size: 16px;
    font-weight: 600;
    color: var(--Primary-B-Color);
}

.STING-WEB-H2H-Recent-Matches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.STING-WEB-H2H-Recent-Match {
    display: grid;
    grid-template-columns: 40px 1fr 80px;
    align-items: center;
    padding: 10px;
    background: var(--C-Color);
    border-radius: 8px;
    gap: 10px;
    transition: background 0.2s ease;
}

.STING-WEB-H2H-Recent-Match:hover {
    background: rgba(255, 255, 255, 0.05);
}

.STING-WEB-H2H-Match-Status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 auto;
}

.STING-WEB-H2H-Match-Status.win {
    background: #22c55e;
}

.STING-WEB-H2H-Match-Status.draw {
    background: #eab308;
}

.STING-WEB-H2H-Match-Status.loss {
    background: #ef4444;
}

.STING-WEB-H2H-Match-Info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    justify-content: center;
}

.STING-WEB-H2H-Match-Info-Competition {
    font-size: 10px;
    color: var(--Primary-C-Color);
}

.STING-WEB-H2H-Match-Info-Score {
    font-size: 13px;
    color: var(--Primary-B-Color);
}

.STING-WEB-H2H-Match-Info-Score .winner {
    font-weight: bold;
    color: var(--Primary-A-Color);
}

.STING-WEB-H2H-Match-Info-Date {
    font-size: 11px;
    color: var(--Primary-E-Color);
    text-align: right;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .STING-WEB-H2H {
        width: 110% !important;
        margin: 10px auto !important;
        padding: 9px !important;
    }

    .STING-WEB-H2H-Summary {
        grid-template-columns: 1fr 1.5fr 1fr !important;
        gap: 10px !important;
        padding: 15px !important;
        width: 93% !important;
        margin: 20px auto !important;
        max-width: 93% !important;
        overflow-x: hidden !important;
        border-radius: 30px !important;
    }

    .STING-WEB-H2H-Team-Logo {
        width: 40px !important;
        height: 40px !important;
    }

    .STING-WEB-H2H-Team-Name {
        font-size: 11px !important;
    }

    .STING-WEB-H2H-Stat-Number {
        font-size: 24px !important;
        min-width: 30px !important;
    }

    .STING-WEB-H2H-Stats-Numbers {
        gap: 10px !important;
    }

    .STING-WEB-H2H-Stats-Labels {
        gap: 12px !important;
    }

    .STING-WEB-H2H-Stat-Label {
        font-size: 9px !important;
        min-width: 30px !important;
    }

    .STING-WEB-H2H-Match-Row {
        grid-template-columns: 1fr 60px !important;
        padding: 6px !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    .STING-WEB-H2H-Match-Competition {
        font-size: 9px !important;
    }

    .STING-WEB-H2H-Match-Score {
        font-size: 11px !important;
    }

    .STING-WEB-H2H-Match-Date {
        font-size: 10px !important;
    }

    .STING-WEB-H2H-Team-Performance {
        width: 100% !important;
        margin: 0 0 25px 0 !important;
        padding: 10px !important;
        background: var(--C-Color) !important;
    }

    .STING-WEB-H2H-Recent-Match {
        grid-template-columns: 25px 1fr 60px !important;
        gap: 6px !important;
        padding: 6px !important;
    }

    .STING-WEB-H2H-Match-Info-Competition {
        font-size: 9px !important;
    }

    .STING-WEB-H2H-Match-Info-Score {
        font-size: 11px !important;
    }

    .STING-WEB-H2H-Match-Info-Date {
        font-size: 9px !important;
    }
}

/* Lineup UI Refinement Overrides */
.Team-Button {
    color: #1a1a1a !important;
}

.Team-Button.Lenup {
    background: #E31E24 !important;
    color: #fff !important;
}

.STING-WEB-Home-Field-Map,
.STING-WEB-Away-Field-Map {
    background-image: url('/site/assets/images/football-field.jpg') !important;
    background-size: cover !important;
    height: 600px !important;
    justify-content: space-around !important;
    padding: 30px 0 !important;
}

.lineup-player-item img {
    width: 55px !important;
    height: 55px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    background: #1a1a1a !important;
}

.lineup-player-item h3 {
    font-size: 11px !important;
    color: #fff !important;
    margin-top: 4px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.STING-WEB-Formation {
    font-weight: bold !important;
    color: #E31E24 !important;
}


/* Enhanced Player Name Visibility */
.lineup-player-item .player-name h3 {
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
}

.STING-WEB-Formation {
    display: inline-block !important;
    margin-bottom: 10px !important;
    background: #fff !important;
    color: #E31E24 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    font-size: 13px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.Team-Buttons {
    border: 1px solid #E31E24 !important;
}

/* Timer circle background - theme aware */
.timer-circle-bg {
    fill: var(--C-Color);
}

body.dark-mode .timer-circle-bg {
    fill: #263545;
}







/* Rotate only the progress circle to start from top */
circle[id^='progress-'],
.STING-WEB-Circular-Progress-Bar {
    transform: rotate(-90deg);
    transform-origin: center;
}

/* Dark mode: Keep match card text white on dark backgrounds */
body.dark-mode .STING-WEB-Match-div-Team-Name,
body.dark-mode .Match-div-Status {
    color: #fff;
}

/* Dark mode: Fix team logo backgrounds in standings */
body.dark-mode .STING-WEB-Standings-C-row img {
    mix-blend-mode: normal !important;
    filter: brightness(1.1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

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

/* Auth Buttons & Dropdown */
.STING-WEB-Auth {
    margin: 0 10px;
}

.auth-guest-btns {
    display: flex;
    gap: 10px;
    align-items: center;
}

.auth-btn {
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-btn {
    background: linear-gradient(135deg, #e31e24 0%, #be1218 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
    position: relative;
    overflow: hidden;
}

.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.login-btn:hover::before {
    left: 100%;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
    background: linear-gradient(135deg, #f0252c 0%, #e31e24 100%);
}

.auth-user-dropdown {
    position: relative;
    direction: rtl;
}

.user-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--C-Color);
    border: 1px solid var(--Primary-D-Color);
    padding: 6px 15px;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    color: var(--Primary-B-Color);
    transition: all 0.3s;
}

.user-dropdown-trigger:hover {
    background: var(--Primary-D-Color);
}

.user-dropdown-trigger .user-name {
    font-size: 13px;
    font-weight: 700;
}

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 180px;
    background: var(--A-Color);
    border: 1px solid var(--Primary-D-Color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
    padding: 8px;
    overflow: hidden;
}

.user-dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #333 !important;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.2s;
    width: 100%;
    text-align: right;
    border: none;
    background: transparent;
    cursor: pointer;
}

.dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--Primary-A-Color) !important;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
}

.logout-btn {
    color: #dc2626 !important;
}

.logout-form {
    margin: 0;
}

/* Mobile Drawer Auth Styles */
.drawer-auth-section {
    padding: 20px;
}

.auth-hint {
    font-size: 12px;
    color: var(--Primary-C-Color);
    margin-bottom: 15px;
    text-align: center;
}

.auth-btns-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.drawer-auth-btn.login-btn {
    background: linear-gradient(135deg, #e31e24 0%, #be1218 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 10px rgba(227, 30, 36, 0.2);
}

.drawer-auth-user {
    padding: 10px 0;
}

.user-profile-brief {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 10px;
    background: var(--C-Color);
    border-radius: 15px;
}

.user-avatar {
    width: 45px;
    height: 45px;
    background: var(--Primary-A-Color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-info .user-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--Primary-B-Color);
}

.user-info .user-email {
    font-size: 12px;
    color: var(--Primary-C-Color);
}

.drawer-user-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-user-links li {
    margin-bottom: 8px;
}

.drawer-user-links a,
.logout-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    color: var(--Primary-B-Color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    width: 100%;
    border: none;
    background: transparent;
    text-align: right;
}

.drawer-user-links a:hover,
.logout-link:hover {
    background: var(--C-Color);
}

.logout-link {
    color: #dc2626 !important;
}

/* Dark Mode Overrides */
body.dark-mode .login-btn {
    background: linear-gradient(135deg, #e31e24 0%, #be1218 100%);
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
}

body.dark-mode .login-btn:hover {
    background: linear-gradient(135deg, #f0252c 0%, #e31e24 100%);
    box-shadow: 0 6px 20px rgba(227, 30, 36, 0.4);
}

body.dark-mode .register-btn {
    border-color: var(--Dark-Primary-D-Color);
    color: var(--Dark-Primary-B-Color);
}

body.dark-mode .register-btn:hover {
    background: var(--Dark-Primary-D-Color);
}

body.dark-mode .user-dropdown-trigger {
    background: var(--Dark-C-Color);
    border-color: var(--Dark-Primary-D-Color);
    color: var(--Dark-Primary-B-Color);
}

body.dark-mode .user-dropdown-menu {
    background: var(--Dark-B-Color);
    border-color: var(--Dark-Primary-D-Color);
}

body.dark-mode .dropdown-item {
    color: var(--Dark-Primary-B-Color) !important;
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .user-profile-brief {
    background: var(--Dark-C-Color);
}

body.dark-mode .drawer-user-links a:hover,
body.dark-mode .logout-link:hover {
    background: var(--Dark-Primary-D-Color);
}

/* ===== MOBILE COUNTDOWN & MATCH CARD FIX ===== */
@media (max-width: 768px) {
    /* Widen center column to accommodate countdown */
    .STING-WEB-Card-Vs {
        grid-template-columns: 1fr 2fr 1fr !important;
        overflow: hidden;
    }

    /* Compact countdown wrapper */
    .countdown-wrapper {
        gap: 3px !important;
        flex-wrap: nowrap !important;
        width: 100%;
        justify-content: center;
    }

    .countdown-unit {
        min-width: 26px !important;
        padding: 3px 4px !important;
        border-radius: 6px !important;
    }

    .countdown-value {
        font-size: 13px !important;
        line-height: 1.1 !important;
    }

    .countdown-label {
        font-size: 6px !important;
        margin-top: 2px !important;
    }

    .countdown-sep {
        font-size: 13px !important;
        margin-bottom: 6px !important;
        margin-top: 0 !important;
    }

    /* header-timer wrapper fills center */
    .header-timer-wrapper {
        width: 100% !important;
        align-items: center !important;
    }

    /* "starts in" label smaller */
    .header-timer-wrapper > span:first-child {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    /* match start time smaller */
    .match-start-time {
        font-size: 10px !important;
    }

    /* Time-Status container doesn't overflow */
    .STING-WEB-Time-Status-Container {
        overflow: hidden;
        max-width: 100%;
    }
}