/* cricket-live.css — TMN Sports base styles
 *
 * Contains: global reset, section header, livescore ticker,
 *           match tabs, match cards, and action buttons.
 *
 * Content block styles (top stories, videos, coverage, etc.) live in
 * cricket-live-blocks.css, which is enqueued as a dependency of this file.
 */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
.cl-ticker,
.cl-match-tabs,
.cl-match-coverage,
.cl-top-stories,
.cl-videos,
.cl-trending-players,
.cl-team-fixtures,
.cl-writers,
.cl-spotlight {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Section header ────────────────────────────────────────────────────────── */
.cl-section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid #d9d9d9;
}
.cl-section-title{
    font-size:18px;
    font-weight:700;
    color:#222;
    text-transform:none;
    letter-spacing:0;
}
.cl-see-all {
    font-size: 12px;
    color: #2563eb;
    text-decoration: none;
}
.cl-see-all:hover { text-decoration: underline; }
.cl-no-data { color: #888; font-size: 13px; }

/* ── Livescore ticker ──────────────────────────────────────────────────────── */
.cl-ticker {
    background: #1a2e4a;
    overflow: hidden;
    white-space: nowrap;
}
.cl-ticker__track {
    display: inline-flex;
    animation: cl-ticker-scroll 30s linear infinite;
}
.cl-ticker:hover .cl-ticker__track { animation-play-state: paused; }

@keyframes cl-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.cl-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.cl-ticker__item:hover { background: rgba(255,255,255,0.08); }
.cl-ticker__status {
    color: #f59e0b;
    font-weight: 600;
}
.cl-ticker__empty {
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    padding: 6px 16px;
}

/* ── Match tabs ────────────────────────────────────────────────────────────── */
.cl-match-tabs { margin-bottom: 24px; }
.cl-match-tabs__nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
    overflow-x: auto;
}
.cl-tab {
    background: none;
    border: none;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.cl-tab.active {
    color: #1a2e4a;
    border-bottom-color: #2563eb;
}
.cl-tab-panel { display: none; }
.cl-tab-panel.active { display: block; }

/* Match cards grid */
.cl-match-cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.cl-card {
    flex: 0 0 220px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    font-size: 12px;
}
.cl-card--live { border-color: #ef4444; }
.cl-card--updated { transition: background 0.3s; background: #fffbeb; }
.cl-badge--live {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.cl-card__team {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.cl-card__flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}
.cl-card__name { font-weight: 600; color: #1a2e4a; flex: 1; }
.cl-card__score { font-weight: 700; color: #111; }
.cl-card__vs, .cl-card__sep, .cl-card__time {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    margin: 4px 0;
}
.cl-card__note {
    font-size: 11px;
    color: #2563eb;
    margin-top: 6px;
    font-weight: 500;
}
.cl-card__actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.cl-btn {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    background: #1a2e4a;
    color: #fff;
}
.cl-btn--outline {
    background: transparent;
    color: #1a2e4a;
    border: 1px solid #1a2e4a;
}
.cl-btn--sm { font-size: 10px; padding: 3px 8px; }

/* Block-specific styles moved to cricket-live-blocks.css */