@media (max-width: 968px) {
  .layout-wrapper { grid-template-columns: 1fr; }
  .sidebar { order: -1; display: none; }
  .casino-columns { grid-template-columns: 1fr; }
  .review-pros-cons { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .main-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--dark); flex-direction: column; padding: 20px; gap: 12px;
  }
  .main-nav.active { display: flex; }
  .nav-toggle { display: block; }
  .search-box { display: none; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 14px; }
  .hero-actions { flex-direction: column; }
  .casino-hero { flex-direction: column; align-items: flex-start; }
  .casino-hero__right { align-items: flex-start; width: 100%; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  
  .compliance-logos { gap: 12px; }
  .compliance-logos img { height: 32px; }
  .responsible-gambling-link { font-size: 12px; }

}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 24px; }
  .hero h1 { font-size: 24px; }
  .info-card dl { grid-template-columns: 1fr; }
  .info-card dd { text-align: left; }
}

/* ---- Global Mobile Tweaks ---- */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    overscroll-behavior-y: contain;
    padding-bottom: 56px; /* Space for bottom nav */
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Touch-friendly inputs */
  .form-group input,
  .form-group select,
  .form-group textarea,
  .admin-form input,
  .admin-form select,
  .admin-form textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .btn {
    min-height: 44px;
    padding: 10px 18px;
  }

  .btn--sm {
    min-height: 36px;
  }

  /* Better tap targets for table action buttons */
  .table-actions {
    gap: 6px;
  }

  .table-actions .btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}


/* ---- Mobile Bottom Navigation ---- */

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-around;
    align-items: center;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(12px);
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: color 0.2s;
    flex: 1;
    min-width: 0;
    border-radius: 8px;
  }

  .mobile-nav-item:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
  }

  .mobile-nav-item.active {
    color: var(--primary);
  } 

  .mobile-nav-icon {
    font-size: 20px;
    line-height: 1;
  }

  .mobile-nav-label {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  } 

 }

/* ---- Swipeable Casino Cards ---- */

/* ---- Sticky Mobile CTA ---- */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 56px;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: var(--white);
    padding: 10px 16px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    z-index: 998;
    gap: 12px;
    border-top: 1px solid var(--light-gray);
  }

  .mobile-cta-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }

  .mobile-cta-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .mobile-cta-info > div {
    min-width: 0;
  }

  .mobile-cta-info strong {
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-cta-info span {
    display: block;
    font-size: 12px;
    color: var(--gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-cta-title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-cta-btn {
    flex-shrink: 0;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
  }

  /* Hide sticky CTA on admin pages */
  body:has(.admin-wrapper) .mobile-sticky-cta {
    display: none;
  }
}

/* ---- Scroll to Top Button ---- */
.scroll-to-top {
  display: none;
  position: fixed;
  bottom: 70px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 997;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  align-items: center;
  justify-content: center;
}

.scroll-to-top.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 769px) {
  .scroll-to-top {
    bottom: 24px;
  }
}

/* ---- Improved Mobile Typography ---- */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  .hero p {
    font-size: 15px;
  }

  .section {
    padding: 30px 0;
  }

  .section-header h2 {
    font-size: 22px;
  }

  .review-header h1 {
    font-size: 24px;
  }

  .news-header h1 {
    font-size: 24px;
  }

  .info-block {
    padding: 16px;
  }

  .casino-hero {
    padding: 20px;
  }

  .casino-hero__logo {
    width: 60px;
    height: 60px;
  }

  .bonus-amount {
    font-size: 18px;
  }
}

/* ---- Mobile Admin Table Improvements ---- */
@media (max-width: 768px) {
  .admin-table {
    font-size: 13px;
  }

  .admin-table th {
    padding: 8px 10px;
    font-size: 11px;
  }

  .admin-table td {
    padding: 8px 10px;
  }

  .admin-content {
    padding: 16px;
  }

  .admin-form {
    padding: 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .stat-icon {
    font-size: 24px;
  }
}

/* ---- Mobile Sidebar Hidden, Content Full Width ---- */
@media (max-width: 968px) {
  .layout-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 16px auto;
  }

  .sidebar {
    display: none;
  }

  .main-content {
    width: 100%;
  }
}

/* ---- Mobile Casino Body Layout ---- */
@media (max-width: 768px) {
  .casino-body {
    gap: 16px;
  }

  .casino-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .casino-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .casino-aside .info-card {
    margin-bottom: 0;
  }
}

/* ---- Mobile Review Pros/Cons ---- */
@media (max-width: 768px) {
  .review-pros-cons {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .review-summary-table th {
    width: 120px;
    font-size: 13px;
  }

  .review-summary-table td {
    font-size: 13px;
  }
}

/* ---- Mobile Footer ---- */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding-bottom: 24px;
  }

  .footer-col h4 {
    font-size: 12px;
  }

  .footer-col a {
    font-size: 12px;
  }

  .compliance-logos {
    gap: 10px;
  }

  .compliance-logos img {
    height: 28px !important;
  }

  .footer-compliance-box {
    padding: 20px 0 16px;
    margin-bottom: 20px;
  }

  .rg-text {
    font-size: 12px;
  }

  .disclaimer-text {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .casino-aside {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile Nav Toggle (Hamburger) ---- */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
  }

  .main-nav.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--dark);
    padding: 16px 20px;
    gap: 4px;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  .main-nav.active a {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 15px;
  }

  .main-nav.active a:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ---- Mobile Search ---- */
