/* Orlando Pirates Match Centre - Fixed Responsive CSS
 * Generated: 2025-08-23 - Responsive Fixes Applied
 * Source: match-centre.css (Fixed Version)
 */

/* ===== RESET & BASE ===== */



#comp-pill img { height: 40px; }

#live-match-date {text-align: center;font-family:"Bebas Neue",sans-serif;font-size: 20px;}

/* ===== AGGRESSIVE TABLE FULL-WIDTH FIX ===== */

/* Force all table-related containers to use full viewport width */
@media (min-width: 432px) and (max-width: 760px) {
  
  /* Override ALL possible parent constraints */
  .mc-section[data-section="tables"],
  .mc-section[data-section="tables"] .wrap,
  .mc-section[data-section="tables"] .mc-card,
  .mc-section[data-section="tables"] > div,
  #mc-opfc .mc-section[data-section="tables"],
  #mc-opfc .mc-section[data-section="tables"] .wrap,
  #mc-opfc .mc-section[data-section="tables"] .mc-card {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
  
  /* Alternative approach - break out of container */
  #standings-table {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
  
  /* Force the actual table to full width */
  #mc-opfc .standings { 
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important; /* Force fixed layout for control */
    border-collapse: collapse;
    font-family: "Bebas Neue", sans-serif; 
    font-size: 15px;
  }
  
  /* Specific column width distribution */
  #mc-opfc .standings th:nth-child(1), 
  #mc-opfc .standings td:nth-child(1) { 
    width: 8% !important; /* Position # */
  }
  
  #mc-opfc .standings th:nth-child(2), 
  #mc-opfc .standings td:nth-child(2) { 
    width: 40% !important; /* Team name */
    text-align: left !important;
  }
  
  #mc-opfc .standings th:nth-child(3), 
  #mc-opfc .standings td:nth-child(3) { 
    width: 7% !important; /* P */
  }
  
  #mc-opfc .standings th:nth-child(4), 
  #mc-opfc .standings td:nth-child(4) { 
    width: 7% !important; /* W */
  }
  
  #mc-opfc .standings th:nth-child(5), 
  #mc-opfc .standings td:nth-child(5) { 
    width: 7% !important; /* D */
  }
  
  #mc-opfc .standings th:nth-child(6), 
  #mc-opfc .standings td:nth-child(6) { 
    width: 7% !important; /* L */
  }
  
  #mc-opfc .standings th:nth-child(7), 
  #mc-opfc .standings td:nth-child(7) { 
    width: 8% !important; /* GF */
  }
  
  #mc-opfc .standings th:nth-child(8), 
  #mc-opfc .standings td:nth-child(8) { 
    width: 8% !important; /* GA */
  }
  
  #mc-opfc .standings th:nth-child(9), 
  #mc-opfc .standings td:nth-child(9) { 
    width: 8% !important; /* GD */
  }
  
  #mc-opfc .standings th:nth-child(10), 
  #mc-opfc .standings td:nth-child(10) { 
    width: 8% !important; /* Pts */
    font-weight: bold;
  }
  
  /* Cell styling for this breakpoint */
  #mc-opfc .standings th, 
  #mc-opfc .standings td {
    padding: 8px 3px !important;
    border-bottom: 1px solid #1f1f24;
    text-align: center !important;
    vertical-align: middle;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Team cell specific styling */
  #mc-opfc .team-cell { 
    display: flex; 
    align-items: center; 
    gap: 4px;
    width: 100%;
    min-width: 0;
  }
  
  #mc-opfc .team-cell img { 
    height: 28px;
    width: 28px;
    object-fit: contain;
    flex-shrink: 0;
  }
  
  /* Team name text */
  #mc-opfc .team-cell span,
  #mc-opfc .team-cell {
    font-size: 12px !important;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Position styling */
  #mc-opfc .pos { 
    width: 100% !important;
    text-align: center !important; 
    color: #000;
    font-weight: bold;
    font-size: 14px;
  }
  
  /* Override any max-width constraints from parent themes */
  body .mc-section[data-section="tables"],
  body .mc-section[data-section="tables"] *,
  body #mc-opfc .mc-section[data-section="tables"],
  body #mc-opfc .mc-section[data-section="tables"] * {
    max-width: none !important;
  }
}

/* Also add this JavaScript-based fix as a fallback */
/* Add this script tag to your PHP file or include it in your JS */

/* ===== Base + Scope ===== */
#mc-opfc {
  --opfc-red: #e30613; 
  --bg: #fff; 
  --card: #fff; 
  --text: #000; 
  --gap: 14px; 
  --radius: 0;
  --ring: 200px; 
  --ring-font: 26px; 
  --crest-lg: 90px; 
  --crest-md: 64px;
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text); 
  background: var(--bg);
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

#mc-opfc * { 
  box-sizing: border-box; 
}

#mc-opfc a { 
  color: inherit; 
  text-decoration: none; 
}

#mc-opfc .wrap { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0px; 
}

/* ===== Namespace to avoid Elementor conflicts ===== */
#mc-opfc .mc-hide { 
  display: none !important; 
}

#mc-opfc .mc-card { 
  background: var(--card); 
  border-radius: var(--radius); 
  overflow: hidden; 
}

#mc-opfc .mc-tabs { 
  display: flex; 
  align-items: center; 
  gap: 18px; 
  margin: 20px 0 14px; 
}

#mc-opfc .mc-tab { 
  background: #fff; 
  color: #000; 
  cursor: pointer; 
  font-weight: 600; 
  border-radius: 50px; 
  padding: 10px 20px; 
  border: 2px solid #000; 
}

#mc-opfc .mc-tab.mc-active { 
  color: #fff; 
  background: #e30613; 
  border-color: #e30613; 
}

#mc-opfc .btn { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  background: var(--opfc-red); 
  color: #fff; 
  border: none; 
  border-radius: 50px; 
  padding: 10px 14px; 
  font-weight: 600; 
  cursor: pointer;  
  justify-content: center; 
}

#mc-opfc .select2 {
  appearance: none; 
  -webkit-appearance: none; 
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size: 12px 8px; 
  padding-right: 2rem; 
  border: 2px solid #000; 
  border-radius: 9999px; 
  font-weight: bold; 
  padding: .5rem 2.5rem .5rem 1rem;
}



select, 
.dropdown-button {
  -webkit-appearance: none;
  outline: none;color:#000
}

/* Remove focus styles on touch devices */
select:focus,
.dropdown-button:focus {
  outline: none;
  box-shadow: none;
}

/* ===== Hero ===== */
#mc-opfc header.hero { 
  position: relative; 
  background: linear-gradient(140deg, #111 0%, #1b1b1d 60%, #0b0b0c 100%); isolation: isolate;
}

#mc-opfc .hero__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 22px;
    text-align: center;
}
#mc-opfc .brand-title { 
  font: 400 78px/1 "Bebas Neue", sans-serif; 
  color: #fff; 
}

/* ===== Latest Fixture (scoped) ===== */
#mc-opfc .latest-fixture { 
  background: #000; 
  color: #fff; 
  padding: 22px 0; 
  border-top: 2px solid #2a3040; 
  border-bottom: 2px solid #2a3040; 
}

#mc-opfc .lf-wrap { 
  max-width: 1200px; 
  margin: 0 auto; 
}

#mc-opfc .lf-row { 
  display: grid; 
  grid-template-columns: 1fr auto 1fr; 
  gap: 16px; 
  align-items: center; 
}

#mc-opfc .lf-team { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

#mc-opfc .lf-team .crest { 
  width: 62px; 
  height: 62px; 
  border-radius: 50%; 
  background: #fff; 
  display: grid; 
  place-items: center; 
  overflow: hidden; 
}

#mc-opfc .lf-team .crest img { 
  width: 60px; 
  height: 60px; 
  object-fit: contain; 
}

