/* ==========================================================================
   FIFA 2026 Widget — widget.css
   ========================================================================== */

/* -- Bengali font ---------------------------------------------------------- */
@import url('https://fonts.maateen.me/solaiman-lipi/font.css');

/* -- Variables ------------------------------------------------------------ */
:root {
    --fw-primary:      #1a6b3c;
    --fw-primary-dark: #145530;
    --fw-accent:       #f5a623;
    --fw-live:         #e53e3e;
    --fw-live-bg:      #fff5f5;
    --fw-final:        #718096;
    --fw-bg:           #ffffff;
    --fw-bg-alt:       #f7f9fc;
    --fw-border:       #e2e8f0;
    --fw-text:         #2d3748;
    --fw-text-muted:   #718096;
    --fw-radius:       8px;
    --fw-shadow:       0 2px 12px rgba(0,0,0,.08);
    --fw-font:         'SolaimanLipi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* -- Widget container ----------------------------------------------------- */
.fw-widget {
    font-family: var(--fw-font);
    font-size:   14px;
    color:       var(--fw-text);
    line-height: 1.4;
}

.fw-inner {
    background:    var(--fw-bg);
    border:        1px solid var(--fw-border);
    border-radius: var(--fw-radius);
    box-shadow:    var(--fw-shadow);
    overflow:      hidden;
}

/* -- Ad slots ------------------------------------------------------------- */
.fw-ad {
    text-align: center;
    padding:    8px;
    background: var(--fw-bg-alt);
}

.fw-ad-top    { border-bottom: 1px solid var(--fw-border); }
.fw-ad-bottom { border-top:    1px solid var(--fw-border); }

.fw-ad-inline {
    margin:        8px 12px;
    border-radius: 4px;
    overflow:      hidden;
}

/* -- Tab navigation ------------------------------------------------------- */
.fw-tabs-nav {
    display:         flex;
    background:      var(--fw-primary);
    padding:         0;
    gap:             0;
    overflow-x:      auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fw-tabs-nav::-webkit-scrollbar { display: none; }

.fw-tab-btn {
    flex:            1 1 auto;
    min-width:       80px;
    padding:         12px 16px;
    background:      transparent;
    border:          none;
    border-bottom:   3px solid transparent;
    color:           rgba(255,255,255,.75);
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  .03em;
    text-transform:  uppercase;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      color .2s, border-color .2s;
    outline:         none;
}

.fw-tab-btn:hover {
    color:        #fff;
    border-color: rgba(255,255,255,.4);
}

.fw-tab-btn.fw-active {
    color:        #fff;
    border-bottom: 3px solid var(--fw-accent);
}

/* -- Panels --------------------------------------------------------------- */
.fw-panels {
    position:                   relative;
    overflow-y:                 auto;
    overflow-x:                 hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior:            smooth;
}

.fw-panel {
    display: none;
}

.fw-panel.fw-active {
    display: block;
    width:   100%;
}

/* -- Loading / error / empty --------------------------------------------- */
.fw-loading,
.fw-error,
.fw-empty {
    padding:    32px 16px;
    text-align: center;
    color:      var(--fw-text-muted);
}

.fw-error { color: #c53030; }

.fw-spinner {
    display:          inline-block;
    width:            20px;
    height:           20px;
    border:           3px solid var(--fw-border);
    border-top-color: var(--fw-primary);
    border-radius:    50%;
    animation:        fw-spin .8s linear infinite;
    vertical-align:   middle;
    margin-right:     8px;
}

@keyframes fw-spin {
    to { transform: rotate(360deg); }
}

.fw-loading-text { vertical-align: middle; }

/* ==========================================================================
   Fixture tab
   ========================================================================== */

.fw-fixtures {
    padding: 0 0 8px;
}

.fw-date-group {
    margin-bottom: 4px;
}

.fw-date-label {
    padding:        8px 14px 6px;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--fw-text-muted);
    background:     var(--fw-bg-alt);
    border-bottom:  1px solid var(--fw-border);
    border-top:     1px solid var(--fw-border);
}

/* -- Match card ----------------------------------------------------------- */
.fw-match-card {
    padding:       10px 14px;
    border-bottom: 1px solid var(--fw-border);
    transition:    background .15s;
}

.fw-match-card:last-child { border-bottom: none; }
.fw-match-card:hover      { background: var(--fw-bg-alt); }

.fw-match-card.state-live {
    background:   var(--fw-live-bg);
    border-left:  3px solid var(--fw-live);
    padding-left: 11px;
}

.fw-match-league {
    font-size:      10px;
    color:          var(--fw-text-muted);
    letter-spacing: .04em;
    margin-bottom:  4px;
    text-transform: uppercase;
}

.fw-match-body {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Teams — 2-line vertical layout */
.fw-team {
    flex:           1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            5px;
    min-width:      0;
    padding:        2px 0;
}

.fw-team-logo {
    width:       36px;
    height:      36px;
    object-fit:  contain;
    flex-shrink: 0;
    display:     block;
}

.fw-logo-placeholder {
    display:       block;
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    var(--fw-border);
    flex-shrink:   0;
}

.fw-tname {
    font-weight: 600;
    font-size:   12px;
    line-height: 1.3;
    max-width:   80px;
    word-break:  break-word;
}

/* Centre */
.fw-match-centre {
    flex-shrink: 0;
    text-align:  center;
    min-width:   64px;
}

.fw-score {
    font-size:   18px;
    font-weight: 700;
    line-height: 1;
}

.fw-score-sep {
    display: inline-block;
    margin:  0 3px;
    color:   var(--fw-text-muted);
}

.fw-kick-time {
    font-size:   15px;
    font-weight: 700;
    color:       var(--fw-primary);
}

/* Badges */
.fw-badge {
    display:        inline-block;
    margin-top:     3px;
    padding:        2px 6px;
    border-radius:  3px;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fw-badge-state-live  { background: var(--fw-live); color: #fff; }
.fw-badge-state-final { background: #718096;         color: #fff; }
.fw-badge-state-pre   { display: none; }

/* Venue */
.fw-venue {
    margin-top: 4px;
    font-size:  11px;
    color:      var(--fw-text-muted);
    text-align: center;
}

/* ==========================================================================
   Standings tab — group sub-tabs
   ========================================================================== */

.fw-group-nav-wrap {
    display:       flex;
    align-items:   stretch;
    background:    var(--fw-bg-alt);
    border-bottom: 2px solid var(--fw-border);
}

.fw-group-nav-btn {
    flex-shrink:  0;
    width:        26px;
    background:   var(--fw-bg-alt);
    border:       none;
    cursor:       pointer;
    font-size:    20px;
    line-height:  1;
    color:        var(--fw-text-muted);
    padding:      0 0 4px;
    transition:   color .15s, background .15s;
    outline:      none;
}

.fw-group-nav-btn:hover {
    color:      var(--fw-primary);
    background: var(--fw-border);
}

.fw-group-tabs-nav {
    display:         flex;
    flex:            1 1 0;
    overflow-x:      auto;
    gap:             2px;
    padding:         8px 4px 0;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.fw-group-tabs-nav::-webkit-scrollbar { display: none; }

.fw-group-tab-btn {
    padding:       6px 14px;
    border:        1px solid var(--fw-border);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background:    var(--fw-bg-alt);
    color:         var(--fw-text-muted);
    font-size:     12px;
    font-weight:   700;
    cursor:        pointer;
    white-space:   nowrap;
    outline:       none;
    transition:    background .15s, color .15s;
    flex-shrink:   0;
}

.fw-group-tab-btn:hover:not(.fw-active) {
    background: var(--fw-border);
    color:      var(--fw-text);
}

.fw-group-tab-btn.fw-active {
    background:     var(--fw-bg);
    color:          var(--fw-primary);
    border-color:   var(--fw-border);
    position:       relative;
    margin-bottom:  -2px;
    padding-bottom: 8px;
}

.fw-group-tab-panels { background: var(--fw-bg); }

.fw-group-tab-panel { display: none; }

.fw-group-tab-panel.fw-active { display: block; }

/* ==========================================================================
   Standings table
   ========================================================================== */

.fw-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fw-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
}

.fw-table thead tr {
    background:    var(--fw-bg-alt);
    border-bottom: 2px solid var(--fw-border);
}

.fw-table th {
    padding:        7px 8px;
    font-weight:    700;
    text-align:     center;
    color:          var(--fw-text-muted);
    white-space:    nowrap;
    font-size:      14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fw-table th.col-team { text-align: left; }

.fw-table td {
    padding:       7px 8px;
    text-align:    center;
    border-bottom: 1px solid var(--fw-border);
}

.fw-table tr:last-child td { border-bottom: none; }

.fw-table tbody tr:hover { background: var(--fw-bg-alt); }

.fw-table td.col-team {
    text-align:  left;
    white-space: nowrap;
}

.fw-table td.col-rank {
    width:        32px;
    font-weight:  700;
    position:     relative;
    padding-left: 10px;
}

.fw-rank-bar {
    position: absolute;
    left:     0;
    top:      0;
    bottom:   0;
    width:    3px;
    display:  block;
}

.fw-logo-sm {
    width:          20px;
    height:         20px;
    object-fit:     contain;
    margin-right:   6px;
    vertical-align: middle;
    flex-shrink:    0;
}

.fw-table .fw-team-name {
    vertical-align: middle;
    font-weight:    600;
}

.fw-table td.col-pts {
    font-weight: 700;
    color:       var(--fw-primary);
}

.fw-table .gd-pos { color: #276749; }
.fw-table .gd-neg { color: #c53030; }

/* Legend */
.fw-legend {
    padding:   6px 14px 10px;
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}

.fw-legend-item {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   11px;
    color:       var(--fw-text-muted);
}

.fw-legend-dot {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 2px;
    flex-shrink:   0;
}

/* ==========================================================================
   Live tab
   ========================================================================== */

.fw-live-wrap {
    padding: 0 0 8px;
}

.fw-live-header {
    padding:        12px 14px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: .04em;
    color:          var(--fw-live);
    background:     var(--fw-live-bg);
    border-bottom:  1px solid #fed7d7;
    display:        flex;
    align-items:    center;
    gap:            6px;
    text-transform: uppercase;
}

.fw-live-pulse {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--fw-live);
    animation:     fw-pulse 1.4s ease-in-out infinite;
    flex-shrink:   0;
}

@keyframes fw-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(229,62,62,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(229,62,62,0);  }
    100% { box-shadow: 0 0 0 0   rgba(229,62,62,0);  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 400px) {
    .fw-tname {
        font-size: 10px;
        max-width: 64px;
    }
    .fw-team-logo,
    .fw-logo-placeholder {
        width:  28px;
        height: 28px;
    }
    .fw-score      { font-size: 15px; }
    .fw-match-centre { min-width: 52px; }
    .fw-tab-btn    { font-size: 11px; padding: 10px; }
}