/* Casinos - All Reviews (ecommerce-style layout) */

/* Tighten top spacing for this page (closer to header) */
.casinos-all-page{ padding-top: 20px; }

/* Centralized range component tokens */
:root{
  --igp-range-track-h: 6px;
  /* Slightly larger thumb improves grabability, especially on touchpads */
  --igp-range-thumb: 22px;
  --igp-range-track: #e1e1e4;
  --igp-range-active: #b0c8b7;
  --igp-range-thumb-bg: rgba(255,255,255,0.95);
  --igp-range-radius: 999px;
}

.igp-casinosAllLayout{
  display:grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 22px;
  align-items:start;
  margin-top: 16px;
}

.igp-casinosAllFilters{
  position: sticky;
  top: 18px;
}

.igp-filters{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 14px;
  padding: 14px;
}

.igp-filterBlock{ margin-bottom: 14px; }

.igp-filterLabel{
  display:block;
  font-size: 13px;
  opacity: .85;
  margin-bottom: 8px;
}

.igp-filterInput,
.igp-filterSelect{
  width: 100%;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(228,228,228);
  color: inherit;
}

.igp-check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 14px;
  margin: 8px 0;
  cursor: pointer;
  user-select:none;
}

.igp-check input{ margin-top: 3px; }

/* Range filters (dual threshold) */
.igp-range{
  display:grid;
  gap: 8px;
}

.igp-rangeRow{
  position: relative;
  /* Give a bit more vertical hit-area so thumbs are easier to grab */
  height: calc(var(--igp-range-thumb) + 10px);
  --igp-range-left: 0%;
  --igp-range-right: 100%;
}

/* Baseline track */
.igp-rangeRow::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--igp-range-track-h);
  transform: translateY(-50%);
  background: var(--igp-range-track);
  border-radius: var(--igp-range-radius);
  z-index: 1;
  pointer-events: none;
}

/* Active segment (selected range) */
.igp-rangeRow::after{
  content: "";
  position: absolute;
  top: 50%;
  height: var(--igp-range-track-h);
  transform: translateY(-50%);
  background: var(--igp-range-active);
  border-radius: var(--igp-range-radius);
  left: var(--igp-range-left);
  right: calc(100% - var(--igp-range-right));
  z-index: 1;
  pointer-events: none;
}

/* Two range inputs are stacked to create a single dual-thumb slider */
.igp-rangeRow input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: var(--igp-range-thumb);
  border-radius: var(--igp-range-radius);
  background: transparent;
  pointer-events: none;
  margin: 0;
  padding: 0;
  z-index: 2;
}

/* Keep the top slider (max) above the min slider so thumbs don't fight for clicks */
.igp-rangeRow input[type="range"][data-role="max"],
.igp-rangeRow input[type="range"].igp-rangeMax{
  z-index: 3;
}

.igp-rangeRow input[type="range"]::-webkit-slider-runnable-track{
  height: var(--igp-range-track-h);
  border-radius: var(--igp-range-radius);
  background: transparent;
}

.igp-rangeRow input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: var(--igp-range-thumb);
  height: var(--igp-range-thumb);
  border-radius: 50%;
  background: var(--igp-range-thumb-bg);
  border: 2px solid var(--igp-range-active);
  margin-top: calc((var(--igp-range-track-h) - var(--igp-range-thumb)) / 2);
  pointer-events: auto;
}

.igp-rangeRow input[type="range"]::-moz-range-track{
  height: var(--igp-range-track-h);
  border-radius: var(--igp-range-radius);
  background: transparent;
}

.igp-rangeRow input[type="range"]::-moz-range-thumb{
  width: var(--igp-range-thumb);
  height: var(--igp-range-thumb);
  border-radius: 50%;
  background: var(--igp-range-thumb-bg);
  border: 2px solid var(--igp-range-active);
  pointer-events: auto;
}

.igp-rangeRow input[type="range"]::-moz-focus-outer{ border: 0; }

.igp-rangeNums{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.igp-rangeNums input{
  width: 100%;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(228,228,228);
  color: inherit;
}

/* Multi-select dropdown (details/summary) */
.igp-multi{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(228,228,228);
}

.igp-multi summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-size: 14px;
}

.igp-multi summary::-webkit-details-marker{ display:none; }

.igp-multi .igp-multiInner{
  padding: 0 12px 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.igp-multi .igp-check{ margin: 10px 0; }

.igp-filterActions{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 8px;
}

.igp-clear{
  font-size: 14px;
  opacity: .85;
}

.igp-clear:hover{ opacity: 1; }

.igp-resultsMeta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 4px 0 12px;
}

.igp-resultsCount{
  font-size: 14px;
  opacity: .85;
}

/* Override the default 4-column casino grid inside this layout */
.igp-casinosAllResults .hp-gridCasinos{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px){
  .igp-casinosAllLayout{
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
  }
  .igp-casinosAllResults .hp-gridCasinos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px){
  .igp-casinosAllLayout{
    grid-template-columns: 1fr;
  }
  .igp-casinosAllFilters{
    position: static;
  }
  .igp-casinosAllResults .hp-gridCasinos{
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Progressive-enhancement infinite scroll for All Casino Reviews
   -------------------------------------------------------------------------- */
.igp-infiniteSentinel{
  width:100%;
  height:1px;
  clear:both;
}

.igp-infiniteLoader{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:64px;
  padding:18px 12px;
  font-size:14px;
  line-height:1.4;
  opacity:.76;
}

.igp-infiniteLoader[hidden]{
  display:none !important;
}

.igp-infiniteLoader__spinner{
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:igpInfiniteSpin .7s linear infinite;
}

@keyframes igpInfiniteSpin{
  to{ transform:rotate(360deg); }
}

/* Keep the real numbered pagination in HTML for crawlers/no-JS users.
   Hide it only after the inline JS has successfully initialized. */
html.igp-infinite-ready .igp-pagination[data-igp-pagination="1"]{
  display:none !important;
}