#mc-opfc .lf-tablist { 
  display: flex; 
  gap: 18px; 
  padding-top: 20px; 
}

#mc-opfc .lf-tab { 
  padding: 12px 26px; 
  color: #000; 
  background: #fff; 
  border: 2px solid #000; 
  border-radius: 50px; 
  font-weight: 700; 
  cursor: pointer; 
}

#mc-opfc .lf-tab.active { 
  color: #fff; 
  background: #e30613; 
  border-color: #e30613; 
}

#mc-opfc .lf-panel.hide { 
  display: none; 
}

/* ===== ENHANCED STANDINGS TABLE RESPONSIVE FIX ===== */

/* Base table styles - ensure full width */
#mc-opfc .standings { 
  width: 100%; 
  min-width: 100%;
  border-collapse: collapse; 
  font-family: "Bebas Neue", sans-serif; 
  font-size: 18px;
  table-layout: auto; /* Allow flexible column sizing */
}

#mc-opfc .standings th, 
#mc-opfc .standings td {
  padding: 10px 6px; /* Slightly reduce horizontal padding for more space */
  border-bottom: 1px solid #1f1f24;
  text-align: right;
  vertical-align: middle;
  border-left: none;
  border-right: none;
  border-top: none;
  word-wrap: break-word; /* Allow text wrapping if needed */
}

#mc-opfc .standings th:first-child, 
#mc-opfc .standings td:first-child { 
  text-align: left; 
}

/* Team cell improvements for better space usage */
#mc-opfc .team-cell { 
  display: flex; 
  align-items: center; 
  gap: 6px; /* Reduce gap slightly */
  min-width: 0; /* Allow flexbox shrinking */
}

#mc-opfc .team-cell img { 
  height: 40px; /* Reduce image size for better fit */
  width: auto; 
  border-radius: 0%; 
  background: transparent;
  flex-shrink: 0; /* Prevent image from shrinking */
}

#mc-opfc .pos { 
  width: 30px; /* Reduce position column width */
  text-align: center; 
  color: #000; 
  flex-shrink: 0;
}

/* Medium screens (432px - 760px) - Full width optimization */
@media (min-width: 432px) and (max-width: 760px) {
  
  /* Ensure table container takes full width */
  #mc-opfc .standings {
    width: 100% !important;
    min-width: 100% !important;
    font-size: 16px; /* Slightly smaller font for better fit */
  }
  
  /* Optimize column widths for this range */
  #mc-opfc .standings th, 
  #mc-opfc .standings td {
    padding: 8px 4px; /* Reduce padding further */
  }
  
  /* Position column */
  #mc-opfc .pos {
    width: 25px;
  }
  
  /* Team column - allow it to take more space */
  #mc-opfc .standings th:nth-child(2), 
  #mc-opfc .standings td:nth-child(2) {
    width: auto; /* Let team column expand */
    min-width: 120px; /* But ensure minimum width */
  }
  
  /* Numeric columns - make them narrower but readable */
  #mc-opfc .standings th:nth-child(n+3), 
  #mc-opfc .standings td:nth-child(n+3) {
    width: 8%; /* Distribute remaining space evenly */
    min-width: 30px;
    text-align: center;
  }
  
  /* Team cell optimizations */
  #mc-opfc .team-cell {
    gap: 4px;
  }
  
  #mc-opfc .team-cell img { 
    height: 32px; /* Smaller team logos */
    width: 32px;
  }
}

/* Small screens (up to 431px) - Compact but still full width */
@media (max-width: 431px) {
  
  #mc-opfc .standings {
    width: 100% !important;
    font-size: 14px;
  }
  
  #mc-opfc .standings th, 
  #mc-opfc .standings td {
    padding: 6px 2px;
  }
  
  /* Make team names even more compact */
  .team-cell {
    font-size: 0px !important;
  }
  
  #mc-opfc .team-cell img { 
    height: 24px;
    width: 24px;
  }
  
  #mc-opfc .pos {
    width: 20px;
    font-size: 12px;
  }
  
  /* Super compact numeric columns */
  #mc-opfc .standings th:nth-child(n+3), 
  #mc-opfc .standings td:nth-child(n+3) {
    width: 7%;
    min-width: 25px;
    font-size: 12px;
  }
}

/* Large screens (761px+) - Original horizontal scroll approach */
@media (min-width: 761px) {
  
  #mc-opfc .standings {
    font-size: 18px; /* Restore original font size */
  }
  
  #mc-opfc .standings th, 
  #mc-opfc .standings td {
    padding: 10px; /* Restore original padding */
  }
  
  #mc-opfc .team-cell img { 
    height: 52px; /* Restore original image size */
    width: auto;
  }
  
  #mc-opfc .pos {
    width: 36px; /* Restore original width */
  }
}

/* Ensure the table wrapper doesn't constrain width */
#mc-opfc .wrap {
  width: 100%;
  max-width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

/* Override any parent container constraints in the problematic range */
@media (min-width: 432px) and (max-width: 760px) {
  
  /* Ensure no parent containers limit the table width */
  #mc-opfc .mc-card,
  #mc-opfc .wrap,
  #mc-opfc .mc-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }
  
  /* Make sure the table section specifically uses full width */
  .mc-section[data-section="tables"] {
    width: 100% !important;
  }
  
  .mc-section[data-section="tables"] .wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}


/* ===== Results & Fixtures Layout ===== */
#pens-home { 
  justify-content: flex-end; 
}

#mc-opfc .result-row {
  display: grid;
  grid-template-columns: 120px 120px 1fr 160px; 
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 2px solid #000;
}

#mc-opfc .result-left .result-day {
  font-family: 'Bebas Neue', sans-serif; 
  font-size: 72px; 
  line-height: 1;
}

#mc-opfc .result-left .result-month-year {
  font-weight: 700; 
  letter-spacing: 0; 
  margin-top: -6px;
}

#mc-opfc .result-left .result-venue {
  margin-top: 0px !important; 
  color: #6B7280; 
  letter-spacing: 0 !important;    
  font-size: 14px;
  font-weight: 700;
}

#mc-opfc .result-comp img { 
  height: 60px; 
  width: auto; 
  display: block; 
}

#mc-opfc .result-mid {
  display: grid; 
  grid-template-columns: 160px 1fr 160px; 
  align-items: center; 
  gap: 18px;
}

#mc-opfc .result-mid .team { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12px; 
}

#mc-opfc .result-mid .team .crest { 
  width: 90px; 
  height: 90px; 
  object-fit: contain; 
}

#mc-opfc .result-mid .score {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 16px;
}

#mc-opfc .result-mid .score .num { 
  font: 700 64px/1 Bebas Neue, sans-serif; 
}

#mc-opfc .result-mid .score .vs { 
  font: 700 40px/1 Bebas Neue, sans-serif; 
  color: #6b7280; 
}

#mc-opfc .btn-ghost {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  background: #fff; 
  color: #000; 
  border: 2px solid #000; 
  border-radius: 50px;
  padding: 10px 14px; 
  font-weight: 700;  
  cursor: pointer;
}

/* ===== Fixtures ===== */
#mc-opfc .fixture-row {
  display: grid;
  grid-template-columns: 200px 120px 1fr 220px;
  gap: 16px; 
  align-items: center; 
  padding-bottom: 18px; 
  padding-left: 0; 
  padding-right: 0; 
  padding-top: 0; 
  border-bottom: 2px solid #000;
  margin: 0 !important;
}

#mc-opfc .fixture-row#next-fixture { 
  border-bottom: 2px solid #c7c7c7; 
}

#mc-opfc .fixture-left .fixture-day { 
  font-family: 'Bebas Neue', sans-serif; 
  font-size: 72px; 
  line-height: 1; 
}

