/**
 * 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;
}

/* -------------------------------------------------------------------------
 * 10. 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;
  }
}