/* Mobile-specific homepage layout, matching cricxbet99.xyz /m/home */

.m-header { display: none; }
.m-menu-backdrop { display: none; }
.m-menu-panel { display: none; }

@media (max-width: 767px) {
  .wrapper > header.header { display: none !important; }

  /* Two unrelated desktop rules leave a dead gutter on the right of every
     row on mobile:
     1) bootstrap.min.css ships .col-md-* widths without the min-width:768px
        guard, so col-md-10 stays at 83.33% even though the sidebar
        (col-md-2) is display:none on mobile.
     2) desktop/style.css has an unguarded ".featured-box { max-width:85%
        !important }" that always wins over col-md-10 regardless.
     Force full width below the md breakpoint with matching !important. */
  .featured-box.col-md-10,
  [class*="col-md-"] {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .m-header {
    display: block;
    background-color: var(--theme1-bg, #8a4e00);
    color: #fff;
  }

  .m-header .logo { text-align: left; }
  .m-header .logo a { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
  .m-header .logo .fas.fa-home { font-size: 20px; vertical-align: middle; color: #fff; }
  .m-header .logo img.logo { width: 130px; margin-left: 5px; }

  .m-menu-toggle {
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    padding: 4px 10px 4px 0;
    line-height: 1;
  }

  .m-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
  }
  .m-menu-backdrop.open { display: block; }

  .m-menu-panel {
    display: block;
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    max-width: 80%;
    height: 100vh;
    background: #fff;
    z-index: 1050;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.25);
    transition: left 0.3s ease;
    overflow-y: auto;
  }
  .m-menu-panel.open { left: 0; }

  .m-menu-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background-color: var(--theme1-bg, #8a4e00);
  }
  .m-menu-panel-head .logo { width: 120px; }
  .m-menu-close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1;
  }

  .m-menu-list { margin: 0; padding: 8px 0; }
  .m-menu-list .nav-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    color: #23281f;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .m-menu-list .nav-item a em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--theme2-bg, #116257);
    border-radius: 3px;
    padding: 1px 5px;
  }
  .m-menu-list .nav-item.active a { color: var(--theme1-bg, #8a4e00); }

  .m-header .bal-expo { font-size: 14px; color: #fff; }
  .m-header .bal-expo img { width: 16px; }
  .m-header .bal-expo a, .m-header .bal-expo u { color: #fff; text-decoration: none; }

  .m-account-dropdown { position: relative; }
  .m-account-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    color: #000;
    box-shadow: 1px 0 10px rgba(0,0,0,0.5);
    border-radius: 4px;
    min-width: 180px;
    z-index: 50;
    padding: 5px 0;
  }
  .m-account-menu .dropdown-item { display: block; padding: 6px 14px; color: #000; text-decoration: none; font-size: 13px; }
  .m-account-menu .dropdown-item:hover { background: #f1f5f8; }

  .m-header .header-bottom { position: relative; min-height: 35px; margin-top: 6px; display: flex; align-items: center; }
  .m-header .search-box-container { position: relative; z-index: 5; flex: 0 0 auto; }
  .m-header .search-box {
    background-color: #fff;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    overflow: hidden;
  }
  .m-header .search_input { border: 0; outline: 0; background: none; width: 0; line-height: 30px; padding: 0; }
  .m-header .search_icon {
    height: 30px; width: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #8a4e00;
  }
  .m-header .marquee1 {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    font-size: 13px;
    line-height: 30px;
    margin-left: 10px;
    color: #fff;
  }
  .m-header .marquee1 span { display: inline-block; padding-left: 100%; animation: m-marquee 15s linear infinite; }
  @keyframes m-marquee { 0% { transform: translate(0); } 100% { transform: translate(-100%); } }

  .m-header .latest-event {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    margin: 8px 0 4px;
    padding-bottom: 4px;
  }
  .m-header .latest-event-item {
    display: inline-flex;
    align-items: center;
    background: var(--theme2-bg, #116257);
    border-radius: 4px;
    padding: 3px 8px;
    margin-right: 6px;
    flex: 0 0 auto;
  }
  .m-header .latest-event-item img { width: 14px; margin-right: 4px; }
  .m-header .latest-event-item a { color: #fff; text-decoration: none; display: flex; align-items: center; }
  .m-header .latest-event-item span { font-size: 11px; font-weight: bold; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
  .m-header .latest-event-item b { display: block; font-size: 10px; font-weight: normal; margin-left: 4px; white-space: nowrap; }

  /* "my favourites" grid (.col-casino): desktop CSS hard-codes 7 columns
     (14.2857143%) with no mobile override, and .row.row5 isn't guaranteed
     to be flex here. Live shows a proper 4-column wrapping grid on mobile. */
  .home-products-container .row.row5 {
    display: flex !important;
    flex-wrap: wrap;
  }
  .home-products-container .row.row5 .col-casino {
    width: 25% !important;
    max-width: 25% !important;
    padding: 2px !important;
  }
  .home-products-container .row.row5 .col-casino .casinoicons img {
    height: auto;
  }

  /* "New Launch" grid (.newlaunch .col-3): thumbnails had no fixed size, so
     each card's height followed its own image's native aspect ratio, leaving
     a ragged grid. Match the "my favourites" grid (.col-casino .casinoicons)
     instead: same image height and the same gradient caption bar. */
  .newlaunch .col-3 {
    display: flex;
    flex-direction: column;
  }
  .newlaunch .col-3 img {
    width: 100%;
    height: 90px;
    object-fit: fill;
  }
  .newlaunch .col-3 .casino-name {
    background-image: linear-gradient(var(--theme1-bg), var(--theme2-bg));
    color: var(--primary-color);
    padding: 5px 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 0;
    font-size: 8px;
    height: 34px;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  /* "Our providers" grid: same issue, live shows 3 per row on mobile */
  .csn_div {
    display: flex;
    flex-wrap: wrap;
  }
  .csn_thumb {
    width: calc(33.3333% - 4px) !important;
    box-sizing: border-box;
    padding: 2px;
  }
  .csn_thumb img { width: 100%; }

  /* Popular Games strip: desktop CSS hard-codes 8 columns (12.5%) with no mobile
     override. Live shows 4 per row on mobile. */
  .hc_div .col-3 {
    width: 25% !important;
    max-width: 25% !important;
  }

  /* Match-list table: live caps this to a small internally-scrolling box on
     mobile (max-height:230px) instead of showing the full inline list. */
  .scrollHeight .game-listing-container {
    width: 100%;
    max-height: 230px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Live's mobile match list uses stacked cards (game name row, then a 1/X/2
     odds row), not a wide table. Reflow the existing table into that shape
     instead of duplicating all match rows into new markup. */
  .coupon-table thead { display: none; }
  .coupon-table, .coupon-table tbody, .coupon-table tr { display: block; width: 100%; }
  .coupon-table tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e2e2e2;
    padding: 6px 4px;
  }
  .coupon-table tr > td:first-child {
    flex: 0 0 100%;
    max-width: 100%;
    border: 0;
    padding: 0 0 4px;
  }
  .coupon-table tr > td:first-child .game-icons { display: inline-flex; vertical-align: middle; margin-left: 6px; }
  .coupon-table tr > td:not(:first-child) {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
    border: 0;
    padding: 1px;
  }
  .coupon-table .game-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .coupon-table .game-name a {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 78%;
    vertical-align: middle;
  }
  .coupon-table .game-icons .game-icon { font-size: 11px; }
  .coupon-table button.back,
  .coupon-table button.lay {
    display: block;
    width: 100%;
    font-size: 11px;
    line-height: 1.4;
    padding: 4px 0;
    border: 0;
  }
  .coupon-table button.back { background: #72bbef; }
  .coupon-table button.lay { background: #faa9ba; }

  /* LIVE/VIRTUAL/PREMIUM + "View by" row: dashboard-inline.css pins
     ul.live_virtual with position:absolute; right:13%, sized for desktop's
     wide filter bar. At 360px that 13% offset lands the pills on top of
     .filter-ct's "View by" dropdown and the tabs above. Take it out of
     absolute positioning so the flex column below can stack them instead. */
  .tab-content > div[style*="position: relative"] {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .live_virtual {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 5px 0 !important;
    padding: 0;
    order: 1;
    float: none !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
  .live_virtual li {
    margin-right: 10px;
    font-size: 12px;
  }
  .filter-ct {
    float: none !important;
    width: 100% !important;
    text-align: right;
    margin: 5px 0;
    order: 2;
  }
}