#mc-opfc .fixture-left .fixture-month-year { 
  font-weight: 700; 
  letter-spacing: 0; 
  margin-top: -6px; 
}

#mc-opfc .fixture-left .fixture-venue { 
  color: #6B7280; 
  letter-spacing: 0em; 
}

#mc-opfc .fixture-comp img { 
  height: 50px; 
  width: auto; 
  display: block; 
}

#mc-opfc .fixture-teams { 
  display: grid; 
  grid-template-columns: 1fr 120px 1fr; 
  align-items: center; 
  gap: 18px; 
}

#mc-opfc .fixture-teams .team { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
}

#mc-opfc .fixture-teams .team .crest { 
  width: 64px; 
  height: 64px; 
  object-fit: contain; 
}

#mc-opfc .fixture-teams .team.home { 
  justify-content: flex-end; 
}

#mc-opfc .fixture-teams .team.away { 
  justify-content: flex-start; 
}

#mc-opfc .fixture-center { 
  text-align: center; 
}

#mc-opfc .fixture-center .ko { 
  font: 700 28px/1 Bebas Neue, sans-serif; 
  color: #111; 
}

#mc-opfc .fixture-center .vs { 
  font: 700 36px/1 Bebas Neue, sans-serif; 
  color: #6b7280; 
}

#mc-opfc .fixture-actions { 
  display: flex; 
  gap: 10px; 
  justify-content: flex-end; 
}

/* ===== Tab System ===== */
#mc-opfc .tabs { 
  display: flex;
  align-items: center;
  gap: 16px;
}

#mc-opfc .tabs .toolbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;           
}

#mc-opfc .tabs .toolbar > * {
  flex: 0 0 auto;
  width: auto !important;
  display: inline-flex;
}

#mc-opfc .tabs .toolbar select,
#mc-opfc .tabs .toolbar .select2 {
  width: auto !important;
  min-width: 140px;
  display: inline-block;
}

#mc-opfc .tabs .toolbar #add-all-ics { 
  white-space: nowrap; 
}

/* ===== Live Section ===== */
#livesectionwrap {
  color: #fff;
  background-color: #131313;
  background-image: url(../opfc-season-2025-26-main-background-scaled-2.html);
  background-size: cover;
  padding-top: 20px;
  padding-bottom: 30px;
}

#livesectionwrap #live-centre-meta { 
  color: #fff; 
}

#live-section .live-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  margin: 0px 0;
}

#live-section .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#live-section .team img {
  width: 114px;
  height: 114px;
  object-fit: contain;
}

#live-section .score {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 1px;
}

#live-section .meta {
  margin-top: 6px;
  font-size: 18px;
  opacity: .8;
  text-align: center;
}

#live-section .scorers {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.35;
}

#live-section .live-header .score {
  display: flex; 
  align-items: center; 
  gap: 18px;
  font-size: 65px; 
  font-weight: 800; 
  line-height: 1;
  justify-content: center;
}

#live-section .live-header .live-clock {
  font: 700 14px/1.1 system-ui, sans-serif;
  padding: 6px 10px; 
  border: 2px solid #fff; 
  border-radius: 999px;
  text-transform: uppercase; 
  letter-spacing: .5px;
}

#live-section .meta { 
  margin-top: 8px; 
  text-align: center; 
  opacity: .85; 
  justify-content: center;
  font-family: "Bebas Neue", sans-serif; 
}

/* ===== Live Tabs ===== */
#mc-opfc .lf-tabs { 
  margin-top: 0px; 
}

#mc-opfc .lf-nav { 
  display: flex; 
  gap: 10px; 
  justify-content: center;
}

#mc-opfc .lf-tab{ 
  background: #fff; 
  border: 2px solid #111; 
  border-radius: 999px; 
  padding: 8px 14px; 
  font-weight: 700; 
}

#mc-opfc .lf-tab.active { 
  background: #111; 
  color: #fff; 
}

#mc-opfc .lf-panel { 
  margin-top: 16px; 
}

/* ===== Timeline ===== */
#mc-opfc .tl-rail { 
  position: relative; 
  padding: 8px 0; 
}

#mc-opfc .tl-rail::before {
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 0; 
  bottom: 0; 
  width: 2px; 
  background: #fff; 
  transform: translateX(-50%);
  opacity: 1;
}

#mc-opfc .tl-item {
  display: grid; 
  grid-template-columns: 1fr 56px 1fr; 
  align-items: center; 
  gap: 14px;
  padding: 12px 0; 
  position: relative; 
  z-index: 10;
}

#mc-opfc .tl-card {
  background: #fff; 
  border-radius: 12px; 
  padding: 12px 14px; 
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  color: black;
  background-size: auto 70%;
  background-image: url(../png/substitution.png);
  background-repeat: no-repeat;
  background-position: 98%;
}

#mc-opfc .tl-card.goal { 
  background: #e30613; 
  color: #fff; 
  font-weight: 700;
  background-size: auto 80%;
  background-image: url(../png/substitutiongoal2.png);
  background-repeat: no-repeat;
  background-position: 98%;
}

#mc-opfc .tl-card .subtxt { 
  font-size: 12px; 
  opacity: .8; 
  margin-top: 4px; 
}

#mc-opfc .tl-min {
  width: 56px; 
  height: 56px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  background: #111; 
  color: #fff; 
  font-weight: 800; 
  border: solid 2px white;
}

#mc-opfc .tl-left { 
  grid-column: 1 / 2; 
}

#mc-opfc .tl-mid  { 
  grid-column: 2 / 3; 
}

#mc-opfc .tl-right { 
  grid-column: 3 / 4; 
}

#mc-opfc .tl-item.tl-center { 
  position: relative; 
}

#mc-opfc .tl-card.center {
  grid-column: 1 / 4; 
  justify-self: center; 
  text-align: center;
  background: #f6f6f6; 
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 700; 
  margin-top: 8px; 
  border-radius: 12px; 
  padding: 10px 14px !important;
}

.yellowtimeline { 
  background-color: yellow !important;
  background-image: none !important;
}

#lf-timeline {    
  max-height: 600px;
  overflow: hidden;
  overflow-y: scroll;
  padding-right: 20px;
  scrollbar-width: thin;              
  scrollbar-color: #888 #000;      
}

#lf-timeline::-webkit-scrollbar {
  width: 8px;            
}

#lf-timeline::-webkit-scrollbar-track {
  background: #f1f1f1;   
  border-radius: 4px;
}

#lf-timeline::-webkit-scrollbar-thumb {
  background-color: #888;  
  border-radius: 4px;
}

#lf-timeline::-webkit-scrollbar-thumb:hover {
  background-color: #555;  
}

/* ===== Stats ===== */
.card-lf { 
  font-family: "Bebas Neue", sans-serif; 
  font-size: 20px; 
}

.grid { 
  display: grid;
  gap: 10px;
}

.grid-2 { 
  grid-template-columns: 1fr 1fr; 
}

.ring {
  --size: var(--ring, 200px);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 6px auto;
  background: conic-gradient(
    #e30613 0 calc(var(--pct, 50) * 1%),
    #4b4e54 0 100%
  );
}

.ring .val { 
  font: 700 var(--ring-font, 26px)/1 ui-sans-serif; 
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
}

