/* ===== INNER PAGES (casino, login, promocode, uitbetaling, slots, download) ===== */

/* Header nav: keep 6 items on one line on desktop */
@media (min-width: 769px) {
  .header-nav { flex-wrap: nowrap; gap: 2px; }
  .header-nav a { padding: 6px 8px; white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .status-indicator { display: none; }
}
@media (min-width: 769px) and (max-width: 960px) {
  .header-nav a { padding: 6px 5px; font-size: .72rem; }
  .header-nav a svg { display: none; }
}

/* Header on small phones: keep the logo visible next to the CTA buttons */
@media (max-width: 480px) {
  .header-inner { gap: 8px; }
  .header-right { gap: 5px; }
  .header-right .btn svg { display: none; }
  .header-logo img { object-fit: contain; object-position: left center; }
}
@media (max-width: 360px) {
  .header-right .btn { padding: 7px 7px; }
}

/* Hero */
.page-hero { height: 400px; }

.page-hero .hero-content h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.25;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  overflow-wrap: break-word;
}

.hero-phone {
  position: absolute;
  z-index: 2;
  right: 9%;
  top: 50%;
  transform: translateY(-50%) rotate(4deg);
  width: 172px;
  height: 340px;
  padding: 8px;
  border-radius: 26px;
  background: var(--clr-header);
  border: 2px solid var(--clr-border);
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(212,168,50,.25);
}

.hero-phone::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--clr-header);
  z-index: 1;
}

.page-hero .hero-phone img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% center;
  border-radius: 18px;
}

/* Breadcrumbs */
.breadcrumbs { margin: 18px 16px 0; }

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--clr-text-dim);
}

.breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }

.breadcrumbs li + li::before {
  content: '>';
  margin: 0 8px;
  color: var(--clr-border);
}

.breadcrumbs li[aria-current] { color: var(--clr-text); }

/* Content block */
.page-content { margin-top: 16px; }

.page-content .content-review { overflow-wrap: break-word; }

.page-content .content-review > :first-child { margin-top: 0; }
.page-content .content-review > :last-child { margin-bottom: 0; }

.page-content .content-review img {
  max-width: 100%;
  height: auto;
  margin: 16px auto;
  border-radius: 8px;
}

.page-content .content-review table {
  border: 1px solid var(--clr-border);
  border-radius: 8px;
}

.page-content .content-review table tr:first-child th {
  background: var(--clr-header);
}

@media (max-width: 900px) {
  .page-content .content-review table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* CTA block after content */
.page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  text-align: center;
}

@media (max-width: 900px) {
  .page-hero .hero-content h1 { font-size: 1.6rem; }
  .hero-phone { display: none; }
}

@media (max-width: 768px) {
  .page-hero { height: 320px; }
  .page-hero .hero-content h1 { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .page-hero { height: 280px; }
  .page-hero .hero-content h1 { font-size: 1.15rem; }
  .page-hero .hero-content p { display: block; font-size: .78rem; margin-bottom: 16px; color: var(--clr-text); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
  .page-hero .btn-lg { padding: 11px 22px; font-size: .88rem; }
  .breadcrumbs { margin: 12px 8px 0; }
  .page-content { margin-top: 12px; }
}
