/* ========================================
   CoreStack Club Tools - Fixtures & Results
   Clean final stylesheet
======================================== */


/* ========================================
   WIDGET
======================================== */

.cs-fixtures-widget {
    width: 100%;
    font-family: "Montserrat", Arial, sans-serif;
}


/* ========================================
   TABS
======================================== */

.cs-fixtures-tabs {
    display: flex;
    align-items: center;
    gap: 26px;

    margin: 0 0 16px;
    padding: 0 2px;

    border-bottom: 1px solid #e1e1e1;
}

.cs-fixtures-tab {
    position: relative;

    appearance: none;
    -webkit-appearance: none;

    margin: 0;
    padding: 0 0 10px;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    color: #6b7280 !important;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cs-fixtures-tab:hover,
.cs-fixtures-tab:focus,
.cs-fixtures-tab:active {
    color: #6b7280 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.cs-fixtures-tab::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 3px;

    background: transparent;
}

.cs-fixtures-tab.is-active,
.cs-fixtures-tab.is-active:hover,
.cs-fixtures-tab.is-active:focus,
.cs-fixtures-tab.is-active:active {
    color: var(--cs-dark, #062A46) !important;
    background: transparent !important;
}

.cs-fixtures-tab.is-active::after {
    background: var(--cs-accent, #BE9114);
}

.cs-fixtures-tab:focus-visible {
    outline: 2px solid var(--cs-primary, #1379A3);
    outline-offset: 4px;
    border-radius: 2px;
}


/* ========================================
   PANELS / SCROLL
======================================== */

.cs-fixtures-panel[hidden] {
    display: none !important;
}

.cs-fixtures {
    display: flex;
    flex-direction: column;

    width: 100%;
    gap: 14px;
}

.cs-fixtures-scroll {
    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 6px;

    scrollbar-width: thin;
    scrollbar-color: #b7b7b7 transparent;
    overscroll-behavior: contain;
}

/* Five compact cards visible at once. */
.cs-fixtures-panel[data-cs-fixtures-panel="upcoming"] .cs-fixtures-scroll,
.cs-fixtures-panel[data-cs-fixtures-panel="results"] .cs-fixtures-scroll {
    max-height: 536px;
}

.cs-fixtures-scroll::-webkit-scrollbar {
    width: 7px;
}

.cs-fixtures-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.cs-fixtures-scroll::-webkit-scrollbar-thumb {
    background: #b7b7b7;
    border-radius: 999px;
}


/* ========================================
   SHARED CARD
======================================== */

.cs-fixture-card {
    display: grid;

    width: 100%;

    flex: 0 0 auto;
    overflow: hidden;

    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 16px;

    font-family: "Montserrat", Arial, sans-serif;
}


/* ========================================
   DATE BLOCK
======================================== */

.cs-fixture-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 7px 5px;

    background: var(--cs-dark, #062A46);
    color: #ffffff;

    text-align: center;
}

.cs-fixture-day {
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
}

.cs-fixture-number {
    margin: 2px 0;

    font-size: 26px;
    line-height: 1.05;
    font-weight: 800;
}

.cs-fixture-month {
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}


/* ========================================
   UPCOMING FIXTURE CARD
======================================== */

.cs-upcoming-card {
    grid-template-columns: 78px 1fr;
    min-height: 96px;
}

.cs-fixture-body {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(145px, 0.95fr);
    align-items: center;

    gap: 12px;

    min-width: 0;
    padding: 12px 16px;
}

.cs-fixture-teams {
    min-width: 0;
}

.cs-fixture-team,
.cs-fixture-opponent {
    color: var(--cs-dark, #062A46);

    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;
}

.cs-fixture-vs {
    margin: 4px 0;

    color: #333333;

    font-size: 13px;
    line-height: 1;
    font-weight: 400;
}

.cs-fixture-info {
    display: flex;
    flex-direction: column;

    gap: 6px;
    min-width: 0;
}

.cs-fixture-info-row {
    display: flex;
    align-items: center;

    gap: 6px;
    min-width: 0;

    color: var(--cs-dark, #062A46);

    font-size: 14px;
    line-height: 1.1;
    font-weight: 400;
}

.cs-fixture-info-row > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cs-fixture-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    flex: 0 0 16px;

    color: var(--cs-dark, #062A46);
}

.cs-fixture-icon svg {
    display: block;

    width: 16px !important;
    height: 16px !important;

    max-width: 16px !important;
    max-height: 16px !important;
}


/* ========================================
   RESULT CARD - DESKTOP
======================================== */

.cs-result-card {
    grid-template-columns: 82px 1fr;
    min-height: 96px;
}

.cs-result-card .cs-fixture-day {
    font-size: 12px;
}

.cs-result-card .cs-fixture-number {
    font-size: 24px;
}

.cs-result-card .cs-fixture-month {
    font-size: 11px;
}

.cs-result-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;

    min-width: 0;

    box-sizing: border-box;
    padding: 8px 20px;
}

.cs-result-main {
    min-width: 0;
}

.cs-result-topline {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;
    min-width: 0;
}

.cs-result-team {
    min-width: 0;

    color: var(--cs-dark, #062A46);

    font-size: 14px;
    line-height: 1.15;
    font-weight: 800;

    white-space: nowrap;
}

.cs-result-team-home,
.cs-result-team-away {
    text-align: center;
}

.cs-result-scoreline {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    white-space: nowrap;
}

.cs-result-score {
    min-width: 15px;

    color: var(--cs-dark, #062A46);

    font-size: 18px;
    line-height: 1;
    font-weight: 700;

    text-align: center;
}

.cs-result-dash {
    color: var(--cs-dark, #062A46);

    font-size: 16px;
    line-height: 1;
    font-weight: 600;
}

.cs-result-bottomline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 7px;
}

.cs-result-meta-item {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--cs-dark, #062A46);

    font-size: 12px;
    line-height: 1.1;
    font-weight: 500;

    white-space: nowrap;
}

.cs-result-meta-item + .cs-result-meta-item {
    padding-left: 14px;
}

.cs-result-meta-item + .cs-result-meta-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 1px;
    height: 15px;

    background: #cfd3d8;

    transform: translateY(-50%);
}

.cs-result-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    flex: 0 0 14px;

    color: var(--cs-dark, #062A46);
}

.cs-result-meta-icon svg {
    display: block;

    width: 14px !important;
    height: 14px !important;

    max-width: 14px !important;
    max-height: 14px !important;
}


/* ========================================
   EMPTY STATES
======================================== */

.cs-no-fixtures {
    margin: 0;
    padding: 14px 2px;

    color: #333333;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}




/* ========================================
   LAPTOP
   Compact desktop presentation for
   1025px-1500px wide screens.
======================================== */

@media (min-width: 1025px) and (max-width: 1500px) {

    .cs-fixtures-tabs {
        gap: 22px;
        margin-bottom: 12px;
    }

    .cs-fixtures-tab {
        padding-bottom: 8px;
        font-size: 12.5px;
    }

    .cs-fixtures {
        gap: 10px;
    }

    .cs-fixtures-scroll {
        padding-right: 5px;
    }

    .cs-fixtures-panel[data-cs-fixtures-panel="upcoming"] .cs-fixtures-scroll,
    .cs-fixtures-panel[data-cs-fixtures-panel="results"] .cs-fixtures-scroll {
        max-height: 470px;
    }

    .cs-upcoming-card {
        grid-template-columns: 70px 1fr;
        min-height: 86px;
        border-radius: 14px;
    }

    .cs-upcoming-card .cs-fixture-day {
        font-size: 11px;
    }

    .cs-upcoming-card .cs-fixture-number {
        font-size: 22px;
    }

    .cs-upcoming-card .cs-fixture-month {
        font-size: 10px;
    }

    .cs-fixture-body {
        grid-template-columns: minmax(0, 1fr) minmax(125px, 0.9fr);
        gap: 9px;
        padding: 9px 12px;
    }

    .cs-fixture-team,
    .cs-fixture-opponent {
        font-size: 12.5px;
        line-height: 1.12;
    }

    .cs-fixture-vs {
        margin: 3px 0;
        font-size: 10.5px;
    }

    .cs-fixture-info {
        gap: 4px;
    }

    .cs-fixture-info-row {
        gap: 5px;
        font-size: 11.5px;
        line-height: 1.08;
    }

    .cs-fixture-icon,
    .cs-fixture-icon svg {
        width: 14px !important;
        height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        flex-basis: 14px;
    }

    .cs-result-card {
        grid-template-columns: 70px 1fr;
        min-height: 86px;
        border-radius: 14px;
    }

    .cs-result-card .cs-fixture-day {
        font-size: 11px;
    }

    .cs-result-card .cs-fixture-number {
        font-size: 22px;
    }

    .cs-result-card .cs-fixture-month {
        font-size: 10px;
    }

    .cs-result-body {
        padding: 7px 14px;
    }

    .cs-result-topline {
        gap: 9px;
    }

    .cs-result-team {
        font-size: 12.5px;
        line-height: 1.12;
    }

    .cs-result-scoreline {
        gap: 6px;
    }

    .cs-result-score {
        font-size: 16px;
    }

    .cs-result-dash {
        font-size: 14px;
    }

    .cs-result-bottomline {
        gap: 9px;
        margin-top: 6px;
    }

    .cs-result-meta-item {
        gap: 5px;
        font-size: 10.5px;
    }

    .cs-result-meta-item + .cs-result-meta-item {
        padding-left: 11px;
    }

    .cs-result-meta-item + .cs-result-meta-item::before {
        height: 13px;
    }

    .cs-result-meta-icon,
    .cs-result-meta-icon svg {
        width: 12px !important;
        height: 12px !important;
        max-width: 12px !important;
        max-height: 12px !important;
        flex-basis: 12px;
    }
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1024px) {

    .cs-fixtures {
        gap: 13px;
    }

    .cs-fixtures-panel[data-cs-fixtures-panel="upcoming"] .cs-fixtures-scroll,
.cs-fixtures-panel[data-cs-fixtures-panel="results"] .cs-fixtures-scroll {
    max-height: 512px;
}


    /* Upcoming */

    .cs-upcoming-card {
        grid-template-columns: 74px 1fr;
        min-height: 92px;
    }

    .cs-upcoming-card .cs-fixture-day {
        font-size: 12px;
    }

    .cs-upcoming-card .cs-fixture-number {
        font-size: 24px;
    }

    .cs-upcoming-card .cs-fixture-month {
        font-size: 11px;
    }

    .cs-fixture-body {
        grid-template-columns: minmax(0, 1fr) minmax(135px, 0.95fr);

        gap: 10px;
        padding: 11px 14px;
    }

    .cs-fixture-team,
    .cs-fixture-opponent {
        font-size: 13px;
    }

    .cs-fixture-vs {
        font-size: 12px;
    }

    .cs-fixture-info-row {
        font-size: 13px;
    }


    /* Results */

    .cs-result-card {
    grid-template-columns: 78px 1fr;
    min-height: 92px;
}

    .cs-result-body {
        padding: 8px 16px;
    }

    .cs-result-topline {
        gap: 10px;
    }

    .cs-result-team {
        font-size: 13px;
    }

    .cs-result-score {
        font-size: 17px;
    }

    .cs-result-dash {
        font-size: 15px;
    }

    .cs-result-meta-item {
        font-size: 11.5px;
    }
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    .cs-fixtures-tabs {
        gap: 22px;
        margin-bottom: 13px;
    }

    .cs-fixtures-tab {
        padding-bottom: 9px;
        font-size: 12px;
    }

    .cs-fixtures {
        gap: 12px;
    }

    .cs-fixtures-scroll {
        padding-right: 4px;
    }

    .cs-fixtures-panel[data-cs-fixtures-panel="upcoming"] .cs-fixtures-scroll,
.cs-fixtures-panel[data-cs-fixtures-panel="results"] .cs-fixtures-scroll {
    max-height: 488px;
}


    /* Upcoming */

    .cs-upcoming-card {
        grid-template-columns: 68px 1fr;
        min-height: 88px;
        border-radius: 14px;
    }

    .cs-upcoming-card .cs-fixture-day {
        font-size: 11px;
    }

    .cs-upcoming-card .cs-fixture-number {
        font-size: 22px;
    }

    .cs-upcoming-card .cs-fixture-month {
        font-size: 10px;
    }

    .cs-fixture-body {
        grid-template-columns: minmax(0, 1fr) 100px;

        gap: 8px;
        padding: 10px;
    }

    .cs-fixture-team,
    .cs-fixture-opponent {
        font-size: 12px;
    }

    .cs-fixture-vs {
        margin: 3px 0;
        font-size: 11px;
    }

    .cs-fixture-info {
        gap: 5px;
    }

    .cs-fixture-info-row {
        gap: 5px;
        font-size: 11.5px;
    }

    .cs-fixture-icon,
    .cs-fixture-icon svg {
        width: 14px !important;
        height: 14px !important;

        max-width: 14px !important;
        max-height: 14px !important;

        flex-basis: 14px;
    }


    /* Results:
       Team 1 ........ score
       Team 2 ........ score
       metadata underneath
    */

    .cs-result-card {
        grid-template-columns: 68px 1fr;
        min-height: 88px;
        border-radius: 14px;
    }

    .cs-result-card .cs-fixture-day {
        font-size: 11px;
    }

    .cs-result-card .cs-fixture-number {
        font-size: 22px;
    }

    .cs-result-card .cs-fixture-month {
        font-size: 10px;
    }

    .cs-result-body {
        padding: 8px 11px;
    }

    .cs-result-topline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;

        column-gap: 10px;
        row-gap: 4px;

        align-items: center;
    }

    .cs-result-team-home {
        grid-column: 1;
        grid-row: 1;

        text-align: left;
    }

    .cs-result-team-away {
        grid-column: 1;
        grid-row: 2;

        text-align: left;
    }

    .cs-result-team {
        font-size: 13px;
        line-height: 1.1;
        white-space: normal;
    }

    .cs-result-scoreline {
        grid-column: 2;
        grid-row: 1 / span 2;

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;

        gap: 4px;

        min-width: 18px;
    }

    .cs-result-score {
        font-size: 16px;
        font-weight: 700;
    }

    .cs-result-dash {
        display: none;
    }

    .cs-result-bottomline {
        justify-content: flex-start;

        gap: 9px;

        margin-top: 7px;
    }

    .cs-result-meta-item {
        font-size: 11.5px;
        white-space: normal;
    }

    .cs-result-meta-item + .cs-result-meta-item {
        padding-left: 11px;
    }

    .cs-result-meta-item + .cs-result-meta-item::before {
        height: 15px;
    }

    .cs-result-meta-icon,
    .cs-result-meta-icon svg {
        width: 14px !important;
        height: 14px !important;

        max-width: 14px !important;
        max-height: 14px !important;

        flex-basis: 14px;
    }
}


/* ========================================
   VERY NARROW PHONES
======================================== */

@media (max-width: 520px) {

    .cs-result-team {
        font-size: 12.5px;
    }

    .cs-result-score {
        font-size: 16px;
    }

    .cs-result-meta-item {
        font-size: 11px;
    }
}