.rowbar { 
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.rowbar .line { 
  height: 24px;
  background: #2d2f39;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.rowbar .line span { 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: #ed1c24;
}

.rowbar .line span.away { 
  left: auto;
  right: 0;
  background: #4b4e54;
}

.statbar { 
  height: 24px;
  background: #2d2f39;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  grid-template-columns: 1fr 1fr;
}

.statbar .home { 
  background: #ed1c24; 
}

.statbar .away { 
  background: #4b4e54; 
}

.dots .dot { 
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #ffd24d;
  margin-right: 8px;
}

.pips .pip { 
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 8px;
  background: #2b2c2d; 
  opacity: 0.5;
}

.pips .pip.on { 
  background: #ed1c24; 
  opacity: 1 !important;
}    

.card-num { 
  font-weight: 700; 
  text-align: center; 
}

.dot { 
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
}

.dot-yellow { 
  background: #FACC15; 
} 

.dot-red { 
  background: #EF4444; 
}    

.pips { 
  display: inline-flex; 
  gap: 8px; 
  align-items: center; 
}

.pip  { 
  width: 18px; 
  height: 18px; 
  border-radius: 6px; 
  background: rgba(255,255,255,.08); 
}

.pip-yellow { 
  background: #FACC15; 
} 

.pip-red    { 
  background: #EF4444; 
} 

.pip-empty  { 
  background: rgba(255,255,255,.08); 
}

#cards-home { 
  justify-content: flex-end; 
}

.pip.on.yellow { 
  width: 20px; 
  height: 40px; 
  background-color: yellow;
  border-radius: 5px;
  opacity: 1 !important;
}

#cards-home .pip { 
  width: 20px; 
  height: 40px;
  opacity: 0.5;
  border-radius: 5px;
}

#cards-away .pip { 
  width: 20px; 
  height: 40px;
  opacity: 0.5;
  border-radius: 5px;
}

#lf-stats { 
  padding: 40px; 
  background: transparent;
  color: #000; 
}

#lf-stats .card-lf {background: #fff}

.stats-logo-left, .stats-logo-right  { 
  max-height: 130px;
  width: auto;
}

/* ===== Lineup ===== */

.lineup-content {display: flex
;
    justify-content: space-between;}
.lineup-team-head {display:none !important}
.lineup-category-title {color:#fff}

#lf-lineup .lineup-team-head h3 { 
    display:none;
  margin: 0 0 12px; 
  font-weight: 800; 
  letter-spacing: .04em;
  display: none; 
}

#lf-lineup .lineup-group {
  display: grid; 
  grid-template-columns: 1fr 2px 1fr; 
  gap: 24px; 
  align-items: start;
}

#lf-lineup .lineup-divider { 
  width: 2px; 
  background: rgba(255,255,255,.15); 
}

#lf-lineup .player-list { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: 18px; 
}

#lf-lineup .player-list.cols-2 { 
  grid-template-columns: 1fr 1fr; 
}

.lu-player { 
  display: flex; 
  align-items: center; 
  gap: 16px; 
  padding: 8px 0; 
}

.lu-avatar { 
  width: 64px; 
  height: 64px; 
  border-radius: 999px; 
  background: #ffffff; 

  display: grid; 
  place-items: center; 
  overflow: visible; 
}

.lu-avatar img { 
  width: 64px; 
  height: 64px; 
  object-fit: cover; 
  border-radius: 0%; 
}

.lu-text .lu-top { 
  font-weight: 700; 
  color: #9CA3AF; 
  line-height: 1.1; 
}

.lu-text .lu-no { 
  margin-right: 6px; 
}

.lu-text .lu-first { }

.lu-text .lu-last {
  font-size: 22px; 
  font-weight: 900; 
  letter-spacing: .02em; 
  text-transform: uppercase;
  color: #fff; 
  line-height: 1.1; 
  margin-top: 2px; 
  position: relative; 
  display: inline-block;
}

.lu-text .lu-last::after {
  content: ""; 
  display: block; 
  height: 4px; 
  width: 56px; 
  background: #e30613; 
  margin-top: 6px; 
  border-radius: 2px;
}

#lf-lineup h4 { 
  margin: 0 0 12px; 
  font-weight: 800; 
  letter-spacing: .06em; 
}

/* ===== Next Match Card ===== */
#next-card {
  margin-bottom: 0px;
  padding-bottom: 30px;
  border-bottom: 2px solid black !important;
}

#next-card .fixture-row {
  display: flex;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

#next-card .team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#next-card .team .crest img {
  height: 40px;
  width: auto;
  display: block;
}

#next-card .name {
  font-weight: 400;
  font-size: clamp(14px, 3.6vw, 18px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#next-card .vs {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 18px;
  color: #111; 
  font-family: "Bebas Neue", sans-serif;
  text-align: center;
}

#next-fixture .team.away { 
  justify-content: flex-start; 
}

#next-fixture #home-name, 
#next-fixture #away-name { 
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px; 
}

/* ===== Countdown & Actions ===== */
#mc-opfc .countdown {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

#mc-opfc .cd-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background: #f0f0f2;
  color: #111;
}

#mc-opfc .cd-num {
  font-weight: 800;
  font-size: 20px;
}

#mc-opfc .cd-label {
  font-size: 11px;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: #6a6b6f;
}

#mc-opfc .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#mc-opfc .fixture-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

#mc-opfc .team-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
}

#mc-opfc .fixture-venue {
  font-weight: 700;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: #6b7280;
  font-size: 14px;
}

#mc-opfc .fixtures-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

#mc-opfc .card-title {
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 30px;
  font-family: "Bebas Neue", sans-serif;
}

#mc-opfc .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: #000;
  align-items: center;
}

#mc-opfc .pill {
  font-size: 20px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 25px;
  border-radius: 999px;
  border: 2px solid #000;
}

#comp-pill {
  align-items: center;
  display: inline-flex;
}

#mc-opfc img#home-crest,
#mc-opfc img#away-crest {
  height: 100px;
  object-fit: contain;
}

#mc-opfc .team .crest {
  width: 100px;
  height: 100px;
  border-radius: 0% !important;
}

#mc-opfc .vs {
  font-family: "Bebas Neue", sans-serif;
  font-size: 40px;    
  text-align: center;
}

#fixture-meta {
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px;
}

#add-all-ics {
  min-width: unset !important; 
  width: auto !important;
}

#live-score-home, 
#live-score-away, 
.ko, 
#next-card .vs {
  font-family: "Bebas Neue", sans-serif; 
}

/*#tohide {
  display: none;
}*/

/* ===== RESPONSIVE DESIGN - MOBILE FIRST ===== */

/* Prevent horizontal scrolling globally */
body {
  overflow-x: hidden;
}

/* Large Tablets and Desktop */
@media (min-width: 1200px) {
  #mc-opfc { 
    --ring: 200px; 
    --ring-font: 26px; 
  }
  
  #mc-opfc .wrap { 
    padding: 16px; 
  }
}

/* Standard Desktop and Large Tablets */
@media (min-width: 1025px) and (max-width: 1199px) {
  #mc-opfc { 
    --ring: 180px; 
    --ring-font: 24px; 
  }
  
  #mc-opfc .wrap { 
    padding: 16px; 
  }
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
  #mc-opfc { 
    --ring: 160px; 
    --ring-font: 22px; 
  }
  
  #mc-opfc .brand-title { 
    font-size: 64px; 
  }
  
  #mc-opfc .lf-row { 
    grid-template-columns: 1fr; 
    gap: 12px; 
    text-align: center; 
  }
}

/* Mid-size Tablets */
@media (min-width: 901px) and (max-width: 980px) {
  #mc-opfc .fixture-comp {
    order: 0;
  }
           
  #mc-opfc .fixture-comp img {
    height: 30px;
  }       
  
  #mc-opfc .btn {
    min-width: unset;
  }
      
  #mc-opfc .fixture-row {
    grid-template-columns: 150px 120px 1fr 220px;
  }
}

/* Small Tablets */
@media (min-width: 769px) and (max-width: 900px) {
  #mc-opfc { 
    --ring: 140px; 
    --ring-font: 20px; 
  }
  
  #lf-stats > .grid.grid-2 { 
    grid-template-columns: 1fr; 
    gap: 18px; 
  }
  
  #lf-stats .mini { 
    row-gap: 8px; 
  }
  
  #lf-lineup .lineup-group { 
    grid-template-columns: 1fr; 
  }
  
  #lf-lineup .lineup-divider { 
    display: none; 
  }
}