@media (max-width: 768px) {
  .search-box {
    display: none !important;
  }

  .mobile-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-search-container.active {
    padding: 12px 16px;
  }

  .mobile-search-container input {
    font-size: 16px; /* Prevents iOS zoom */
    min-height: 44px;
  }

  .search-results,
  .mobile-search-results {
    font-size: 14px;
  }

  .search-result-item {
    padding: 12px 14px;
    min-height: 44px;
  }
}

/* ---- Mobile Auth Pages ---- */
@media (max-width: 768px) {
  .auth-card {
    padding: 24px 20px;
    border-radius: 16px;
    margin: 0 16px;
  }

  .auth-card h1 {
    font-size: 24px;
  }
}




/* ---- Mobile Category/Country Chips ---- */
@media (max-width: 768px) {
  .country-chips,
  .category-list {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 8px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .country-chips::-webkit-scrollbar,
  .category-list::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ---- Pull-to-Refresh Feel ---- */
@media (max-width: 768px) {
  body {
    overscroll-behavior-y: contain;
  }
}

/* ---- Mobile Casino Card Refinements ---- */
@media (max-width: 768px) {

  .geo-badge {
    width: 32px;
    height: 32px;
    top: 6px;
    right: 6px;
  }

  .geo-badge__flag {
    font-size: 22px;
  }

  .geo-badge__icon {
    font-size: 14px;
  }
}


html,
body {
  max-width: 100%;
  overflow-x: clip;
}

* {
  box-sizing: border-box;
}

img,
video,
iframe,
table,
pre,
code {
  max-width: 100%;
}




/* ---- Mobile Logo Sizing (large phones) ---- */
@media (max-width: 480px) {
  .logo-text { font-size: 1rem; }
}

/* ---- News Search Bar: keep button visible on large phones ---- */
@media (max-width: 480px) {
  .news-list-page form[action="/en/news"] {
    flex-wrap: wrap;
  }
  .news-list-page form[action="/en/news"] input[type="search"] {
    min-width: 0;
    flex-basis: 100%;
  }
  .news-list-page form[action="/en/news"] button[type="submit"] {
    flex-shrink: 0;
  }
}

/* Full-bleed containers + orange card borders: moved to the end of
   supportive.css. That file (loaded after this one) is what actually
   sets .container's mobile padding (16px, overriding main.css's
   20px) -- a rule here would've been silently overridden by it, the
   way the earlier -20px negative-margin version in this spot was
   slightly off (it assumed 20px, but 16px is what's actually applied
   on mobile). Keeping the real fix in the one file that owns that
   value avoids that class of bug happening again. */

/* =====================================================
   COMPARISON TABLE (Phase 7 — generic content engine comparison
   engine). Desktop: a real HTML table, horizontally scrollable if
   there are more than a couple of items (comparison-table-wrap
   handles overflow-x so the page body never scrolls sideways).
   Mobile (<=768px, matching this file's established breakpoint):
   the classic responsive-table transform -- rows become stacked
   blocks, each cell gets its row label from its data-label attribute
   via ::before, so a comparison never renders as an unreadable
   horizontal table on a phone (Phase 14 of the original spec).
   ===================================================== */
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border, #e5e5e5);
}
.comparison-table__criterion-col,
.comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .comparison-table-wrap {
    overflow-x: visible;
  }
  .comparison-table,
  .comparison-table thead,
  .comparison-table tbody,
  .comparison-table th,
  .comparison-table td,
  .comparison-table tr {
    display: block;
  }
  .comparison-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .comparison-table tr {
    margin-bottom: 16px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
  }
  /* First cell in each row is the criterion's own label (e.g.
     "Rating", "License") -- shown as a plain section heading, not
     via the data-label::before trick (that's for identifying which
     ITEM a value belongs to, once there's more than one item per
     row -- see below). */
  .comparison-table td:first-child {
    text-align: left;
    padding-left: 16px;
    font-weight: 700;
    background: var(--bg-subtle, #f7f7f7);
  }
  /* Every other cell in the row is one item's value for this
     criterion. Each carries data-label="{item name}" (set by the
     controller), so collapsing the table still tells you which
     product a value belongs to, even with the header row hidden. */
  .comparison-table td:not(:first-child) {
    border-bottom: 1px solid var(--border, #e5e5e5);
    position: relative;
    padding-left: 45%;
    text-align: right;
    min-height: 32px;
  }
  .comparison-table td:not(:first-child)[data-label]:before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    width: 40%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
    font-weight: 600;
  }
}