/* Polish layer for the user portal: motion, touch feel and mobile fit.
   Loaded after theme-light.css. Remove the <link> in index.html to get the previous look back. */

:root {
  --p-ease: cubic-bezier(.2, .8, .2, 1);
  --p-fast: .14s;
  --p-med: .24s;
  --p-ring: 0 0 0 3px rgba(47, 91, 234, .35);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; }

/* ---------- Motion ---------- */
/* Routed pages fade in. Opacity only: a transform here would turn the page into the
   containing block for the fixed header / bet slip and break their positioning. */
/* "backwards", not "both": a fill-forwards opacity animation leaves the page in its own stacking context, which
   traps the header's modals (age confirmation, login) beneath the body-level backdrop, so Confirm cannot be clicked. */
router-outlet + * { animation: p-page-in var(--p-med) var(--p-ease) backwards; }
@keyframes p-page-in { from { opacity: 0; } to { opacity: 1; } }

a, button, .btn, .menu-item, .navbar-item, .items, .form-control, .form-select, input, select {
  transition: background-color var(--p-med) var(--p-ease), color var(--p-med) var(--p-ease),
    border-color var(--p-med) var(--p-ease), box-shadow var(--p-med) var(--p-ease),
    transform var(--p-fast) var(--p-ease), opacity var(--p-med) var(--p-ease);
}
a, button, .btn, .items, .menu-item, nav.mobile-footer-menu li { touch-action: manipulation; }
.btn:active, button:active { transform: scale(.98); }
a.back:active, a.lay:active { transform: scale(.96); }

/* Odds changes keep the original blink: SparkBack (yellow) / SparkLay (cyan) flash from the app's own styles. */

/* Keyboard focus is visible everywhere; mouse and touch focus stays quiet. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--p-ring); border-radius: 6px; }

/* ---------- Fixes ---------- */
/* Tips & Previews is switched off (desktop tab is tagged by polish.js, phone strip by id). */
.p-nav-hidden, #exchBar2 { display: none !important; }

/* "In-Play" chip broke mid-word on narrow event rows. */
.in_play { white-space: nowrap; }

/* Suspended overlay on bookmaker rows: its label carried a 120px line-height meant for a
   taller box, which pushed the text out of the row. Centre it in the overlay instead. */