/* ===== MOBILE BREAKPOINTS ===== */

/* Large Mobile Devices */
@media (max-width: 768px) {
  /* Base mobile settings */
  #mc-opfc { 
    --ring: 120px; 
    --ring-font: 18px; 
  }

  /* Global mobile fixes */
  .wrap {
    padding: 12px !important;
  }

  /* Ensure images don't break layout */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Touch targets for accessibility */
  button, .btn, .btn-ghost, .lf-tab {
    min-height: 24px !important;
    padding: 5px 16px !important;
    font-size: 15px !important;
  }
  
  select, .select2 {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Hero section */
  #mc-opfc .hero__inner { 
    min-height: 340px; 
  }
  
  #mc-opfc .brand-title { 
    font-size: 54px; 
  }

  /* Live Section Mobile Layout */
  #live-section .live-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .live-header .teams-row {
    display: flex;
    justify-content: center;
    gap: 32px;
    width: 100%;
  }

  .live-header .team {
    flex-direction: column;
    text-align: center; 
    width: 48%;
  }

  .live-header .centre {
    order: 2;
    margin-top: 8px;
    width: 100% !important; 
    margin-bottom: 30px;
  }

  #live-section .team img { 
    width: 72px; 
    height: 72px; 
  }
  
  #live-section .live-header .score { 
    font-size: 40px; 
    gap: 12px; 
    justify-content: center;
  }

  /* Navigation Mobile */
  #mc-opfc .mc-tabs {
    gap: 8px;
    flex-wrap: wrap !important;
    padding: 12px !important;
  }
  
  #mc-opfc .mc-tab {
    font-size: 14px;
    padding: 5px 10px;
    flex: 1 1 auto !important;
    min-width: 80px !important;
  }
  
  #mc-opfc .mc-tabs .toolbar {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  #mc-opfc .select2 {
    min-width: 160px !important;
    margin: 4px !important;
  }

  #add-all-ics {
    display: none !important;
  }

  /* Match Cards Mobile Layout */
  #mc-opfc .result-row,
  #mc-opfc .fixture-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  
  
          
  #fixtures-list .team-name {
    display: none;
  }
          
  #fixtures-list .fixture-teams {
    order: -1;
  }
          
  #mc-opfc .result-mid {
    order: -1;
  }

  #mc-opfc .result-left .result-day,
  #mc-opfc .fixture-left .fixture-day { 
    font-size: 56px; 
  }
  
  #mc-opfc .result-mid,
  #mc-opfc .fixture-teams {
    grid-template-columns: 120px 1fr 120px;
    gap: 12px;
  }
  
  #mc-opfc .result-mid .team .crest,
  #mc-opfc .fixture-teams .team .crest { 
    width: 72px; 
    height: 72px; 
  }
  
  #mc-opfc .result-mid .score .num { 
    font-size: 48px; 
  }
  
  #mc-opfc .result-mid .score .vs { 
    font-size: 28px; 
  }

  #mc-opfc .fixture-center .ko { 
    font-size: 22px; 
  }
  
  #mc-opfc .fixture-center .vs { 
    font-size: 28px; 
  }

  #mc-opfc .result-comp img {
    height: 40px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #mc-opfc .fixture-comp img {
    height: 50px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #mc-opfc .result-actions,
  #mc-opfc .fixture-actions {
    justify-content: center; 
    flex-wrap: wrap;
    align-items: center !important;
  }
  
  #mc-opfc .result-actions .btn,
  #mc-opfc .result-actions .btn-ghost,
  #mc-opfc .fixture-actions .btn {
    max-width: 160px;
    width: auto;
  }
  
 

  /* Stats Section Mobile */
  #lf-stats {
    padding: 10px 0px 0px 0px !important;
  }
    
  .rowbar, .statbar, .shotsrow {
    margin: 10px !important;
  }
    
  .cardsrow {
    margin-bottom: 30px;
  }

  #lf-stats > .grid.grid-2 { 
    grid-template-columns: 1fr !important; 
    gap: 18px !important; 
  }

  #lf-stats .rowbar .line { 
    height: 24px; 
  }
  
  #lf-stats .statbar { 
    height: 24px; 
  }

  #mc-opfc .card-title {
    text-align: center;
  }

  /* Timeline Mobile */
  #mc-opfc .tl-item { 
    grid-template-columns: 1fr 48px 1fr; 
  }
  
  #mc-opfc .tl-min { 
    width: 48px; 
    height: 48px; 
  }

  #mc-opfc .tl-card, 
  #mc-opfc .tl-card.goal {
    background-size: auto 40% !important;
    padding-left: 5px; 
    padding-right: 40px !important;
  }

  /* Lineup Mobile */
  #lf-lineup .lineup-group { 
    grid-template-columns: 1fr !important; 
  }
  
  #lf-lineup .lineup-divider { 
    display: none !important; 
  }

  #lf-lineup .player-list {
    gap: 8px;
  }
    
  .lu-avatar {
    --size: 56px;
    --zoom: 1.0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
  }

  .lu-avatar img {
    width: 180%;
    height: 180%;
    object-fit: cover;
    transform: scale(var(--zoom));
    transform-origin: center;
  }
    
  .lu-text .lu-last { 
    font-size: 16px; 
  }
  
  .lu-text .lu-last::after { 
    width: 48px; 
    height: 3px; 
  }

  /* Next Match Card Mobile */
  #next-card .fixture-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #next-card .team {
    width: 100% !important;
    justify-content: center !important;
  }

  #next-card .vs {
    font-size: 24px !important;
    margin: 8px 0 !important;
  }

  #next-card .countdown {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #next-card .cd-box {
    width: 60px !important;
    height: 60px !important;
  }

  #next-card .cd-num {
    font-size: 18px !important;
  }

  #next-card .hero__actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #next-card .hero__actions .btn {
    width: 100% !important;
    max-width: 250px !important;
  }

  #next-fixture #away-name,
  #next-fixture #home-name {
    display: none;
  }
}

/* Compact Mobile Devices */
@media (max-width: 640px) {
  #mc-opfc { 
    --ring: 108px; 
    --ring-font: 16px; 
  }

  /* Allow wrapping on small screens */
  #mc-opfc .tabs .toolbar { 
    flex-wrap: wrap; 
  }
  
  #mc-opfc .tabs .toolbar select { 
    flex: 1 1 160px; 
  }

  #mc-opfc .lf-tablist { 
    flex-wrap: wrap; 
    row-gap: 8px; 
  }

  .team-cell {
    font-size: 0px;
  }
}

/* Very Small Mobile Devices */
@media (max-width: 420px) {
  #mc-opfc { 
    --ring: 96px; 
    --ring-font: 15px; 
  }
  
  #mc-opfc .brand-title { 
    font-size: 46px; 
  }
  
  #mc-opfc .lf-tab { 
    padding: 8px 12px; 
  }
  
  #mc-opfc .lf-team .crest { 
    width: 52px; 
    height: 52px; 
  }
  
  #mc-opfc .lf-team .crest img { 
    width: 50px; 
    height: 50px; 
  }
  
  #mc-opfc .result-mid .team .crest,
  #mc-opfc .fixture-teams .team .crest { 
    width: 60px; 
    height: 60px; 
  }
  
  #mc-opfc .fixture-teams { 
    grid-template-columns: 1fr 80px 1fr; 
  }

  #lf-stats .mini[style*="display:flex"] { 
    flex-direction: column; 
    align-items: center; 
    gap: 6px; 
  }

  /* Timeline improvements for very small screens */
  #mc-opfc .tl-item { 
    grid-template-columns: 1fr 40px 1fr; 
    gap: 10px; 
  }
  
  #mc-opfc .tl-min { 
    width: 40px; 
    height: 40px; 
    font-size: 14px; 
  }
}

