/* Clone runtime overrides — keep original CSS intact, fix static gaps */

#layout--default.guest,
#layout--default {
  display: block !important;
}

body.menu-open {
  overflow: hidden;
}

/* ===== HEADER LOCK — MOBILE ONLY (desktop uses live app.css grid) ===== */
@media (max-width: 1023px) {
  /* mobile header lock */
  #mk-header-slot {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  #mk-header-slot .app-header,
  #mk-header-slot #main-header.app-header,
  body.guest-mode .app-header,
  body.user-mode .app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    background: #091840 !important;
    z-index: 100 !important;
    display: block !important;
  }

  #mk-header-slot .app-header__wrapper,
  body.guest-mode .app-header__wrapper,
  body.user-mode .app-header__wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  #mk-header-slot .app-header__wrapper::before,
  body.guest-mode .app-header__wrapper::before,
  body.user-mode .app-header__wrapper::before {
    content: none !important;
    display: none !important;
  }

  /* Sol küme: hamburger + logo */
  #mk-header-slot .app-header__left,
  body.guest-mode .app-header__left,
  body.user-mode .app-header__left {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    grid-column: auto !important;
    order: 1 !important;
    z-index: 1 !important;
  }

  #mk-header-slot .app-header__menu-toggle,
  body.guest-mode .app-header__menu-toggle,
  body.user-mode .app-header__menu-toggle {
    position: static !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    grid-column: auto !important;
    order: 0 !important;
    z-index: 2 !important;
    color: #e6a855 !important;
  }

  #mk-header-slot .app-header__logo,
  body.guest-mode .app-header__logo,
  body.user-mode .app-header__logo {
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 110px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    grid-column: auto !important;
    order: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #mk-header-slot .app-header__logo img,
  body.guest-mode .app-header__logo img,
  body.user-mode .app-header__logo img {
    display: block !important;
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    max-width: 110px !important;
    object-fit: contain !important;
    object-position: left center !important;
    mix-blend-mode: lighten;
    transform: none !important;
  }

  /* Sağ küme: Giriş/Kayıt veya bakiye/profil/zil — en sağ */
  #mk-header-slot .app-header__auth,
  #mk-header-slot .app-header__auth--user,
  #mk-header-slot .app-header__auth--guest,
  body.guest-mode .app-header__auth,
  body.user-mode .app-header__auth,
  .app-header__auth.app-header__auth--user,
  .app-header__auth.app-header__auth--guest {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    order: 2 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin-left: auto !important;
  }

  #mk-header-slot .mk-balance-pill,
  #mk-header-slot .mk-user-avatar,
  #mk-header-slot .mk-bell {
    position: relative !important;
    flex-shrink: 0 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }
}

/* Drawer open state (original Vue toggles left position) */
.app-drawer__root {
  z-index: 200;
  pointer-events: none;
}

.app-drawer__root.is-open {
  pointer-events: auto;
}

.app-drawer__root .app-drawer {
  pointer-events: auto;
  z-index: 201;
  transition: left 0.28s ease, transform 0.28s ease;
}

.app-drawer__root.is-open .app-drawer {
  left: 0 !important;
  transform: none !important;
}

.app-drawer__root:not(.is-open) .app-drawer {
  /* keep original closed left from CSS; ensure off-canvas */
}

.app-drawer__root.is-open .app-drawer__backdrop {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.app-drawer__backdrop {
  background: rgba(0, 0, 0, 0.55);
  inset: 0;
  position: fixed;
  z-index: 199;
}

/* Slider baseline if computed transforms missing */
.app-slider__slideshow {
  transition: transform 0.45s ease;
}

/* Static reCAPTCHA mock (forms) */
.recaptcha-mock__box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #f9f9f9;
  color: #202124;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  padding: 12px 14px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  width: 304px;
  box-sizing: border-box;
}

.recaptcha-mock__check {
  width: 28px;
  height: 28px;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  background: #fff;
}

.recaptcha-mock__logo {
  margin-left: auto;
  font-size: 10px;
  color: #555;
}

/* Input focus — match common casino UI */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(235, 176, 88, 0.45);
}

/* Prevent horizontal overflow — jackpot ikonları canlı app.local kurallarına bırak */
img {
  max-width: 100%;
  height: auto;
}

/* Jackpot banner GIF + boss: taşmasın, canlı gibi width:100% / sabit boss */
.home__jackpot picture img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: fill !important;
}

.home__jackpot .jackpot__banner img,
.jackpot__banner img {
  display: block !important;
  width: 150px !important;
  max-width: 150px !important;
  height: auto !important;
}

@media (min-width: 1024px) {
  .home__jackpot .jackpot__banner img,
  .jackpot__banner img {
    width: 100px !important;
    max-width: 100px !important;
  }
}

/* İkonlar: canlı 6rem kolon — height/width 100% + contain */
.shared-jackpot-box__icon img,
.bl-jackpot-box__icon img,
.amusnet-jackpot-box__icon img,
.cc-jackpot-box__icon img,
.jackpot-box__icon img {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.method-box img {
  max-width: none !important;
}

.home__jackpot,
.home__jackpot .jackpot,
.home__jackpot .bl-jackpot,
.home__jackpot .amusnet-jackpot,
.home__jackpot .pragmatic-jackpot,
.home__jackpot .cc-jackpot,
.jackpot__root,
.bl-jackpot__root,
.amusnet-jackpot__root,
.shared-jackpot-box,
.bl-jackpot-box,
.amusnet-jackpot-box {
  max-width: 100%;
  box-sizing: border-box;
}

/* leagues unscoped padding:0 app.local’da home__jackpot üst boşluğunu silmesin */
.home__jackpot.app-container,
.app-container.home__jackpot {
  padding: 1rem 0.5rem 0 !important;
  overflow: visible !important;
}

.shared-jackpot-box header,
.bl-jackpot-box header,
.amusnet-jackpot-box header,
.cc-jackpot-box header,
.jackpot-box header {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 1023px) {
  /* Canlı mobil: --3-1 = 33.33%; kare creatives için --square ayrı */
  .home .app-slider {
    height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .home .app-slider.app-slider--3-1 {
    padding-bottom: 33.3333333333% !important;
  }

  .home .app-slider.app-slider--square {
    padding-bottom: 100% !important;
  }

  .home .app-slider__root {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .home .app-slide {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .home .app-slider img,
  .home .app-slide img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
  }
}

.app-slider img,
.app-slide img {
  max-width: none;
}

@media (max-width: 1023px) {
  .app-header__links {
    display: none !important;
  }

  .app-header__slogan,
  .app-header__dropdown,
  .app-header__dropdown.dropdown--visible,
  .dropdown--left,
  .dropdown--right {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  .app-drawer__root:not(.is-open) {
    pointer-events: none;
  }

  .app-drawer__root:not(.is-open) .app-drawer {
    visibility: hidden;
  }

  /* Keep drawer out of document flow always */
  .app-drawer__root,
  .app-drawer__root.have-notification-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    z-index: 200;
    pointer-events: none;
  }

  .app-drawer__root .app-drawer,
  .app-drawer__root .side-menu {
    position: absolute !important;
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-drawer__root:not(.is-open) {
    visibility: hidden;
  }

  .app-drawer__root.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  main {
    min-height: 50vh;
  }
}