.suspend-WinSPort-external { inset: 0; width: auto !important; background: rgba(36, 58, 72, .9) !important; }
.suspend-WinSPort-external span, .suspend-WinSPort-external .stats-text { line-height: 1.2 !important; opacity: 1 !important; color: #fff !important; font-weight: 600; letter-spacing: .3px; }

/* Logout on the account screen: the row is pale red but its label was white-on-pale. */
.logout-btn a.logout, .logout-btn .logout-spn, .logout-btn .logout i { color: #b91c1c !important; font-weight: 700; letter-spacing: .4px; }
.logout-btn:active { background: #fee2e2 !important; }
/* The header dropdown's Logout is a real button. */
.drp-logout .logout-btn { font-weight: 700; letter-spacing: .4px; }

/* Team kit images come from a third-party host; polish.js marks the ones that fail so the
   score card does not show broken-image boxes. */
.team-kit.p-img-failed { display: none !important; }

/* Streaming panel: with no stream configured the player renders nothing at all. */
app-video-simple:empty {
  display: block; position: relative; aspect-ratio: 16 / 9; min-height: 180px; width: 100%;
  background: radial-gradient(120% 120% at 50% 0%, #1b2438, #0a0e17); color: #cbd5e1; text-align: center;
}
app-video-simple:empty::before, app-video-simple:empty::after {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 24px; font-size: 14px; line-height: 1.5;
}
app-video-simple:empty::before { content: "Connecting to stream\2026"; animation: p-fade-out .3s ease 2.4s forwards; }
app-video-simple:empty::after { content: "Live stream isn\2019t available for this event yet."; opacity: 0; animation: p-fade-in .4s ease 2.6s forwards; }
@keyframes p-fade-out { to { opacity: 0; visibility: hidden; } }
@keyframes p-fade-in { to { opacity: 1; } }
app-video-simple iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: #000; }

/* Empty prices. The feed reports "no price" as 0 / 0.0, which read as real odds. polish.js tags
   such cells; show a dash instead (display only: Angular still owns the text underneath). */
a.p-nil, .p-nil { position: relative; }
.p-nil.p-nil.p-nil, .p-nil.p-nil.p-nil * { color: transparent !important; text-shadow: none !important; }
.p-nil.p-nil::after { content: "\2013"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(20, 24, 31, .35) !important; font-weight: 600; font-size: 13px; }
.fancy-info { gap: 6px; }
.fancy-info dt { margin-right: 0 !important; }
.fancy-info dd { margin-left: 0 !important; }
.mc-sc__status-text { white-space: normal !important; overflow: visible !important; line-height: 1.35; padding: 0 10px 8px; }
/* The score card has a fixed height and clips; a wrapped summary line was cut off. */
.cricket.mc-sc, .match-centre__score-and-events, .pricing-page-top__match-centre { height: auto !important; min-height: 135px; overflow: visible !important; }
::selection { background: rgba(47, 91, 234, .2); }

/* Dropdown menus ease in rather than popping. */
.dropdown-menu.show { animation: p-pop .16s var(--p-ease) both; transform-origin: top right; }
@keyframes p-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Desktop ---------- */
@media (min-width: 992px) {
  /* Slim, quiet scrollbars. */
  * { scrollbar-width: thin; scrollbar-color: #c9cfd9 transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-thumb { background: #c9cfd9; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
  *::-webkit-scrollbar-thumb:hover { background: #aab2c0; background-clip: content-box; border: 2px solid transparent; }

  /* Header: logo and controls share one vertical centre line. */
  .before-login-items, .Myaccount-after-login { align-items: center; }
  .site-logo-con { display: flex; align-items: center; }
  .site-logo-con .site-logo { max-height: 44px; width: auto; }
  #searchiconDesktopID { font-size: 17px !important; color: var(--t-ink-2); cursor: pointer; }
  #searchiconDesktopID:hover { color: var(--t-accent); }

  app-header-nav a.navbar-item { font-size: 14px !important; }
  app-header-nav .settings a { font-size: 13.5px; }

  /* Left rail: a plain list with a quiet chevron instead of the blue arrow boxes. */
  .sidebar { background: var(--t-surface); }
  .sidebar .nav-dropdown-toggle { display: flex !important; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px !important; font-size: 14px; color: var(--t-ink-2) !important; }
  .sidebar .nav-dropdown-toggle:hover { background: var(--t-accent-soft); color: var(--t-accent) !important; }
  .sidebar .nav-dropdown-toggle::before {
    content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px;
    position: static !important; float: none !important; order: 2; width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
    color: var(--t-mute); transform: none; transition: transform var(--p-med) var(--p-ease), color var(--p-med) var(--p-ease);
  }
  .sidebar .nav-dropdown-toggle:hover::before { color: var(--t-accent); transform: translateX(2px); }
  .top-head-sport a.path-back, .top-head-sport a.path-back i { color: var(--t-mute) !important; }

  /* Right rail header. */
  .sidebarright .card-header { padding: 12px 14px !important; font-size: 13px; }
  .sidebarright .card-body { padding: 10px 12px; }

  /* Highlights / in-play lists: calmer rows. */
  .dashboard-custom-table tbody td { padding-top: 7px !important; padding-bottom: 7px !important; }
  .game-highlight-wrap h3 { font-size: 14px !important; }

  /* Report cards and tables. */
  .card { border-radius: var(--t-radius); }
  .card-header { font-weight: 700; }

  /* The phone-style account menu is also reachable on desktop; its sizes are in vw, which made
     the username and Logout 60px tall and the arrows oversized boxes. Make it a tidy column. */
  app-account > .col-md-12, app-account .containerr { max-width: 520px; margin-left: auto; margin-right: auto; }
  app-account .exchange-heading { font-size: 20px !important; font-weight: 700; padding: 20px 4px 8px !important; margin: 0; display: flex; align-items: center; }
  app-account .exchange-heading i { font-size: 28px !important; }
  app-account .containerr { margin-top: 8px; margin-bottom: 24px; background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow); overflow: hidden; }
  app-account .account-nav { margin: 0 !important; padding: 0 !important; list-style: none; }
  app-account .account-tabs:last-child { border-bottom: 0; }
  app-account .account-tabs { display: flex !important; align-items: center; justify-content: space-between; padding: 14px 18px !important; height: auto !important; cursor: pointer; border-bottom: 1px solid var(--t-line); }
  app-account .account-tabs:hover { background: var(--t-accent-soft); }
  app-account .tab-name { font-size: 14.5px !important; font-weight: 600; }
  app-account .right-arroww, app-account .right-arroww span { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
  app-account .right-arroww i { font-size: 16px !important; color: var(--t-mute) !important; }
  app-account .logout-btn { width: 100% !important; height: auto !important; padding: 14px 0 !important; border-radius: 0 !important; margin: 0 !important; text-align: center; border-top: 1px solid var(--t-line) !important; }
  app-account .logout-btn a.logout, app-account .logout-btn .logout-spn { font-size: 15px !important; height: auto !important; line-height: 1.2 !important; }
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; }
  body { -webkit-tap-highlight-color: transparent; }

  /* Score card: header labels and values were sized differently, so columns drifted and the
     overs figure ("46.4/50") was clipped. One width per column for both rows. */
  .mc-sc__score-header-icons, .score-item.pos0 { box-sizing: border-box; overflow: visible !important; white-space: nowrap; text-overflow: clip; text-align: right !important; }
  /* Same width for the label and its value (!important: the bundle sets min-/max-width too).
     The header's 4s / 6s / WIDES cells also carry .score, so list them after it. */
  .mc-sc__score-header-icons.score, .score-item.score { width: 40px !important; min-width: 40px !important; max-width: 40px !important; }
  .mc-sc__score-header-icons.overs, .score-item.overs { width: 52px !important; min-width: 52px !important; max-width: 52px !important; }
  .mc-sc__score-header-icons.runrate, .score-item.runrate { width: 34px !important; min-width: 34px !important; max-width: 34px !important; }
  .mc-sc__score-header-icons.four-head, .mc-sc__score-header-icons.six-head, .score-item.fours, .score-item.sixes { width: 26px !important; min-width: 26px !important; max-width: 26px !important; }
  .mc-sc__score-header-icons.wide-head, .score-item.wides { width: 34px !important; min-width: 34px !important; max-width: 34px !important; }
  .mc-sc__score-header-icons { font-size: 10px !important; }
  /* "WIDES" is wider than its column and ran into 6s; show the short form. */
  .mc-sc__score-header-icons.wide-head { font-size: 0 !important; }
  .mc-sc__score-header-icons.wide-head::after { content: "WD"; font-size: 10px; }
  .mc-sc__tm-dtl, .mc-sc__ctnr { max-width: 100%; }

  /* Tables that scroll sideways show a soft edge where more content is hidden. */
  .dataTables_wrapper, .table-responsive {
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 36px 100% no-repeat local,
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0)) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0)) right center / 12px 100% no-repeat scroll;
    overscroll-behavior-x: contain;
  }

  /* Horizontal chip / tab strips: momentum scroll, no visible scrollbar, snap to chips. */
  .marketDetailsList, .mobile-men .show-this, .mobile-men ul { scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .marketDetailsList::-webkit-scrollbar, .mobile-men .show-this::-webkit-scrollbar, .mobile-men ul::-webkit-scrollbar { display: none; }
  .marketDetailsListItem, .mobile-men .menu-item { scroll-snap-align: start; }

  /* Bottom nav: even columns and a soft press state. */
  nav.mobile-footer-menu li { transition: background-color var(--p-med) var(--p-ease); }
  nav.mobile-footer-menu li:active { background: rgba(47, 91, 234, .08); }
}

/* ---------- Tablets ----------
   The compiled app keeps its phone layout up to 992px but sizes type and icons in vw, so at
   768-991px match names hit 33px and the footer nav is over 100px tall. Cap them, and give
   this range the same flat footer and bottom padding the phone block has. */
@media (min-width: 768px) and (max-width: 991.98px) {
  html, body { overflow-x: hidden; }
  .content { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }

  nav.mobile-footer-menu { height: auto !important; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; background: var(--t-surface) !important; border-top: 1px solid var(--t-line); box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); }
  nav.mobile-footer-menu li { height: auto !important; background: transparent !important; box-shadow: none !important; }
  nav.mobile-footer-menu li::before, nav.mobile-footer-menu li::after,
  nav.mobile-footer-menu li a::before, nav.mobile-footer-menu li a::after { display: none !important; }
  nav.mobile-footer-menu a { height: auto !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0 6px; font-size: 12px !important; font-weight: 600; color: var(--t-mute) !important; }
  nav.mobile-footer-menu a.active-link, nav.mobile-footer-menu a.active { color: var(--t-accent) !important; }
  nav.mobile-footer-menu svg, nav.mobile-footer-menu [class*="icon-"] { width: 28px !important; height: 28px !important; margin: 0 auto 2px !important; }

  td.td-event-name a.match-name, td.td-event-name .match-name span { font-size: 16px !important; line-height: 1.35; }
  td.td-event-name { padding-left: 16px !important; }
  .cric-txt { font-size: 16px !important; left: 0 !important; }
  .game-highlight-wrap { font-size: 16px !important; height: auto !important; min-height: 44px; }

  /* Home / in-play lists sat in a 260px inner scroller, leaving a clipped list and empty page below it. */
  .mobile-width.scrollHeight { max-height: none !important; overflow: visible !important; }

  .marketDetailsList { height: auto !important; bottom: 0 !important; padding: 8px 12px; }
  .marketDetailsListItem { font-size: 14px !important; height: auto !important; padding: 8px 18px !important; }
}


/* ---------- Prohibited betting ----------
   Same look as the board's own "Suspended" cover. The overlay is a pseudo-element, so a tap on
   it lands on the container, never on the odds beneath. */
.p-prohibited { position: relative !important; }
.p-prohibited::after {
  content: "Bets prohibited"; position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
  background: rgba(36, 58, 72, .9); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .3px; cursor: not-allowed;
  animation: p-fade-in-quick .2s ease both;
}
@keyframes p-fade-in-quick { from { opacity: 0; } to { opacity: 1; } }

/* Fancy / sportsbook panels: no per-row ids on the page, so the whole family is shut. */
.p-banner { background: rgba(36, 58, 72, .9); color: #fff; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .3px; padding: 11px 12px; }
.p-off-fancy .fancy-card, .p-off-fancy .fancybooktable { pointer-events: none; opacity: .35; filter: grayscale(.6); }
.p-off-sport .sportbook-back, .p-off-sport .sportbook-lay, .p-off-sport [class*="SportBook"] { pointer-events: none; opacity: .35; filter: grayscale(.6); }

/* Match lists: the odds cells become one slate bar carrying the message. */
tr.p-row-prohibited td.count { background: rgba(36, 58, 72, .9) !important; position: relative; }
tr.p-row-prohibited td.count > * { visibility: hidden; }
tr.p-row-prohibited td.count.custom-width-center::after {
  content: "Bets prohibited"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .3px; white-space: nowrap;
}
@media (max-width: 991.98px) {
  /* Phone / tablet rows show no odds columns, so say it beside the name instead. */
  tr.p-row-prohibited td.td-event-name .match-name { opacity: .75; }
  tr.p-row-prohibited td.td-event-name::after {
    content: "Bets prohibited"; display: inline-block; margin: 4px 0 0 0; padding: 1px 8px; border-radius: 999px;
    background: rgba(36, 58, 72, .9); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .2px;
  }
}

/* ---------- Respect the OS setting ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}