/* Ultra-small screens (Galaxy Fold, etc) */
@media (max-width: 360px) {
  #next-card .countdown { 
    grid-template-columns: repeat(2, 1fr); 
  }
  
  #comp-pill img { 
    height: 22px; 
  }
}

/* Landscape Mobile Adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  #mc-opfc .hero__inner { 
    min-height: 280px; 
  }
  
  #mc-opfc .brand-title { 
    font-size: 48px; 
  }
  
  #live-section .live-header {
    flex-direction: row !important;
  }
  
  .live-header .teams-row {
    gap: 20px;
  }
  
  #next-card .countdown {
    flex-direction: row !important;
  }
}

/* Standings Responsive */
@media (max-width: 760px) {
    
    .soutside {display:flex; flex-direction: column;}
    
  #mc-opfc .standings {
    overflow-x: auto; 
    white-space: nowrap;
    display: block; 
  }
  
  #mc-opfc .standings th, 
  #mc-opfc .standings td { 
    padding: 8px 10px; 
  }
}

.mc-accordion {background:black;padding:20px;background-image: url(../opfc-season-2025-26-main-background-scaled-2.html);
    background-size: cover;}

/* Accordion Mobile Fixes */
@media (max-width: 768px) {
  .mc-accordion {
    margin: 16px 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  .lf-panel {
    padding: 16px !important;
  }
  
  .lf-nav {
    padding: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .lf-tab {
    margin: 4px !important;
    flex: 1 1 auto !important;
    min-width: 80px !important;
    text-align: center !important;
  }
}

/* Print Styles */
@media print {
  #mc-opfc .btn,
  #mc-opfc .btn-ghost,
  #add-all-ics,
  .lf-nav,
  .mc-tabs .toolbar {
    display: none !important;
  }
  
  #mc-opfc {
    color: #000 !important;
    background: #fff !important;
  }
  
  #livesectionwrap {
    background: #fff !important;
    color: #000 !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  #mc-opfc .tl-card {
    border: 2px solid #000 !important;
  }
  
  #mc-opfc .btn,
  #mc-opfc .btn-ghost {
    border-width: 3px !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  #mc-opfc .ring,
  #mc-opfc .countdown,
  #mc-opfc .tl-item {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== NEXT MATCH BLOCK RESPONSIVE FIX ===== */

/* Create a CSS class to replace the inline styles */
.next-match-container {
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}

/* Mobile responsive behavior */
@media (max-width: 768px) {
  .next-match-container {
    grid-template-columns: 1fr !important; /* Stack vertically on mobile */
    gap: 0px !important;
    align-items: stretch !important; /* Allow items to fill width */
  }
  
  /* Ensure countdown and actions center on mobile */
  .next-match-container > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 16px !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .next-match-container {
    gap: 12px;
  }
}

/* Alternative approach - more specific targeting */
#next-card .next-match-grid {
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}

@media (max-width: 768px) {
  #next-card .next-match-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: center !important;
  }
  
  #next-card .next-match-grid > div:first-child {
    order: 1;
  }
  
  #next-card .next-match-grid > div:last-child {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 16px !important;
  }
  
  /* Countdown responsive */
  #next-card .countdown {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  /* Actions responsive */  
  #next-card .hero__actions {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  #next-card .hero__actions .btn {
    min-width: 140px !important;
    flex: 1 1 auto !important;
    max-width: 200px !important;
  }
}

/* Compact mobile */
@media (max-width: 480px) {
  .next-match-container,
  #next-card .next-match-grid {
    gap: 12px !important;
    padding: 8px !important;
  }
  
  .next-match-container > div:last-child,
  #next-card .next-match-grid > div:last-child {
    margin-top: 12px !important;
  }
}

/* ===== NEXT MATCH TEAMS ROW LAYOUT FIX ===== */

/* Ensure teams and VS stay in a horizontal row on mobile */
#next-card .fixture-row {
  display: flex !important;
  flex-direction: row !important; /* Keep horizontal even on mobile */
  align-items: center !important;
  justify-content: start !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Team containers */
#next-card .team {
  display: flex !important;
  flex-direction: column !important; /* Team logo above team name */
  align-items: center !important;
  text-align: center !important;
  flex: 1 !important; /* Equal space for both teams */
  max-width: 120px !important; /* Prevent teams from getting too wide */
}

/* Team logos */
#next-card .team .crest img {
 /* height: 80px !important; */
 /* width: 80px !important; */
  object-fit: contain !important;
  margin-bottom: 8px !important;
}

/* Team names */
#next-card .team .name {
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

/* VS styling */
#next-card .vs {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #111 !important;
  text-align: center !important;
  flex-shrink: 0 !important; /* Prevent VS from shrinking */
  margin: 0 8px !important;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
  #next-card .fixture-row {
    gap: 12px !important;
    padding: 16px 8px !important;
  }
  
  #next-card .team {
    max-width: 100px !important;
  }
  
  #next-card .team .crest img {
    height: 80px !important;
    width: 80px !important;
  }
  
  #next-card .team .name {
    font-size: 12px !important;
  }
  
  #next-card .vs {
    font-size: 20px !important;
    margin: 0 4px !important;
  }
    
    #mc-opfc .meta {justify-content: center;}
    
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  #next-card .fixture-row {
    gap: 8px !important;
  }
  
  #next-card .team {
    max-width: 80px !important;
  }
  
  #next-card .team .crest img {
    height: 80px !important;
    width: 80px !important;
  }
  
  #next-card .team .name {
    font-size: 11px !important;
  }
  
  #next-card .vs {
    font-size: 18px !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  #next-card .fixture-row {
    gap: 20px !important;
  }
  
  /* #next-card .team .crest img {
    height: 72px !important;
    width: 72px !important;
  } */
  
  #next-card .vs {
    font-size: 28px !important;
  }
}

/* Desktop - maintain larger sizes */
@media (min-width: 1025px) {
  #next-card .fixture-row {
    gap: 24px !important;
  }
  
  #next-card .team .crest img {
    height: 90px !important;
    width: 90px !important;
  }
  
  #next-card .vs {
    font-size: 32px !important;
  }
}

/* Mobile specific overrides */
@media (max-width: 768px) {

/* ===== NEXT MATCH CENTER ALIGNMENT FIX ===== */

/* Force center alignment for the fixture row (team logos and VS) */
#next-card .fixture-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  gap: 20px !important;
  margin: 0 auto !important;
  padding: 16px 0 !important;
}

/* Individual team containers - ensure they're centered */
#next-card .team {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  flex: 0 0 auto !important; /* Don't grow or shrink, just center */
  min-width: 80px !important;
  max-width: 120px !important;
}

/* Team logos - force center */
#next-card .team .crest {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

#next-card .team .crest img {
  display: block !important;
  margin: 0 auto !important;
  height: 80px !important;
  width: auto !important;
  max-width: 80px !important;
  object-fit: contain !important;
}

/* VS - force center */
#next-card .vs {
  font-family: "Bebas Neue", sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #111 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 8px !important;
  flex-shrink: 0 !important;
}

/* Meta row (date, time, venue, etc.) - force center */
#next-card .meta,
#next-card #fixture-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 16px 0 !important;
  gap: 8px !important;
}

/* Countdown - force center */
#next-card .countdown {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin:0 !important;
  width: 100% !important;
}

/* Hero actions container - force center */
#next-card .hero__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 16px !important;
}

/* Add to Calendar button - force center */
#next-card .hero__actions .btn,
#next-card .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  text-align: center !important;
  min-width: 160px !important;
  padding: 12px 20px !important;
}

/* Override any conflicting styles that might be causing left alignment */
#next-card * {
  box-sizing: border-box;
}




    
    
    /* Ensure the entire next card content is centered */
