/* ============================================================
   LSB DYNAMIC ODDS + GROK AI BET ANALYSIS — FULL CSS
   (Drop-in replacement for your current file)
   ============================================================ */
.dynamic-odds {
  max-width: 600px;
  margin: 20px auto;
  font-family: Arial, Helvetica, sans-serif;
}
/* ---------- EVENT CARD ---------- */
.odds-event {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 15px;
  background: inherit;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.odds-header {
  margin-bottom: 14px;
}
.odds-content {
  padding: 20px 15px 10px;
}
/* ---------- LABELS ---------- */
.odds-label.odds-top,
.odds-label.odds-bottom {
  font-weight: bold;
  color: #2980b9;
}
.odds-label.odds-bottom {
  margin: 10px 0 0;
}
.odds-line {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  margin: 0 0 10px;
}
/* ---------- LINKS ---------- */
.odds-affiliate-link {
  font-weight: bold;
  text-decoration: none;
  background: #e8f4f8;
  color: #AB1012;
  transition: all 0.2s;
  padding: 4px 8px;
  border-radius: 20px;
}
.odds-affiliate-link:hover {
  background-color: #2980b9;
  color: #fff;
  transform: scale(1.05);
}
/* ---------- TABLES (ALL MARKETS) ---------- */
.odds-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}
.odds-table th {
  padding: 10px 8px;
  text-align: center;
  font-weight: bold;
  font-size: 0.95em;
}
.odds-table td {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid #eee;
}
.odds-table tr:last-child td {
  border-bottom: none;
}
.odds-table .team-name {
  text-align: left !important;
  font-weight: 600;
  color: #2c3e50;
  padding-left: 12px;
}
.odds-table .odds-affiliate-link {
  display: inline-block;
  font-weight: bold;
}
.odds-team-name {
  text-align: left !important;
}
/* ---------- OUTRIGHTS LIST (kept for reference) ---------- */
.outrights-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -8px;
}
.outright-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid #eee;
  background: #f9f9f9;
  border-radius: 4px;
}
.odds-dash {
  color: #999;
  font-weight: bolder;
}
/* ==============================================================
   RESPONSIVE – STACKED CARD LAYOUT FOR ALL TABLES (≤600px)
   ============================================================== */
@media (max-width: 600px) {
  .odds-table,
  .odds-table-all,
  .outrights-table {
    border: 0;
    font-size: 13px;
  }
  .odds-table thead,
  .odds-table-all thead,
  .outrights-table thead {
    display: none; /* hide header on mobile */
  }
  .odds-table tr,
  .odds-table-all tr,
  .outrights-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    padding: 8px;
  }
  .odds-table td,
  .odds-table-all td,
  .outrights-table td {
    display: block;
    text-align: right;
    border: none;
    padding: 4px 0;
    position: relative;
    font-size: 13px;
  }
  .odds-table td::before,
  .odds-table-all td::before,
  .outrights-table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    color: #2980b9;
    text-transform: capitalize;
  }
  .odds-table td:last-child,
  .odds-table-all td:last-child,
  .outrights-table td:last-child {
    margin-bottom: 0;
  }
  /* ---- market="all" specific labels ---- */
  .odds-table-all td:nth-of-type(1)::before {
    content: "Team -";
    margin-right: 5px;
  }
  .odds-table-all td:nth-of-type(2)::before {
    content: "Spread";
  }
  .odds-table-all td:nth-of-type(3)::before {
    content: "Moneyline";
  }
  .odds-table-all td:nth-of-type(4)::before {
    content: "Total";
  }
  /* ---- outrights table ---- */
  .outrights-table td:nth-of-type(1)::before {
    content: "Outcome -";
    margin-right: 5px;
  }
  .outrights-table td:nth-of-type(2)::before {
    content: "Odds";
  }
  /* keep team name left-aligned */
  .odds-table .team-name,
  .odds-table-all .team-name,
  .outrights-table .team-name {
    text-align: left !important;
    font-weight: 600;
    color: #2c3e50;
    padding-left: 0;
  }
  .odds-team-name {
    margin-bottom: 2px;
    font-weight: bold;
  }
}
/* ============================================================
   GROK AI BET ANALYSIS — LSB THEME
   (Overrides your previous neon/conic styles)
   ============================================================ */
