/* ================================================================
   Football League — leagues.css
   sifufinds-style 3-column layout: sidebar | matches | sidebar
================================================================ */

/* ── Page header ─────────────────────────────────────────────── */
.lg-page-hdr {
  background: var(--navy-900, #060f21);
  border-bottom: 3px solid var(--gold, #c9a84c);
  padding: 18px 0 16px;
}
.lg-page-hdr .container {
  display: flex; flex-direction: column; gap: 4px;
}
.lg-live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(220,38,38,.15);
  border: 1px solid rgba(220,38,38,.3);
  border-radius: 20px; padding: 2px 10px;
  font-size: .7rem; font-weight: 700; color: #f87171; letter-spacing: .05em;
  width: fit-content; margin-bottom: 6px;
}
.lg-page-hdr h1 {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 800; color: #fff; margin: 0;
}
.lg-page-hdr p {
  font-size: .82rem; color: rgba(255,255,255,.5); margin: 0;
}

/* ── 3-column layout ─────────────────────────────────────────── */
.lg-layout {
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  gap: 12px;
  padding: 14px 12px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Sidebars ────────────────────────────────────────────────── */
.lg-side {
  position: sticky;
  top: 80px;
  display: flex; flex-direction: column; gap: 8px;
}
.lg-side-lbl {
  font-size: .67rem; font-weight: 800; color: #aaa;
  text-transform: uppercase; letter-spacing: .08em;
  text-align: center; padding-bottom: 5px;
  border-bottom: 1px solid #e8e8e8; margin: 0 0 2px;
}

.lg-brand-card {
  display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; text-decoration: none;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 2px 7px rgba(0,0,0,.08);
  transition: transform .15s, box-shadow .15s;
}
.lg-brand-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }

.lg-brand-head {
  padding: 10px; display: flex; align-items: center; gap: 8px;
}
.lg-brand-logo {
  width: 30px; height: 30px; border-radius: 6px;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-size: .67rem; font-weight: 900; flex-shrink: 0;
  color: inherit;
}
.lg-brand-name { font-size: .78rem; font-weight: 800; line-height: 1.1; }
.lg-brand-sub  { font-size: .62rem; opacity: .6; margin-top: 1px; }
.lg-brand-offer {
  padding: 5px 10px; font-size: .7rem; font-weight: 700; line-height: 1.35;
}
.lg-brand-cta {
  padding: 6px 10px; font-size: .7rem; font-weight: 800;
  text-align: center; color: #fff; letter-spacing: .03em;
  background: rgba(0,0,0,.22); border-top: 1px solid rgba(255,255,255,.12);
}

/* ── Main column ─────────────────────────────────────────────── */
.lg-main { min-width: 0; }

/* Status bar */
.lg-status-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: #fff; border: 1px solid #e8e8e8;
  border-radius: 8px; padding: 8px 13px; margin-bottom: 10px;
  font-size: .75rem; color: #666;
}
#lgUpd { font-size: .73rem; color: #888; }
#lgRefresh { margin-left: auto; font-size: .72rem; color: #aaa; }
#lgApiSt   { font-size: .72rem; color: #aaa; }

.live-dot {
  width: 7px; height: 7px; background: #22c55e;
  border-radius: 50%; display: inline-block;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }

