/* bigbass.lv — responsive overrides
   Inline-style fallbacks are desktop-first. Class hooks here override at breakpoints.
   We use !important since inline styles win otherwise.
*/

/* ============================================================
   CTA system — used across casino cards, hero, sticky bar, etc.
   ============================================================ */

@keyframes bb-shimmer {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  60%  { transform: translateX(220%)  skewX(-18deg); }
  100% { transform: translateX(220%)  skewX(-18deg); }
}
@keyframes bb-ring {
  0%   { transform: scale(0.7); opacity: 0.55; }
  100% { transform: scale(1.5); opacity: 0; }
}

.bb-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.1px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1), box-shadow 180ms;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bb-cta__arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1);
  font-weight: 600;
}
.bb-cta:hover { transform: translateY(-1px); }
.bb-cta:hover .bb-cta__arrow { transform: translateX(4px); }
.bb-cta:active { transform: translateY(0); }

/* Shimmer sweep that re-fires every ~3.5s */
.bb-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  animation: bb-shimmer 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Outer pulsing ring removed — kept selector inert so existing markup is unaffected */
.bb-cta::after {
  content: none;
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0;
  pointer-events: none;
  animation: bb-ring 2.6s ease-out infinite;
  z-index: -1;
}

.bb-cta__label, .bb-cta__arrow { position: relative; z-index: 2; }