/* Main analysis container */
.dynamic-odds .ai-bet-analysis,
.ai-bet-analysis {
  max-width: 600px !important;
  margin: 4px 0 0 !important;
  position: relative !important;
  border-radius: 5px !important;
  border: 1px solid #cfcfcf !important;
  border-top: 3px solid #AB1012 !important; /* LSB red accent */
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
  padding: 0 !important;
  z-index: 10 !important;
}
/* Remove animated gradient frame/glow if present */
.ai-bet-analysis::before,
.ai-bet-analysis::after {
  content: none !important;
  display: none !important;
}
/* Header bar: dark “metal” */
.ai-header {
  margin: 0 !important;
  padding: 10px 14px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  color: #fff !important;
  background: linear-gradient(#404040, #353535) !important;
  border-bottom: 1px solid #000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* sparkle emoji for ai */
.ai-header::before {
    content: '✨'; /* Sparkle emoji as icon */
    font-size: 1.2em !important;
    display: inline-block !important;
    vertical-align: middle !important;
    filter: invert(14%) sepia(96%) saturate(7494%) hue-rotate(359deg) brightness(90%) contrast(113%);
}
/* Add a small "AI" badge on the right */
.ai-header::after {
  content: "AI" !important;
  display: inline-block !important;
  margin-left: auto !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  background: #AB1012 !important;
  color: #fff !important;
  font-size: 11px !important;
  letter-spacing: 0.6px !important;
  line-height: 1.2 !important;
}
/* Body content */
.ai-content {
  padding: 14px 14px 10px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #1f1f1f !important;
  background: linear-gradient(#ffffff, #f6f6f6) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.ai-content p {
  margin: 10px 0 10px !important;
}
.ai-content p:last-child {
  margin-bottom: 0 !important;
}
.ai-content ul,
.ai-content ol {
  margin: 8px 0 12px 20px !important;
}
.ai-content a {
  color: #fff !important;
  font-weight: 700 !important;
  text-align:center;
  text-decoration: none !important;
}
.ai-content a:hover {
  text-decoration: none !important;
}
/* Optional: if you can add class="ai-reco" to your final recommendation paragraph */
.ai-content .ai-reco {
  margin-top: 10px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  border: 1px solid #dedede !important;
  border-left: 4px solid #AB1012 !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
}
/* Disclaimer footer */
.ai-analysis-disclaimer {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  color: #555 !important;
  background: #ededed !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 5px;
  text-align: center !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}
.ai-analysis-disclaimer .info-icon {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  text-align: center !important;
  border: 1px solid #777 !important;
  color: #777 !important;
  border-radius: 50% !important;
  font-style: normal !important;
  margin-right: 6px !important;
  font-weight: normal !important;
}
/* Mobile tweaks */
@media (max-width: 600px) {
  .ai-header {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .ai-content {
    font-size: 13px !important;
    padding: 12px !important;
  }
  .ai-analysis-disclaimer {
    font-size: 10px !important;
  }
}
/* ============================================================
   LSB BET PAYOUT CALCULATOR (scoped)
   Theming matched to your AI analysis box header style
   ============================================================ */
.lsb-calc{
  max-width: 600px;
  border-radius: 5px;
  border: 1px solid #cfcfcf;
  border-top: 3px solid #AB1012; /* LSB red accent */
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  margin: 20px auto;
}
/* Header: match ai-header (dark “metal”) */
.lsb-calc__header{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(#404040, #353535);
  border-bottom: 1px solid #000;
}
/* Calc icon (styled to vibe w/ your sparkle filter idea) */
.lsb-calc__header::before{
  content: "💲";
  font-size: 1.15em;
  display: inline-block;
  vertical-align: middle;
  filter: invert(14%) sepia(96%) saturate(7494%) hue-rotate(359deg) brightness(90%) contrast(113%);
  margin-right: -2px;
}
.lsb-calc__title{
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 13px;
}
.lsb-calc__badge{
  margin-left: auto;
  background: #AB1012;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 3px;
  line-height: 1.2;
}
.lsb-calc__body{
  padding: 14px;
  background: linear-gradient(#ffffff, #f6f6f6);
}
.lsb-calc__row{ margin-bottom: 12px; }
/* Tabs */
.lsb-calc__row--tabs{
  display: flex;
  gap: 8px;
}
.lsb-calc__tab{
  appearance: none;
  border: 1px solid #d2d2d2;
  background: #ffffff;
  color: #1f1f1f;
  padding: 8px 10px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
  width: -webkit-fill-available;
}
.lsb-calc__tab:hover{
  border-color: #b8b8b8;
  transform: translateY(-1px);
}
.lsb-calc__tab.is-active{
  border-color: #AB1012;
  box-shadow: 0 0 0 2px rgba(171,16,18,0.12);
}
/* Grid fields */
.lsb-calc__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lsb-calc__grid .full-width {
  grid-column: 1 / -1; /* Makes it span both columns */
}
@media (max-width: 560px){
  .lsb-calc__grid{ grid-template-columns: 1fr; }
}
.lsb-calc__field{
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 4px;
  padding: 10px;
}
.lsb-calc__label{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  color: #2a2a2a;
  margin-bottom: 6px;
}
.lsb-calc__hint{
  margin-top: 6px;
  font-size: 11px;
  color: #666;
}
.lsb-calc__inputWrap{
  display: flex;
  align-items: center;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.lsb-calc__prefix{
  padding: 9px 10px;
  background: #efefef;
  border-right: 1px solid #d2d2d2;
  font-weight: 700;
  color: #333;
  font-size: 13px;
}
.lsb-calc__input{
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
.lsb-calc__inputWrap .lsb-calc__input{
  border: 0;
  border-radius: 0;
}
.lsb-calc__input:focus{
  border-color: #AB1012;
  box-shadow: 0 0 0 2px rgba(171,16,18,0.12);
}
.is-hidden{ display: none !important; }
/* Buttons */
.lsb-calc__actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  width: -webkit-fill-available;
}
.lsb-calc__btn{
  line-height: 1.5 !important;
  text-align: center !important;
  appearance: none;
  border: 1px solid #7b0b0c;
  background: linear-gradient(#c01416, #8f0d0f);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  transition: transform 0.08s ease, filter 0.12s ease;
  width: -webkit-fill-available;
}
.lsb-calc__btn:hover{ filter: brightness(1.03); }
.lsb-calc__btn:active{ transform: translateY(1px); }
.lsb-calc__btn--ghost{
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #cfcfcf;
  box-shadow: none;
}
/* Results */
.lsb-calc__results{
  margin-top: 14px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.lsb-calc__result{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid #ededed;
}
.lsb-calc__result:first-child{ border-top: 0; }
.lsb-calc__resultLabel{
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  color: #333;
}
.lsb-calc__resultValue{
  font-weight: 800;
  font-size: 14px;
  color: #111;
}
.lsb-calc__resultValue.is-positive{ color: #0f5f1d; }
.lsb-calc__resultValue.is-warn{ color: #AB1012; }
/* Footer note */
.lsb-calc__footer{
  margin-top: 10px;
  background: #ededed;
  border-top: 1px solid #d6d6d6;
  padding: 8px 10px;
  border-radius: 4px;
}
.lsb-calc__footNote{
  display: block;
  font-size: 11px;
  color: #555;
  margin: auto;
  text-align: center;
}
.lsb-calc__infoIcon{
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border: 1px solid #777;
  color: #777;
  border-radius: 50%;
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
}
/* Bet actions */
.lsb-bet-actions {
  margin-top: 10px;
}