/* v176 mobile/tablet responsive overlay: CSS-only, no desktop/card/template/content changes. */
@media (max-width: 1180px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body:not(.admin-private-page),
  body:not(.admin-private-page) main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body:not(.admin-private-page) *,
  body:not(.admin-private-page) *::before,
  body:not(.admin-private-page) *::after {
    box-sizing: border-box;
  }

  body:not(.admin-private-page) img,
  body:not(.admin-private-page) svg,
  body:not(.admin-private-page) video,
  body:not(.admin-private-page) canvas,
  body:not(.admin-private-page) iframe {
    max-width: 100%;
  }

  body:not(.admin-private-page) .site-header,
  body:not(.admin-private-page) .secondary-nav {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  body:not(.admin-private-page) .secondary-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 64px !important;
    height: auto !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    contain: layout paint !important;
  }

  body:not(.admin-private-page) .secondary-nav a {
    flex: 0 0 clamp(142px, 22vw, 178px) !important;
    min-width: clamp(142px, 22vw, 178px) !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 8px 10px !important;
    scroll-snap-align: start;
  }

  body:not(.admin-private-page) .secondary-nav a span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
  }

  body:not(.admin-private-page) :is(
    .directory-filter-panel,
    .provider-filter-panel,
    .payment-filter-panel,
    .license-filter-panel,
    .country-directory-filter,
    .game-filter-panel,
    .bonus-filter-panel,
    .no-deposit-filter-panel,
    .free-spin-filter-panel,
    .editorial-filter-panel,
    .complaint-filter-panel,
    .catalog-filter-panel,
    .catalog-filter-form,
    .casino-landing-filter,
    .new-casino-filter-shell
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
  }

  body:not(.admin-private-page) :is(
    .directory-filter-panel,
    .provider-filter-panel,
    .payment-filter-panel,
    .license-filter-panel,
    .country-directory-filter,
    .game-filter-panel,
    .bonus-filter-panel,
    .no-deposit-filter-panel,
    .free-spin-filter-panel,
    .editorial-filter-panel,
    .complaint-filter-panel,
    .catalog-filter-panel,
    .catalog-filter-form,
    .casino-landing-filter,
    .new-casino-filter-shell
  ) > *,
  body:not(.admin-private-page) :is(
    .directory-filter-panel,
    .provider-filter-panel,
    .payment-filter-panel,
    .license-filter-panel,
    .country-directory-filter,
    .game-filter-panel,
    .bonus-filter-panel,
    .no-deposit-filter-panel,
    .free-spin-filter-panel,
    .editorial-filter-panel,
    .complaint-filter-panel,
    .catalog-filter-panel,
    .catalog-filter-form,
    .casino-landing-filter,
    .new-casino-filter-shell
  ) :is(label, input, select, textarea, button, .button) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body:not(.admin-private-page) .no-deposit-filter-panel.bonus-category-filter-panel.bonus-category-filter-panel {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  }
}

@media (max-width: 980px) {
  body:not(.admin-private-page) .site-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px 16px 14px !important;
    overflow: visible !important;
  }

  body:not(.admin-private-page) .brand {
    justify-self: center !important;
    min-width: 0 !important;
  }

  body:not(.admin-private-page) .brand-logo {
    width: clamp(148px, 42vw, 176px) !important;
    max-height: 52px !important;
    object-fit: contain !important;
  }

  body:not(.admin-private-page) .header-search,
  body:not(.admin-private-page) .csr-header-search {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
  }

  body:not(.admin-private-page) .header-search input,
  body:not(.admin-private-page) .csr-header-search input {
    min-height: 44px !important;
    height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
  }

  body:not(.admin-private-page) .header-tools {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  body:not(.admin-private-page) .theme-switcher,
  body:not(.admin-private-page) .nav-menu summary,
  body:not(.admin-private-page) .language-switcher summary {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    touch-action: manipulation;
  }

  body:not(.admin-private-page) .theme-switcher {
    min-width: 54px !important;
    padding: 6px 10px !important;
    justify-content: center !important;
  }

  body:not(.admin-private-page) .theme-switcher strong {
    display: none !important;
  }

  body:not(.admin-private-page) .nav-menu summary {
    padding: 0 14px !important;
    gap: 10px !important;
  }

  body:not(.admin-private-page) .language-switcher summary {
    min-width: 0 !important;
    max-width: 154px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }
}

