/* ----------------------------------------------------------------------
 *  Palette
 *
 *  --casino-accent and --casino-accent-contrast are set from Casino Settings
 *  (see casino_output_palette_css). The hover shades are derived from them,
 *  so only two colours ever need configuring. The plain declarations before
 *  each color-mix() are the fallback for browsers without support: hover
 *  simply matches the base colour rather than breaking.
 * -------------------------------------------------------------------- */
body {
  /* Scoped to body, not :root - themes (BeTheme included) declare their own
     custom properties on body, and a variable set there is not visible to
     the html element above it. */
  --casino-accent-hover: var(--casino-accent);
  --casino-accent-hover: color-mix(in srgb, var(--casino-accent) 85%, #000);
  --casino-accent-contrast-hover: var(--casino-accent-contrast);
}

/* ----------------------------------------------------------------------
 *  Theme guards
 *
 *  Themes commonly underline every link inside the content area - Hello
 *  Elementor does it with .page-content a, which outranks a single class.
 *  These controls are buttons, not prose links, so the decoration is forced
 *  off. Links inside the terms text are deliberately left alone.
 * -------------------------------------------------------------------- */
.casino-reviews .casino-reviews-filter-btn,
.casino-reviews .casino-reviews-toggle-button,
.casino-reviews .casino-card-link-container > a,
.casino-channels a,
.casino-yt-toggle {
  text-decoration: none !important;
}
.casino-reviews .casino-reviews-filter-btn:hover,
.casino-reviews .casino-reviews-toggle-button:hover,
.casino-reviews .casino-card-link-container > a:hover,
.casino-channels a:hover,
.casino-yt-toggle:hover {
  text-decoration: none !important;
}

/* Inherits the card's text colour instead of the theme's link colour. */
.casino-reviews .casino-reviews-toggle-button {
  color: inherit;
}


.review-landing-page .wp-block-list {
  background: #f0f0f0;
  padding: 1.5rem 1.5rem 1.5rem 3rem;
  border: solid 1px #d5d5d5;
  border-radius: 12px;
  margin-left: 0;
}
.review-landing-page .wp-block-list li:not(:first-child) {
  margin-top: 1rem;
}

.casino-reviews, .casino-channels {
  max-width: 72rem;
}

.casino-reviews {
  margin-top: 2rem;
}
.casino-card-container {
    counter-reset: div-counter;  /* Initialize the counter */
}

.casino-card-container .counter {
    counter-increment: div-counter;  /* Increment the counter for each div */
}

.casino-card-container .counter::before {
    content: counter(div-counter); /* Display the counter before the div content */
}

.casino-card-container .counter.hidden {
    counter-reset: div-counter; /* Reset the counter for hidden divs */
    counter-increment: div-counter -1; /* Decrement the counter right after resetting it, effectively ignoring this div in the count */
}

.hidden {
  display: none !important;
}
.casino-brand-bg {
  background-color: var(--casino-accent);
}
.casino-brand-text {
  color: var(--casino-accent);
}
.font-bold {
  font-weight: 700;
}
.font-semibold {
  font-weight: 600;
}
.text-xl {
  font-size: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.text-right {
  text-align: right;
} 
.p-5 {
  padding: 1.25rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.rotate-180 {
  transform: rotate(180deg);
}

.casino-reviews-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.casino-reviews-filter-btn {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  /* Less on the left: the leading icon carries its own visual weight, so
     equal padding makes the left side look heavier than the right. */
  padding-left: 0.75rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500;
  color: var(--casino-accent-contrast);
}
.casino-reviews-filter-btn:focus {
  outline: none;
  color: var(--casino-accent-contrast);
}
.casino-reviews-filter-btn:hover {
  text-decoration: none;
  color: var(--casino-accent-contrast);
}
.casino-reviews-filter-btn.casino-brand-bg {
  color: var(--casino-accent-contrast);
}
.casino-card-container {
  margin-bottom: 2rem;
}
.casino-card {
  position: relative;
  background-color: #eee;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(229, 231, 235, 0.5);
  border-radius: 1rem;
  border: solid 2px #e6e6e6;
  min-height: 10rem;
}
.casino-card:not(:first-child) {
  margin-top: 1.5rem;
}
.casino-card.casino-card-featured {
  border-color: var(--casino-accent);
}
.casino-card-row {
  display: flex;
  flex-direction: column;
  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: flex-start;
  }
}

.casino-card-logo-container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  display: flex;
  justify-content: center;
  @media (min-width: 1024px) {
      width: 30%;
  }
}

.casino-card-logo {
  width: 100%;
  height: auto;
  max-width: 24rem;
}
.casino-card-bubble {
  position: absolute;
  display: flex;
  column-gap: 1px;
  top: -0.75rem;
  left: -0.75rem;
}
.casino-card-counter {
  /* A circle at one digit, widening only when the number needs it: the box
     is square via matching height and min-width, and the horizontal padding
     only starts pushing it wider from two digits onwards. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0 0.45rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  background-color: #e6e6e6;
  color: var(--casino-accent-contrast);
}
.casino-card-featured .casino-card-counter {
  background-color: var(--casino-accent);
}
.casino-card-recommended {
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background-color: var(--casino-accent);
  text-transform: uppercase;
  color: var(--casino-accent-contrast);
  letter-spacing: 0.05em;
}
.casino-card-data-container {
  height: 100%;
  flex: 1 1 0%;
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  line-height: 1.375;
}
.casino-card-terms {
  color: #666;
  font-size: 0.6875rem;
  padding-bottom: 0.875rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.25rem;
}
.casino-card-terms a {
  color: var(--casino-accent-contrast);
}
.casino-card-link-container {
  flex: none;
}
.casino-card-link-container > a {
  display: inline-block;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-radius: 0.75rem;
  color: var(--casino-accent-contrast);
  font-size: 1.125rem;
  font-weight: 600;
  background-color: var(--casino-accent);
  @media (min-width: 640px) {
      padding-top: 1rem;
      padding-bottom: 1rem;
  }
  @media (min-width: 1024px) {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    width: auto;
  }
}
.casino-card-link-container > a:hover {
  background-color: var(--casino-accent-hover);
  color: var(--casino-accent-contrast-hover);
}
.casino-reviews-toggle-button {
  display: flex;
  column-gap: 0.25rem;
  align-items: center;
}
.casino-reviews-toggle-button:focus {
  outline: none;
}
.casino-reviews-toggle-button:hover {
  color: inherit;
}
.casino-channels {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.casino-channels > div {
  position: relative;
  padding: 1.5rem;
  background-color: #eee;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(229, 231, 235, 0.5);
  border-radius: 0.75rem;
  border: solid 1px #e6e6e6;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  @media (min-width: 640px) {
    width: calc(50% - 3.9rem);
  }
  @media (min-width: 1240px) {
    width: calc(25% - 4.3rem);
  }
}
.casino-channels > div:hover {
  background-color: #eaeaea;
}
.casino-channels p {
  margin: 1rem 0 0;
  position: relative;
  font-weight: 500;
  line-height: 1.2;
}
.casino-channels a {
  position: absolute;
  inset: 0;
}
.casino-channels a:focus {
  outline: none;
}
.casino-channels img {
  position: relative;
  width: 70px;
  height: auto;
}

 @media (min-width: 1241px) {
  .review-landing-page .menu_wrapper, .review-landing-page .top_bar_right {
    visibility: hidden;
  }
}
.review-landing-page .responsive-menu-toggle {
  visibility: hidden;
}

/* Slot availability filter */
.casino-reviews-slot-filter {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.casino-reviews-slot-filter-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: 500;
  margin: 0;
}
.casino-reviews-slot-select {
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.6rem 2rem 0.6rem 0.75rem;
  border-radius: 0.25rem;
  border: solid 2px #e6e6e6;
  background-color: #fff;
  cursor: pointer;
  max-width: 100%;
}
@media (max-width: 480px) {
  .casino-reviews-slot-filter {
    width: 100%;
  }
  .casino-reviews-slot-select {
    flex: 1 1 auto;
    /* Safari on iOS zooms the page when a form field below 16px takes focus,
       and does not zoom back out. The row is full width at this breakpoint,
       so the buttons are not alongside for the size difference to show. */
    font-size: 1rem;
  }
}
.casino-no-results {
  text-align: center;
  padding: 2rem 1rem;
  margin: 0;
  font-weight: 500;
}
.casino-reviews-slot-select option {
  text-transform: uppercase;
}
.casino-reviews-slot-select.casino-brand-bg {
  /* Needs the two-class selector: the plain .casino-reviews-slot-select rule
     above sets a white background at equal specificity but later in the file. */
  background-color: var(--casino-accent);
  color: var(--casino-accent-contrast);
  border-color: transparent;
}
.casino-clear-filters {
  margin-top: 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: solid 2px #e6e6e6;
  background-color: #fff;
  cursor: pointer;
}
.casino-clear-filters:hover {
  border-color: #c9c9c9;
}