/* The fixed site banner's height. `.Header` is position:fixed, so anything that
   pins to the top of the viewport has to clear it -- at top:0 a sticky element
   pins UNDERNEATH the banner and its upper half is invisible.
   `.Main` pushes content clear by the same amount: the .Header-in bar alone,
   71px on desktop and 52px on mobile. */
:root { --site-header: 71px; }
@media (max-width: 991px) {
  :root { --site-header: 52px; }
}

/*! formalize.css | MIT License | github.com/interacthings/formalize */
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

a:active, a:focus, a:hover {
  outline: none;
  color: currentColor;
  text-decoration: none;
}

/* `color: currentColor` resolves to the INHERITED colour, so on these state
   selectors it repainted any styled button in its parent's colour -- and
   `button:focus` (0,1,1) outranks a plain class like .Match-item-odd-button
   (0,1,0). A button kept focus after being clicked, so an odd you selected then
   unselected stayed dimmed. The reset belongs on the bare element, where it
   loses to any class that sets a colour. */
button {
  color: currentColor;
}

button:active, button:focus, button:hover {
  outline: none;
  text-decoration: none;
}

img {
  vertical-align: middle;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre, fieldset, ul, ol, menu, form {
  margin: 0;
}

button, fieldset, iframe {
  border: 0;
}

fieldset, ul, ol, button, menu {
  padding: 0;
}

ol, ul {
  list-style: none;
}

textarea {
  resize: vertical;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 0;
}

body {
  font-family: "urbanist", sans-serif;
  background-color: #030e1e;
}
body .container {
  max-width: 1500px;
  padding-left: 30px;
  padding-right: 30px;
}
/* Scroll lock for the coupon sheet and the mobile menu. Scoped to the
   breakpoint where those are actually modal -- above it the coupon is a
   static sidebar, so locking there froze the page for anyone who opened
   bet history. The breakpoint belongs here, not in JS, because CSS
   re-evaluates it on every resize with no event to miss. */
@media (max-width: 991px) {
  body.over {
    overflow: hidden;
  }
}

.mobile, .mobile_f {
  display: none !important;
}

.swiper-button-prev, .swiper-button-next {
  background-image: none;
  width: clamp(40px, 4vw, 70px);
  height: clamp(40px, 4vw, 70px);
  border-radius: 100%;
  background-color: #f2f0ec;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 500ms;
}
.swiper-button-prev i, .swiper-button-next i {
  transition: all 500ms;
  font-size: clamp(20px, 2vw, 32px);
  color: #000;
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  background-color: black;
}
.swiper-button-prev:hover i, .swiper-button-next:hover i {
  color: #fffdf8;
}

.button {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1.47;
  letter-spacing: 0.28px;
  padding: 10px 22px;
  transition: all 500ms;
  color: #fff;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px 0 rgba(0, 57, 224, 0.2);
}
.button.blue {
  background-color: #0039e0;
}
.button.dark {
  background-color: #22344b;
}
.button i {
  margin-left: 8px;
}
.button:hover {
  color: #fff;
  box-shadow: none;
  transform: scale(0.98);
}

.dropdown-menu {
  box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.2509803922);
  background-color: black;
}
.dropdown-item {
  color: #fffdf8;
  font-size: 13px;
}

.bootstrap-select {
  width: 172px !important;
}
.bootstrap-select .btn {
  padding: 12px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.43;
  color: #b4c2d2;
  transition: all 500ms;
  border-radius: 10px;
  border: solid 2px #22344b;
  background-color: #122136;
}
.bootstrap-select .btn.bs-placeholder {
  color: #b4c2d2;
}
.bootstrap-select .btn.bs-placeholder:focus {
  color: #b4c2d2;
}
.bootstrap-select .btn.bs-placeholder:hover {
  color: #0039e0;
}
.bootstrap-select .btn:after {
  content: "";
  display: inline-block;
  transition: 500ms;
  width: 10px;
  height: 6px;
  border: none;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url(../images/chevron-down.svg);
}
.bootstrap-select .dropdown-menu {
  border-radius: 10px;
  background-color: #030e1e;
}
.bootstrap-select .dropdown-item {
  transition: all 500ms;
}
.bootstrap-select .dropdown-item:hover {
  background-color: #122136;
  color: #fff;
}
.bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:active {
  background-color: #0039e0;
  color: #fff;
}

.btn-light:not([disabled]):not(.disabled).active, .btn-light:not([disabled]):not(.disabled):active, .show > .btn-light.dropdown-toggle {
  background-color: transparent;
  box-shadow: none;
  color: #b4c2d2;
}
.btn-light:not([disabled]):not(.disabled).active:after, .btn-light:not([disabled]):not(.disabled):active:after, .show > .btn-light.dropdown-toggle:after {
  transform: rotate(180deg);
}

.bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
  background-color: transparent;
  box-shadow: none;
  outline: none !important;
  outline-offset: 0 !important;
  color: #b4c2d2;
}

