/* BusjeDirect UI helpers */

/* Force-hide the functional radio inputs (so you never see the browser default circles) */
.bd-option-card { position: relative; }
label > input.peer[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

/* ===== Mobile overflow fixes (no JS changes) ===== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent padding/border from making elements wider than their containers */
*, *::before, *::after { box-sizing: border-box; }

/* Media should never force horizontal scroll */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Long strings (emails, refs) shouldn't overflow */
p, a, span, div {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Fix for floating card centering (Tailwind transform + float animation conflict) =====
   The page uses Tailwind translate utilities (-translate-x-1/2 etc.) on the same element
   that also has /* Floating animations */
.float-anim{
  /* used for the hero SVG illustration */
  animation: bd-float-y 6s ease-in-out infinite !important;
  will-change: transform;
}

@keyframes bd-float-y{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Used for the centered glass card (keeps it centered while floating) */
.float-anim-centered{
  animation: bd-float-centered 6s ease-in-out infinite !important;
  will-change: transform;
}

@keyframes bd-float-centered{
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-15px); }
}

/* Extra safety: keep centered floating elements inside the viewport on small screens */
@media (max-width: 768px){
  .float-anim-centered{
    left: 50% !important;
    right: auto !important;
    max-width: calc(100vw - 32px);
  }
}


/* Mobile navigation (CSS-only toggle via checkbox) */
.nav-toggle{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap; }
.mobile-nav{ display:none; }
.nav-toggle:checked ~ .mobile-nav{ display:block; }
.mobile-nav{ background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(226,232,240,0.9); }

/* ===== NIEUW: Verberg standaard pijltjes bij details/summary ===== */
/* Dit zorgt ervoor dat je item-lijst er strak uitziet zonder lelijke driehoekjes */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}