@media (max-width: 720px) {
  body:not(.admin-private-page) details.nav-menu .nav-menu-panel.nav-menu-panel {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.admin-private-page) details.language-switcher .language-switcher-menu {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    width: min(320px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 520px) {
  body:not(.admin-private-page) .site-header {
    gap: 9px !important;
    padding: 10px 12px 12px !important;
  }

  body:not(.admin-private-page) .header-tools {
    gap: 7px !important;
  }

  body:not(.admin-private-page) .nav-menu summary {
    padding: 0 12px !important;
  }

  body:not(.admin-private-page) .language-switcher summary {
    max-width: 136px !important;
    padding: 0 10px !important;
  }

  body:not(.admin-private-page) .language-switcher-current {
    max-width: 82px !important;
  }

  body:not(.admin-private-page) :is(
    .directory-filter-panel,
    .provider-filter-panel,
    .payment-filter-panel,
    .license-filter-panel,
    .country-directory-filter,
    .game-filter-panel,
    .bonus-filter-panel,
    .no-deposit-filter-panel,
    .free-spin-filter-panel,
    .editorial-filter-panel,
    .complaint-filter-panel,
    .catalog-filter-panel,
    .catalog-filter-form,
    .casino-landing-filter,
    .new-casino-filter-shell
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1180px) {
  html body:not(.admin-private-page) header.site-header.site-header,
  html body:not(.admin-private-page) nav.secondary-nav.secondary-nav {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  html body:not(.admin-private-page) nav.secondary-nav.secondary-nav {
    display: flex !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 20 !important;
  }

  html body:not(.admin-private-page) nav.secondary-nav.secondary-nav a {
    flex: 1 1 calc(100% / 7) !important;
    min-width: 132px !important;
  }

  body:not(.admin-private-page) :is(
    .no-deposit-results-head,
    .catalog-toolbar,
    .catalog-toolbar-actions,
    .directory-result-toolbar,
    .provider-result-toolbar,
    .landing-control-panel,
    .crypto-control-panel
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  body:not(.admin-private-page) :is(
    .bonus-currency-select,
    .year-filter-chip,
    .catalog-toolbar .button,
    .no-deposit-results-head .button,
    .directory-result-toolbar .button,
    .provider-result-toolbar .button,
    .landing-control-panel .button,
    .crypto-control-panel .button
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  body:not(.admin-private-page) :is(
    .no-deposit-results-head,
    .catalog-toolbar,
    .catalog-toolbar-actions,
    .directory-result-toolbar,
    .provider-result-toolbar,
    .landing-control-panel,
    .crypto-control-panel
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body:not(.admin-private-page) :is(
    .bonus-currency-select,
    .catalog-toolbar .button,
    .no-deposit-results-head .button,
    .directory-result-toolbar .button,
    .provider-result-toolbar .button,
    .landing-control-panel .button,
    .crypto-control-panel .button
  ) {
    width: 100% !important;
  }

  body:not(.admin-private-page) :is(
    .bonus-calculator-shell,
    .bonus-calculator-panel,
    .bonus-calculator-grid,
    .decision-field,
    .decision-field-row,
    .bonus-deposit-currency-row
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.admin-private-page) .bonus-deposit-currency-row .bonus-currency-select {
    min-height: 44px !important;
  }

  html body:not(.admin-private-page) nav.secondary-nav.secondary-nav a {
    flex: 0 0 calc(100% / 3) !important;
    min-width: 124px !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero .bonus-hero-summary.bonus-hero-summary,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero .bonus-hero-summary.bonus-hero-summary {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    grid-template-rows: none !important;
    gap: 8px !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero .bonus-hero-summary-card.bonus-hero-summary-card,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero .bonus-hero-summary-card.bonus-hero-summary-card {
    min-height: 64px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    row-gap: 2px !important;
    align-items: center !important;
    padding: 10px 12px !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero .bonus-hero-stat-icon,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero .bonus-hero-stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 32px !important;
    height: 32px !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero .bonus-hero-summary-card span,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero .bonus-hero-summary-card span {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0.72rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  html body:not(.admin-private-page) main .no-deposit-hero.no-deposit-hero .bonus-hero-summary-card strong,
  html body:not(.admin-private-page) main .bonus-category-hero.bonus-category-hero .bonus-hero-summary-card strong {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 1.5rem !important;
    line-height: 1.05 !important;
  }
}