/* Date tabs */
.lg-date-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 10px; overflow-x: auto; scrollbar-width: none;
}
.lg-date-tabs::-webkit-scrollbar { display: none; }
.lg-date-tab {
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  padding: 5px 12px; font-size: .73rem; font-weight: 500; color: #555;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-family: inherit; transition: border-color .12s, color .12s;
}
.lg-date-tab:hover { border-color: var(--gold, #c9a84c); color: var(--gold, #c9a84c); }
.lg-date-tab.on {
  background: var(--navy-900, #060f21); color: #fff;
  border-color: var(--navy-900, #060f21); font-weight: 700;
}

/* ── Competition section ─────────────────────────────────────── */
.lg-section {
  background: #fff; border: 1px solid #e0e0e0;
  border-radius: 10px; overflow: hidden; margin-bottom: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,.05);
}
.lg-shdr {
  background: var(--navy-900, #060f21); color: #fff;
  padding: 9px 13px; display: flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; transition: background .12s;
}
.lg-shdr:hover { background: #0d1f3d; }

.lg-emblem, .lg-flag {
  width: 18px; height: 18px; object-fit: contain;
  flex-shrink: 0; border-radius: 2px;
}
.lg-cn   { font-size: .82rem; font-weight: 800; flex: 1; min-width: 0; }
.lg-mc   {
  background: rgba(255,255,255,.18); border-radius: 10px;
  padding: 1px 7px; font-size: .65rem; font-weight: 700; flex-shrink: 0;
}
.lg-chev { font-size: .65rem; opacity: .55; transition: transform .2s; flex-shrink: 0; }
.lg-section.closed .lg-chev  { transform: rotate(-90deg); }
.lg-section.closed .lg-sbody { display: none; }

/* ── Match row ───────────────────────────────────────────────── */
.lg-match {
  display: grid;
  grid-template-columns: 62px 1fr 56px 1fr 64px;
  gap: 4px; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  transition: background .1s;
}
.lg-match:last-child { border-bottom: none; }
.lg-match:hover      { background: #f6f9ff; }
.lg-match.is-live    { background: rgba(220,38,38,.03); }

.lg-tc { text-align: center; }
.lg-t  { display: block; font-size: .76rem; font-weight: 700; color: #333; line-height: 1.2; }
.lg-md { display: block; font-size: .62rem; color: #bbb; margin-top: 1px; }

.lg-team-home { display: flex; align-items: center; justify-content: flex-end;  gap: 5px; min-width: 0; }
.lg-team-away { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; }
.lg-tn {
  font-size: .78rem; font-weight: 600; color: #1a1a2e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-crest {
  width: 18px; height: 18px; object-fit: contain; flex-shrink: 0;
}

.lg-sc-col { text-align: center; }
.lg-score {
  font-size: .88rem; font-weight: 800; color: #222;
  display: flex; align-items: center; justify-content: center; gap: 2px;
}
.lg-score.live { color: #dc2626; }
.lg-score.sch  { font-size: .76rem; font-weight: 600; color: #555; }
.sep { font-size: .7rem; color: #bbb; }

/* Status badges */
.lg-sb {
  display: inline-block; border-radius: 4px;
  padding: 2px 5px; font-size: .65rem; font-weight: 800; letter-spacing: .04em;
}
.lg-sb.live { background: #dc2626; color: #fff; animation: livePulse 1.4s infinite; }
.lg-sb.ht   { background: #f59e0b; color: #fff; }
.lg-sb.ft   { background: #6b7280; color: #fff; }
.lg-sb.ppd  { background: #e5e7eb; color: #555; }
.lg-sb.can  { background: #fca5a5; color: #991b1b; }

/* Bet CTA */
.lg-cta { text-align: center; }
.lg-bet {
  display: inline-block; background: var(--gold, #c9a84c);
  color: #060f21; font-size: .66rem; font-weight: 800;
  padding: 4px 9px; border-radius: 5px; text-decoration: none;
  letter-spacing: .03em; white-space: nowrap;
  transition: opacity .12s;
}
.lg-bet:hover { opacity: .82; }

/* ── Live Now panel ──────────────────────────────────────────── */
.lgln-panel {
  background: #0d0606;
  border: 1px solid rgba(220,38,38,.25);
  border-radius: 10px; overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 3px 16px rgba(220,38,38,.14);
}
.lgln-hdr {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(220,38,38,.2) 0%, rgba(220,38,38,.04) 100%);
  border-bottom: 1px solid rgba(220,38,38,.18);
}
.lgln-title {
  font-size: .72rem; font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: .07em;
}
.lgln-cnt { font-size: .65rem; color: rgba(255,255,255,.4); margin-left: auto; }
.lgln-row {
  display: grid;
  grid-template-columns: 46px 1fr 58px 1fr auto 52px;
  gap: 6px; align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .1s;
}
.lgln-row:last-child { border-bottom: none; }
.lgln-row:hover      { background: rgba(255,255,255,.03); }
.lgln-min {
  text-align: center;
  font-size: .67rem; font-weight: 900; color: #f87171;
  background: rgba(220,38,38,.15);
  border: 1px solid rgba(220,38,38,.3);
  border-radius: 5px; padding: 3px 4px;
  animation: livePulse 1.4s ease-in-out infinite;
  white-space: nowrap;
}
.lgln-th { display: flex; align-items: center; gap: 5px; justify-content: flex-end;  min-width: 0; }
.lgln-ta { display: flex; align-items: center; gap: 5px; justify-content: flex-start; min-width: 0; }
.lgln-tn {
  font-size: .76rem; font-weight: 600; color: #e5e5e5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lgln-cr { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.lgln-sc {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  font-size: 1rem; font-weight: 900; color: #f87171;
}
.lgln-d { font-size: .6rem; color: rgba(255,255,255,.25); }
.lgln-lg {
  font-size: .62rem; color: rgba(255,255,255,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.lgln-bet {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold, #c9a84c); color: #060f21;
  font-size: .65rem; font-weight: 800; padding: 4px 9px;
  border-radius: 5px; text-decoration: none; white-space: nowrap;
  transition: opacity .12s;
}
.lgln-bet:hover { opacity: .82; }
@media (max-width: 600px) {
  .lgln-row { grid-template-columns: 40px 1fr 52px 1fr; }
  .lgln-lg, .lgln-bet { display: none; }
}

/* ── Loading / empty ─────────────────────────────────────────── */
.lg-loading, .lg-empty {
  padding: 36px 20px; text-align: center; color: #888; font-size: .85rem;
}
.lg-spin {
  width: 26px; height: 26px; margin: 0 auto 14px;
  border: 3px solid #e5e5e5; border-top-color: var(--navy-900, #060f21);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lg-retry {
  margin-top: 12px; padding: 7px 16px;
  background: var(--navy-900, #060f21); color: #fff;
  border: none; border-radius: 7px; font-size: .8rem;
  font-weight: 700; cursor: pointer; font-family: inherit;
}
.lg-retry:hover { opacity: .85; }

/* ── Bottom bookmaker banner ─────────────────────────────────── */
.lg-bottom-brands {
  background: #f4f7fb;
  border-top: 3px solid var(--gold, #c9a84c);
  border-bottom: 3px solid var(--gold, #c9a84c);
  padding: 24px 0 22px;
}
.lg-bottom-brands-in {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 18px;
}
.lg-bottom-lbl {
  font-size: .68rem; font-weight: 800; color: #555;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
.lg-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.lg-bottom-card {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 10px; text-decoration: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.lg-bottom-card:hover {
  border-color: var(--gold, #c9a84c);
  box-shadow: 0 4px 14px rgba(201,168,76,.18);
  transform: translateY(-1px);
}
.lg-bottom-logo {
  width: 42px; height: 42px; border-radius: 8px;
  background: #f8f9fa; border: 1px solid #eee;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; padding: 3px;
}
.lg-bottom-logo img {
  width: 100%; height: 100%; object-fit: contain;
}
.lg-bottom-info  { flex: 1; min-width: 0; }
.lg-bottom-name  { font-size: .78rem; font-weight: 800; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-bottom-offer { font-size: .63rem; color: #666; margin-top: 2px; line-height: 1.35; }
.lg-bottom-arrow { font-size: 1.1rem; font-weight: 700; color: var(--gold, #c9a84c); margin-left: auto; flex-shrink: 0; }
.lg-bottom-resp  { font-size: .63rem; color: #999; margin: 0; }
.lg-bottom-resp a { color: #777; text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lg-layout { grid-template-columns: 190px 1fr; }
  #lgSideRight { display: none; }
}
@media (max-width: 800px) {
  .lg-layout { grid-template-columns: 1fr; padding: 10px; }
  #lgSideLeft, #lgSideRight { display: none; }
  .lg-match { grid-template-columns: 52px 1fr 50px 1fr 52px; gap: 3px; padding: 7px 10px; }
}
@media (max-width: 480px) {
  .lg-match        { grid-template-columns: 42px 1fr 44px 1fr; }
  .lg-cta          { display: none; }
  .lg-tn           { font-size: .72rem; }
  .lg-bottom-grid  { grid-template-columns: 1fr 1fr; }
}