/* ============================================================
   Casino Table — default design
   Uses Bricks Global Variables (--ace-*) declared in Theme Styles.
   Local --act-* aliases provide fallbacks so the table degrades
   gracefully if a variable is missing.
   Editors can override any --ace-* in Bricks Design System →
   Variables and the table picks it up automatically.
   ============================================================ */
.act-root{
  --act-ink:        var(--ace-ink,        #0E0F12);
  --act-ink-2:      var(--ace-ink-2,      #1C1E24);
  --act-ink-3:      var(--ace-ink-3,      #2A2D35);
  --act-muted:      var(--ace-muted,      #5B5F69);
  --act-muted-2:    var(--ace-muted-2,    #8A8E97);
  --act-rule:       var(--ace-rule,       #E5E1D6);
  --act-rule-2:     var(--ace-rule-2,     #D9D4C5);
  --act-paper:      var(--ace-paper,      #F6F4EE);
  --act-paper-2:    var(--ace-paper-2,    #EFECE2);
  --act-white:      var(--ace-white,      #FFFFFF);
  --act-lime:       var(--ace-lime,       #D6F432);
  --act-lime-2:     var(--ace-lime-2,     #B8D41C);
  --act-lime-ink:   var(--ace-lime-ink,   #1C2400);
  --act-lime-soft:  rgba(184,212,28,.14); /* selected-row tint in the mobile filter drawer */
  --act-green:      var(--ace-green,      #1F8A5B);
  --act-red:        var(--ace-red,        #D64545);
  --act-amber:      var(--ace-amber,      #E2A33C);
  --act-info:       var(--ace-info,       #2A6FDB);
  --act-shadow-md:  var(--ace-shadow-md,  0 6px 18px rgba(14,15,18,.08));
  --act-r-md:       var(--ace-r-md,       10px);
  --act-r-lg:       var(--ace-r-lg,       14px);
  --act-font-display: var(--ace-font-display, 'Archivo','Helvetica Neue',Arial,sans-serif);
  --act-font-sans:    var(--ace-font-sans,    'IBM Plex Sans','Helvetica Neue',Arial,sans-serif);
  --act-font-mono:    var(--ace-font-mono,    'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace);
  font-family:var(--act-font-sans);color:var(--act-ink);
}
.act-root *,.act-root *::before,.act-root *::after{box-sizing:border-box}

/* ===== Filter bar ===== */
.act-fbar{
  position:relative;z-index:30;
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  background:var(--act-ink);padding:12px 18px;border-radius:14px;
  margin-bottom:0;
}
.act-fbar > *{flex-shrink:0}
.act-fbtn{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 12px;
  background:transparent;border:1px solid var(--act-muted);border-radius:999px;
  font-family:var(--act-font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--act-paper);
  transition:all .12s ease;position:relative;cursor:pointer;
}
.act-fbtn:hover{border-color:var(--act-paper)}
.act-fbtn.is-active{background:var(--act-lime);border-color:var(--act-lime);color:var(--act-lime-ink);font-weight:600}
/* Dropdown filter with no selectable options left after the current AND-filtering. */
.act-fbtn.is-disabled{opacity:.35;pointer-events:none;cursor:default}
.act-fbtn .ct{
  display:inline-flex;align-items:center;justify-content:center;
  height:14px;min-width:14px;padding:0 4px;border-radius:999px;
  background:var(--act-ink);color:var(--act-lime);
  font-family:var(--act-font-mono);font-size:9px;font-weight:700;
}
.act-fbtn .chev{width:8px;height:8px;opacity:.5}
.act-sortbtn .sort-label{display:none} /* "Sort by" label only shown inside the mobile drawer */
.act-fbtn .lbl-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.act-tgl{
  display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 12px 0 11px;
  background:transparent;border:1px solid var(--act-muted);border-radius:999px;
  font-family:var(--act-font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--act-paper);
  transition:all .12s ease;cursor:pointer;
}
.act-tgl:hover{border-color:var(--act-paper)}
.act-tgl .pip{width:6px;height:6px;border-radius:999px;background:var(--act-ink-3)}
.act-tgl.is-on{background:var(--act-lime);border-color:var(--act-lime);color:var(--act-lime-ink);font-weight:600}
.act-tgl.is-on .pip{background:var(--act-lime-ink)}
.act-sep{display:inline-block;width:1px;height:18px;background:var(--act-ink-3);margin:0 6px}
.act-fbar .act-right{margin-left:auto;display:inline-flex;gap:6px;align-items:center}

/* Popovers */
.act-pop{
  position:absolute;top:calc(100% + 6px);left:0;z-index:200;min-width:240px;
  background:#fff;border:1px solid var(--act-rule-2);border-radius:10px;
  box-shadow:0 18px 40px rgba(14,15,18,.12);padding:14px;
  display:none !important;
}
.act-pop.open{display:block !important}
.act-pop.sort-pop.open{display:flex !important;flex-direction:column;gap:1px;padding:4px;min-width:200px}
.act-pop.pop-right{left:auto;right:0}
.act-pop h5{margin:0 0 10px;font-family:var(--act-font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--act-muted);font-weight:500}
.act-pop label{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;font-size:12.5px;color:var(--act-ink-2)}
.act-pop label .c{margin-left:auto;font-family:var(--act-font-mono);font-size:10px;color:var(--act-muted-2)}
.act-pop input[type=checkbox],.act-pop input[type=radio]{accent-color:var(--act-ink);width:14px;height:14px;flex-shrink:0}
.act-pop.sort-pop button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:5px;border:0;background:transparent;
  font-family:var(--act-font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--act-ink-2);text-align:left;cursor:pointer;white-space:nowrap;
}
.act-pop.sort-pop button:hover{background:var(--act-paper)}
.act-pop.sort-pop button.active{background:var(--act-ink);color:var(--act-paper)}
.act-pop.sort-pop button.active svg{color:var(--act-lime)}

/* ===== Row cards ===== */
.act-tbl{display:flex;flex-direction:column;gap:10px;padding:12px 0 0}

/* Empty state when no rows match the active filters */
.act-empty{
  background:var(--act-white);
  border:1px dashed var(--act-rule-2);
  border-radius:12px;
  padding:40px 24px;
  text-align:center;
}
.act-empty p{
  margin:0 0 14px;font-family:var(--act-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--act-muted);
}
.act-empty-reset{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 18px;background:var(--act-ink);color:var(--act-paper);
  border:0;border-radius:8px;cursor:pointer;
  font-family:var(--act-font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.act-empty-reset:hover{background:var(--act-ink-2)}
.act-row{
  position:relative;background:var(--act-white);
  border:1px solid var(--act-rule);border-radius:12px;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.act-row:hover{transform:translateY(-2px);box-shadow:var(--act-shadow-md);border-color:var(--act-rule-2)}
.act-row.is-featured{
  background:linear-gradient(180deg,#FDFEEC 0%,#FFFFFF 70%);
  border-color:var(--act-lime-2);
  box-shadow:0 0 0 1px var(--act-lime-2) inset, 0 6px 18px rgba(184,212,28,.10);
}

.act-ribbon{
  position:absolute;top:0;left:0;
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 10px 0 11px;
  background:var(--act-lime);color:var(--act-lime-ink);
  border-radius:0 0 8px 0;
  font-family:var(--act-font-mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  z-index:5;
}
.act-ribbon.new{background:var(--act-info);color:#fff}

.act-rmain{
  display:grid;
  grid-template-columns:
    72px
    minmax(220px,1.7fr)
    minmax(180px,1.3fr)
    100px
    140px
    minmax(180px,200px);
  gap:18px;align-items:center;padding:30px 22px 16px;
}

.act-rank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 0}
.act-rank .n{font-family:var(--act-font-display);font-weight:900;font-size:32px;line-height:1;letter-spacing:-.04em;color:var(--act-ink)}
.act-rank .b{display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--act-rule-2)}
.act-row.top-1 .act-rank .b{width:22px;height:3px;background:var(--act-lime)}
.act-row.top-2 .act-rank .b{background:var(--act-ink-3)}
.act-row.top-3 .act-rank .b{background:var(--act-amber)}

.act-c-brand{display:flex;align-items:center;gap:14px;min-width:0}
.act-logo{
  width:56px;height:56px;flex-shrink:0;border-radius:14px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:transparent;color:var(--act-ink);
  font-family:var(--act-font-display);font-weight:900;font-size:22px;letter-spacing:-.04em;
}
.act-logo img{max-width:80%;max-height:80%;object-fit:contain}
.act-binfo{display:flex;flex-direction:column;gap:5px;min-width:0}
.act-bname{font-family:var(--act-font-display);font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--act-ink);line-height:1.15}
.act-bmeta{display:inline-flex;align-items:center;gap:5px;font-family:var(--act-font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--act-muted)}
.act-bmeta .sep{opacity:.4}

.act-c-bonus{display:flex;flex-direction:column;gap:3px;min-width:0}
.act-c-bonus::before{display:block;margin-bottom:6px;font-family:var(--act-font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--act-muted-2);font-weight:500;content:"Bonus"}
.act-bonus-big{font-family:var(--act-font-display);font-weight:800;font-size:20px;letter-spacing:-.015em;color:var(--act-ink);line-height:1.05;display:inline-flex;align-items:baseline;gap:3px;flex-wrap:wrap}
.act-bonus-sub{font-size:11.5px;color:var(--act-muted);line-height:1.35}

.act-c-spins{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.act-c-spins::before{display:block;margin-bottom:6px;font-family:var(--act-font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--act-muted-2);font-weight:500;content:"Free Spins"}
.act-c-spins .n{font-family:var(--act-font-display);font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--act-ink);line-height:1}
.act-c-spins .l{font-family:var(--act-font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--act-muted);margin-top:3px}

.act-c-rating{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.act-c-rating::before{display:block;margin-bottom:6px;font-family:var(--act-font-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--act-muted-2);font-weight:500;content:"Rating"}
.act-c-rating .row{display:flex;align-items:center;gap:8px}
.act-c-rating .num{font-family:var(--act-font-display);font-weight:900;font-size:24px;line-height:1;letter-spacing:-.03em;color:var(--act-ink)}
.act-c-rating .out{font-family:var(--act-font-mono);font-size:10px;color:var(--act-muted)}
.act-stars{display:inline-flex;gap:1px}
.act-stars svg{width:11px;height:11px}
.act-stars svg.full-color,
.act-stars svg.half-color{color:var(--act-lime)}
.act-stars svg.empty-color{color:var(--act-rule-2)}
/* Legacy class-on path kept for any non-Bricks renderer */
.act-stars svg.on{color:var(--act-lime)}

.act-c-cta{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.act-claim{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 14px;text-decoration:none;
  background:var(--act-lime);color:var(--act-lime-ink);
  border-radius:10px;
  font-family:var(--act-font-display);font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  transition:background .12s ease, transform .12s ease;
}
.act-claim:hover{background:var(--act-lime-2);transform:translateY(-1px);color:var(--act-lime-ink)}
.act-claim svg{width:12px;height:12px}
.act-review{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;text-decoration:none;
  font-family:var(--act-font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--act-muted);
}
.act-review:hover{color:var(--act-ink)}

/* View details accordion */
.act-more{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:4px 0 14px;margin:0 22px;
  font-family:var(--act-font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--act-muted);
  cursor:pointer;border-top:1px dashed transparent;transition:color .12s ease;
}
.act-more:hover{color:var(--act-ink)}
.act-more .line{flex:1;height:1px;background:var(--act-rule);max-width:80px}
.act-more .chev{width:11px;height:11px;transition:transform .25s ease}
.act-row.is-open .act-more{color:var(--act-ink);border-top-color:var(--act-rule)}
.act-row.is-open .act-more .chev{transform:rotate(180deg)}
.act-detail{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;
  background:var(--act-paper);border-top:0;
}
.act-detail > .inner{overflow:hidden}
.act-row.is-open .act-detail{grid-template-rows:1fr;border-top:1px solid var(--act-rule)}
.act-detail-inner{padding:24px 26px 26px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:32px}
.act-block h5{margin:0 0 12px;font-family:var(--act-font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--act-muted);font-weight:500}
.act-proscons{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.act-proscons ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.act-proscons li{font-size:12.5px;color:var(--act-ink-2);display:flex;align-items:flex-start;gap:7px;line-height:1.4}
.act-proscons .pros li::before{content:"+";color:var(--act-green);font-weight:700;font-family:var(--act-font-mono);flex-shrink:0;width:10px}
.act-proscons .cons li::before{content:"−";color:var(--act-red);font-weight:700;font-family:var(--act-font-mono);flex-shrink:0;width:10px}
.act-pays{display:flex;flex-wrap:wrap;gap:5px}
.act-pay{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;
  background:var(--act-white);border:1px solid var(--act-rule);border-radius:6px;
  font-family:var(--act-font-mono);font-size:10px;letter-spacing:.04em;color:var(--act-ink-2);
  text-decoration:none;transition:border-color .15s,color .15s;
}
a.act-pay:hover{border-color:var(--act-ink-2);color:var(--act-ink)}
.act-summary{font-size:12.5px;color:var(--act-ink-2);line-height:1.5;margin:0 0 14px}

/* Mobile filter trigger + bottom-sheet */
.act-mfs-trigger{display:none}
.act-mfs,.act-mfs-backdrop{display:none}
@media (max-width:820px){
  /* Desktop filter bar hidden on mobile — UNLESS it has been docked into the
     mobile sheet (.act-mfs-body), where it is shown as a vertical stack. */
  .act-fbar{display:none}
  /* Docked in the light sheet: drop the dark card bg + padding so the paper
     background shows through and the filter labels read as dark ink. */
  .act-mfs-body .act-fbar{
    display:flex;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
    background:transparent;padding:0;border-radius:0;
  }
  .act-mfs-body .act-fbar .act-sep{display:none}
  .act-mfs-body .act-right{margin-left:0;width:100%}
  .act-mfs-body .act-right > div{position:static}

  .act-mfs-trigger{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:0 0 12px;padding:12px 14px;
    background:var(--act-ink);color:var(--act-paper);border-radius:12px;
    cursor:pointer;border:0;width:100%;
  }
  .act-mfs-trigger .l{display:flex;align-items:center;gap:9px;font-family:var(--act-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
  .act-mfs-trigger .l svg{color:var(--act-lime)}

  .act-mfs{
    display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:-100%;
    background:var(--act-paper);color:var(--act-ink);
    border-radius:18px 18px 0 0;z-index:200;max-height:88vh;
    transition:bottom .3s ease;
  }
  .act-mfs.open{bottom:0}
  .act-mfs-backdrop{display:none;position:fixed;inset:0;background:rgba(14,15,18,.5);z-index:199}
  .act-mfs-backdrop.open{display:block}
  /* Lock the page behind the open sheet. */
  body.act-mfs-open{overflow:hidden}

  .act-mfs-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;border-bottom:1px solid var(--act-rule);flex:0 0 auto;
  }
  .act-mfs-title{font-family:var(--act-font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--act-ink)}
  .act-mfs-x{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:transparent;color:var(--act-ink-2);cursor:pointer;border-radius:8px}
  .act-mfs-x:hover{background:var(--act-paper-2)}

  .act-mfs-body{flex:1 1 auto;overflow-y:auto;padding:6px 16px 8px}

  /* Each filter / sort is a full-width ACCORDION row. Header = label (+count)
     on the left, chevron pinned right. Tapping expands its options inline. */
  .act-mfs-body [data-filter-wrap]{width:100%}
  .act-mfs-body [data-filter-wrap] + [data-filter-wrap],
  .act-mfs-body .act-tgl{border-top:1px solid var(--act-rule)}
  .act-mfs-body .act-fbtn{
    width:100%;justify-content:flex-start;gap:8px;height:auto;min-height:52px;
    border:0;border-radius:10px;background:transparent;color:var(--act-ink);
    font-size:11.5px;padding:0 12px;
  }
  .act-mfs-body .act-fbtn:hover{background:var(--act-paper-2)}
  /* count badge sits right next to the label; chevron pushed to the far right */
  .act-mfs-body .act-fbtn .ct{margin:0}
  .act-mfs-body .act-fbtn .chev{display:inline-block;margin-left:auto;transition:transform .18s ease;opacity:.6}
  .act-mfs-body .act-fbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  /* Active filter row: subtle lime-tinted background + green label */
  .act-mfs-body [data-filter-wrap]:has(input:checked),
  .act-mfs-body [data-filter-wrap].is-selected{background:var(--act-lime-soft);border-radius:12px}
  .act-mfs-body .act-fbtn.is-active{color:var(--act-ink);font-weight:600;background:transparent}

  .act-mfs-body .act-pop{
    position:static;min-width:0;width:100%;box-shadow:none;border:0;border-radius:0;
    padding:2px 12px 14px;margin:0;
  }
  .act-mfs-body .act-pop h5{display:none} /* filter name already on the button */
  .act-mfs-body .act-pop label{padding:9px 0}
  .act-mfs-body .act-pop.open{display:block !important}
  .act-mfs-body .act-pop.sort-pop{padding:2px 8px 12px}
  .act-mfs-body .act-pop.sort-pop.open{display:flex !important;gap:6px}
  .act-mfs-body .act-pop.sort-pop button{border:1px solid var(--act-rule);border-radius:10px;padding:12px 14px;font-size:12.5px}
  .act-mfs-body .act-fbtn.is-disabled{opacity:.35} /* still visible, just dimmed */

  /* SORT row: show the "Sort by" label + current value, like a filter row. */
  .act-mfs-body .act-right{margin-left:0;width:100%;border-top:1px solid var(--act-rule)}
  .act-mfs-body .act-sortbtn .act-sort-ic{color:var(--act-lime-2)}
  .act-mfs-body .act-sortbtn .sort-label{display:inline;color:var(--act-ink)}
  .act-mfs-body .act-sortbtn .sort-current{margin-left:auto;color:var(--act-muted);font-weight:400;text-transform:none;letter-spacing:0}

  /* Toggle pills (Mobile / Live / Wager-free) as full-width rows — same
     divider + tint treatment as the filter rows for a consistent list. */
  .act-mfs-body .act-tgl{
    width:100%;justify-content:flex-start;gap:9px;min-height:52px;height:auto;
    border:0;border-top:1px solid var(--act-rule);border-radius:0;
    background:transparent;color:var(--act-ink);padding:0 12px;
  }
  .act-mfs-body .act-tgl:hover{background:var(--act-paper-2)}
  .act-mfs-body .act-tgl .pip{background:var(--act-muted)}
  .act-mfs-body .act-tgl.is-on{background:var(--act-lime-soft);color:var(--act-ink);font-weight:600;border-radius:12px}
  .act-mfs-body .act-tgl.is-on .pip{background:var(--act-lime-2)}
  .act-mfs-body .act-tgl.is-disabled,
  .act-mfs-body .act-tgl[disabled]{opacity:.35}

  .act-mfs-foot{flex:0 0 auto;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--act-rule)}
  .act-mfs-apply{
    display:flex;align-items:center;justify-content:center;
    width:100%;height:48px;border:0;border-radius:12px;cursor:pointer;text-align:center;
    background:var(--act-lime);color:var(--act-lime-ink);
    font-family:var(--act-font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  }

  .act-rmain{
    display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 18px 16px;text-align:center;
  }
  .act-c-rating,.act-c-spins{display:none}
  .act-c-bonus{width:100%;padding:14px 0 0;border-top:1px solid var(--act-rule);align-items:center}
  .act-c-cta{width:100%}
  .act-claim{height:46px;font-size:12.5px;width:100%}
  .act-detail-inner{grid-template-columns:1fr;gap:22px;padding:18px 16px}
  .act-proscons{grid-template-columns:1fr;gap:14px}
}