/* drspiele-design.css Stage1 - override only. Do not replace Base44 bundle. */

/* Reveal stuck entrance animations (static dump has no motion JS) */
[style*="opacity: 0"],
[style*="opacity:0"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Tap targets: Top10 primary CTAs + sticky promo CTA */
#top10 a.bg-primary,
#top10 a[href^="/go/"] {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 0.625rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Sticky promo bar: reserve space + size CTA */
body {
  padding-bottom: 88px !important;
  overflow-x: hidden !important;
}
html {
  overflow-x: hidden !important;
}
.ds-sticky-promo {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  max-height: none !important;
  overflow: visible !important;
}
.ds-sticky-promo a[href^="/go/"] {
  min-height: 44px !important;
  padding: 0.625rem 1rem !important;
  font-size: 0.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* Close via checkbox hack (no JS) */
#ds-promo-dismiss { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#ds-promo-dismiss:checked + .ds-sticky-promo { display: none !important; }
#ds-promo-dismiss:checked ~ * { } /* no-op keep selector valid */
body:has(#ds-promo-dismiss:checked) { padding-bottom: 0 !important; }
.ds-promo-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  cursor: pointer !important;
  border-radius: 0.5rem !important;
  color: inherit !important;
}
.ds-promo-close:hover { background: rgba(255,255,255,0.15) !important; }

/* Logo tiles */
.ds-casino-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 0.5rem !important;
  object-fit: contain !important;
  background: #fff !important;
  border: 1px solid hsl(var(--border, 220 15% 20%)) !important;
  padding: 2px !important;
  flex-shrink: 0 !important;
}
#top10 .ds-casino-logo { width: 40px; height: 40px; }
@media (min-width: 640px) {
  #top10 .ds-casino-logo { width: 48px; height: 48px; }
}

/* Top10 mobile: show bonus + rating */
@media (max-width: 639px) {
  #top10 .hidden.sm\:flex,
  #top10 .hidden.sm\:block { display: flex !important; }
  #top10 .hidden.md\:block { display: block !important; min-width: 0 !important; text-align: left !important; }
  #top10 > div.flex { flex-wrap: wrap !important; }
  #top10 a.bg-primary { flex: 1 1 100% !important; width: 100% !important; }
}

/* Kill large empty min-heights / holes */
.ds-removed { display: none !important; }

/* Collapse accidental empty wrappers left by static dump / removed sections */
section:empty,
div:empty:not(input):not(img):not(br):not(hr):not(.ds-casino-logo) {
  display: none !important;
}
/* Prefer content height over leftover hero holes when section was emptied */
.space-y-6:empty { display: none !important; }
/* FAQ answers */
.ds-faq-a { line-height: 1.55; }
/* Ideal casino grid */
#ds-ideal-casino .ds-casino-logo { width: 40px; height: 40px; }

/* === Stage1 FAIL fixes (staging 8abcf9e7) === */
/* Missing Tailwind gradient stops used in HTML (Base44 May bundle incomplete) */
.from-yellow-300{--tw-gradient-from: #fde047 var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-yellow-400{--tw-gradient-from: #facc15 var(--tw-gradient-from-position);--tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-emerald-400{--tw-gradient-from: #34d399 var(--tw-gradient-from-position);--tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-emerald-500{--tw-gradient-from: #10b981 var(--tw-gradient-from-position);--tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-emerald-600{--tw-gradient-from: #059669 var(--tw-gradient-from-position);--tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-emerald-700{--tw-gradient-from: #047857 var(--tw-gradient-from-position);--tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-purple-500{--tw-gradient-from: #a855f7 var(--tw-gradient-from-position);--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-teal-500{--tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-violet-600{--tw-gradient-from: #7c3aed var(--tw-gradient-from-position);--tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.to-orange-300{--tw-gradient-to: #fdba74 var(--tw-gradient-to-position)}
.to-teal-300{--tw-gradient-to: #5eead4 var(--tw-gradient-to-position)}
.to-yellow-600{--tw-gradient-to: #ca8a04 var(--tw-gradient-to-position)}
.to-emerald-700{--tw-gradient-to: #047857 var(--tw-gradient-to-position)}
.to-indigo-700{--tw-gradient-to: #4338ca var(--tw-gradient-to-position)}
.to-teal-800{--tw-gradient-to: #115e59 var(--tw-gradient-to-position)}
.from-emerald-600\/15{--tw-gradient-from: rgb(5 150 105 / .15) var(--tw-gradient-from-position);--tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.from-primary\/15{--tw-gradient-from: hsl(var(--primary) / .15) var(--tw-gradient-from-position);--tw-gradient-to: hsl(var(--primary) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.to-emerald-600\/10{--tw-gradient-to: rgb(5 150 105 / .1) var(--tw-gradient-to-position)}
.to-teal-600\/15{--tw-gradient-to: rgb(13 148 136 / .15) var(--tw-gradient-to-position)}
.to-primary\/70{--tw-gradient-to: hsl(var(--primary) / .7) var(--tw-gradient-to-position)}
.to-primary\/80{--tw-gradient-to: hsl(var(--primary) / .8) var(--tw-gradient-to-position)}
.to-amber-500\/10{--tw-gradient-to: rgb(245 158 11 / .1) var(--tw-gradient-to-position)}
.to-yellow-500\/10{--tw-gradient-to: rgb(234 179 8 / .1) var(--tw-gradient-to-position)}
.hover\:from-emerald-700:hover{--tw-gradient-from: #047857 var(--tw-gradient-from-position);--tw-gradient-to: rgb(4 120 87 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}
.hover\:to-emerald-800:hover{--tw-gradient-to: #065f46 var(--tw-gradient-to-position)}

/* Gradient text: ensure clip + paint; fallback stops if from/to vars missing */
.bg-gradient-to-r.bg-clip-text.text-transparent,
.bg-gradient-to-br.bg-clip-text.text-transparent {
  background-image: linear-gradient(to right, var(--tw-gradient-stops, #fde047, #fde68a)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
/* Solid fallback if background-clip unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .bg-clip-text.text-transparent {
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
  }
}

/* /top-casinos/ Gesamtsieger: wrap on narrow viewports */
@media (max-width: 639px) {
  .flex.items-center.gap-3.mb-4 {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
  .ml-auto.text-right.shrink-0 {
    margin-left: 0 !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .ml-auto.text-right.shrink-0 p {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .ml-auto.text-right.shrink-0 .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }

  /* Home "Alle anschauen" header row */
  .flex.items-center.justify-between {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .flex.items-center.justify-between > a.whitespace-nowrap,
  a.whitespace-nowrap[href="/vergleich"] {
    white-space: normal !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* /vergleich/ license filter chips */
  .flex.items-center.gap-2 {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .flex.items-center.gap-2 > button {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* Re-declare to-* after from-* so gradient end colors win (Tailwind order) */
.to-amber-200{--tw-gradient-to: #fde68a var(--tw-gradient-to-position)}
.to-lime-300{--tw-gradient-to: #bef264 var(--tw-gradient-to-position)}
.to-cyan-300{--tw-gradient-to: #67e8f9 var(--tw-gradient-to-position)}
.to-orange-300{--tw-gradient-to: #fdba74 var(--tw-gradient-to-position)}
.to-orange-400{--tw-gradient-to: #fb923c var(--tw-gradient-to-position)}
.to-orange-600{--tw-gradient-to: #ea580c var(--tw-gradient-to-position)}
.to-pink-300{--tw-gradient-to: #f9a8d4 var(--tw-gradient-to-position)}
.to-red-500{--tw-gradient-to: #ef4444 var(--tw-gradient-to-position)}
.to-teal-300{--tw-gradient-to: #5eead4 var(--tw-gradient-to-position)}
.to-yellow-600{--tw-gradient-to: #ca8a04 var(--tw-gradient-to-position)}
.to-emerald-700{--tw-gradient-to: #047857 var(--tw-gradient-to-position)}
.to-indigo-700{--tw-gradient-to: #4338ca var(--tw-gradient-to-position)}
.to-teal-800{--tw-gradient-to: #115e59 var(--tw-gradient-to-position)}

/* Extra mobile overflow containment (bonus codes, author bylines, tables) */
@media (max-width: 639px) {
  .bg-card.border-2.border-primary.rounded-xl.py-4.px-8.inline-block,
  .inline-block.px-8.py-4 {
    max-width: 100% !important;
    width: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
  .font-heading.text-4xl.font-black.tracking-widest,
  .font-heading.text-4xl.font-black {
    font-size: 1.5rem !important;
    letter-spacing: 0.04em !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100% !important;
  }
  .flex.items-center.gap-3.group {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  .flex.items-center.gap-3.group > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .flex.items-center.gap-3.group p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .overflow-x-auto {
    max-width: 100% !important;
  }
  /* nested padding in bonus hero */
  .bg-primary\/5.border-2.rounded-2xl.p-8,
  .rounded-2xl.p-8.mb-8.text-center {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* === Stage1b live fixes (hero grid, sticky CTA, nav 1024) === */

/* Hero: keep doctor image beside copy from lg (Base44 has utilities; reinforce after HTML tag repair) */
@media (min-width: 1024px) {
  .grid.lg\:grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
  }
  .hidden.lg\:flex {
    display: flex !important;
  }
}

/* Sticky promo: keep CTA + dismiss usable; do not clip the bar */
.ds-sticky-promo .flex.items-center.gap-2 {
  flex-shrink: 0 !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.ds-sticky-promo a[href^="/go/"] {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background: hsl(var(--secondary, 45 90% 55%)) !important;
  color: hsl(var(--secondary-foreground, 220 40% 10%)) !important;
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
}
/* Home only: hide legacy z-40 gradient sticky when redesigned z-50 promo exists */
body:has(.ds-sticky-promo.z-50) > #root > .fixed.bottom-0.bg-gradient-to-r:not(.ds-sticky-promo) {
  display: none !important;
}

/* Nav: tighten at 1024-1279 so header stays one row when possible */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hidden.lg\:flex.items-center.gap-1 {
    gap: 0 !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
  }
  .hidden.lg\:flex.items-center.gap-1 > a {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
  }
  .hidden.lg\:flex.items-center.gap-1 > div > .flex.items-center > span {
    padding-left: 0.35rem !important;
    padding-right: 0.25rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
  }
  .hidden.lg\:flex.items-center.gap-1 .lucide-chevron-down {
    width: 0.65rem !important;
    height: 0.65rem !important;
  }
  /* Drop leading emoji glyphs from nav labels via smaller line boxes (safe visual tighten) */
  .ds-nav-emoji { display: none !important; }
}