/* Matrix Spins Casino — Cookie Consent */

#mcc-wrapper {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  color: #f0f0f5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ── Banner ────────────────────────────────────────── */

.mcc-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: rgba(13, 15, 20, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 2px solid #d4af37;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mcc-banner.mcc-visible {
  transform: translateY(0);
}

.mcc-banner.mcc-hidden {
  transform: translateY(100%);
  pointer-events: none;
}

.mcc-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.mcc-banner-text {
  flex: 1 1 320px;
  margin: 0;
  color: #c0c0c8;
  font-size: 14px;
}

/* WCAG 2.1 AA 1.4.3: the policy link had no color rule, so it fell back to the
   browser default #0000EE (~2:1 on this dark banner — fails). Brand bright-gold
   gives ~11:1, underlined so it still reads as a link, with a visible focus ring
   (2.4.7) for keyboard users. Shown to every new visitor on every page. */
.mcc-policy-link {
  color: #f0c66e;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mcc-policy-link:hover { color: #ffd97a; }
.mcc-policy-link:focus-visible {
  outline: 2px solid #f0c66e;
  outline-offset: 2px;
  border-radius: 2px;
}

.mcc-banner-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────── */

.mcc-btn {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.mcc-btn--primary {
  background: #d4af37;
  color: #0d0f14;
}

.mcc-btn--primary:hover {
  background: #e0c04e;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}

.mcc-btn--secondary {
  background: transparent;
  color: #f0f0f5;
  border: 1.5px solid rgba(240, 240, 245, 0.3);
}

.mcc-btn--secondary:hover {
  border-color: #d4af37;
  color: #d4af37;
}

.mcc-btn--link {
  background: transparent;
  color: #d4af37;
  padding: 10px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mcc-btn--link:hover {
  color: #e0c04e;
}

/* ── Overlay & Panel ───────────────────────────────── */

.mcc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.6);
  /* Default: hidden. The customize panel only appears when user clicks
     "Customize" on the bottom banner. Starting at display:none guarantees
     no fullscreen black flash before JS adds mcc-hidden. */
  display: none;
  align-items: flex-end;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.mcc-overlay.mcc-visible {
  display: flex;
}

.mcc-overlay.mcc-hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.mcc-panel {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: #14161d;
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mcc-overlay.mcc-hidden .mcc-panel {
  transform: translateY(100%);
}

.mcc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(240, 240, 245, 0.08);
}

.mcc-panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #f0f0f5;
}

.mcc-panel-close {
  background: transparent;
  border: none;
  color: #888;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.2s;
}

.mcc-panel-close:hover {
  color: #f0f0f5;
}

.mcc-panel-body {
  padding: 16px 24px;
  overflow-y: auto;
  flex: 1;
}

.mcc-panel-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(240, 240, 245, 0.08);
  text-align: right;
}

/* ── Preference Items ──────────────────────────────── */

.mcc-pref-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(240, 240, 245, 0.06);
}

.mcc-pref-item:last-child {
  border-bottom: none;
}

.mcc-pref-info {
  flex: 1;
}

.mcc-pref-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #f0f0f5;
  margin-bottom: 2px;
}

.mcc-pref-desc {
  margin: 0;
  font-size: 12px;
  color: #8888a0;
  line-height: 1.45;
}

/* ── Toggle Switch ─────────────────────────────────── */

.mcc-toggle {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 26px;
  margin-top: 2px;
}

.mcc-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.mcc-toggle-slider {
  position: absolute;
  inset: 0;
  background: #2a2d38;
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.25s;
}

.mcc-toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #666;
  border-radius: 50%;
  transition: transform 0.25s, background 0.25s;
}

.mcc-toggle input:checked + .mcc-toggle-slider {
  background: rgba(212, 175, 55, 0.25);
}

.mcc-toggle input:checked + .mcc-toggle-slider::after {
  transform: translateX(22px);
  background: #d4af37;
}

.mcc-toggle--disabled .mcc-toggle-slider {
  cursor: not-allowed;
  opacity: 0.5;
}

.mcc-toggle--disabled input:checked + .mcc-toggle-slider {
  background: rgba(212, 175, 55, 0.15);
}

/* ── Mobile ────────────────────────────────────────── */

@media (max-width: 640px) {
  /* ── BULLETPROOF mobile banner ──────────────────────────────────────
     History: on phones the banner repeatedly ballooned tall enough to
     blanket the bottom of the screen, pushing its own dismiss buttons
     BELOW the viewport. Because the banner is `position:fixed` with
     `pointer-events:auto`, that made the whole lower screen untappable
     and un-scrollable — the user could neither reach the page CTAs nor
     dismiss the banner ("scroll does not work").

     This block makes the failure structurally impossible, independent of
     text length or the user's system font-scaling:
       1. HARD height cap (max-height: 80vh) — the banner can never cover
          more than 80% of the viewport, so page content is always
          visible/scrollable behind it.
       2. Internal scroll (overflow-y:auto) — if content ever exceeds the
          cap, the banner scrolls inside itself instead of overflowing
          off-screen.
       3. STICKY action bar — Accept / Reject / Customize are pinned to
          the bottom of the banner and stay on-screen no matter what, so
          the banner is always dismissable with one tap. */
  .mcc-banner {
    max-height: 80vh;
  }

  .mcc-banner-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 16px;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* .mcc-banner-text carries `flex: 1 1 320px`; in the column layout that
     320px basis would become a 320px HEIGHT and inflate the banner. Reset
     to content-height. (Belt: the max-height cap above already prevents
     the catastrophic case even without this line.) */
  .mcc-banner-text {
    flex: 0 0 auto;
  }

  .mcc-banner-actions {
    flex-direction: column;
    /* Pin the dismiss buttons to the bottom of the (now scrollable)
       banner so they are ALWAYS reachable — the core guarantee. */
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: rgba(13, 15, 20, 0.98);
    margin: 0 -16px -18px;
    padding: 12px 16px 16px;
  }

  .mcc-btn {
    width: 100%;
    text-align: center;
  }

  .mcc-panel {
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px 14px 0 0;
  }
}

/* ── Reduced Motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mcc-banner,
  .mcc-overlay,
  .mcc-panel,
  .mcc-toggle-slider,
  .mcc-toggle-slider::after {
    transition: none;
  }
}