/* Full in-page Sportsbook experience, mounted inside the REAL ply247.com
   homepage document (never a separate page/navigation) so the site's own
   real header stays fixed above it and the real footer sits naturally
   below it in normal document flow - see sports-page.js for how this is
   mounted/toggled. */
#plysb-page { max-width: 900px; margin: 0 auto; padding: 0 0 30px; }

#plysb-page .plysb-strip { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(90deg,#0f3d24,#16a34a); border-radius: 0 0 12px 12px; margin-bottom: 10px; }
#plysb-page .plysb-strip .nm { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .4px; flex: 1; }
#plysb-page .plysb-strip .mybets { background: rgba(255,255,255,.18); color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }

#plysb-page .plysb-tabs { display: flex; gap: 8px; padding: 0 12px 10px; overflow-x: auto; }
#plysb-page .plysb-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 8px; background: #1d212b; color: #c7cad1; cursor: pointer; font-size: 13px; white-space: nowrap; }
#plysb-page .plysb-tab.active { background: linear-gradient(90deg,#0f3d24,#16a34a); color: #fff; font-weight: 700; }

#plysb-page .plysb-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
#plysb-page .plysb-mcard { background: #171a21; border: 1px solid #262a33; border-radius: 10px; padding: 10px 12px; cursor: pointer; text-decoration: none; color: inherit; display: block; }
#plysb-page .plysb-mcard:active { border-color: #22c55e; }
#plysb-page .plysb-mcard .comp { font-size: 11px; color: #8a8f98; margin-bottom: 4px; }
#plysb-page .plysb-mcard .teams { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
#plysb-page .plysb-mcard .teams img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: #262a33; }
#plysb-page .plysb-mcard .meta { font-size: 11px; color: #9ca3af; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; }
#plysb-page .plysb-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; margin-right: 5px; animation: plysbPulse2 1.4s infinite; }
@keyframes plysbPulse2 { 0%,100%{opacity:1} 50%{opacity:.35} }

