/* ============================================================
   index.css — Sportscapping Widget Styles
   Premium dark-card treatment for the free-pick & featured-
   packages widgets embedded on a light-themed page.
   ============================================================ */

/* ----------------------------------------------------------
   1. SHARED WIDGET CONTAINER
   ---------------------------------------------------------- */
.widget-container {
  background: var(--navy);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
  padding: 28px 32px;
  margin-bottom: 32px;
  overflow: hidden;
  color: #f1f5f9;
  font-family: var(--font) !important;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   2. GLOBAL TABLE RESETS  (inside widgets)
   ---------------------------------------------------------- */
.widget-container table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  background: transparent !important;
  font-family: var(--font) !important;
}

.widget-container table th,
.widget-container table td {
  border: none !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: #e2e8f0 !important;
  padding: 10px 14px !important;
  vertical-align: middle !important;
  text-align: left !important;
  background: transparent !important;
}

.widget-container table tr {
  border: none !important;
  background: transparent !important;
}

/* ----------------------------------------------------------
   3. GLOBAL LINK RESET
   ---------------------------------------------------------- */
.widget-container a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.widget-container a:hover {
  color: var(--gold2) !important;
  text-decoration: none !important;
}

/* ============================================================
   FREE-PICK WIDGET  (.free-pick-widget)
   ============================================================ */

/* --- Service Info / Capper Header --- */
.free-pick-widget #service_info {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.free-pick-widget #service_info th,
.free-pick-widget #service_info td {
  padding: 6px 14px !important;
}

.free-pick-widget #service_info .header tr > th > a,
.free-pick-widget #service_info .header th a {
  color: var(--gold) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* --- Picks Table --- */
.free-pick-widget #show_picks {
  margin-top: 8px;
}

.free-pick-widget #show_picks tr.data {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s ease;
}

.free-pick-widget #show_picks tr.data:last-child {
  border-bottom: none;
}

.free-pick-widget #show_picks tr.data:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Event (match info) */
.free-pick-widget #show_picks td.event {
  font-weight: 500 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  white-space: normal !important;
}

/* Choice (the actual pick) */
.free-pick-widget #show_picks td.choice {
  color: var(--gold) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em;
}

/* Starts / countdown — keep urgency feel */
.free-pick-widget #show_picks td.starts {
  color: var(--red) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.free-pick-widget #show_picks td.starts font,
.free-pick-widget #show_picks td.starts span {
  color: var(--red) !important;
  font-family: var(--font) !important;
}

/* Comment */
.free-pick-widget #show_picks td.comment {
  color: var(--ink4) !important;
  font-size: 13px !important;
  font-style: italic;
  line-height: 1.5;
}

/* ============================================================
   FEATURED-PACKAGES WIDGET  (.featured-packages-widget)
   ============================================================ */

/* --- Sport Section Heading --- */
.featured-packages-widget .Feature_sub_heading,
.featured-packages-widget .Feature_sub_heading td {
  padding: 12px 14px !important;
  border-left: 4px solid var(--gold) !important;
  color: var(--gold) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: rgba(245, 158, 11, 0.06) !important;
}

/* --- Feature Detail Rows --- */
.featured-packages-widget .feature_detail,
.featured-packages-widget .feature_detail td {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background 0.2s ease;
}

.featured-packages-widget .feature_detail:hover,
.featured-packages-widget .feature_detail:hover td {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Capper names inside feature rows */
.featured-packages-widget .feature_detail a {
  color: #ffffff !important;
  font-weight: 600 !important;
  transition: color 0.2s ease;
}

.featured-packages-widget .feature_detail a:hover {
  color: var(--gold2) !important;
}

/* Pick description text */
.featured-packages-widget .feature_detail td {
  color: #cbd5e1 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Price cells — bold gold */
.featured-packages-widget .feature_detail td:last-child,
.featured-packages-widget .feature_detail .price,
.featured-packages-widget .feature_detail td[align="right"] {
  color: var(--gold) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  text-align: right !important;
}

/* --- Feature Inner Table chrome reset --- */
.featured-packages-widget table.Feature_inner_tbl {
  border: none !important;
  background: transparent !important;
}

/* ============================================================
   INLINE-STYLE OVERRIDES  (SC widgets inject inline styles)
   ============================================================ */
.widget-container font,
.widget-container span,
.widget-container b,
.widget-container strong,
.widget-container i,
.widget-container em {
  font-family: var(--font) !important;
  color: inherit !important;
}

/* Preserve intentional red on starts */
.free-pick-widget td.starts font[color],
.free-pick-widget td.starts span[style] {
  color: var(--red) !important;
}

/* Kill any stray bgcolor / background attrs */
.widget-container [bgcolor],
.widget-container [style*="background"] {
  background: transparent !important;
}

/* Kill stray text sizing from SC */
.widget-container [style*="font-size"] {
  font-size: inherit !important;
}

.widget-container [style*="font-family"] {
  font-family: var(--font) !important;
}

/* ============================================================
   SCROLLBAR (for overflow content inside widgets)
   ============================================================ */
.widget-container ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.widget-container ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}

.widget-container ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.widget-container ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 768 px)
   ============================================================ */
@media (max-width: 768px) {

  /* Tighten container padding */
  .widget-container {
    padding: 20px 16px;
    border-radius: var(--radius);
    margin-bottom: 24px;
  }

  /* ---- Free-pick table: stack rows vertically ---- */
  .free-pick-widget #show_picks table,
  .free-pick-widget #show_picks thead,
  .free-pick-widget #show_picks tbody,
  .free-pick-widget #show_picks tr.data,
  .free-pick-widget #show_picks tr.data td {
    display: block !important;
    width: 100% !important;
  }

  .free-pick-widget #show_picks tr.data {
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .free-pick-widget #show_picks tr.data td {
    padding: 4px 0 !important;
  }

  .free-pick-widget #show_picks td.event {
    font-size: 15px !important;
    margin-bottom: 2px;
  }

  .free-pick-widget #show_picks td.choice {
    font-size: 14px !important;
  }

  .free-pick-widget #show_picks td.starts {
    font-size: 12px !important;
  }

  .free-pick-widget #show_picks td.comment {
    font-size: 12px !important;
  }

  /* ---- Featured-packages: stack rows vertically ---- */
  .featured-packages-widget table.Feature_inner_tbl,
  .featured-packages-widget table.Feature_inner_tbl tbody,
  .featured-packages-widget table.Feature_inner_tbl tr,
  .featured-packages-widget table.Feature_inner_tbl td {
    display: block !important;
    width: 100% !important;
  }

  .featured-packages-widget .Feature_sub_heading,
  .featured-packages-widget .Feature_sub_heading td {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  .featured-packages-widget .feature_detail td {
    padding: 8px 0 !important;
    font-size: 13px !important;
  }

  .featured-packages-widget .feature_detail td:last-child,
  .featured-packages-widget .feature_detail .price,
  .featured-packages-widget .feature_detail td[align="right"] {
    text-align: left !important;
    font-size: 14px !important;
    padding-top: 4px !important;
  }

  /* Service info header */
  .free-pick-widget #service_info .header tr > th > a,
  .free-pick-widget #service_info .header th a {
    font-size: 17px !important;
  }
}