#next-card > div,
#next-card .next-match-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}
    
    
  #next-card .fixture-row {
    gap: 16px !important;
    padding: 12px 0 !important;
  }
  
  #next-card .team .crest img {
    height: 80px !important;
    max-width: 80px !important;
  }
  
  #next-card .vs {
    font-size: 24px !important;
    padding: 0 6px !important;
  }
  
  #next-card .meta,
  #next-card #fixture-meta {
    flex-direction: row !important;
    gap: 6px !important;
  }
  
  #next-card .countdown {
    gap: 8px !important;
  }
  
  #next-card .hero__actions .btn {
    width: 90% !important;
    max-width: 250px !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  #next-card .fixture-row {
    gap: 12px !important;
  }
  
  #next-card .team .crest img {
    height: 80px !important;
    max-width: 80px !important;
  }
  
  #next-card .vs {
    font-size: 20px !important;
  }
}

.shotsrow {color:#000; justify-content: space-between !important}

/* Additional fallback - target by attribute if needed */
div[style*="grid-template-columns"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between!important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .next-match-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .next-match-container > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== FIXTURE ROW GRID LAYOUT FIX ===== */

/* Replace the problematic grid with a better solution */
@media (min-width: 769px) and (max-width: 900px) {
  
  /* Option 1: Flexbox Solution (Recommended) */
  #mc-opfc .fixture-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 8px !important;
    border-bottom: 2px solid #000 !important;
    margin: 0 !important;
  }
  
  /* Date section - fixed width */
  #mc-opfc .fixture-left {
    flex: 0 0 160px !important; /* Fixed width, no grow/shrink */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  #mc-opfc .fixture-left .fixture-day {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 56px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  
  #mc-opfc .fixture-left .fixture-month-year {
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-top: -4px !important;
  }
  
  #mc-opfc .fixture-left .fixture-venue {
    color: #6B7280 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
  }
  
  /* Competition logo - fixed width */
  #mc-opfc .fixture-comp {
    flex: 0 0 70px !important; /* Fixed width for competition */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #mc-opfc .fixture-comp img {
    height: 45px !important;
    width: auto !important;
    object-fit: contain !important;
  }
  
  /* Teams section - flexible, takes remaining space */
  #mc-opfc .fixture-teams {
    flex: 1 1 auto !important; /* Grow and shrink as needed */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-width: 0 !important; /* Allow shrinking */
  }
  
  #mc-opfc .fixture-teams .team {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  
  #mc-opfc .fixture-teams .team.home {
    justify-content: flex-end !important;
  }
  
  #mc-opfc .fixture-teams .team.away {
    justify-content: flex-start !important;
  }
  
  #mc-opfc .fixture-teams .team .crest {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
  }
  
  #mc-opfc .fixture-teams .team-name {
    font-family: "Bebas Neue", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }
  
  /* VS and time section - center */
  #mc-opfc .fixture-center {
    flex: 0 0 80px !important; /* Fixed width for center content */
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #mc-opfc .fixture-center .ko {
    font: 700 18px/1 Bebas Neue, sans-serif !important;
    color: #111 !important;
    margin-bottom: 2px !important;
  }
  
  #mc-opfc .fixture-center .vs {
    font: 700 22px/1 Bebas Neue, sans-serif !important;
    color: #6b7280 !important;
  }
  
  /* Actions section - fixed width */
  #mc-opfc .fixture-actions {
    flex: 0 0 180px !important; /* Fixed width for buttons */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  
  #mc-opfc .fixture-actions .btn,
  #mc-opfc .fixture-actions .btn-ghost {
    min-width: 140px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}

/* Alternative: Better Grid Solution */
@media (min-width: 769px) and (max-width: 900px) {
    
    .team-name {display: none !important}
  
  /* Option 2: Improved Grid (if you prefer grid) */
  /*
  #mc-opfc .fixture-row {
    display: grid !important;
    grid-template-columns: 160px 70px 2fr 80px 180px !important;
    grid-template-areas: "date comp teams vs actions" !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 16px 8px !important;
    border-bottom: 2px solid #000 !important;
    margin: 0 !important;
  }
  
  #mc-opfc .fixture-left {
    grid-area: date !important;
  }
  
  #mc-opfc .fixture-comp {
    grid-area: comp !important;
  }
  
  #mc-opfc .fixture-teams {
    grid-area: teams !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  
  #mc-opfc .fixture-center {
    grid-area: vs !important;
  }
  
  #mc-opfc .fixture-actions {
    grid-area: actions !important;
  }
  */
}

/* For slightly wider screens in this range */
@media (min-width: 850px) and (max-width: 900px) {
  
  #mc-opfc .fixture-left {
    flex: 0 0 180px !important;
  }
  
  #mc-opfc .fixture-comp {
    flex: 0 0 80px !important;
  }
  
  #mc-opfc .fixture-comp img {
    height: 50px !important;
  }
  
  #mc-opfc .fixture-center {
    flex: 0 0 90px !important;
  }
  
  #mc-opfc .fixture-center .ko {
    font-size: 20px !important;
  }
  
  #mc-opfc .fixture-center .vs {
    font-size: 26px !important;
  }
  
  #mc-opfc .fixture-teams .team .crest {
    width: 52px !important;
    height: 52px !important;
  }
  
  #mc-opfc .fixture-teams .team-name {
    font-size: 18px !important;
  }
  
  #mc-opfc .fixture-actions {
    flex: 0 0 200px !important;
  }
}

/* ===== LINEUP TWO COLUMNS FIX (1000px+) ===== */

/* Apply two-column layout for lineup sections at 1000px and above */
@media (min-width: 1000px) {
  
  /* Force both Starting XI and Substitutes to use two columns */
  #lf-lineup .player-list,
  #pirates-starting,
  #pirates-subs,
  #home-starting,
  #home-subs,
  #away-starting,
  #away-subs {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important; /* Two equal columns */
    gap: 16px !important;
    column-gap: 24px !important; /* More space between columns */
  }
  
  /* Ensure the .cols-2 class is properly applied */
  #lf-lineup .player-list.cols-2 {
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Individual player styling for two-column layout */
  .lu-player {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 0 !important;
    width: 100% !important;
  }
  
  .lu-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    flex-shrink: 0 !important; /* Prevent avatar from shrinking */
  }
  
  .lu-avatar img {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border-radius: 0% !important;
  }
  
  .lu-text {
    flex: 1 !important;
    min-width: 0 !important; /* Allow text to truncate if needed */
  }
  
  .lu-text .lu-top {
    font-weight: 700 !important;
    color: #9CA3AF !important;
    line-height: 1.1 !important;
    font-size: 12px !important;
  }
  
  .lu-text .lu-no {
    margin-right: 4px !important;
  }
  
  .lu-text .lu-last {
    font-size: 16px !important; /* Slightly smaller for two-column layout */
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
    position: relative !important;
    display: inline-block !important;
  }
  
  .lu-text .lu-last::after {
    content: "" !important;
    display: block !important;
    height: 3px !important;
    width: 40px !important; /* Shorter underline for compact layout */
    background: #e30613 !important;
    margin-top: 4px !important;
    border-radius: 2px !important;
  }
  
  /* Section headings */
  #lf-lineup h4,
  .lineup-category-title {
    margin: 0 0 16px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    color: #fff !important;
    font-size: 18px !important;
  }
  
  /* Lineup container adjustments */
  .lineup-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  
  .lineup-category {
    width: 100% !important;
  }
}