#plysb-page .detail-wrap { padding: 0 12px; }
#plysb-page .back-link { display: inline-flex; align-items: center; gap: 6px; color: #9ca3af; text-decoration: none; font-size: 13px; margin-bottom: 10px; cursor: pointer; }
#plysb-page .match-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
#plysb-page .match-head .teams-v { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #e8eaed; }
#plysb-page .match-head .teams-v img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #262a33; }
#plysb-page .match-head .vs { color: #8a8f98; font-weight: 400; font-size: 12px; }
#plysb-page .live-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(239,68,68,.18); color: #f87171; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 20px; letter-spacing: .5px; }
#plysb-page .live-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: plysbPulse2 1.4s infinite; }
#plysb-page .video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
#plysb-page .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
#plysb-page .result-banner { background: #22c55e; color: #08130b; font-weight: 800; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; }
#plysb-page .liq-summary { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #12141a; border: 1px solid #262a33; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 11.5px; color: #c7cad1; }
#plysb-page .liq-summary b { color: #e8eaed; }
#plysb-page .liq-bar { flex: 1 1 120px; min-width: 100px; height: 9px; border-radius: 5px; overflow: hidden; display: flex; background: #21252f; }
#plysb-page .liq-bar .back-seg { background: #60a5fa; }
#plysb-page .liq-bar .lay-seg { background: #f472b6; }
#plysb-page .liq-legend { display: flex; gap: 8px; font-size: 10.5px; }
#plysb-page .liq-legend span { display: inline-flex; align-items: center; gap: 4px; }
#plysb-page .liq-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
#plysb-page .section-title { font-size: 12px; font-weight: 800; color: #9ca3af; text-transform: uppercase; letter-spacing: .6px; margin: 16px 0 8px; }
#plysb-page .market { background: #171a21; border: 1px solid #262a33; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
#plysb-page .market .head { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: #1d212b; font-weight: 700; font-size: 13px; gap: 8px; flex-wrap: wrap; color: #e8eaed; }
#plysb-page .market .head .max { font-size: 10.5px; color: #8a8f98; font-weight: 400; }
#plysb-page table.odds { width: 100%; border-collapse: collapse; }
#plysb-page table.odds td { padding: 8px 6px; font-size: 12.5px; border-top: 1px solid #21252f; cursor: pointer; color: #e8eaed; }
#plysb-page table.odds td.runner { width: 38%; font-weight: 600; cursor: default; }
#plysb-page td.back { background: rgba(96,165,250,.16); text-align: center; }
#plysb-page td.lay { background: rgba(244,114,182,.16); text-align: center; }
#plysb-page td.back:active, #plysb-page td.lay:active { filter: brightness(1.3); }
#plysb-page td .price { font-weight: 700; display: block; }
#plysb-page td .size { font-size: 9px; color: #9ca3af; }
#plysb-page .toss-row { display: flex; gap: 8px; padding: 10px 12px; flex-wrap: wrap; }
#plysb-page .toss-opt { flex: 1 1 130px; background: rgba(96,165,250,.14); border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; }
#plysb-page .toss-opt .nm { font-size: 12.5px; font-weight: 700; margin-bottom: 4px; color: #e8eaed; }
#plysb-page .toss-opt .pr { font-size: 15px; font-weight: 800; color: #93c5fd; }
#plysb-page .fancy-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-top: 1px solid #21252f; font-size: 12.5px; gap: 8px; }
#plysb-page .fancy-row:first-child { border-top: none; }
#plysb-page .fancy-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8eaed; }
#plysb-page .fancy-odds { display: flex; gap: 6px; flex: 0 0 auto; }
#plysb-page .fancy-odds .no { background: rgba(244,114,182,.25); }
#plysb-page .fancy-odds .yes { background: rgba(96,165,250,.25); }
#plysb-page .fancy-odds div { padding: 5px 8px; border-radius: 6px; text-align: center; min-width: 50px; font-size: 11px; cursor: pointer; }
#plysb-page .fancy-odds .ln { display: block; font-weight: 800; font-size: 12px; color: #e8eaed; }
#plysb-page .fancy-odds .pr { display: block; font-size: 8px; opacity: .75; }
#plysb-page .collapsible-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; background: #1d212b; cursor: pointer; font-weight: 800; font-size: 13px; color: #e8eaed; }
#plysb-page .collapsible-head .arrow { transition: transform .15s; }
#plysb-page .collapsible-head.open .arrow { transform: rotate(90deg); }
#plysb-page .prem-tabs { display: flex; gap: 6px; padding: 8px 10px; background: #15181f; flex-wrap: wrap; }
#plysb-page .prem-tab { padding: 5px 11px; border-radius: 14px; background: #21252f; color: #c7cad1; font-size: 10.5px; cursor: pointer; }
#plysb-page .prem-tab.active { background: linear-gradient(90deg,#0f3d24,#16a34a); color: #fff; font-weight: 700; }
#plysb-page .prem-body { max-height: 440px; overflow-y: auto; }
#plysb-page .empty { color: #8a8f98; padding: 24px; text-align: center; font-size: 13px; }
#plysb-page .loading { color: #8a8f98; padding: 18px; text-align: center; font-size: 13px; }

/* Bet slip - bottom sheet, never a side column, so nothing can overflow the
   viewport width on any screen size. */