@font-face {
  font-family: "urbanist";
  font-weight: 900;
  src: url(../font/urbanist/Urbanist-Black.ttf);
}
@font-face {
  font-family: "urbanist";
  font-weight: 800;
  src: url(../font/urbanist/Urbanist-ExtraBold.ttf);
}
@font-face {
  font-family: "urbanist";
  font-weight: 700;
  src: url(../font/urbanist/Urbanist-Bold.ttf);
}
@font-face {
  font-family: "urbanist";
  font-weight: 600;
  src: url(../font/urbanist/Urbanist-SemiBold.ttf);
}
@font-face {
  font-family: "urbanist";
  font-weight: 500;
  src: url(../font/urbanist/Urbanist-Medium.ttf);
}
@font-face {
  font-family: "urbanist";
  font-weight: 400;
  src: url(../font/urbanist/Urbanist-Regular.ttf);
}
@font-face {
  font-family: "urbanist";
  font-weight: 300;
  src: url(../font/urbanist/Urbanist-Light.ttf);
}
@font-face {
  font-family: "urbanist";
  font-weight: 100;
  src: url(../font/urbanist/Urbanist-Thin.ttf);
}
.Header {
  z-index: 999;
  left: 0;
  right: 0;
  top: 0;
  position: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 -1px 0 0 #122136;
  background-color: #000814;
}
.Header.active .Header-in, .Header.background .Header-in {
  background-color: black;
}
.Header-top {
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  max-width: 2800px;
  margin: 0 auto;
}
.Header-in {
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.Header-logo img {
  height: 36px;
}
.Header-menu {
  margin-right: 30px;
}
.Header-menu-in {
  display: flex;
  align-items: center;
}
.Header-menu-item {
  transition: all 500ms;
  font-size: 14px;
  color: #fffdf8;
  margin-left: clamp(20px, 2vw, 35px);
  display: flex;
  align-items: center;
  position: relative;
}
.Header-menu-item i {
  color: #a3b0c0;
  font-size: 16px;
  margin-right: 10px;
  transition: all 500ms;
}
.Header-menu-item:hover {
  color: #ff003d;
}
.Header-menu-item:hover i {
  color: #ff003d;
}
.Header-menu-open {
  display: none;
  width: 24px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: 24px 18px;
  background-image: url(../images/menu.svg);
}
.Header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.Footer {
  background-color: #000814;
}
.Footer-top {
  padding-top: clamp(25px, 3vw, 40px);
  padding-bottom: clamp(25px, 3vw, 40px);
}
.Footer-top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Footer-top-left {
  display: flex;
  align-items: center;
}
.Footer-logo {
  margin-right: clamp(20px, 3.5vw, 70px);
}
.Footer-copy h6 {
  background-image: linear-gradient(to right, #ff003d, #0039e0);
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.Footer-copy p {
  font-size: clamp(12px, 0.7vw, 14px);
  font-weight: 600;
  line-height: 1.43;
  color: #b4c2d2;
}
.Footer-menu {
  display: flex;
}
.Footer-menu-item {
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: clamp(12px, 0.7vw, 14px);
  line-height: normal;
  font-weight: 600;
  color: #d7e3ef;
  width: clamp(80px, 6vw, 100px);
  height: clamp(70px, 4.5vw, 80px);
  border-radius: 10px;
  border: 2px solid #16263c;
  background-image: linear-gradient(to bottom, #000814, #000814), linear-gradient(to bottom, #16263c, #0d1b2f);
  transition: all 500ms;
}
.Footer-menu-item i {
  margin-bottom: 8px;
  color: #a3b0c0;
  font-size: 16px;
}
.Footer-menu-item:hover {
  border-color: #ff003d;
  color: white;
}
.Footer-bottom {
  box-shadow: inset 0 1px 0 0 #122136;
  padding-top: clamp(20px, 2vw, 30px);
  padding-bottom: clamp(20px, 2vw, 30px);
}
.Footer-bottom-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Footer-links {
  display: flex;
  align-items: center;
}
.Footer-links-item {
  display: flex;
  align-items: center;
  font-size: clamp(14px, 1vw, 15px);
  font-weight: 600;
  color: #d7e3ef;
  margin-right: clamp(20px, 2vw, 30px);
  transition: all 500ms;
}
.Footer-links-item img {
  margin-right: 10px;
}
.Footer-links-item:hover {
  color: #ff003d;
}
.Footer-social {
  display: flex;
  align-items: center;
}
.Footer-social-item {
  margin-left: 8px;
  width: clamp(40px, 3vw, 48px);
  height: clamp(40px, 3vw, 48px);
  border-radius: 24px;
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.06);
  background-image: linear-gradient(to right, #1d2d43 0%, #122136 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4d1df;
  font-size: clamp(14px, 1.8vw, 20px);
  transition: all 500ms;
}
.Footer-social-item:hover {
  color: #ff003d;
  transition: 500ms;
}

.Main {
  padding-top: var(--site-header);
}
.Main-in {
  padding-top: clamp(40px, 4vw, 80px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.Main-left {
  width: calc(100% - 360px);
}
.Main-right {
  width: 345px;
}

.border {
  border-radius: 10px;
  border: solid 2px #22344b;
  background-color: #122136;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4d1df;
}

.Match-video {
  background-color: #0d1b2f;
  border-radius: 16px;
  position: relative;
}
.Match-video-head-in {
  padding: 16px 24px;
  box-shadow: inset 0 -1px 0 0 #22344b;
  background-image: linear-gradient(to bottom, #16263c, #0d1b2f);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.Match-video-head .border {
  padding: 8px 12px;
  font-size: 12px;
  margin-left: 4px;
}
.Match-video-head-left {
  display: flex;
  align-items: center;
}
.Match-video-head-back {
  margin-right: 20px;
}
.Match-video-head-back i {
  font-size: 12px;
  color: #c4d1df;
}
.Match-video-head h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: #fff;
}
.Match-video-body {
  padding: 24px;
}
.Match-video-body-content {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* 16:9 instead of a fixed 488px. A pixel height only matches the video's
     ratio at exactly one width (870px), so any other viewport left the video
     overflowing the box and the betting panel drawing on top of it. */
  width: 100%;
  aspect-ratio: 16/9;
  max-width: 870px;
  overflow: hidden;
  border-radius: 12px;
  border: solid 2px rgba(255, 255, 255, 0.12);
  margin-left: auto;
  margin-right: auto;
}
/* The stage is the positioning context the Pixi overlay is absolute against,
   and it must carry a real height or the player's height:100% resolves to auto
   and the video sizes itself from its intrinsic ratio, ignoring the box. */
.Match-video-stage {
  position: relative;
  width: 100%;
  height: 100%;
}
.Match-video-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-size: 16px;
  color: #b4c2d2;
}
/* A fullscreen element is forced to fill the screen by the UA stylesheet, which
   discards the 16:9 above. The video still letterboxes itself, so the stage must
   letterbox with it or Pixi stretches over the whole screen. */
.Match-video-body-content:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}
.Match-video-body-content:fullscreen .Match-video-stage {
  width: min(100%, calc(100vh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
}
.Match-head {
  padding: 13px 24px;
  padding-right: 0;
  border-radius: 10px;
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.06);
  background-color: #0d1b2f;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Match-head-left {
  display: flex;
  align-items: center;
}
.Match-head-right {
  display: flex;
  align-items: center;
}
.Match-head-right span {
  font-weight: bold;
  line-height: 1.33;
  color: #b4c2d2;
  text-align: center;
  display: block;
}
.Match-head-type-odd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}
.Match-head-type-odd span {
  font-size: 14px;
  width: calc(33.33% - 3px);
}
.Match-head-type-label {
  font-size: 12px;
}
.Match-head-type-other span {
  font-size: 14px;
}
.Match-group {
  margin-left: 20px;
  width: 50%;
  max-width: 224px;
}
.Match-group-other {
  width: 52px;
  margin-left: 20px;
  margin-right: 24px;
  display: flex;
  align-items: center;
}
.Match-group-left {
  width: 38%;
}
.Match-group-right {
  width: 62%;
  justify-content: flex-end;
}
.Match-item {
  margin-top: 8px;
}
/* Pinned while its own markets scroll past. `.Match-item` is the containing
   block, so each header holds only for as long as that match is on screen and
   releases at its own bottom -- an expanded match runs well over a screen, and
   without this the teams are gone by the time you reach 4.5 Gol Alt/Ust.
   The gradient is opaque, so the odds pass underneath rather than through. */
.Match-item-in {
  position: sticky;
  top: var(--site-header);
  z-index: 3;
  display: flex;
  align-items: stretch;
  /* 44px odd button + 24px padding + 4px border. Locks every header to
     one height so the date band cannot follow a short or tall row. */
  min-height: 72px;
  border-radius: 10px;
  border: solid 2px #22344b;
  background-image: linear-gradient(to bottom, #071426, #071426), linear-gradient(to bottom, #1d2d43, #122136);
}
.Match-item-info {
  display: flex;
  align-items: stretch;
}
.Match-item-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90px;
  margin-right: 20px;
  padding-left: 24px;
  flex-shrink: 0;
  align-self: stretch;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  background-image: linear-gradient(to bottom, #122136, #0d1b2f);
}
.Match-item-date span {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.33;
  color: #b4c2d2;
}
.Match-item-date p {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  color: #b4c2d2;
}
.Match-item-teams {
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}
.Match-item-teams-flag {
  display: flex;
  align-items: center;
}
.Match-item-teams-flag-item {
  margin-right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: solid 2px #22344b;
  background-color: #16263c;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Was an unstyled wrapper; it holds the names AND the final score now, so it
   has to be a row for the score to sit at its end. */
.Match-item-teams-in {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}
/* Same 1.25 line-height as the names, so the two numbers sit on their lines. */
.Match-item-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  padding-left: 12px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.25;
  color: #e6edf5;
  font-variant-numeric: tabular-nums;
}

/* Home above away. Two lines at 1.25 come to 37.5px, which still sits inside
   the 40px crest beside them, so the row does not grow. */
.Match-item-teams-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.Match-item-teams-name {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.25;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Match-item-teams-id {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.33;
  color: #b4c2d2;
}
.Match-item-odd {
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}
.Match-item-odd-content {
  width: calc(100% - 90px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.Match-item-odd-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Match-item-odd-button {
  height: 44px;
  background-color: transparent;
  width: calc(33.33% - 3px);
  border-radius: 10px;
  border: solid 2px #22344b;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #8f9dae;
  transition: all 500ms;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.Match-item-odd-button:hover {
  color: white;
  background-color: #0039e0;
  border-color: #0039e0;
}
.Match-item-odd-button.active {
  background-color: #0039e0;
  border-color: #0039e0;
  color: white;
}
.Match-item-odd-button.disabled {
  pointer-events: none;
}
/* The outcome the match actually produced. Finished rows are always
   `.disabled`, so this needs the same specificity to land. */
.Match-item-odd-button.won,
.Match-item-odd-button.disabled.won {
  background-color: #12351f;
  border-color: #2e9e51;
  color: #5ddb8a;
}
.Match-item-odd-button.disabled:after {
  content: "";
  display: inline-block;
  transition: 500ms;
  width: 22px;
  height: 22px;
  border-radius: 12px;
  border: solid 2px #22344b;
  background-color: #22344b;
  background-repeat: no-repeat;
  background-size: 10px 12px;
  background-position: center;
  background-image: url(../images/lock.svg);
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(4px) translateY(-4px);
  z-index: -1;
}
.Match-item-open {
  width: 52px;
  height: 44px;
  border-radius: 8px;
  border: solid 2px rgba(0, 234, 255, 0.2);
  background-color: #071426;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: center;
  background-image: url(../images/icon-add.svg);
  cursor: pointer;
  transition: all 500ms;
}
.Match-item-open:hover {
  transform: scale(0.96);
  border-color: #00eaff;
}
.Match-item-open[aria-expanded=true] {
  background-color: #00eaff;
  background-image: url(../images/icon-minus.svg);
}
.Match-item.live .Match-item-in {
  border-image-source: linear-gradient(to bottom, #ff7e15, #ff003d);
  background-image: linear-gradient(to bottom, #071426, #071426), linear-gradient(to bottom, #ff7e15, #ff003d);
  background-origin: border-box;
  background-clip: content-box, border-box;
  border-image-slice: 0;
}
.Match-item.live .Match-item-date {
  background-image: linear-gradient(to bottom, #ff7e15, #ff003d);
}
.Match-item.live .Match-item-date p, .Match-item.live .Match-item-date span {
  color: #fff;
}
.Match-item.future .Match-item-date p {
  color: #00eaff;
}
.Match-detail-item {
  border-radius: 8px;
  border: solid 1px #22344b;
  background-image: linear-gradient(to bottom, #071426, #071426), linear-gradient(to bottom, #1d2d43, #122136);
  margin-top: 5px;
}
.Match-detail-button {
  height: 36px;
  padding-left: 14px;
  padding-right: 14px;
  background-color: #16263c;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  width: 100%;
  text-align: left;
  transition: all 500ms;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 8px;
}
.Match-detail-button:hover, .Match-detail-button:focus {
  color: white;
}
.Match-detail-content-in {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
}
.Match-detail-odds {
  flex-grow: 2;
  margin-left: 6px;
  margin-right: 6px;
}
.Match-detail-odd {
  width: 100%;
  min-height: 34px;
  margin-top: 3px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: solid 1px #22344b;
  border-radius: 7px;
  background-color: transparent;
  text-align: left;
  font-size: 13px;
  font-weight: bold;
  color: #b4c2d2;
  transition: all 500ms;
  cursor: pointer;
  text-indent: 12px;
  position: relative;
  z-index: 1;
}
.Match-detail-odd span {
  text-align: left;
  transition: all 500ms;
  display: flex;
  align-items: center;
  height: 32px;
}
.Match-detail-odd span:last-child {
  border-left: solid 1px #22344b;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-right: 12px;
}
.Match-detail-odd:hover {
  color: white;
  border-color: #0039e0;
}
.Match-detail-odd:hover span {
  border-color: #0039e0;
}
.Match-detail-odd.active {
  object-fit: contain;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  border-image-source: linear-gradient(to right, #c31eff 0%, #0039e0 100%);
  border-image-slice: 0;
  background-image: linear-gradient(to bottom, #071426, #071426), linear-gradient(to right, #c31eff 0%, #0039e0 100%);
  background-origin: border-box;
  background-clip: content-box, border-box;
  color: white;
}
.Match-detail-odd.active span:last-child {
  border-color: #0039e0;
  background-color: #0039e0;
}
.Match-detail-odd.disabled {
  pointer-events: none;
  opacity: 0.3;
}
.Match-detail-odd.disabled span:last-child {
  background-image: url(../images/lock.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 24px center;
  color: transparent;
}

.Coupon {
  height: 100%;
  position: relative;
  z-index: 1;
  border-radius: 16px;
  box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.06);
  background-color: #16263c;
}
.Coupon-head {
  width: 100%;
  position: relative;
  padding: 12px 24px;
  box-shadow: inset 0 -1px 0 0 #22344b;
  background-image: linear-gradient(to bottom, #16263c, #0d1b2f);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.Coupon-head .nav {
  justify-content: space-between;
  flex-wrap: nowrap;
}
.Coupon-head .nav-item {
  flex-grow: 2;
}
.Coupon-head .nav-link {
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.43;
  letter-spacing: -0.42px;
  color: #8b9ea7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 0;
  background-color: transparent;
  position: relative;
  white-space: nowrap;
  transition: 500ms;
}
.Coupon-head .nav-link i {
  transition: 500ms;
  margin-right: 12px;
  font-size: 20px;
  color: #aebbc2;
}
.Coupon-head .nav .active {
  color: white;
  border-radius: 10px;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.16);
  background-color: #0039e0;
}
.Coupon-head .nav .active i {
  color: white;
}
.Coupon .tab-content .Coupon-head {
  background-image: none;
}
.Coupon .tab-content .nav-item {
  margin-left: 2px;
  margin-right: 2px;
}
.Coupon .tab-content .nav-link {
  height: 40px;
  border: solid 2px #22344b;
  background-color: #122136;
  border-radius: 10px;
}
.Coupon .tab-content .nav .active {
  color: white;
  background-color: #ff003d;
}
.Coupon-item {
  position: relative;
  transition: 500ms;
  box-shadow: inset 0 -1px 0 0 #22344b;
  padding: 20px 24px;
}
.Coupon-item-right {
  display: flex;
  align-items: center;
}
.Coupon-item-match {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: #fff;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Coupon-item-match span {
  font-weight: normal;
}
.Coupon-item-name {
  display: flex;
  font-weight: 500;
  align-items: center;
}
.Coupon-item-name span {
  margin-right: 12px;
  position: relative;
  display: block;
  z-index: 1;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
.Coupon-item-delete {
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
}
.Coupon-item-delete i {
  transition: 500ms;
  font-size: 20px;
  color: #c4d1df;
}
.Coupon-item-delete:hover {
  transition: 500ms;
}
.Coupon-item-delete:hover i {
  transition: 500ms;
  color: #ff003d;
}
.Coupon-item-result {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.33;
  color: #a3b0c0;
  display: block;
  max-width: 205px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.Coupon-item-type {
  font-size: 12px;
  letter-spacing: -0.24px;
  color: #d0d7dc;
  display: block;
}
.Coupon-item-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Coupon-item-odd {
  width: 52px;
  height: 32px;
  border-radius: 8px;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.16);
  background-color: #0039e0;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.Coupon-item-odd.up {
  color: #aceccd;
  background-color: #090b0c;
}
.Coupon-item-odd.up:before {
  position: absolute;
  right: 4px;
  top: 4px;
  content: "";
  display: inline-block;
  transition: 500ms;
  width: 8px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url(../images/up.svg);
}
.Coupon-item-odd.down {
  color: #ecacb0;
  background-color: #090b0c;
}
.Coupon-item-odd.down:before {
  position: absolute;
  left: 4px;
  bottom: 4px;
  content: "";
  display: inline-block;
  transition: 500ms;
  width: 8px;
  height: 8px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url(../images/down.svg);
}
.Coupon-item-date {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.33;
  color: #a3b0c0;
}
.Coupon-checkbox {
  background-color: transparent;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.Coupon-checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.Coupon-checkbox input[type=radio] {
  position: absolute;
  opacity: 0;
}
.Coupon-checkbox label {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #4f6069;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 500ms;
}
.Coupon-checkbox label:before {
  content: "";
  display: inline-block;
  transition: 500ms;
  border-radius: 12px;
  border: solid 2px #ff003d;
  background-color: #122136;
  width: 24px;
  height: 24px;
}
.Coupon-checkbox label:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 9px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.Coupon-checkbox input:checked ~ label:before {
  transition: 500ms;
  background-color: #ff003d;
  border-color: #ff003d;
}
.Coupon-checkbox input:checked ~ label:after {
  transition: 500ms;
  opacity: 1;
}
.Coupon-accept {
  box-shadow: inset 0 -1px 0 0 #22344b;
  background-color: #122136;
}
.Coupon-accept-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.Coupon-accept-left span {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.43;
  color: #a3b0c0;
  display: block;
  flex-grow: 1;
  text-align: center;
}
.Coupon-accept-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  width: 100px;
}
.Coupon-accept-item {
  display: flex;
  align-items: center;
  border-top: 1px solid #22344b;
  padding: 10px 20px;
}
.Coupon-accept-head {
  display: flex;
  align-items: center;
  padding: 12px 20px 12px 20px;
}
.Coupon-accept-head span {
  text-align: center;
  display: block;
  flex-grow: 2;
  font-size: 10px;
  font-weight: bold;
  color: #a3b0c0;
}
.Coupon-accept-bahis {
  width: 68px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: solid 1.2px #22344b;
  background-color: #122136;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.Coupon-counter {
  padding-left: 24px;
  padding-right: 24px;
  border-bottom: solid 2px #22344b;
  padding-top: 10px;
  padding-bottom: 12px;
}
.Coupon-counter span {
  margin-bottom: 4px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.33;
  text-align: center;
  color: #a3b0c0;
}
.Coupon-counter-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 52px;
  border-radius: 10px;
  border: solid 2px #22344b;
  background-color: #122136;
  padding-left: 6px;
  padding-right: 6px;
}
.Coupon-counter input {
  padding: 0;
  border: none;
  width: 120px;
  text-align: center;
  background-color: transparent;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.75;
  color: #fff;
}
.Coupon-counter input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.Coupon-counter .counter {
  background-color: transparent;
  font-size: 20px;
  color: #7f949f;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
  transition: 500ms;
}
.Coupon-counter .counter:hover {
  color: #00eaff;
  transition: 500ms;
}
.Coupon-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  box-shadow: inset 0 -1px 0 0 #22344b;
  padding-left: 24px;
  padding-right: 24px;
}
.Coupon-info-item p {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.71;
  color: #a3b0c0;
}
.Coupon-info-item span {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.71;
  color: #fff;
  text-align: right;
}
.Coupon-info-item.total p, .Coupon-info-item.total span {
  font-size: 16px;
  font-weight: 600;
  color: #4f6069;
}
.Coupon-info-danger {
  border-radius: 8px;
  border: solid 1px rgba(255, 222, 0, 0.3);
  background-color: rgba(255, 222, 0, 0.1);
  padding: 12px 10px;
}
.Coupon-info-danger p {
  font-size: 12px;
  text-align: center;
  color: #738a96;
}
.Coupon .empty-state {
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #b4c2d2;
}
.Coupon-info-system {
  padding-top: 20px;
  padding-bottom: 15px;
}
.Coupon-info-system .bootstrap-select {
  width: 100% !important;
}
.Coupon-info-system .bootstrap-select .btn {
  background: #3D4852;
}
.Coupon-info-system .bootstrap-select .btn:focus {
  background-color: #3D4852;
}
.Coupon-buttons {
  padding: 12px 16px;
  display: flex;
}
.Coupon-buttons .delete {
  width: 72px;
}
.Coupon-buttons .delete:hover {
  background-color: #ff003d;
}
.Coupon-buttons .play:hover {
  background-color: #00eaff;
}
.Coupon-buttons .button {
  cursor: pointer;
  margin-left: 4px;
  margin-right: 4px;
  font-weight: bold;
  color: #fff;
  /* A flex item floors at min-width:auto, and .button is white-space:nowrap --
     together they made the label plus the amount a width the button could not
     go below, so ₺10000.00 pushed it out of the panel. */
  min-width: 0;
  /* The label and the amount share one row at every width. On a 320px phone
     16px cannot fit both, so the text scales down instead of being cut off;
     it stays 16px from ~430px up, which is every slip on a desktop. */
  font-size: clamp(12px, 3.7vw, 16px);
  gap: clamp(6px, 2vw, 12px);
  padding-left: clamp(8px, 2.5vw, 12px);
  padding-right: clamp(8px, 2.5vw, 12px);
}
/* w-100 asks for the whole row, which SİL then has to come out of. flex-basis
   overrides that width, so the two share the row at any panel width. */
.Coupon-buttons .play {
  flex: 1;
}
.Coupon-buttons .button span {
  /* Last resort at the narrowest phones: the amount clips rather than the
     button bursting. gap on the parent replaces the old left margin. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* A dead BAHİS YAP must not look pressable, and must not light up on hover --
   the whole point of the limit is that the player sees it before the press. */
.Coupon-buttons .button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  background-color: #22344b;
}
/* The cap, under the stake field. The player reads it before BAHİS YAP, not
   as a rejection after it. */
.Coupon-limit {
  margin-top: 6px;
  margin-bottom: 0;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #7f949f;
}
.Coupon-settings {
  margin: 0 24px 16px;
  padding: 16px;
  border: 1px solid #22344b;
  border-radius: 10px;
  background-color: #122136;
}
.Coupon-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #22344b;
}
.Coupon-settings-head h6 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
.Coupon-settings-head button {
  border: 0;
  background: transparent;
  color: #c4d1df;
  cursor: pointer;
}
.Coupon-settings-label {
  display: block;
  margin-bottom: 8px;
  color: #c4d1df;
  font-size: 13px;
}
.Coupon-settings-radios {
  display: grid;
  gap: 10px;
  margin-bottom: 0;
}
.Coupon-settings-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #c4d1df;
  font-size: 13px;
  cursor: pointer;
}
.Coupon-settings-radio input {
  width: 16px;
  height: 16px;
  accent-color: #0039e0;
  cursor: pointer;
}
.Coupon-limit-warning {
  margin: 0;
  padding: 8px 24px 0;
  font-size: 12px;
  font-weight: bold;
  color: #ffb020;
}
.Coupon-rate {
  padding: 12px 24px;
  padding-bottom: 20px;
  border-bottom: solid 1px #e8eced;
}
.Coupon-rate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Coupon-rate-head p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  letter-spacing: -0.42px;
  color: #738a96;
}
.Coupon-rate-head span {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -0.36px;
  color: #738a96;
}
.Coupon-rate-odd {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Coupon-rate-odd-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(20% - 2px);
  height: 28px;
  border-radius: 5px;
  border: solid 1px #dce2e5;
  background-image: linear-gradient(to bottom, #fff 0%, #f3f5f6 100%);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.3px;
  text-align: center;
  color: #4f6069;
  transition: 500ms;
}
.Coupon-rate-odd-item:hover {
  color: #0039e0;
  transition: 500ms;
}
.Coupon-rate-odd-item.active {
  border-color: #0039e0;
}
.Coupon-rate-calc {
  margin-top: 10px;
}
.Coupon-rate-calc .Coupon-counter {
  width: 100%;
}
.Coupon-rate-calc .Coupon-counter input {
  text-align: center;
  flex-grow: 2;
  font-size: 14px;
}
.Coupon-rate-calc .counter {
  width: 44px;
}
.Coupon-rate-calc .max {
  width: 64px;
  border-left: 1px solid #dce2e5;
}
.Coupon-rate-calc-max {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: -0.36px;
  color: #0039e0;
  text-align: center;
  display: block;
}
.Coupon-banker {
  background-color: transparent;
  display: flex;
  align-items: center;
  margin-top: 3px;
}
.Coupon-banker input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.Coupon-banker label {
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.3px;
  text-align: center;
  color: white;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 500ms;
  width: 65px;
  height: 28px;
  border-radius: 5px;
  border: solid 1px #3d4b51;
  background-color: #2c353a;
}
.Coupon-banker label:hover {
  color: #0039e0;
  border-color: #0039e0;
  transition: 500ms;
}
.Coupon-banker input:checked ~ label {
  border-color: #0039e0;
  transition: 500ms;
  background-color: #0039e0;
  color: #1b2124;
}
.Coupon-bet_type {
  border-bottom: 1px solid #e8eced;
}
.Coupon-bet_type-button {
  height: 54px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: -0.42px;
  color: #4f6069;
  border: solid 1px #dce2e5;
  background-image: linear-gradient(to bottom, #fff 0%, #f3f5f6 100%);
  width: 100%;
  text-align: left;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
}
.Coupon-bet_type-button span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -0.36px;
  color: #738a96;
}
.Coupon-bet_type-button:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(../images/down-chevron.svg);
  background-position: center;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.Coupon-bet_type-button[aria-expanded=true]:after {
  transform: rotate(180deg) translateY(50%);
}
.Coupon-bet_type-in {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 24px;
  padding-right: 24px;
}
.Coupon-bet_type-item {
  margin-top: 10px;
  margin-bottom: 10px;
}
.Coupon-bet_type-radio {
  position: relative;
}
.Coupon-bet_type-radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.Coupon-bet_type-radio label {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #4f6069;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  position: relative;
  transition: 500ms;
}
.Coupon-bet_type-radio label:before {
  margin-right: 12px;
  content: "";
  display: inline-block;
  transition: 500ms;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: solid 1px #dce2e5;
  background-color: #f3f5f6;
}
.Coupon-bet_type-radio label:after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #2c353a;
  opacity: 0;
}
.Coupon-bet_type-radio input:checked ~ label:before {
  transition: 500ms;
  background-color: #0039e0;
  border-color: #0039e0;
}
.Coupon-bet_type-radio input:checked ~ label:after {
  transition: 500ms;
  opacity: 1;
}
.Coupon-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}
.Coupon-empty-in {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}
.Coupon-empty-in h6 {
  margin-bottom: 7px;
  margin-top: -40px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: -0.6px;
  color: #2c353a;
}
.Coupon-empty-in p {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.67;
  letter-spacing: -0.36px;
  color: #8b9ea7;
}
.Coupon-empty-icon:before {
  content: "";
  display: inline-block;
  transition: 500ms;
  width: 160px;
  height: 160px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-image: url(../images/coupon-emty.svg);
}
.Coupon-empty .button-ghost {
  color: #1b2124;
}

.video-player-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-loading,
.video-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  min-height: 400px;
}

.video-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.loader {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.video-loading p,
.error-content p {
  margin-top: 16px;
  font-size: 14px;
  opacity: 0.8;
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.error-content i {
  font-size: 48px;
  opacity: 0.5;
}

.retry-button {
  margin-top: 8px;
  padding: 8px 20px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.2s;
}
.retry-button:hover {
  opacity: 0.8;
}

.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: auto;
  z-index: 10;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Volume: mute button + drag slider. The slider stays collapsed until the
   group is hovered or receives keyboard focus, so the bar isn't crowded at
   rest but the control is still reachable by tabbing to it. */
.volume-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  /* WIDTH IS RESERVED, NEVER ANIMATED. It used to go 0 -> 70px on hover, which
     grew .volume-control inside a right-anchored flex row and shoved the mute
     button ~70px LEFT, out from under the cursor that had just triggered the
     hover, so the click landed on the slider instead of the button. */
  width: 70px;
  opacity: 0;
  pointer-events: none;
  /* 16px hit area, 4px painted track (background-size), so it looks the same
     but can actually be grabbed. */
  height: 16px;
  background-size: 100% 4px;
  background-position: center;
  background-repeat: no-repeat;
  outline: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
  /* `background-image` is set inline so the filled portion tracks the value.
     It must NOT be the `background` shorthand: that resets background-size. */
}

.volume-control:hover .volume-slider,
.volume-control:focus-within .volume-slider {
  opacity: 1;
  pointer-events: auto;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
}

.volume-slider:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

/* Touch devices have no hover, so keep the slider permanently visible
   rather than unreachable. */
@media (hover: none) {
  .volume-slider {
    opacity: 1;
    pointer-events: auto;
  }
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 0, 61, 0.15);
  border: 1px solid rgba(255, 0, 61, 0.4);
  border-radius: 4px;
  padding: 4px 10px;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff003d;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.live-text {
  color: #ff003d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.control-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.control-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 991px) and (max-width: 1280px) {
  .Main-left {
    width: calc(100% - 325px);
  }
  .Main-right {
    width: 310px;
  }
}
@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
@media (max-width: 991px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block !important;
  }
  .mobile_f {
    display: flex !important;
  }
  .Header {
    box-shadow: none;
  }
  .Header .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .Header-in {
    padding-left: 16px;
    padding-right: 16px;
    height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #122136;
  }
  .Header-top {
    height: 32px;
    background-image: url(../images/header-top_m.jpg) !important;
  }
  .Header-right .button {
    padding: 8px 22px;
  }
  .Header-logo img {
    height: 32px;
  }
  .Header-menu {
    display: flex;
    align-items: center;
    position: fixed;
    pointer-events: none;
    left: 0;
    right: 0;
    top: 84px;
    height: calc(100vh - 84px);
    background-color: black;
    transform: translateY(20px);
    transition: all 400ms;
    opacity: 0;
    margin-right: 0;
  }
  .Header-menu-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 84px;
    height: 100%;
    width: 100%;
  }
  .Header-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0px);
  }
  .Header-menu-open {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: white;
    font-size: 24px;
  }
  .Header-menu-open.active {
    background-image: url(../images/close.svg);
  }
  .Header-menu-open:before {
    position: absolute;
    content: "";
    display: inline-block;
    transition: 500ms;
    width: 1px;
    height: 52px;
    background-color: #122136;
    left: -16px;
  }
  .Header-menu-item {
    font-size: 20px;
    margin-left: 0;
    margin-bottom: 40px;
  }
  .Footer-top-in {
    flex-wrap: wrap;
  }
  .Footer-top-left {
    flex-wrap: wrap;
  }
  .Footer-logo img {
    height: 40px;
  }
  .Footer-copy {
    margin-top: 12px;
    width: 100%;
  }
  .Footer-menu {
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 8px;
  }
  .Footer-menu-item {
    margin-top: 8px;
    padding-left: 20px;
    margin-left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    width: calc(50% - 4px);
    height: 48px;
  }
  .Footer-menu-item i {
    margin-bottom: 0;
    margin-right: 12px;
  }
  .Footer-menu-item:last-child {
    font-size: 16px;
    justify-content: center;
    width: 100%;
    background-image: none;
    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px 0 rgba(0, 57, 224, 0.2);
    background-color: #0039e0;
  }
  .Footer-bottom {
    overflow: hidden;
  }
  .Footer-bottom .container {
    padding-right: 0 !important;
  }
  .Footer-bottom-left {
    overflow-x: scroll;
  }
  .Footer-bottom-in {
    flex-wrap: wrap;
  }
  .Footer-links-item {
    white-space: nowrap;
  }
  .Footer-links-item img {
    margin-right: 12px;
  }
  .Footer-social {
    margin-top: 12px;
  }
  .Footer-social-item {
    margin-right: 8px;
    margin-left: 0;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .Main {
    padding-top: 16px;
  }
  .Main-in {
    padding-top: var(--site-header);
    flex-wrap: wrap;
  }
  .Main-left {
    width: 100%;
  }
  .Main-right {
    width: 100%;
  }
  .Match {
    padding-bottom: 16px;
  }
  .Match-video {
    margin-left: -16px;
    margin-right: -16px;
    padding-bottom: 8px;
  }
  .Match-video-head-in {
    padding: 8px 16px;
    padding-bottom: 10px;
  }
  .Match-video-head .border {
    padding: 6px 12px;
    font-size: 16px;
  }
  .Match-video-head-back {
    margin-right: 20px;
  }
  .Match-video-head-back i {
    font-size: 12px;
    color: #c4d1df;
  }
  .Match-video-head h1 {
    font-size: 20px;
  }
  .Match-video-body {
    padding: 0;
  }
  .Match-video-body-content {
    /* No height override: the 16:9 aspect-ratio carries the height at every
       width. The old 220px was the reason the video overflowed on mobile. */
    max-width: none;
    border-radius: 0;
    border: none;
  }
  .Match-head {
    padding: 0;
    border-radius: 10px;
    box-shadow: none;
    background-color: transparent;
    margin-top: 12px;
  }
  .Match-head-left {
    width: 100%;
  }
  .Match-head-right {
    display: none;
  }
  .Match-group-other {
    width: 40px;
    margin-right: 0;
    margin-left: 0;
    position: absolute;
    top: 8px;
    right: 10px;
  }
  /* Was `relative`, only to anchor the absolutely-positioned odds strip below.
     `sticky` is a positioned value too, so it anchors that just the same and
     keeps the header pinned -- which matters more on a phone, where an expanded
     match is several screens long. */
  .Match-item-in {
    position: sticky;
    top: var(--site-header);
  }
  .Match-item-date {
    width: 66px;
    min-width: 66px;
    margin-right: 12px;
    padding-left: 16px;
    border-bottom-left-radius: 0;
  }
  .Match-item-date span {
    font-size: 10px;
  }
  .Match-item-date p {
    font-size: 12px;
  }
  .Match-item-info {
    margin-bottom: 90px;
    min-height: 56px;
  }
  .Match-item-teams {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .Match-item-teams-flag-item {
    width: 32px;
    height: 32px;
  }
  /* The crest is 32px here, so the names drop a point to stay inside it. */
  .Match-item-teams-name {
    font-size: 13px;
  }
  .Match-item-odd {
    margin-left: auto;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .Match-item-odd-content {
    width: 100%;
    position: absolute;
    height: 90px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #1d2d43;
  }
  .Match-item-odd-content .Match-item-odd-in {
    padding-top: 20px;
    max-width: none;
    margin-left: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
  .Match-item-odd-content .Match-item-odd-in:nth-child(1) .Match-item-odd-button:nth-child(1):before {
    content: "1";
  }
  .Match-item-odd-content .Match-item-odd-in:nth-child(1) .Match-item-odd-button:nth-child(2):before {
    content: "X";
  }
  .Match-item-odd-content .Match-item-odd-in:nth-child(1) .Match-item-odd-button:nth-child(3):before {
    content: "2";
  }
  .Match-item-odd-content .Match-item-odd-in:nth-child(2) {
    display: none;
  }
  .Match-item-odd-in {
    width: 100%;
  }
  .Match-item-odd-button {
    position: relative;
    width: calc(33.33% - 4px);
  }
  .Match-item-odd-button:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -22px;
    display: inline-block;
    transition: 500ms;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.33;
    text-align: center;
    color: #b4c2d2;
  }
  .Match-item-odd-button.disabled {
    pointer-events: none;
  }
  .Match-item-odd-button.disabled:after {
    width: 24px;
    height: 24px;
    transform: translateX(4px) translateY(-6px);
  }
  .Match-item-open {
    width: 40px;
    height: 40px;
    background-size: 16px 16px;
  }
  .Match-item.live .Match-item-in {
    background-image: linear-gradient(to bottom, #071426, #071426), linear-gradient(to bottom, #ff7e15, #ff003d);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-image-slice: 0;
    border-image-source: none;
  }
  .Match-item.live .Match-item-in.active {
    border-image-source: linear-gradient(to bottom, #ff7e15, #ff003d);
  }
  .Match-item.live .Match-item-date {
    background-image: linear-gradient(to bottom, #ff7e15, #ff003d);
  }
  .Match-item.live .Match-item-date p, .Match-item.live .Match-item-date span {
    color: #fff;
  }
  .Match-detail-item {
    border-radius: 10px;
    border: solid 2px #22344b;
    background-image: linear-gradient(to bottom, #071426, #071426), linear-gradient(to bottom, #1d2d43, #122136);
    margin-top: 8px;
  }
  .Match-detail-button {
    height: 44px;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }
  .Match-detail-content-in {
    padding-top: 2px;
    padding-bottom: 6px;
  }
  .Match-detail-odd {
    margin-top: 35px;
  }
  .Match-detail-odd span {
    height: 44px;
    justify-content: center;
    text-indent: 0;
  }
  .Match-detail-odd span:first-child {
    position: absolute;
    left: 50%;
    top: -37px;
    transform: translateX(-50%);
    text-indent: 0;
  }
  .Match-detail-odd span:last-child {
    padding-right: 0;
    border: none;
    width: 100%;
    background-position: center center !important;
  }
  .Match-detail-odd.disabled span:last-child {
    background-size: 16px 16px;
  }
  .Match-detail-odd.active {
    border: none;
    background-image: none;
  }
  .Match-detail-odd.active span {
    border-radius: 10px;
  }
  .Coupon {
    position: fixed;
    z-index: 9999;
    left: 24px;
    right: 24px;
    height: 76px;
    bottom: 84px;
    transition: 300ms;
    overflow: hidden;
    background-color: transparent;
    box-shadow: none;
  }
  .Coupon .tab-content {
    display: none;
  }
  .Coupon.active {
    height: auto;
    max-height: calc(100vh - 108px);
    max-height: calc(100dvh - 108px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: #16263c;
  }
  .Coupon.active .tab-content {
    display: block;
  }
  .Coupon-head .nav-link {
    height: 48px;
  }
  .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
  }
  .backdrop.active {
    display: block;
  }
  .Bottom {
    background-image: linear-gradient(to bottom, #0d1b2f, #0d1b2f), linear-gradient(to bottom, #22344b 0%, #16263c);
    padding: 10px 24px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    z-index: 9;
    border-radius: 0;
  }
  .Bottom-head {
    background-image: linear-gradient(to bottom, #0d1b2f, #0d1b2f), linear-gradient(to bottom, #22344b 0%, #16263c);
    padding-left: 24px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 -1px 0 0 #22344b;
  }
  .Bottom-head-close {
    background-color: transparent;
    color: white;
    font-size: 20px;
    padding: 10px 20px;
  }
  .Bottom-head-left {
    display: flex;
    align-items: center;
  }
  .Bottom-head-left i {
    color: #00eaff;
    font-size: 18px;
    margin-right: 10px;
  }
  .Bottom-head-left h6 {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.43;
    letter-spacing: -0.42px;
    color: #fff;
  }
}

/* Leg count on the COKLU tab. The coupon switches to combo by itself now, so
   the badge is what tells you it happened. */
.Coupon-tab-count {
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 9px;
  background: #1b6ef3;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
}

/* Team totals and result+total put six to twelve chips in one market, which the
   single-row flex layout cannot hold. Same chip as the scoreline grid, wider,
   because these labels are words rather than a scoreline. */
.Match-detail-content-in.odds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 4px;
  padding: 6px 10px;
}
.odds-grid .Match-detail-odds {
  margin: 0;
}
.odds-grid .Match-detail-odd {
  min-height: 0;
  margin: 0;
  padding: 5px 8px;
  justify-content: space-between;
  text-indent: 0;
  border-radius: 5px;
  border-color: #1d2d43;
  background-color: #0d1b2f;
  font-size: 12px;
}
.odds-grid .Match-detail-odd span {
  height: auto;
}
.odds-grid .Match-detail-odd span:first-child {
  color: #a3b0c0;
  font-weight: 500;
}
.odds-grid .Match-detail-odd span:last-child {
  border-left: 0;
  padding-right: 0;
  color: #c4d1df;
}
.odds-grid .Match-detail-odd.disabled {
  opacity: 0.55;
}
.odds-grid .Match-detail-odd.disabled span:last-child {
  background-image: none;
  color: #7d8b9c;
}
/* Every outcome a finished match paid, in every market, marked like the
   winning result on the row above: the lock gives way to the price. The grid
   prefixes outrank the dimming rules of the score grids further down. */
.Match-detail-odd.won,
.Match-detail-odd.disabled.won,
.odds-grid .Match-detail-odd.disabled.won,
.score-short .Match-detail-odd.disabled.won,
.score-grid .Match-detail-odd.disabled.won {
  opacity: 1;
  background-color: #12351f;
  border-color: #2e9e51;
  color: #5ddb8a;
}
.Match-detail-odd.won span,
.Match-detail-odd.disabled.won span:last-child,
.odds-grid .Match-detail-odd.disabled.won span,
.odds-grid .Match-detail-odd.disabled.won span:last-child,
.score-short .Match-detail-odd.disabled.won span,
.score-short .Match-detail-odd.disabled.won span:last-child,
.score-grid .Match-detail-odd.disabled.won span,
.score-grid .Match-detail-odd.disabled.won span:last-child {
  background-image: none;
  border-color: #2e9e51;
  color: #5ddb8a;
}

/* Correct score, collapsed: the eight shortest prices at a real tap size.
   Two columns of 46px beats 41 chips of 25px -- and takes LESS room, because
   the tail is behind the button rather than on the screen. */
.Match-detail-content-in.score-short {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 5px;
  padding: 8px 10px;
}
.score-short .Match-detail-odd {
  min-height: 46px;
  margin: 0;
  padding: 0 10px;
  justify-content: space-between;
  text-indent: 0;
  border-radius: 6px;
  border-color: #1d2d43;
  background-color: #0d1b2f;
  font-size: 13px;
}
.score-short .Match-detail-odd span {
  height: auto;
}
.score-short .Match-detail-odd span:first-child {
  color: #a3b0c0;
  font-weight: 500;
}
.score-short .Match-detail-odd span:last-child {
  border-left: 0;
  padding-right: 0;
  color: #c4d1df;
}
.score-short .Match-detail-odd.disabled {
  opacity: 0.55;
}
.score-short .Match-detail-odd.disabled span:last-child {
  background-image: none;
  color: #7d8b9c;
}
/* Coupon settings: the gear beside the mode tabs, and its modal. */
/* In the FLOW on desktop, so it cannot land on top of ÇOKLU -- the absolute
   version did exactly that. The head is a flex row and the tab list gives up
   the width instead. */
.Coupon-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.Coupon-head .nav-pills {
  flex: 1;
  min-width: 0;
}
/* Varsayılan Bahis Miktarı, inline above the two mode panes. It used to be the
   only field left in the settings modal once the odds-change radios went. */
.Coupon-default {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 24px;
  border-bottom: solid 2px #22344b;
}
.Coupon-default label {
  margin: 0;
  color: #a3b0c0;
  font-size: 12px;
  font-weight: bold;
}
/* The stepper wraps the field, so the border moves to the group and the input
   loses its own -- otherwise you see a box inside a box. */
.Coupon-default-in {
  display: flex;
  align-items: center;
  height: 34px;
  border: 1px solid #22344b;
  border-radius: 7px;
  background-color: #16263c;
  overflow: hidden;
}
/* Sized to match the BAHIS stepper: the signs either side of the number are
   the only 10-unit control, so they have to read as buttons. */
.Coupon-default-in .counter {
  width: 40px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: #7f949f;
  font-size: 20px;
  cursor: pointer;
  transition: 300ms;
}
.Coupon-default-in .counter:hover:not(:disabled) {
  color: #00eaff;
}
.Coupon-default-in .counter:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.Coupon-default input {
  width: 72px;
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  border: none;
  background-color: transparent;
  color: #e6edf5;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* No native spinner: its arrows step by 1 and ignore DEFAULT_STAKE_STEP, so the
   field disagreed with the signs beside it. */
.Coupon-default input::-webkit-outer-spin-button,
.Coupon-default input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.Coupon-default input[type="number"] {
  appearance: textfield;
}
.Coupon-default input:focus {
  outline: none;
}
/* Focus reads on the GROUP now that the input has no border of its own. */
.Coupon-default-in:focus-within {
  border-color: #0039e0;
}

/* Bulk stake. Sits above "Toplam Bahis", which is a SUM -- so this reads as an
   input with its own action, not as a second total. */
.Coupon-bulk {
  padding: 10px 12px;
  border-top: 1px solid #22344b;
}
.Coupon-bulk label {
  display: block;
  margin-bottom: 6px;
  color: #a3b0c0;
  font-size: 12px;
  font-weight: bold;
}
.Coupon-bulk-in {
  display: flex;
  gap: 6px;
}
.Coupon-bulk-in input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #22344b;
  border-radius: 7px;
  background-color: #16263c;
  color: #e6edf5;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.Coupon-bulk-in .button {
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

/* The coupon number, sitting inline with the placed-at time. Reads as a
   reference the player can take away, and is the tap target that copies it. */
.Coupon-code {
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px solid #22344b;
  border-radius: 4px;
  background-color: #0d1b2f;
  color: #a3b0c0;
  font-size: 11px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
.Coupon-code:hover {
  border-color: #0039e0;
  color: #c4d1df;
}

.Match-score-more {
  display: block;
  width: calc(100% - 20px);
  margin: 0 10px 9px;
  height: 40px;
  border: 1px solid #0039e0;
  border-radius: 6px;
  background-color: transparent;
  color: #7ea2ff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 200ms;
}
.Match-score-more:hover {
  background-color: rgba(0, 57, 224, 0.14);
}

/* Correct score.
   Three OUTCOME columns -- 1 / X / 2 -- not one flat list. Flattening them lost
   the only thing that made 41 scorelines readable: which ones are a home win, a
   draw, or an away win. Each column then wraps into as many chips as fit. */
.Match-detail-content-in.score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 10px;
}
.score-grid .score-col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 3px;
  align-content: start;
  margin: 0;
}
/* Column heading, from data-outcome, spanning that column's own grid. */
.score-grid .score-col::before {
  content: attr(data-outcome);
  grid-column: 1 / -1;
  padding: 2px 4px 4px;
  border-bottom: 1px solid #22344b;
  margin-bottom: 3px;
  color: #a3b0c0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* Chips, not split rows: at this size the divider and the 24px indent were most
   of the cell. */
/* 40px, not the 25px this shipped at. The tail only appears behind a tap now,
   so there is no reason left to crush it. */
.score-grid .Match-detail-odd {
  min-height: 40px;
  margin: 0;
  padding: 4px 8px;
  justify-content: space-between;
  text-indent: 0;
  border-radius: 5px;
  border-color: #1d2d43;
  background-color: #0d1b2f;
  font-size: 12px;
}
.score-grid .Match-detail-odd span {
  height: auto;
}
.score-grid .Match-detail-odd span:first-child {
  color: #a3b0c0;
  font-weight: 500;
}
.score-grid .Match-detail-odd span:last-child {
  border-left: 0;
  padding-right: 0;
  color: #c4d1df;
}
/* ONE lock for the section, not 41. The base rule blanks each odd and paints a
   padlock in its place, which at this density is a wall of padlocks and hides
   every price. Here the prices stay readable and dimmed, and the section header
   carries the lock. */
.score-grid .Match-detail-odd.disabled {
  opacity: 0.55;
}
.score-grid .Match-detail-odd.disabled span:last-child {
  background-image: none;
  color: #7d8b9c;
}

/* One row per market: the title sat on its own line above the odds, so every
   market cost two rows. Title left, odds right. */
.Match-detail-item {
  display: flex;
  align-items: stretch;
}
.Match-detail-button {
  width: 168px;
  flex: none;
  border-radius: 8px 0 0 8px;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 8px;
  height: auto;
}
.Match-detail-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.Match-detail-content-in {
  flex: 1;
  min-width: 0;
}
/* Correct score cannot share a row with the title, in EITHER state -- the
   collapsed eight need the full width just as much as the full grid, and
   matching only one of them left the other squeezed into the odds column. */
.Match-detail-item:has(.score-grid),
.Match-detail-item:has(.score-short) {
  display: block;
}
.Match-detail-item:has(.score-grid) .Match-detail-button,
.Match-detail-item:has(.score-short) .Match-detail-button {
  width: 100%;
  border-radius: 8px 8px 0 0;
}
/* This section stacks the odds and the reveal button, so its wrapper must not
   stay a flex ROW -- as one, the button counted as a sibling item and took
   319px of a 339px line, leaving the grid 20px and one chip per row. */
.Match-detail-item:has(.score-grid) .Match-detail-content,
.Match-detail-item:has(.score-short) .Match-detail-content {
  display: block;
}

/* Mobile keeps the single row; only the title column narrows to leave the odds
   enough width. The 44px title height below is from the base mobile block. */
@media (max-width: 991px) {
  .Match-detail-button {
    width: 112px;
    height: auto;
    font-size: 11px;
    padding-left: 8px;
    padding-right: 6px;
  }
  /* The old mobile chip lifted its label out of flow to sit above the price
     (`top: -37px`), which cost 35px of margin per row. Inline, like desktop. */
  .Match-detail-odd {
    font-size: 12px;
    text-indent: 6px;
    margin-top: 3px;
    min-height: 30px;
  }
  .Match-detail-odd span {
    height: 28px;
    justify-content: flex-start;
  }
  .Match-detail-odd span:first-child {
    position: static;
    transform: none;
    top: auto;
    left: auto;
  }
  .Match-detail-odd span:last-child {
    width: auto;
    padding-left: 6px;
    padding-right: 6px;
    justify-content: flex-end;
  }
  .Match-detail-odds {
    margin-left: 3px;
    margin-right: 3px;
  }
  .Match-detail-content-in {
    padding-left: 4px;
    padding-right: 4px;
  }
  /* Three chips of 1/X/2 have to fit, so the scoreline chips shrink too. */
  .Match-detail-content-in.score-grid {
    gap: 5px;
    padding: 6px;
  }
  /* One chip per column on a phone, so the target is a full 36px rather than
     the 25px two-up that made this unusable. */
  .score-grid .score-col {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .score-grid .Match-detail-odd {
    min-height: 36px;
    font-size: 12px;
    padding: 3px 6px;
  }
}

/* Nav links: `a:active, a:focus, a:hover { color: currentColor }` near the top of
   this file resolves to the inherited Bootstrap body colour, so a clicked item
   went dark grey against a near-black bar. */
.Header-menu-item:focus,
.Header-menu-item:active {
  color: #fffdf8;
}
.Header-menu-item:focus i,
.Header-menu-item:active i {
  color: #a3b0c0;
}

/* Text inputs: `.form-control` is styled nowhere in this file, so it fell through
   to the Bootstrap white default and lit up the dark panels. */
.form-control {
  height: 40px;
  border: solid 1px #22344b;
  border-radius: 7px;
  background-color: #16263c;
  color: #e6edf5;
  font-size: 14px;
}
.form-control:focus {
  border-color: #0039e0;
  background-color: #16263c;
  color: #e6edf5;
  box-shadow: none;
}
.form-control::placeholder {
  color: #7d8b9c;
}
/* Chrome paints autofilled fields white; the inset shadow is the only way to
   repaint them. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #e6edf5;
  -webkit-box-shadow: 0 0 0 1000px #16263c inset;
  caret-color: #e6edf5;
}

/* Desktop has the room for both, so the Kuponum/Bahislerim tabs are a MOBILE
   control: above 991px the two panes stack and the tab bar goes away. The
   selectors carry .Coupon so they outrank bootstrap's .tab-pane display and
   .fade:not(.show) opacity without needing !important. */
@media (min-width: 992px) {
  .Coupon .Coupon-head.Bottom {
    display: none;
  }
  /* `form >` keeps these off the TEKLİ/ÇOKLU tab-content nested inside #tab1. */
  .Coupon form > .tab-content {
    display: flex;
    flex-direction: column;
  }
  .Coupon form > .tab-content > .tab-pane {
    display: block;
    opacity: 1;
  }
  /* Bahislerim on top, Kuponum under it. `order` reorders the BOXES, so the
     divider goes on #tab1 by name rather than on a `+` that follows source. */
  /* A fixed height (page.tsx measures it) keeps the slip level with the fixture
     header whatever the history holds: the list scrolls, the pager stays. */
  .Coupon .tab-content > #tab2 {
    order: -1;
    height: var(--history-h, auto);
    display: flex;
    flex-direction: column;
  }
  .Coupon #tab2 > .Coupon-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .Coupon #tab2 .Coupon-matches {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .Coupon .tab-content > #tab1 {
    border-top: solid 2px #22344b;
  }
}

/* On a phone the slip is a fixed sheet, and CLOSED it is a 76px strip that
   shows whatever comes first in normal flow -- which is the balance, so it sat
   on screen over the football all the time. It belongs to the slip: it rides
   in with it. `.active` is the open sheet. */
@media (max-width: 991px) {
  .Coupon:not(.active) .Coupon-balance {
    display: none;
  }
}