/* For very wide screens, add more spacing */
@media (min-width: 1200px) {
    
    .news-container{ display: grid !important;
    grid-template-columns: 1fr 1fr  !important; /* Two equal columns */
    gap: 16px !important;
    column-gap: 24px !important; /* More space between columns */}
  
  #lf-lineup .player-list,
  #pirates-starting,
  #pirates-subs,
  #home-starting,
  #home-subs,
  #away-starting,
  #away-subs {
    column-gap: 32px !important; /* More space between columns */
  }
  
  .lu-player {
    padding: 8px 0 !important;
    gap: 16px !important;
  }
  
  .lu-avatar {
    width: 56px !important;
    height: 56px !important;
  }
  
  .lu-avatar img {
    width: 56px !important;
    height: 56px !important;
  }
  
  .lu-text .lu-last {
    font-size: 18px !important;
  }
  
  .lu-text .lu-last::after {
    width: 48px !important;
    height: 4px !important;
  }
}

/* Ensure this doesn't conflict with tablet/mobile rules */
@media (max-width: 999px) {
  
  /* Keep single column layout below 1000px */
  #lf-lineup .player-list,
  #pirates-starting,
  #pirates-subs,
  #home-starting,
  #home-subs,
  #away-starting,
  #away-subs {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Single column */
    gap: 12px !important;
  }
  
  /* Remove cols-2 class effect below 1000px */
  #lf-lineup .player-list.cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* JavaScript helper - add this to your JS file */
/*
// Automatically add cols-2 class when screen is >= 1000px
function updateLineupColumns() {
  const playerLists = document.querySelectorAll('#lf-lineup .player-list, #pirates-starting, #pirates-subs');
  const shouldUseTwoColumns = window.innerWidth >= 1000;
  
  playerLists.forEach(list => {
    if (shouldUseTwoColumns) {
      list.classList.add('cols-2');
    } else {
      list.classList.remove('cols-2');
    }
  });
}

// Run on load and resize
window.addEventListener('load', updateLineupColumns);
window.addEventListener('resize', updateLineupColumns);
*/

.lf-panel {color:#fff}

.mc-accordion .card-lf .shotsrow {display: flex !important
;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: center !important;}

#mc-opfc .hero__inner:before {
    position: absolute;
    content: "";
    background: url(../opfc-fans-match-center-scaled-scaled.html);
    background-size: cover;
    transition: background var(--overlay-transition, 0.3s), border-radius var(--border-transition, 0.3s), opacity var(--overlay-transition, 0.3s);
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 20%;
}

.elementor-element-74dacbe, .elementor-element-f1d00f1 {display: none !important}

/* Enhanced Ring Design - Add this to your CSS */

/* Base ring styling with gradient background */
.ring {
  --size: var(--ring, 200px);
  --thickness: 12px; /* Ring thickness */
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 6px auto;
  position: relative;
  background: conic-gradient(
    from -90deg,
    #e30613 0 calc(var(--pct, 50) * 1%),
    #2a2a2a calc(var(--pct, 50) * 1%) 100%
  );
  
  /* Add subtle shadow */
  box-shadow: 0 4px 20px rgba(227, 6, 19, 0.15);
}

/* Inner circle for the donut effect */
.ring::before {
  content: "";
  position: absolute;
  top: var(--thickness);
  left: var(--thickness);
  right: var(--thickness);
  bottom: var(--thickness);
  border-radius: 50%;
  background: #111; /* Dark center */
  z-index: 1;
}

/* Enhanced value text */
.ring .val {
  font: 700 var(--ring-font, 26px)/1 ui-sans-serif;
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Multi-color gradient rings for different stats */
.ring.possession {
  background: conic-gradient(
    from -90deg,
    #e30613 0 calc(var(--pct, 50) * 0.7%),
    #e30613 calc(var(--pct, 50) * 0.7%) calc(var(--pct, 50) * 1%),
    #2a2a2a calc(var(--pct, 50) * 1%) 100%
  );
  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.15);
}

.ring.passing {
  background: conic-gradient(
    from -90deg,
    #e30613 0 calc(var(--pct, 50) * 0.7%),
    #e30613 calc(var(--pct, 50) * 0.7%) calc(var(--pct, 50) * 1%),
    #2a2a2a calc(var(--pct, 50) * 1%) 100%
  );
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.15);
}

/* Enhanced mobile responsive rings */
@media (max-width: 768px) {
  #mc-opfc {
    --ring: 120px;
    --ring-font: 18px;
  }
  
  .ring {
    --thickness: 10px;
    margin: 4px auto;
  }
}

@media (max-width: 420px) {
  #mc-opfc {
    --ring: 96px;
    --ring-font: 15px;
  }
  
  .ring {
    --thickness: 8px;
  }
}

/* Enhanced rowbar design */
.rowbar .line {
  height: 28px; /* Slightly taller */
  background: #2d2f39;
  border-radius: 14px; /* More rounded */
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rowbar .line span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #e30613 0%, #ff4757 100%);
  border-radius: 14px 0 0 14px;
  transition: width 0.6s ease-in-out;
}

.rowbar .line span.away {
  left: auto;
  right: 0;
  background: linear-gradient(90deg, #2b2c2d 0%, #000 100%);
  border-radius: 0 14px 14px 0;
}

/* Enhanced shots bar */
.statbar {
  height: 28px;
  background: #2d2f39;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.statbar .home {
  background: linear-gradient(90deg, #e30613 0%, #ff4757 100%);
  transition: width 0.6s ease-in-out;
}

.statbar .away {
  background: linear-gradient(90deg, #2b2c2d 0%, #000 100%);
  transition: width 0.6s ease-in-out;
}

/* Enhanced card pips */
.pip {
  width: 20px;
  height: 40px;
  border-radius: 6px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.3;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pip.on.yellow {
  background: linear-gradient(180deg, #ffd32a 0%, #f39800 100%);
  opacity: 1;
  box-shadow: 0 4px 8px rgba(255, 211, 42, 0.3);
}

.pip.on.red {
  background: linear-gradient(180deg, #ff4757 0%, #c44569 100%);
  opacity: 1;
  box-shadow: 0 4px 8px rgba(255, 71, 87, 0.3);
}

.bpgrid {margin-bottom:55px}

/* Enhanced stats container */
.card-lf {
  
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Stats section titles */
.stats-section-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Animated loading state for rings */
@keyframes ringLoad {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ring.loading {
  animation: ringLoad 2s linear infinite;
}

.ring.loading::before {
  background: conic-gradient(
    from 0deg,
    #e30613 0deg 90deg,
    transparent 90deg 360deg
  );
}

/* Enhanced grid spacing */
#lf-stats .grid.grid-2 {
  gap: 24px;
  align-items: start;
}

/* Better number styling */
.rowbar strong,
.statbar + .mini strong {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #000;
}

/* Enhanced mini labels */
.mini {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0px;
}

/* Hover effects for interactive elements */
.card-lf:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

/* Mobile adjustments for enhanced design */
@media (max-width: 768px) {
  .card-lf {
    padding: 16px;
    border-radius: 8px;
  }
  
  .rowbar .line,
  .statbar {
    height: 24px;
    border-radius: 12px;
  }
  
  .stats-section-title {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

/* Loading state improvements */
.stats-loading {
  opacity: 0.6;
  pointer-events: none;
}

.stats-loading .ring {
  animation: pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@media screen and (max-width: 640px) {
    
    .lineup-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
    
    .news-container {max-height: unset !important}
    
    .news-title {font-size: 25px !important;margin-top:20px !important}
    
    .news-image {width:100% !important;height: 250px !important;}
    
    .news-card {flex-direction: column}
    
    
}

@media screen and (max-width:440px) {
    
    .card-lf {max-width: 300px !important}
    
    
        #mc-opfc .tl-card, #mc-opfc .tl-card.goal {
        background-size: auto 40% !important;
            background-image: none !important;
        padding-left: 5px;
        padding-right: 5px !important;
    }
    
    .penaltyouter {    gap: 0px !important;}
    
      .penaltyouter  .pips {

    gap: 0 !important;
   
}
    
}

.soutside .card-lf {background: #fff}

.soutside .mini {color: black}