#plysb-betsheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2147483000; display: none; }
#plysb-betsheet-backdrop.open { display: block; }
#plysb-betsheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: 900px; margin: 0 auto; background: #171a21; border: 1px solid #262a33; border-bottom: none; border-radius: 14px 14px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 2147483000; transform: translateY(110%); transition: transform .22s ease; box-shadow: 0 -6px 24px rgba(0,0,0,.4); }
#plysb-betsheet.open { transform: translateY(0); }
#plysb-betsheet .bs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#plysb-betsheet .bs-head b { font-size: 14px; color: #e8eaed; }
#plysb-betsheet .bs-close { background: #262a33; color: #e8eaed; border: none; border-radius: 6px; width: 28px; height: 28px; font-size: 16px; cursor: pointer; }
#plysb-betsheet .sel { font-size: 13px; margin-bottom: 10px; color: #c7cad1; }
#plysb-betsheet .sel b { display: block; font-size: 15px; color: #e8eaed; }
#plysb-betsheet input[type=number] { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #262a33; background: #0f1115; color: #fff; margin-bottom: 8px; font-size: 15px; box-sizing: border-box; }
#plysb-betsheet .quick { display: flex; gap: 6px; margin-bottom: 10px; }
#plysb-betsheet .quick button { flex: 1; background: #262a33; color: #e8eaed; border: none; border-radius: 6px; padding: 8px; font-size: 12px; cursor: pointer; }
#plysb-betsheet .place { width: 100%; background: linear-gradient(90deg,#0f3d24,#16a34a); color: #fff; border: none; border-radius: 8px; padding: 12px; font-weight: 800; cursor: pointer; font-size: 14px; }
#plysb-betsheet .liab { font-size: 11px; color: #9ca3af; margin-bottom: 8px; }
#plysb-betsheet .msg { font-size: 12px; margin-top: 8px; padding: 8px; border-radius: 6px; }
#plysb-betsheet .msg.ok { background: rgba(34,197,94,.2); color: #4ade80; }
#plysb-betsheet .msg.err { background: rgba(239,68,68,.2); color: #f87171; }
#plysb-betsheet .guest-cta { font-size: 12.5px; color: #c7cad1; text-align: center; padding: 6px 0 2px; }
#plysb-betsheet .guest-cta a { display: inline-block; margin-top: 8px; background: linear-gradient(90deg,#0f3d24,#16a34a); color: #fff; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-weight: 800; font-size: 12.5px; }

#plysb-mybets-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 2147483000; display: none; }
#plysb-mybets-backdrop.open { display: block; }
#plysb-mybets { position: fixed; left: 0; right: 0; bottom: 0; max-width: 900px; margin: 0 auto; max-height: 70vh; max-height: 70svh; overflow-y: auto; background: #171a21; border: 1px solid #262a33; border-bottom: none; border-radius: 14px 14px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); z-index: 2147483000; transform: translateY(110%); transition: transform .22s ease; }
#plysb-mybets.open { transform: translateY(0); }
#plysb-mybets .bs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#plysb-mybets .bs-head b { font-size: 14px; color: #e8eaed; }
#plysb-mybets .bs-close { background: #262a33; color: #e8eaed; border: none; border-radius: 6px; width: 28px; height: 28px; font-size: 16px; cursor: pointer; }
#plysb-mybets .bet-row { display: flex; justify-content: space-between; font-size: 12px; padding: 9px 0; border-top: 1px solid #21252f; color: #c7cad1; }
#plysb-mybets .bet-row:first-child { border-top: none; }
#plysb-mybets .st { font-weight: 700; }
#plysb-mybets .st.pending { color: #facc15; }
#plysb-mybets .st.won { color: #4ade80; }
#plysb-mybets .st.lost { color: #f87171; }

@media (max-width: 480px) {
  #plysb-page .plysb-strip { padding: 10px 12px; }
  #plysb-page table.odds td { padding: 7px 4px; font-size: 11.5px; }
}

/* Shared "Sportsbook" pill button + icon ring, used both by
   sports-page.js (native /sports page injection) and
   sports-home-widget.js (homepage title row) so both look identical. */
.plysb-icon-ring { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(255,255,255,.12); flex: 0 0 auto; }
.plysb-icon-ring img { width: 11px; height: 11px; display: block; }
.plysb-inline-sb-btn, .plysb-inline-sb-btn:visited { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(90deg,#0f3d24,#16a34a); color: #fff; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 20px; text-decoration: none; white-space: nowrap; z-index: 50; }
.plysb-inline-sb-btn:active { filter: brightness(1.15); }