/* ============================================================
   SP Scores Carousel  —  carousel.css  v1.1.0
   Color palette: Navy #2D3E8F | Amber #F5A623 | Orange-Red #E8540A
                  Light Gray #E8E8E8 | Yellow-Green #C8D400
   ============================================================ */

:root {
    --spsc-navy:      #2D3E8F;
    --spsc-amber:     #F5A623;
    --spsc-orange:    #E8540A;
    --spsc-gray:      #E8E8E8;
    --spsc-lime:      #C8D400;
    --spsc-white:     #FFFFFF;
    --spsc-dark:      #1a1a2e;
    --spsc-text:      #222222;
    --spsc-text-muted:#777777;
    --spsc-divider:   #dde0e8;
    --spsc-bar-bg:    #FFFFFF;
    --spsc-bar-shadow:0 2px 12px rgba(45,62,143,0.10);
    --spsc-radius:    6px;
    --spsc-card-w:    220px;
    --spsc-bar-h:     72px;
    --spsc-font:      'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* ── Outer bar ── */
.spsc-bar {
    display: flex;
    align-items: center;
    background: var(--spsc-bar-bg);
    box-shadow: var(--spsc-bar-shadow);
    border-bottom: 3px solid var(--spsc-navy);
    font-family: var(--spsc-font);
    height: var(--spsc-bar-h);
    position: relative;
    z-index: 999999 !important; /* Extremely high z-index to stay above everything */
    width: 100%;
    /* Remove overflow:hidden to allow dropdown options to show */
    overflow: visible !important;
    box-sizing: border-box;
    user-select: none;
}

/* ── Groups dropdown ── */
.spsc-groups-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-right: 1px solid var(--spsc-divider);
    flex-shrink: 0;
    gap: 3px;
    height: 100%;
}

.spsc-groups-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--spsc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    line-height: 1;
}

/* Robust Select Styling - Specificity Boost */
div.spsc-bar select.spsc-matchday-select {
    display: inline-block !important;
    visibility: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--spsc-navy) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) center !important;
    background-size: 12px 8px !important;
    color: var(--spsc-white) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 4px !important;
    font-family: var(--spsc-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 2px 34px 2px 14px !important; /* Extra right padding for arrow */
    cursor: pointer !important;
    outline: none !important;
    min-width: 120px !important; /* Increased from 80px to prevent "D" issue */
    max-width: 180px !important;
    height: 38px !important;
    line-height: 34px !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

div.spsc-bar select.spsc-matchday-select:hover,
div.spsc-bar select.spsc-matchday-select:focus {
    background-color: #3b4eb3 !important;
    border-color: rgba(255,255,255,0.6) !important;
}

/* Kill extra arrows from any vendor/theme */
div.spsc-bar select.spsc-matchday-select::-ms-expand {
    display: none !important;
}

div.spsc-bar select.spsc-matchday-select option {
    background: var(--spsc-navy);
    color: var(--spsc-white);
    padding: 10px;
    font-size: 14px;
}

/* Ensure no pseudo-elements are adding arrows */
.spsc-groups-wrap::after, 
.spsc-groups-wrap::before,
.spsc-matchday-select::after,
.spsc-matchday-select::before {
    display: none !important;
    content: none !important;
}

/* ── Nav arrows ── */
.spsc-nav {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--spsc-navy);
    cursor: pointer;
    padding: 0 10px;
    height: 100%;
    transition: color 0.15s, background 0.15s;
    z-index: 2;
}
.spsc-nav:hover { color: var(--spsc-orange); background: rgba(45,62,143,.05); }
.spsc-nav:disabled { color: var(--spsc-gray); cursor: default; }

/* ── Track ── */
.spsc-track-wrap {
    flex: 1;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.spsc-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}

/* ── Cards ── */
.spsc-card {
    flex-shrink: 0;
    width: var(--spsc-card-w);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 8px;
    border-right: 1px solid var(--spsc-divider);
    box-sizing: border-box;
    height: 100%;
    transition: background 0.15s;
}
.spsc-card:hover { background: rgba(45,62,143,.03); }
.spsc-card.spsc-empty {
    color: var(--spsc-text-muted);
    font-size: 13px;
    justify-content: center;
    width: 300px;
}

/* ── Date block ── */
.spsc-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 32px;
}
.spsc-day {
    font-size: 10px;
    font-weight: 700;
    color: var(--spsc-orange);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.spsc-month {
    font-size: 10px;
    font-weight: 700;
    color: var(--spsc-orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.spsc-datenum {
    font-size: 22px;
    font-weight: 700;
    color: var(--spsc-navy);
    line-height: 1;
}

/* ── Status label ── */
.spsc-status {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 44px;
    text-align: center;
}
.spsc-final    { color: var(--spsc-text-muted); }
.spsc-scheduled { color: var(--spsc-navy); }

/* ── Matchup ── */
.spsc-matchup {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* ── Team row ── */
.spsc-team {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.spsc-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.spsc-logo-placeholder {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--spsc-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--spsc-navy);
    flex-shrink: 0;
}

.spsc-team-abbr {
    font-size: 13px;
    font-weight: 600;
    color: var(--spsc-text);
    letter-spacing: 0.02em;
    flex: 1;
}
.spsc-winner .spsc-team-abbr { color: var(--spsc-dark); }

/* Winner arrow */
.spsc-arrow {
    font-size: 8px;
    color: var(--spsc-orange);
    margin-right: 2px;
}

/* Score */
.spsc-score {
    font-size: 15px;
    font-weight: 700;
    color: var(--spsc-text-muted);
    min-width: 26px;
    text-align: right;
}
.spsc-score-win {
    color: var(--spsc-dark);
    font-size: 16px;
}

/* Record */
.spsc-record {
    font-size: 11px;
    color: var(--spsc-text-muted);
    min-width: 30px;
    text-align: right;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    :root {
        --spsc-card-w: 180px;
        --spsc-bar-h: 64px;
    }
    .spsc-groups-wrap { padding: 0 8px; }
    .spsc-datenum { font-size: 18px; }
    .spsc-score { font-size: 14px; }
    .spsc-matchday-select { max-width: 90px; font-size: 11px; }
}

@media (max-width: 480px) {
    :root { --spsc-card-w: 160px; }
    .spsc-groups-label { display: none; }
    .spsc-matchday-select { max-width: 72px; padding: 4px 20px 4px 7px; }
}

.spsc-card{text-decoration:none;color:inherit;cursor:pointer}.spsc-logo-placeholder{font-size:16px;}