/**
 * Responsive overrides for static promo-code pages (captured at desktop viewport).
 * Mirrors BonusPromoCode.vue / JumpLinks.vue behavior on mobile and tablet.
 */

/* Sticky bottom banner: keep close button above footer "back to top" (z-index 52). */
@media (max-width: 1023px) {
  body.stickyBottom .scrollUp {
    z-index: 40;
  }

  body.stickyBottom:not(.sticky-banner-dismissed) .scrollUp {
    bottom: 130px;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 .top-\[10px\].right-\[10px\] {
    z-index: 10;
    cursor: pointer;
  }
}

/* Tablet: favicon xs (52px) */
@media (min-width: 768px) and (max-width: 1023px) {
  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 .w-\[60px\].h-\[60px\] {
    width: 52px !important;
    height: 52px !important;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 img[width="60"][height="60"] {
    width: 52px !important;
    height: 52px !important;
  }
}

/* Mobile: favicon 3xs (32px). Baked HTML uses desktop sm (60px); w-xl/h-xl are already 32px. */
@media (max-width: 767px) {
  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 .flex.gap-sm.items-center.flex-grow > .rounded-pill.w-xl {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 .w-\[60px\].h-\[60px\] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 img[width="60"][height="60"] {
    width: 32px !important;
    height: 32px !important;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 .favicon-glow-sm {
    box-shadow: 0 0 10px 0 currentColor !important;
  }
}

/* Sticky banner CTA row: match production button styling below desktop. */
@media (max-width: 1023px) {
  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 .button-promocode:not(.button-promocode-on-accent) {
    background: linear-gradient(145deg, rgba(209, 213, 219, 0.24), rgba(79, 103, 89, 0.0576)) !important;
    border-color: rgba(79, 103, 89, 0.24) !important;
    color: #1d2937 !important;
    font-weight: 700;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 .button-promocode .border-dashed.color-stroke-accent {
    border-color: #1c7a44 !important;
    border-style: dashed !important;
    border-width: 2px !important;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 a.button-primary {
    background: #2ecc71 !important;
    color: #111827 !important;
    box-shadow: 0 2px 28px -2px #58d68d !important;
    border-color: transparent !important;
    font-weight: 700 !important;
  }

  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 a.button-primary:hover,
  #ssr-page-app-container .fixed.bottom-0.left-0.right-0.z-50 a.button-primary:focus {
    background: radial-gradient(50% 50% at 50% 50%, #2ecc71, rgba(37, 163, 90, 1)) !important;
    box-shadow: 0 2px 32px -2px #58d68d !important;
    color: #111827 !important;
  }
}

/* Promo card CTAs: full-width below md (baked HTML lacks isMobile full-width props). */
@media (max-width: 767px) {
  #ssr-page-app-container [data-aa-tracker*="copy bonus code in Promo card for"] {
    width: 100%;
  }

  #ssr-page-app-container [data-aa-tracker*="copy bonus code in Promo card for"] button.button-promocode {
    width: 100%;
  }

  #ssr-page-app-container [data-aa-tracker*="copy bonus code in Promo card for"] + div {
    width: 100%;
  }

  #ssr-page-app-container [data-aa-tracker*="copy bonus code in Promo card for"] + div a.button-primary {
    width: 100%;
  }
}

/* Game tiles: keep hidden overlays from intercepting taps on mobile static HTML. */
@media (max-width: 767px) {
  #ssr-page-app-container .game-tile-square .game-card-buttons,
  #ssr-page-app-container .game-tile-portrait .game-card-buttons,
  #ssr-page-app-container .game-tile .game-card-buttons,
  #ssr-page-app-container .game-tile-landscape .game-card-buttons {
    display: none !important;
    pointer-events: none !important;
  }

  #ssr-page-app-container .game-tile-square,
  #ssr-page-app-container .game-tile-portrait,
  #ssr-page-app-container .game-tile,
  #ssr-page-app-container .game-tile-landscape {
    cursor: pointer;
  }
}

/* AlternativeCasinos: center "See all …" CTA (baked HTML parent is not flex). */
#ssr-page-app-container section#compares-to-other-online-casinos div.self-center:has(a.button-secondary.px-md) {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  #ssr-page-app-container section#compares-to-other-online-casinos div.self-center:has(a.button-secondary.px-md) {
    margin-top: 24px;
  }
}

/* Jump links: mobile dropdown layout padding (matches JumpLinks.vue dropdownVariant). */
@media (max-width: 767px) {
  #ssr-page-app-container .fixed.top-0.background-glass .container-full > .px-md {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}