/* ============================================
   Global content tables — styled as cards.
   Applies to any <table> in post/page/casino/game/bonus content.
   Excludes:
     - .casino-table.facts-table (own 2-col card style)
     - table inside .mercury-search-notification-container
     - tables inside .wp-admin (backend)
     - tables inside .sclv-* tool blocks (casino page internals)
     - .mrc-skip-table (escape hatch)
   Auto-wrap scroll via content-tables.js -> .mrc-table-wrap
   ============================================ */

/* ===== Card wrapper — rounded border, shadow, horizontal scroll ===== */
body .mrc-table-wrap {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* margin: 22px 0; 
     background: #fff;
    border: 1px solid rgba(92,38,152,0.12);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(17,24,39,0.04), 0 8px 24px rgba(17,24,39,0.06); */
    scrollbar-width: thin;
    scrollbar-color: rgba(92,38,152,0.3) transparent;
}

/* Gutenberg <figure class="wp-block-table"> wraps some tables. WP core sets
   .wp-block-table { overflow-x: auto } which computes overflow-y to auto too
   → clips our inner wrapper's box-shadow and border-radius.
   Neutralize the figure so the inner .mrc-table-wrap carries the full card look.
   Using figure.wp-block-table direct selector (no :has()) for max browser support. */
body figure.wp-block-table,
html body .wp-block-table {
    margin: 22px auto !important;
    border-radius: 16px;
    font-size: 15px;
    max-width: 1000px;
    border: 1px solid rgba(92, 38, 152, 0.12);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.06);
}
body figure.wp-block-table > .mrc-table-wrap,
html body .wp-block-table > .mrc-table-wrap {
    margin: 0 !important;
}
.kazino-info-tabs .casino-tab-content p, 
.kazino-info-tabs .casino-tab-content h3 {
max-width: unset;
}
/* Strip the default 1px cell border from WP core table block styles
   (wp-includes/blocks/table/style.min.css) — we use our own dashed dividers */
body .wp-block-table td,
body .wp-block-table th,
body .mrc-table-wrap > table td,
body .mrc-table-wrap > table th {
    border: none;
}

/* Legacy wrappers around tables — older pages have various containers:
    .rtptabbles, .slotvader-table-container, etc.
   Their Customizer CSS (width, margin, box-shadow, bg) conflicts with the
   inner .mrc-table-wrap card look. Make them transparent passthroughs so the
   inner wrapper carries the full card styling. */
body .rtptabbles:not(.rtptabbles-new),
body .slotvader-table-container,
body .table-container,
body .responsive-table {
    width: auto !important;
    max-width: 100% !important;
    margin: 22px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
body .rtptabbles:not(.rtptabbles-new) > .mrc-table-wrap,
body .slotvader-table-container > .mrc-table-wrap,
body .table-container > .mrc-table-wrap,
body .responsive-table > .mrc-table-wrap {
    margin: 0 !important;
}

.mrc-table-wrap::-webkit-scrollbar        { height: 8px; }
.mrc-table-wrap::-webkit-scrollbar-track  { background: transparent; }
.mrc-table-wrap::-webkit-scrollbar-thumb  { background: rgba(92,38,152,0.25); border-radius: 4px; }
.mrc-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(92,38,152,0.45); }

/* ===== Table inside wrapper ===== */
.mrc-table-wrap > table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: transparent;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Header row — real <thead> or first <tr> if no thead */
.mrc-table-wrap > table thead tr,
.mrc-table-wrap > table:not(:has(thead)) tbody tr:first-child {
    background: linear-gradient(135deg, #5c2698, #7c3aed);
    color: #fff;
}
.mrc-table-wrap > table thead th,
.mrc-table-wrap > table thead td,
.mrc-table-wrap > table:not(:has(thead)) tbody tr:first-child td,
.mrc-table-wrap > table:not(:has(thead)) tbody tr:first-child th {
  
    font-weight: 700;
    font-size: 0.88em;
    letter-spacing: 0.02em;
    padding: 14px 16px;
    text-transform: uppercase;
    border-bottom: none;
    vertical-align: middle;
    text-align: left;
}

/* Body cells */
.mrc-table-wrap > table tbody tr:not(:first-child) td,
.mrc-table-wrap > table tbody tr:not(:first-child) th,
.mrc-table-wrap > table thead + tbody tr td,
.mrc-table-wrap > table thead + tbody tr th {
    padding: 12px 16px;
    border-bottom: 1px dashed rgba(17,24,39,0.08);
    color: #1f2937;
    vertical-align: middle;
    text-align: left;
}
.mrc-table-wrap > table tbody tr:last-child td,
.mrc-table-wrap > table tbody tr:last-child th {
    border-bottom: none;
}

/* Zebra stripes */
.mrc-table-wrap > table:not(:has(thead)) tbody tr:not(:first-child):nth-child(odd),
.mrc-table-wrap > table thead + tbody tr:nth-child(even) {
    background: rgba(92,38,152,0.025);
}

/* Hover */
.mrc-table-wrap > table tbody tr:not(:first-child):hover,
.mrc-table-wrap > table thead + tbody tr:hover {
    background: rgba(92,38,152,0.07);
    transition: background 0.2s;
}

/* First column emphasis (often a "name" column) */
.mrc-table-wrap > table tbody tr:not(:first-child) td:first-child,
.mrc-table-wrap > table thead + tbody tr td:first-child {
    font-weight: 600;
    color: #4b2678;
}

/* Links inside tables */
.mrc-table-wrap > table a {
    color: #5c2698;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.mrc-table-wrap > table a:hover {
    color: #e84393;
}

/* Images inside tables (logos, thumbnails) */
.mrc-table-wrap > table img {
    max-width: 80px;
    height: auto;
    vertical-align: middle;
    border-radius: 6px;
}

/* ===== Mobile: break out of narrow container ===== */
@media (max-width: 640px) {
    .mrc-table-wrap {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-width: 100vw;
    }
    .mrc-table-wrap > table {
        min-width: 540px;
        font-size: 0.88em;
    }
    .mrc-table-wrap > table thead th,
    .mrc-table-wrap > table thead td,
    .mrc-table-wrap > table:not(:has(thead)) tbody tr:first-child td,
    .mrc-table-wrap > table thead + tbody tr td,
    .mrc-table-wrap > table thead + tbody tr th,
    .mrc-table-wrap > table tbody tr:not(:first-child) td {
        padding: 10px 12px;
        font-size: 0.85em;
    }
}

/* Scroll fade hint on narrow screens */
@supports (mask-image: linear-gradient(to right, black 80%, transparent)) {
    @media (max-width: 900px) {
        .mrc-table-wrap.has-overflow {
            mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
            -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
        }
        .mrc-table-wrap.has-overflow:hover,
        .mrc-table-wrap.has-overflow:focus-within,
        .mrc-table-wrap.at-end {
            mask-image: none;
            -webkit-mask-image: none;
        }
    }
}