/* Variants */
.bb-cta--coral { background: #e07655; color: #fbf7ec; box-shadow: 0 10px 24px -8px rgba(224,118,85,0.55); }
.bb-cta--coral:hover { box-shadow: 0 14px 30px -8px rgba(224,118,85,0.7); }

.bb-cta--gold { background: #e8b94a; color: #0d3b2e; box-shadow: 0 10px 24px -8px rgba(232,185,74,0.6); }
.bb-cta--gold:hover { box-shadow: 0 14px 30px -8px rgba(232,185,74,0.8); }

.bb-cta--ink { background: #152a26; color: #fbf7ec; box-shadow: 0 10px 24px -8px rgba(21,42,38,0.5); }
.bb-cta--ink:hover { box-shadow: 0 14px 30px -8px rgba(21,42,38,0.7); }

.bb-cta--ghost { background: transparent; color: #152a26; box-shadow: inset 0 0 0 1.5px #152a26; }
.bb-cta--ghost::after { opacity: 0; animation: none; }
.bb-cta--ghost:hover { background: rgba(21,42,38,0.05); }

.bb-cta--sm { padding: 10px 16px; font-size: 13px; }
.bb-cta--lg { padding: 17px 28px; font-size: 15.5px; }
.bb-cta--block { width: 100%; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bb-cta::before, .bb-cta::after { animation: none; }
  .bb-cta__arrow, .bb-cta { transition: none; }
}

/* ============================================================
   Layout responsiveness
   ============================================================ */

/* --- Mobile-first reset --- */
img { max-width: 100%; height: auto; }

/* Smooth focus rings for keyboard users (a11y) */
a:focus-visible, button:focus-visible {
  outline: 2px solid #e07655;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   Pseudo-fullscreen for the demo iframe wrapper.
   Used when the real Fullscreen API is unavailable (e.g. when this
   page is itself embedded inside another iframe without the
   fullscreen permission). Locks the wrapper to the viewport.
   ============================================================ */
.bb-pseudo-fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  aspect-ratio: auto !important;
  z-index: 9999 !important;
  box-shadow: none !important;
}
:fullscreen .bb-iframe-cta,
.bb-pseudo-fs .bb-iframe-cta {
  top: 18px !important;
  right: 18px !important;
}

/* ============================================================
   FAQ (BUJ) — accordion items on homepage
   ============================================================ */
.bb-faq-summary::-webkit-details-marker { display: none; }
.bb-faq-summary::marker { content: ''; }
.bb-faq-item { transition: border-color 0.2s, box-shadow 0.2s; }
.bb-faq-item:hover { border-color: rgba(13,59,46,0.28) !important; }
.bb-faq-item[open] { box-shadow: 0 6px 24px -10px rgba(13,59,46,0.18); border-color: rgba(13,59,46,0.22) !important; }
.bb-faq-item[open] .bb-faq-chevron {
  transform: rotate(45deg);
  background: #e07655;
  color: #fbf7ec;
  border-color: #e07655 !important;
}
.bb-faq-item[open] .bb-faq-summary { padding-bottom: 6px !important; }

/* Footer providers — subtle hover */
.bb-footer-provider:hover { opacity: 1 !important; }
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1);
}
.bb-card-thumb:hover img { transform: scale(1.04); }
.bb-card-thumb img { transition: transform 0.4s cubic-bezier(.2,.7,.3,1); will-change: transform; }

/* CTA mobile safety: prevent label wrapping & flex squish */
.bb-cta { white-space: nowrap; min-width: 0; }
.bb-cta__label { min-width: 0; }

/* ============================================================
   Large-screen content cap — keeps everything centered at ≤ 1440px
   on very wide displays so the header and rows don't stretch out.
   ============================================================ */
@media (min-width: 1441px) {
  .bb-nav,
  .bb-section,
  .bb-hero-row {
    padding-left: calc((100vw - 1440px) / 2 + 64px) !important;
    padding-right: calc((100vw - 1440px) / 2 + 64px) !important;
  }
  .bb-stats-bar {
    margin-left: calc((100vw - 1440px) / 2 + 64px) !important;
    margin-right: calc((100vw - 1440px) / 2 + 64px) !important;
  }
  .bb-footer-providers,
  .bb-footer-cols,
  .bb-footer-bottom {
    padding-left: calc((100vw - 1440px) / 2 + 64px) !important;
    padding-right: calc((100vw - 1440px) / 2 + 64px) !important;
  }
}

/* Search box: brand-style focus state */
.bb-search-input::placeholder { color: rgba(13,59,46,0.5); }
.bb-search-input:focus {
  border-color: rgba(13,59,46,0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 0 4px rgba(13,59,46,0.06) !important;
}
.bb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* === Tablet (≤ 1100px) === */
@media (max-width: 1100px) {
  .bb-section { padding-left: 40px !important; padding-right: 40px !important; }
  .bb-hero-row { padding-left: 48px !important; padding-right: 48px !important; min-height: auto !important; padding-top: 56px !important; padding-bottom: 32px !important; }
  .bb-hero-h1 { font-size: 88px !important; letter-spacing: -2px !important; }
  .bb-hero-sub { font-size: 17px !important; }
  .bb-hero-fisherman-wrap { flex: 0 0 460px !important; }
  .bb-hero-fisherman-wrap img { width: 460px !important; }
  .bb-stats-bar { margin-left: 40px !important; margin-right: 40px !important; }
  .bb-grid-4 { grid-template-columns: repeat(3, 1fr) !important; }
  .bb-info-grid { grid-template-columns: 1.5fr 1fr !important; gap: 28px !important; }
  .bb-footer-cols { padding-left: 40px !important; padding-right: 40px !important; }
}

/* === Mobile (≤ 760px) === */
@media (max-width: 760px) {
  .bb-section { padding-left: 20px !important; padding-right: 20px !important; }
  .bb-section-h2 { font-size: 32px !important; letter-spacing: -0.6px !important; }

  /* Nav: stack and hide secondary links */
  .bb-nav { padding: 14px 20px !important; flex-wrap: wrap !important; gap: 10px !important; }
  .bb-nav-links { display: none !important; }
  /* Hide nav CTAs on mobile — logo only, cleaner header */
  .bb-nav-ctas { display: none !important; }

  /* Hide № game-number badges on mobile cards — not useful at this size */
  .bb-card-num { display: none !important; }

  /* Card stats grid: shrink so all three stats fit at ~170px card width.
     minmax(0, 1fr) is required — without it, grid items expand to fit their
     content's natural width and the third column overflows the card. */
  .bb-card-stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px !important;
  }
  .bb-card-stats > div {
    padding: 6px 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .bb-card-stats > div > div:first-child { font-size: 8.5px !important; letter-spacing: 0.3px !important; }
  .bb-card-stats > div > div:last-child  { font-size: 12px !important; white-space: nowrap !important; }

  /* Card action CTAs on mobile: hide the trailing arrow so the label has
     room to breathe in the narrow stacked-button column. The label alone
     reads cleanly at any width. */
  .bb-card-actions .bb-cta__arrow { display: none !important; }
  .bb-card-actions .bb-cta { padding-left: 12px !important; padding-right: 12px !important; }

  /* Search box on tablet/mobile: full row, larger touch target */
  .bb-search-wrap { flex: 1 1 100% !important; max-width: 100% !important; order: 99; }
  .bb-filters-count { font-size: 12px !important; }
  .bb-search-input { padding-top: 14px !important; padding-bottom: 14px !important; font-size: 15px !important; }

  /* Mobile demo iframe: full-width, tall portrait-friendly area for thumb-fishing */
  .bb-iframe-wrap {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    height: calc(100svh - 220px) !important;
    min-height: 520px !important;
    border-radius: 14px !important;
  }

  /* Hero */
  .bb-hero { background: #bce0e8 !important; }
  .bb-hero-row { flex-direction: column !important; align-items: stretch !important; padding: 32px 20px 0 !important; gap: 0 !important; }
  .bb-hero-text { max-width: 100% !important; padding-bottom: 0 !important; flex: 1 1 auto !important; }
  .bb-hero-pill { font-size: 11px !important; padding: 5px 12px !important; }
  .bb-hero-h1 { font-size: 52px !important; letter-spacing: -1.4px !important; }
  .bb-hero-sub { font-size: 16px !important; line-height: 1.5 !important; margin-top: 18px !important; }
  /* Hero CTAs: stack and full-width so labels & arrows always fit */
  .bb-hero-ctas { flex-wrap: wrap !important; margin-top: 24px !important; gap: 10px !important; }
  .bb-hero-ctas > button, .bb-hero-ctas > a { flex: 1 1 100% !important; padding: 15px 18px !important; font-size: 14.5px !important; justify-content: center !important; }
  .bb-hero-quickstats { flex-wrap: wrap !important; gap: 14px !important; margin-top: 24px !important; font-size: 12px !important; }
  .bb-hero-sun { width: 90px !important; height: 90px !important; top: 32px !important; right: 18px !important; box-shadow: 0 0 50px rgba(232,185,74,0.6), 0 0 0 8px rgba(232,185,74,0.18) !important; }
  .bb-hero-fisherman-wrap { flex: 0 0 auto !important; align-self: center !important; margin: 12px 0 0 !important; }
  .bb-hero-fisherman-wrap img { width: 280px !important; }
  .bb-hero-wave { bottom: 0 !important; }

  /* Stats bar: 4 → 2 grid */
  .bb-stats-bar { grid-template-columns: 1fr 1fr !important; margin: -20px 20px 0 !important; border-radius: 14px !important; }
  .bb-stats-bar > div { padding: 14px 18px !important; }
  .bb-stats-bar > div:nth-child(1), .bb-stats-bar > div:nth-child(2) { border-bottom: 1px solid rgba(13,59,46,0.14) !important; }
  .bb-stats-bar > div:nth-child(2), .bb-stats-bar > div:nth-child(4) { border-right: none !important; }
  .bb-stats-bar-num { font-size: 26px !important; }

  /* Filters + grids */
  .bb-filters-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .bb-grid-4 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .bb-grid-4 .bb-card h3 { font-size: 15px !important; }

  /* Card actions stack vertically on narrow viewports so CTAs never get truncated */
  .bb-card-actions { flex-direction: column !important; gap: 8px !important; }
  .bb-card-actions .bb-cta { padding: 11px 14px !important; font-size: 13px !important; }

  /* Game page hero stat pills wrap */
  .bb-game-stats { gap: 6px !important; }
  .bb-game-stats > div { padding: 6px 10px !important; }

  /* Demo player */
  .bb-demo-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .bb-demo-toolbar > * { width: 100% !important; justify-content: center !important; }
  .bb-demo-toolbar > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .bb-demo-toolbar > div:last-child > button { padding: 11px 12px !important; font-size: 13px !important; }
  .bb-iframe-cta { padding: 8px 14px !important; font-size: 11.5px !important; top: 10px !important; right: 10px !important; }

  /* Game info: stack sidebar below */
  .bb-info-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bb-info-sidebar { position: static !important; }

  /* Casinos: 4 → 1 */
  .bb-casinos-grid { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Footer */
  .bb-footer-providers { gap: 22px !important; padding: 0 20px 28px !important; }
  .bb-footer-cols { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px 20px !important; }
  .bb-footer-bottom { flex-direction: column !important; gap: 12px !important; padding: 18px 20px 22px !important; text-align: center !important; }
  .bb-footer-bottom > div:last-child { flex-wrap: wrap !important; justify-content: center !important; gap: 8px 10px !important; }

  /* Sticky CTA */
  .bb-sticky-cta { width: calc(100vw - 16px) !important; padding: 6px 6px 6px 10px !important; gap: 8px !important; border-radius: 14px !important; }
  .bb-sticky-cta-avatar { width: 32px !important; height: 32px !important; font-size: 15px !important; }
  .bb-sticky-cta-tag { display: none !important; }
  .bb-sticky-cta-label { font-size: 12.5px !important; }
  .bb-sticky-cta-btn { padding: 9px 14px !important; font-size: 12px !important; }

  /* Game page H1 / Related grid */
  .bb-game-h1 { font-size: 44px !important; letter-spacing: -1.4px !important; }
  .bb-game-sub-h2 { font-size: 26px !important; }

  /* FAQ */
  .bb-faq { padding: 56px 20px 64px !important; }
  .bb-faq-summary { padding: 16px 18px !important; gap: 12px !important; }
  .bb-faq-summary h3 { font-size: 16px !important; }
  .bb-faq-body { padding: 4px 18px 20px 18px !important; font-size: 14px !important; }
  .bb-faq-chevron { width: 28px !important; height: 28px !important; font-size: 16px !important; }
}

/* === Small phones (≤ 420px) === */
@media (max-width: 420px) {
  .bb-grid-4 { grid-template-columns: 1fr !important; }
  .bb-hero-h1 { font-size: 44px !important; }
  .bb-game-h1 { font-size: 36px !important; }
  .bb-stats-bar-num { font-size: 22px !important; }
  .bb-hero-fisherman-wrap img { width: 220px !important; }

  /* On 1-col card grid we can show actions side-by-side again since each card is full width */
  .bb-card-actions { flex-direction: row !important; }

  /* Tighten nav further on very small screens */
  .bb-nav { padding: 12px 14px !important; gap: 8px !important; }

  /* Casino card CTA — full width, no overflow */
  .bb-casinos-grid .bb-cta { width: 100% !important; justify-content: center !important; }
}