/* ============================================
   Mobile styles for tables
   Horizontal scroll with fixed header
   CSS-only solution (no JavaScript required)
   ============================================ */

/* General styles for all tables */
.wp-block-table,
.entry-content table,
.post-content table,
.wp-block-post-content table,
.casino-main__content table,
.gpost__col-02 table,
.payment-bottom__col-02 table,
.categories-bottom__content table,
.provider-bottom__content table {
  margin: 20px 0;
  width: 100%;
}

.wp-block-table table,
.entry-content table,
.post-content table,
.wp-block-post-content table,
.casino-main__content table,
.gpost__col-02 table,
.payment-bottom__col-02 table,
.categories-bottom__content table,
.provider-bottom__content table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Montserrat", sans-serif;
}

/* ============================================
   Mobile styles - Horizontal scroll
   ============================================ */

@media screen and (max-width: 768px) {
  /* Default: tables with 3 or fewer columns - no scroll, normal display */
  .wp-block-table,
  .entry-content table,
  .post-content table,
  .wp-block-post-content table,
  .casino-main__content table,
  .gpost__col-02 table,
  .payment-bottom__col-02 table,
  .categories-bottom__content table,
  .provider-bottom__content table {
    display: block;
    width: 100%;
    position: relative;
  }

  /* Tables with more than 3 columns - enable horizontal scroll */
  .wp-block-table:has(th:nth-child(4)),
  .wp-block-table:has(td:nth-child(4)),
  .entry-content table:has(th:nth-child(4)),
  .entry-content table:has(td:nth-child(4)),
  .post-content table:has(th:nth-child(4)),
  .post-content table:has(td:nth-child(4)),
  .wp-block-post-content table:has(th:nth-child(4)),
  .wp-block-post-content table:has(td:nth-child(4)),
  .casino-main__content table:has(th:nth-child(4)),
  .casino-main__content table:has(td:nth-child(4)),
  .gpost__col-02 table:has(th:nth-child(4)),
  .gpost__col-02 table:has(td:nth-child(4)),
  .payment-bottom__col-02 table:has(th:nth-child(4)),
  .payment-bottom__col-02 table:has(td:nth-child(4)),
  .categories-bottom__content table:has(th:nth-child(4)),
  .categories-bottom__content table:has(td:nth-child(4)),
  .provider-bottom__content table:has(th:nth-child(4)),
  .provider-bottom__content table:has(td:nth-child(4)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fallback for browsers without :has() support - apply scroll to all tables */
  @supports not selector(:has(*)) {
    .wp-block-table,
    .entry-content table,
    .post-content table,
    .wp-block-post-content table,
    .casino-main__content table,
    .gpost__col-02 table,
    .payment-bottom__col-02 table,
    .categories-bottom__content table,
    .provider-bottom__content table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  /* Table styling - for tables with more than 3 columns */
  .wp-block-table:has(th:nth-child(4)) table,
  .wp-block-table:has(td:nth-child(4)) table,
  .entry-content table:has(th:nth-child(4)),
  .entry-content table:has(td:nth-child(4)),
  .post-content table:has(th:nth-child(4)),
  .post-content table:has(td:nth-child(4)),
  .wp-block-post-content table:has(th:nth-child(4)),
  .wp-block-post-content table:has(td:nth-child(4)),
  .casino-main__content table:has(th:nth-child(4)),
  .casino-main__content table:has(td:nth-child(4)),
  .gpost__col-02 table:has(th:nth-child(4)),
  .gpost__col-02 table:has(td:nth-child(4)),
  .payment-bottom__col-02 table:has(th:nth-child(4)),
  .payment-bottom__col-02 table:has(td:nth-child(4)),
  .categories-bottom__content table:has(th:nth-child(4)),
  .categories-bottom__content table:has(td:nth-child(4)),
  .provider-bottom__content table:has(th:nth-child(4)),
  .provider-bottom__content table:has(td:nth-child(4)) {
    width: auto;
    min-width: 100%;
    border: none;
    border-radius: 0;
  }

  /* Table styling - for tables with 3 or fewer columns - normal width */
  .wp-block-table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) table,
  .entry-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))),
  .post-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))),
  .wp-block-post-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))),
  .casino-main__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))),
  .gpost__col-02 table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))),
  .payment-bottom__col-02 table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))),
  .categories-bottom__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))),
  .provider-bottom__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) {
    width: 100%;
    border: none;
    border-radius: 0;
  }

  /* Fallback for browsers without :has() support */
  @supports not selector(:has(*)) {
    .wp-block-table table,
    .entry-content table,
    .post-content table,
    .wp-block-post-content table,
    .casino-main__content table,
    .gpost__col-02 table,
    .payment-bottom__col-02 table,
    .categories-bottom__content table,
    .provider-bottom__content table {
      width: auto;
      min-width: 100%;
      border: none;
    }
  }

  /* Fixed header on scroll - only for tables with more than 3 columns */
  .wp-block-table:has(th:nth-child(4)) thead tr,
  .wp-block-table:has(td:nth-child(4)) thead tr,
  .entry-content table:has(th:nth-child(4)) thead tr,
  .entry-content table:has(td:nth-child(4)) thead tr,
  .post-content table:has(th:nth-child(4)) thead tr,
  .post-content table:has(td:nth-child(4)) thead tr,
  .wp-block-post-content table:has(th:nth-child(4)) thead tr,
  .wp-block-post-content table:has(td:nth-child(4)) thead tr,
  .casino-main__content table:has(th:nth-child(4)) thead tr,
  .casino-main__content table:has(td:nth-child(4)) thead tr,
  .gpost__col-02 table:has(th:nth-child(4)) thead tr,
  .gpost__col-02 table:has(td:nth-child(4)) thead tr,
  .payment-bottom__col-02 table:has(th:nth-child(4)) thead tr,
  .payment-bottom__col-02 table:has(td:nth-child(4)) thead tr,
  .categories-bottom__content table:has(th:nth-child(4)) thead tr,
  .categories-bottom__content table:has(td:nth-child(4)) thead tr,
  .provider-bottom__content table:has(th:nth-child(4)) thead tr,
  .provider-bottom__content table:has(td:nth-child(4)) thead tr {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  /* Fallback for browsers without :has() support */
  @supports not selector(:has(*)) {
    .wp-block-table thead tr,
    .entry-content table thead tr,
    .post-content table thead tr,
    .wp-block-post-content table thead tr,
    .casino-main__content table thead tr,
    .gpost__col-02 table thead tr,
    .payment-bottom__col-02 table thead tr,
    .categories-bottom__content table thead tr,
    .provider-bottom__content table thead tr {
      position: sticky;
      top: 0;
      z-index: 10;
    }
  }

  /* Header cells styling - for tables with more than 3 columns */
  .wp-block-table:has(th:nth-child(4)) th,
  .wp-block-table:has(td:nth-child(4)) th,
  .entry-content table:has(th:nth-child(4)) th,
  .entry-content table:has(td:nth-child(4)) th,
  .post-content table:has(th:nth-child(4)) th,
  .post-content table:has(td:nth-child(4)) th,
  .wp-block-post-content table:has(th:nth-child(4)) th,
  .wp-block-post-content table:has(td:nth-child(4)) th,
  .casino-main__content table:has(th:nth-child(4)) th,
  .casino-main__content table:has(td:nth-child(4)) th,
  .gpost__col-02 table:has(th:nth-child(4)) th,
  .gpost__col-02 table:has(td:nth-child(4)) th,
  .payment-bottom__col-02 table:has(th:nth-child(4)) th,
  .payment-bottom__col-02 table:has(td:nth-child(4)) th,
  .categories-bottom__content table:has(th:nth-child(4)) th,
  .categories-bottom__content table:has(td:nth-child(4)) th,
  .provider-bottom__content table:has(th:nth-child(4)) th,
  .provider-bottom__content table:has(td:nth-child(4)) th {
    background-color: #2a2e36;
    color: #ffcf05;
    font-weight: 700;
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 2px solid #7113ff;
    white-space: nowrap;
    min-width: 100px;
  }

  /* Header cells styling - for tables with 3 or fewer columns */
  .wp-block-table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .entry-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .post-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .wp-block-post-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .casino-main__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .gpost__col-02 table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .payment-bottom__col-02 table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .categories-bottom__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th,
  .provider-bottom__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) th {
    background-color: #2a2e36;
    color: #ffcf05;
    font-weight: 700;
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 2px solid #7113ff;
    white-space: normal;
    word-wrap: break-word;
  }

  /* Fallback for browsers without :has() support */
  @supports not selector(:has(*)) {
    .wp-block-table th,
    .entry-content table th,
    .post-content table th,
    .wp-block-post-content table th,
    .casino-main__content table th,
    .gpost__col-02 table th,
    .payment-bottom__col-02 table th,
    .categories-bottom__content table th,
    .provider-bottom__content table th {
      background-color: #2a2e36;
      color: #ffcf05;
      font-weight: 700;
      text-align: left;
      padding: 12px 16px;
      font-size: 14px;
      border-bottom: 2px solid #7113ff;
      white-space: nowrap;
      min-width: 100px;
    }
  }

  /* Table cells styling - for tables with more than 3 columns */
  .wp-block-table:has(th:nth-child(4)) td,
  .wp-block-table:has(td:nth-child(4)) td,
  .entry-content table:has(th:nth-child(4)) td,
  .entry-content table:has(td:nth-child(4)) td,
  .post-content table:has(th:nth-child(4)) td,
  .post-content table:has(td:nth-child(4)) td,
  .wp-block-post-content table:has(th:nth-child(4)) td,
  .wp-block-post-content table:has(td:nth-child(4)) td,
  .casino-main__content table:has(th:nth-child(4)) td,
  .casino-main__content table:has(td:nth-child(4)) td,
  .gpost__col-02 table:has(th:nth-child(4)) td,
  .gpost__col-02 table:has(td:nth-child(4)) td,
  .payment-bottom__col-02 table:has(th:nth-child(4)) td,
  .payment-bottom__col-02 table:has(td:nth-child(4)) td,
  .categories-bottom__content table:has(th:nth-child(4)) td,
  .categories-bottom__content table:has(td:nth-child(4)) td,
  .provider-bottom__content table:has(th:nth-child(4)) td,
  .provider-bottom__content table:has(td:nth-child(4)) td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #2a2e36;
    color: #e7eaee;
    font-size: 14px;
    white-space: nowrap;
    vertical-align: top;
  }

  /* Table cells styling - for tables with 3 or fewer columns - allow text wrapping */
  .wp-block-table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .entry-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .post-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .wp-block-post-content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .casino-main__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .gpost__col-02 table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .payment-bottom__col-02 table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .categories-bottom__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td,
  .provider-bottom__content table:not(:has(th:nth-child(4))):not(:has(td:nth-child(4))) td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #2a2e36;
    color: #e7eaee;
    font-size: 14px;
    white-space: normal;
    word-wrap: break-word;
    vertical-align: top;
  }

  /* Fallback for browsers without :has() support */
  @supports not selector(:has(*)) {
    .wp-block-table td,
    .entry-content table td,
    .post-content table td,
    .wp-block-post-content table td,
    .casino-main__content table td,
    .gpost__col-02 table td,
    .payment-bottom__col-02 table td,
    .categories-bottom__content table td,
    .provider-bottom__content table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #2a2e36;
      color: #e7eaee;
      font-size: 14px;
      white-space: nowrap;
      vertical-align: top;
    }
  }

  /* Row styling */
  .wp-block-table tbody tr,
  .entry-content table tbody tr,
  .post-content table tbody tr,
  .wp-block-post-content table tbody tr,
  .casino-main__content table tbody tr,
  .gpost__col-02 table tbody tr,
  .payment-bottom__col-02 table tbody tr,
  .categories-bottom__content table tbody tr,
  .provider-bottom__content table tbody tr {
    background-color: #1b1d21;
  }

  .wp-block-table tbody tr:nth-child(even),
  .entry-content table tbody tr:nth-child(even),
  .post-content table tbody tr:nth-child(even),
  .wp-block-post-content table tbody tr:nth-child(even),
  .casino-main__content table tbody tr:nth-child(even),
  .gpost__col-02 table tbody tr:nth-child(even),
  .payment-bottom__col-02 table tbody tr:nth-child(even),
  .categories-bottom__content table tbody tr:nth-child(even),
  .provider-bottom__content table tbody tr:nth-child(even) {
    background-color: #23262c;
  }

  .wp-block-table tbody tr:hover,
  .entry-content table tbody tr:hover,
  .post-content table tbody tr:hover,
  .wp-block-post-content table tbody tr:hover,
  .casino-main__content table tbody tr:hover,
  .gpost__col-02 table tbody tr:hover,
  .payment-bottom__col-02 table tbody tr:hover,
  .categories-bottom__content table tbody tr:hover,
  .provider-bottom__content table tbody tr:hover {
    background-color: #2a2e36;
  }

  /* Last row border */
  .wp-block-table tbody tr:last-child td,
  .entry-content table tbody tr:last-child td,
  .post-content table tbody tr:last-child td,
  .wp-block-post-content table tbody tr:last-child td,
  .casino-main__content table tbody tr:last-child td,
  .gpost__col-02 table tbody tr:last-child td,
  .payment-bottom__col-02 table tbody tr:last-child td,
  .categories-bottom__content table tbody tr:last-child td,
  .provider-bottom__content table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Scroll indicator hint - only for tables with more than 3 columns */
  .wp-block-table:has(th:nth-child(4))::after,
  .wp-block-table:has(td:nth-child(4))::after,
  .entry-content table:has(th:nth-child(4))::after,
  .entry-content table:has(td:nth-child(4))::after,
  .post-content table:has(th:nth-child(4))::after,
  .post-content table:has(td:nth-child(4))::after,
  .wp-block-post-content table:has(th:nth-child(4))::after,
  .wp-block-post-content table:has(td:nth-child(4))::after,
  .casino-main__content table:has(th:nth-child(4))::after,
  .casino-main__content table:has(td:nth-child(4))::after,
  .gpost__col-02 table:has(th:nth-child(4))::after,
  .gpost__col-02 table:has(td:nth-child(4))::after,
  .payment-bottom__col-02 table:has(th:nth-child(4))::after,
  .payment-bottom__col-02 table:has(td:nth-child(4))::after,
  .categories-bottom__content table:has(th:nth-child(4))::after,
  .categories-bottom__content table:has(td:nth-child(4))::after,
  .provider-bottom__content table:has(th:nth-child(4))::after,
  .provider-bottom__content table:has(td:nth-child(4))::after {
    content: "← Scroll →";
    position: absolute;
    top: -25px;
    right: 0;
    font-size: 12px;
    color: #9c9fa5;
    font-family: "Montserrat", sans-serif;
    pointer-events: none;
  }
}

