/**
 * Football Widgets — Typy Widget
 * Prefix: .btw-
 * Styl: ciemny, dopasowany do club-header (#1a1d24)
 */

.btw-widget {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-bottom: 24px;
}

.btw-widget * {
    box-sizing: border-box;
}

/* =========================================================================
   KARUZELA OUTER
   ========================================================================= */

.btw-carousel-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

/* =========================================================================
   SCROLL CONTAINER
   ========================================================================= */

.btw-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
    padding: 4px 2px 8px;
}

.btw-carousel::-webkit-scrollbar { display: none; }

/* Kiedy mało kart (≤ 3) — rozciągaj na całą szerokość, bez scroll */
.btw-carousel[data-count="1"],
.btw-carousel[data-count="2"],
.btw-carousel[data-count="3"] {
    overflow-x: visible;
    flex-wrap: nowrap;
}

/* =========================================================================
   STRZAŁKI
   ========================================================================= */

.btw-arrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #2a2f3a;
    background: #1a1d24;
    color: #5a6478;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    padding: 0;
}

.btw-arrow:hover { background: #22272f; color: #d0d8e8; border-color: #3a4252; }
.btw-arrow:disabled { opacity: .25; cursor: default; pointer-events: none; }
.btw-arrow-left  { margin-right: 8px; }
.btw-arrow-right { margin-left:  8px; }

/* =========================================================================
   KARTA
   ========================================================================= */

.btw-card {
    /* Domyślnie: stała szerokość dla wielu kart */
    flex: 0 0 auto;
    width: 178px;
    scroll-snap-align: start;

    background: #1c1f28;
    border: 1px solid #252930;
    border-radius: 14px;
    padding: 16px 12px 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;

    text-decoration: none;
    color: inherit;
    transition: border-color .18s, transform .14s, box-shadow .18s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/* Górna linia akcentu — pojawia się na hover */
.btw-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: transparent;
    border-radius: 14px 14px 0 0;
    transition: background .18s;
}

.btw-card:hover {
    border-color: #3a4155;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    text-decoration: none;
    color: inherit;
}

.btw-card:hover::before { background: #ff8a33; }

/* Zaplanowany post — brak hover efektu */
.btw-card--soon {
    opacity: .75;
    cursor: default;
}
.btw-card--soon:hover {
    transform: none;
    box-shadow: none;
    border-color: #252930;
}
.btw-card--soon:hover::before { background: transparent; }

/* Zakończony mecz */
.btw-card--ft { opacity: .6; }

/* Kiedy ≤ 3 karty — flex: 1 (równy podział szerokości) */
.btw-carousel[data-count="1"] .btw-card,
.btw-carousel[data-count="2"] .btw-card,
.btw-carousel[data-count="3"] .btw-card {
    flex: 1 1 0;
    width: auto;
}

/* =========================================================================
   MATCHUP: loga + separator
   ========================================================================= */

.btw-matchup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 4px;
    padding: 0 0 12px;
}

.btw-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

/* Logo */
.btw-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

/* Fallback kółko z inicjałami */
.btw-logo-fallback {
    width: 48px;
    height: 48px;
    background: #20242e;
    border-radius: 50%;
    border: 1.5px solid #303848;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #606878;
    letter-spacing: .05em;
    flex-shrink: 0;
}

/* 3-literowy kod pod logo */
.btw-code {
    font-size: 11px;
    font-weight: 700;
    color: #b8c0d0;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
}

/* Separator środkowy */
.btw-sep {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-bottom: 14px; /* wyrówna do środka logo */
}

.btw-sep-vs {
    font-size: 11px;
    font-weight: 700;
    color: #303848;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Wynik FT */
.btw-sep-score {
    font-size: 17px;
    font-weight: 800;
    color: #8a9ab0;
    letter-spacing: .04em;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 2px;
}

.btw-sep-colon {
    font-size: 14px;
    font-weight: 700;
    color: #4a5568;
}

/* =========================================================================
   TIMING (data meczu / "Zakończony")
   ========================================================================= */

.btw-timing {
    font-size: 11px;
    font-weight: 500;
    color: #606878;
    text-align: center;
    line-height: 1.3;
    width: 100%;
    padding: 8px 4px 10px;
    border-top: 1px solid #20242e;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btw-ft-label {
    font-size: 10px;
    font-weight: 600;
    color: #4a5568;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* =========================================================================
   PRZYCISK ZOBACZ TYPY
   ========================================================================= */

.btw-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ff8a33;
    background: rgba(255, 138, 51, .09);
    border: 1px solid rgba(255, 138, 51, .22);
    border-radius: 8px;
    padding: 8px 10px;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
}

.btw-card:hover .btw-cta {
    background: rgba(255, 138, 51, .18);
    border-color: rgba(255, 138, 51, .48);
    color: #ffaa55;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 480px) {
    .btw-card {
        width: 155px;
        padding: 14px 10px 10px;
    }

    .btw-logo,
    .btw-logo-fallback {
        width: 42px;
        height: 42px;
    }

    .btw-sep-score { font-size: 15px; }
}