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

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

body.menu-open {
  overflow: hidden;
}

/* Ensure logo uses local gif when present */
.app-header__logo img {
  max-height: 65px;
  width: auto;
  display: block;
}

/* 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 on mobile, but don't break absolute slider imgs */
img {
  max-width: 100%;
  height: auto;
}

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

@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;
  }
}