/* Desktop styles */
@media (min-width: 769px) {
  .wp-block-table table,
  .entry-content table,
  .post-content table,
  .wp-block-post-content table,
  .casino-main__content table,
  .gpost__col-02 table,
  .payment-bottom__col-02 table,
  .categories-bottom__content table,
  .provider-bottom__content table {
    border: 1px solid #2a2e36;
    border-radius: 8px;
    overflow: hidden;
  }

  .wp-block-table th,
  .entry-content table th,
  .post-content table th,
  .wp-block-post-content table th,
  .casino-main__content table th,
  .gpost__col-02 table th,
  .payment-bottom__col-02 table th,
  .categories-bottom__content table th,
  .provider-bottom__content table th {
    background-color: #2a2e36;
    color: #ffcf05;
    font-weight: 700;
    text-align: left;
    padding: 16px;
    font-size: 16px;
    border-bottom: 2px solid #7113ff;
  }

  .wp-block-table td,
  .entry-content table td,
  .post-content table td,
  .wp-block-post-content table td,
  .casino-main__content table td,
  .gpost__col-02 table td,
  .payment-bottom__col-02 table td,
  .categories-bottom__content table td,
  .provider-bottom__content table td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid #2a2e36;
    color: #e7eaee;
    font-size: 16px;
  }

  .wp-block-table tbody tr:hover,
  .entry-content table tbody tr:hover,
  .post-content table tbody tr:hover,
  .wp-block-post-content table tbody tr:hover,
  .casino-main__content table tbody tr:hover,
  .gpost__col-02 table tbody tr:hover,
  .payment-bottom__col-02 table tbody tr:hover,
  .categories-bottom__content table tbody tr:hover,
  .provider-bottom__content table tbody tr:hover {
    background-color: #23262c;
  }

  .wp-block-table tbody tr:last-child td,
  .entry-content table tbody tr:last-child td,
  .post-content table tbody tr:last-child td,
  .wp-block-post-content table tbody tr:last-child td,
  .casino-main__content table tbody tr:last-child td,
  .gpost__col-02 table tbody tr:last-child td,
  .payment-bottom__col-02 table tbody tr:last-child td,
  .categories-bottom__content table tbody tr:last-child td,
  .provider-bottom__content table tbody tr:last-child td {
    border-bottom: none;
  }
}

