/* NOWBIGWIN responsive fix — front end only. */
html, body { max-width: 100%; overflow-x: hidden !important; }
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

@media (max-width: 1024px) {
  /* Prevent fixed desktop widths from creating horizontal scrolling. */
  .container, .site-container, .content-area, .page-content,
  .luckywin-container, .luckywin-content, .draws-container,
  .elementor-container, .elementor-section, .elementor-widget-wrap {
    max-width: 100% !important;
  }

  /* Common header layouts: allow navigation/actions to wrap instead of overflowing. */
  header, .site-header, .main-header, .luckywin-header,
  .elementor-location-header header {
    max-width: 100% !important;
  }
  header .container, .site-header .container, .main-header .container,
  .luckywin-header .container, .elementor-location-header .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Home hero / two-column blocks become a single column on smaller screens. */
  .hero, .hero-section, .luckywin-hero, .home-hero,
  .hero-content, .luckywin-hero-content,
  .hero-inner, .luckywin-hero-inner {
    max-width: 100% !important;
  }
  .hero, .hero-section, .luckywin-hero, .home-hero,
  .hero-inner, .luckywin-hero-inner {
    width: 100% !important;
  }

  /* Generic grid safety for cards/stats/draw listings. */
  .draw-grid, .luckywin-draw-grid, .draws-grid,
  .stats-grid, .luckywin-stats, .cards-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  body { min-width: 0 !important; }

  /* Keep the existing header visible without forcing desktop width. */
  header, .site-header, .main-header, .luckywin-header {
    width: 100% !important;
    min-width: 0 !important;
  }
  header *, .site-header *, .main-header *, .luckywin-header * {
    max-width: 100%;
  }

  /* Header controls can wrap to a second line rather than push the page sideways. */
  header .container, .site-header .container, .main-header .container,
  .luckywin-header .container,
  header .header-inner, .site-header .header-inner,
  .main-header .header-inner, .luckywin-header .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Main content padding that is too large on phones. */
  main, .site-main, .content-area, .page-content,
  .luckywin-container, .luckywin-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Home hero: stack text, stats and artwork; remove desktop min-heights. */
  .hero, .hero-section, .luckywin-hero, .home-hero,
  .hero-inner, .luckywin-hero-inner {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .hero-content, .luckywin-hero-content,
  .hero-left, .hero-right, .luckywin-hero-left, .luckywin-hero-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Stop oversized decorative/prize artwork from causing horizontal overflow. */
  .hero img, .hero-section img, .luckywin-hero img, .home-hero img,
  .hero-right img, .luckywin-hero-right img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Stats become a clean 2/1-column flow on phones. */
  .stats-grid, .luckywin-stats, .hero-stats,
  .stats, .luckywin-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }
  .stats-grid > *, .luckywin-stats > *, .hero-stats > *,
  .stats > *, .luckywin-stats-grid > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Draw cards stay inside the viewport. */
  .draw-grid, .luckywin-draw-grid, .draws-grid, .cards-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }
  .draw-card, .luckywin-draw-card, .draw-item, .card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .stats-grid, .luckywin-stats, .hero-stats, .luckywin-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .draw-grid, .luckywin-draw-grid, .draws-grid, .cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile navigation: added without changing desktop navigation. */
.nowbigwin-mobile-menu-button,
.nowbigwin-mobile-menu-panel {
  display: none;
}

@media (max-width: 767px) {
  .nowbigwin-has-mobile-menu {
    position: relative !important;
  }

  /* Keep the existing desktop navigation out of the phone layout only. */
  .nowbigwin-has-mobile-menu .nowbigwin-original-nav {
    display: none !important;
  }

  .nowbigwin-mobile-menu-button {
    display: flex !important;
    width: 46px !important;
    height: 42px !important;
    min-width: 46px !important;
    margin-left: auto !important;
    padding: 8px !important;
    border: 1px solid #d8e2dc !important;
    border-radius: 8px !important;
    background: #fff !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    z-index: 100002 !important;
  }

  .nowbigwin-mobile-menu-button span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 3px !important;
    background: #0b8f4a !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  .nowbigwin-mobile-menu-button.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .nowbigwin-mobile-menu-button.is-open span:nth-child(2) {
    opacity: 0 !important;
  }
  .nowbigwin-mobile-menu-button.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  .nowbigwin-mobile-menu-panel {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    background: #fff !important;
    border-top: 1px solid #e3ebe6 !important;
    border-bottom: 1px solid #dfe8e2 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
    z-index: 100001 !important;
    overflow: hidden !important;
  }

  .nowbigwin-mobile-menu-panel.is-open {
    display: block !important;
  }

  .nowbigwin-mobile-menu-link {
    display: block !important;
    width: 100% !important;
    padding: 13px 14px !important;
    margin: 0 !important;
    color: #111 !important;
    background: #fff !important;
    text-decoration: none !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid #edf1ee !important;
  }

  .nowbigwin-mobile-menu-link:last-child {
    border-bottom: 0 !important;
  }
}