/**
 * Casino Data Plugin — cross-device corrections (v4.5)
 *
 * Loaded after every compiled view stylesheet so these rules win without
 * anyone having to rebuild the SCSS bundles. Everything here is scoped to
 * plugin containers: no bare element selectors, nothing that can leak into
 * the surrounding theme.
 */

/* -------------------------------------------------------------------------
 * 1. Overflow containment
 *
 * Long bonus strings, brand names and pasted T&C text were pushing the
 * layout wider than the viewport on narrow screens, which produces
 * horizontal page scroll on the whole document.
 * ---------------------------------------------------------------------- */

.casino-data-plugin-output,
.casino-skin-container,
.casino-data-container,
.review-panel {
  max-width: 100%;
  box-sizing: border-box;
}

.casino-data-plugin-output *,
.casino-skin-container *,
.casino-data-container * {
  box-sizing: border-box;
  min-width: 0;
}

.casino-skin-container .casino-name,
.casino-skin-container .casino-subtitle,
.casino-skin-container .casino-stat-value,
.casino-skin-container .casino-badge,
.casino-skin-container .casino-disclaimer,
.casino-skin-container .casino-description,
.casino-skin-container .tc-content,
.casino-skin-container .casino-info-item > span {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* -------------------------------------------------------------------------
 * 2. Media
 *
 * Logos were emitted without intrinsic sizing, so they overflowed narrow
 * cards and caused cumulative layout shift while loading.
 * ---------------------------------------------------------------------- */

.casino-data-plugin-output img,
.casino-skin-container img,
.casino-data-container img,
.review-panel img,
.sticky-panel img {
  max-width: 100%;
  height: auto;
}

.casino-card-container .casino-card-item__logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.casino-card-container .casino-card-item__logo-link img {
  object-fit: contain;
}

/* -------------------------------------------------------------------------
 * 3. Call-to-action buttons
 *
 * .casino-cta was hard-coded to width: 200px, so it overflowed on very
 * narrow cards and refused to fill the row on wide ones.
 * ---------------------------------------------------------------------- */

.casino-card-container .casino-cta,
.casino-only-button-item__button .casino-only-button-item__rating-link {
  width: auto;
  min-width: min(200px, 100%);
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

@media (max-width: 599px) {
  .casino-card-container .casino-footer .casino-cta {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * 4. Touch targets
 *
 * On touch devices the review button, load-more button and filter controls
 * were well under the 44px minimum recommended by both the WCAG 2.2 target
 * size criterion and the iOS/Android platform guidelines.
 * ---------------------------------------------------------------------- */

@media (pointer: coarse) {
  .casino-item__load-more,
  .skin-show-more,
  .casino-cta,
  .casino-item__review-btn,
  .casino-card-item__review-btn,
  .casino-item__review-link,
  .casino-filter-toggle,
  .casino-filter-reset,
  .casino-only-button-item__rating-link {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .casino-filter-option label {
    min-height: 44px;
  }

  .tc-toggle-label {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
}

/* -------------------------------------------------------------------------
 * 5. Keyboard accessibility
 *
 * The T&C toggle is a visually-hidden checkbox driven by a <label>, so
 * keyboard users previously had no visible focus indication anywhere in
 * the component.
 * ---------------------------------------------------------------------- */

.casino-data-plugin-output a:focus-visible,
.casino-data-plugin-output button:focus-visible,
.casino-data-plugin-output input:focus-visible,
.casino-skin-container a:focus-visible,
.casino-skin-container button:focus-visible,
.review-panel a:focus-visible,
.sticky-panel a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

.tc-container .js-tc-toggler:focus-visible + .tc-toggle-label {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 6. Motion preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .casino-data-plugin-output *,
  .casino-skin-container *,
  .casino-data-container *,
  .sticky-panel * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
 * 7. Legibility
 *
 * The float panel rendered its responsible-gambling notice at 6px, which is
 * unreadable on every device and fails the legal-legibility expectations
 * that the notice exists to satisfy in the first place.
 * ---------------------------------------------------------------------- */

.sticky-panel .casino-responsible-note {
  font-size: 11px;
  line-height: 1.35;
  display: block;
  padding: 0 12px;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .sticky-panel .casino-responsible-note {
    font-size: 12px;
  }
}

.casino-card-container .casino-disclaimer {
  font-size: 11px;
  max-width: 100%;
}

@media (min-width: 768px) {
  .casino-card-container .casino-disclaimer {
    max-width: 240px;
  }
}

/* -------------------------------------------------------------------------
 * 8. Sticky float panel
 *
 * Respect the iOS home-indicator inset, and stop the panel from eating the
 * whole screen on short landscape viewports.
 * ---------------------------------------------------------------------- */

.sticky-panel {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  max-height: 45vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 480px) {
  .sticky-panel .custom_cta_description {
    min-width: 0;
  }

  .sticky-panel .cta-button {
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------
 * 9. Per-string colour overrides (new in v4.5)
 *
 * The wrapper is a plain inline span carrying an inline colour, so it already
 * beats any stylesheet rule. These rules only make sure adding the wrapper
 * cannot change layout, spacing or inherited typography.
 * ---------------------------------------------------------------------- */

.cd-string {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  margin: 0;
  padding: 0;
}

/* -------------------------------------------------------------------------
 * 11. Card "Read review" as text link
 *
 * On the card design, the review link now sits inside .casino-rating below
 * the stars, styled as a plain underlined link rather than a pill button
 * (per editorial ask). Other views keep their button treatment.
 * ---------------------------------------------------------------------- */

.casino-card-container .casino-rating {
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 8px;
}

@media (min-width: 600px) {
  .casino-card-container .casino-rating {
    flex-direction: column;
    align-items: flex-end;
  }
}

.casino-card-container .casino-rating .casino-review {
  margin: 0;
}

.casino-card-container .casino-card-item__review-btn {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 500;
  text-decoration: underline;
  min-height: auto !important;
  display: inline !important;
  line-height: 1.4;
}

@media (pointer: coarse) {
  .casino-card-container .casino-card-item__review-btn {
    min-height: auto !important;
    padding: 4px 0 !important;
  }
}

/* -------------------------------------------------------------------------
 * 12. Filter toggle sizing
 *
 * Chris asked the "Filters" button to be less chunky. Trim padding and swap
 * the pill radius for a rounded rectangle. Per-option counts already ship
 * from the PHP (see AbstractViews::buildFilterDropdownHtml).
 * ---------------------------------------------------------------------- */

.casino-filter-toggle {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  gap: 4px;
}

.casino-filter-count {
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  padding: 0 4px;
}

@media (pointer: coarse) {
  .casino-filter-toggle {
    min-height: 36px !important;
  }
}

/* -------------------------------------------------------------------------
 * 13. Print
 * ---------------------------------------------------------------------- */

@media print {
  .sticky-panel,
  .casino-filter-bar,
  .casino-item__load-more,
  .skin-show-more {
    display: none !important;
  }

  .casino-skin-container .casino-skin-item[style*="display: none"],
  .casino-skin-container .casino-skin-item[style*="display:none"] {
    display: block !important;
  }
}

/* -------------------------------------------------------------------------
 * 14. Card footer layout (v4.6-wip.3)
 *
 * Two separate defects, both in the compiled card stylesheet. There is no
 * build tooling in this repo, so the SCSS cannot be recompiled here and the
 * corrections live in this file, which loads after every compiled bundle.
 * Whoever holds the SCSS build should fold 14a and 14b back into
 * assets/scss/casino-card.scss and delete this section.
 *
 * 14a. The footer declares
 *        grid-template-areas: 'info button' 'description disclaimer'
 *      but only .casino-description is ever given a grid-area. The three
 *      named areas 'info', 'button' and 'disclaimer' are declared and never
 *      assigned, so .casino-info-row, .casino-cta and .casino-disclaimer are
 *      auto-placed instead. Today they happen to land correctly because the
 *      DOM order (info, description, CTA, T&Cs) fills the remaining cells in
 *      the right sequence, but it is accidental: reordering the markup, or
 *      adding any fifth child, silently moves the T&Cs somewhere else.
 *      Chris asked (point 7) for the T&Cs to sit under the CTA, so pin all
 *      four to their named areas and make that guaranteed rather than lucky.
 * ---------------------------------------------------------------------- */

@media (min-width: 768px) {
  .casino-card-container .casino-footer .casino-info-row {
    grid-area: info;
  }

  .casino-card-container .casino-footer .casino-cta {
    grid-area: button;
  }

  .casino-card-container .casino-footer .casino-disclaimer {
    grid-area: disclaimer;
  }

  /* The no-description variant switches to a single column with only
   * 'button' and 'disclaimer' named, so 'info' does not exist there. Hand
   * those children back to auto-placement rather than leaving .casino-info-row
   * pointing at a named area the template no longer defines. */
  .casino-card-container .casino-footer.no-description .casino-info-row,
  .casino-card-container .casino-footer.no-description .casino-cta,
  .casino-card-container .casino-footer.no-description .casino-disclaimer {
    grid-area: auto;
  }
}

/* -------------------------------------------------------------------------
 * 14b. The 600px to 767px band had no column layout at all.
 *
 *      .casino-footer stacks (flex-direction: column) only up to 599px, and
 *      becomes a grid only from 768px. Between those two the footer stayed a
 *      default flex row, so info, description, CTA and T&Cs were all forced
 *      onto one line across a 168px-wide range of viewports: most tablets in
 *      portrait and a large slice of Android landscape. That is the most
 *      likely source of Chris's "still quite a few issues on various displays
 *      such as card" (point 6) and of the T&Cs looking misplaced (point 7).
 *
 *      Extending the stack to 767px closes the gap and gives the same running
 *      order as the grid: info, description, CTA, T&Cs underneath.
 * ---------------------------------------------------------------------- */

@media (min-width: 600px) and (max-width: 767px) {
  .casino-card-container .casino-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .casino-card-container .casino-footer .casino-disclaimer {
    max-width: 100%;
    align-self: center;
  }
}