/* Scrollbar styling */
.wp-block-table::-webkit-scrollbar,
.entry-content table::-webkit-scrollbar,
.post-content table::-webkit-scrollbar,
.wp-block-post-content table::-webkit-scrollbar,
.casino-main__content table::-webkit-scrollbar,
.gpost__col-02 table::-webkit-scrollbar,
.payment-bottom__col-02 table::-webkit-scrollbar,
.categories-bottom__content table::-webkit-scrollbar,
.provider-bottom__content table::-webkit-scrollbar {
  height: 8px;
}

.wp-block-table::-webkit-scrollbar-track,
.entry-content table::-webkit-scrollbar-track,
.post-content table::-webkit-scrollbar-track,
.wp-block-post-content table::-webkit-scrollbar-track,
.casino-main__content table::-webkit-scrollbar-track,
.gpost__col-02 table::-webkit-scrollbar-track,
.payment-bottom__col-02 table::-webkit-scrollbar-track,
.categories-bottom__content table::-webkit-scrollbar-track,
.provider-bottom__content table::-webkit-scrollbar-track {
  background: #1b1d21;
  border-radius: 4px;
}

.wp-block-table::-webkit-scrollbar-thumb,
.entry-content table::-webkit-scrollbar-thumb,
.post-content table::-webkit-scrollbar-thumb,
.wp-block-post-content table::-webkit-scrollbar-thumb,
.casino-main__content table::-webkit-scrollbar-thumb,
.gpost__col-02 table::-webkit-scrollbar-thumb,
.payment-bottom__col-02 table::-webkit-scrollbar-thumb,
.categories-bottom__content table::-webkit-scrollbar-thumb,
.provider-bottom__content table::-webkit-scrollbar-thumb {
  background: #7113ff;
  border-radius: 4px;
}

.wp-block-table::-webkit-scrollbar-thumb:hover,
.entry-content table::-webkit-scrollbar-thumb:hover,
.post-content table::-webkit-scrollbar-thumb:hover,
.wp-block-post-content table::-webkit-scrollbar-thumb:hover,
.casino-main__content table::-webkit-scrollbar-thumb:hover,
.gpost__col-02 table::-webkit-scrollbar-thumb:hover,
.payment-bottom__col-02 table::-webkit-scrollbar-thumb:hover,
.categories-bottom__content table::-webkit-scrollbar-thumb:hover,
.provider-bottom__content table::-webkit-scrollbar-thumb:hover {
  background: #a80eff;
}
