/* =====================================================================
   bm_rondleiding.css - de rondleiding voor leden, in de Busimatch-stijl:
   donkerpaarse kaart, gloedlijn oranje - roze - paars, gouden titel.

   Alles onder .bmrl-*, zodat het niets van de site eromheen raakt.
   Drie lagen, van onder naar boven:
     .bmrl-scherm  doorzichtig vlak dat klikken op de pagina opvangt
     .bmrl-gat     de lichtvlek rond het onderdeel; zijn schaduw verduistert de rest
     .bmrl-kaart   de uitleg met de knoppen

   Lokaal : D:\AI\Busimatch V2\public_html\custom\busimatch\css\bm_rondleiding.css
   Server : /custom/busimatch/css/bm_rondleiding.css
   ===================================================================== */

.bmrl-scherm{
  position:fixed; inset:0; z-index:2147480000;
  background:transparent;
}
/* de vraag heeft geen lichtvlek: dan verduistert het scherm zelf */
.bmrl-scherm.bmrl-donker{
  background:rgba(6,4,18,.72);
  display:flex; align-items:center; justify-content:center; padding:16px;
  animation:bmrl-op .18s ease-out;
}

.bmrl-gat{
  position:fixed; z-index:2147480001; pointer-events:none;
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(6,4,18,.74), 0 0 0 2px rgba(255,215,106,.9), 0 0 26px 4px rgba(249,115,22,.45);
  transition:left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}

.bmrl-kaart{
  position:fixed; z-index:2147480002;
  width:min(380px, calc(100vw - 28px)); box-sizing:border-box;
  padding:16px 18px 14px;
  border-radius:16px;
  background:linear-gradient(135deg,#1a1530 0%,#251b45 55%,#321852 100%);
  border:1px solid rgba(192,132,252,.65);
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 34px rgba(236,72,153,.2);
  color:#ece9fb; text-align:start;
  font-family:inherit; font-size:14px; line-height:1.5;
  transition:left .22s ease, top .22s ease;
  animation:bmrl-op .18s ease-out;
}
/* dunne gloedlijn bovenaan: de drie Busimatch-kleuren */
.bmrl-kaart:before{
  content:""; position:absolute; left:20px; right:20px; top:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#f97316,#ec4899 50%,#a855f7);
  pointer-events:none;
}
/* een stap zonder onderdeel (welkom, einde) en de vraag: midden op het scherm */
.bmrl-kaart.bmrl-midden{
  left:50% !important; top:50% !important; transform:translate(-50%,-50%);
  width:min(440px, calc(100vw - 28px));
}
.bmrl-scherm.bmrl-donker .bmrl-kaart.bmrl-midden{
  position:relative; left:auto !important; top:auto !important; transform:none;
}

.bmrl-kop{ display:flex; align-items:center; gap:10px; margin:0 0 8px }
.bmrl-vonk{
  flex:0 0 auto; width:34px; height:34px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center; font-size:17px;
  background:linear-gradient(135deg,#f97316,#ec4899 55%,#a855f7);
  box-shadow:0 0 14px rgba(236,72,153,.35);
}
.bmrl-teller{
  font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:#c4b5fd; margin:0 0 4px;
}
.bmrl-kaart .bmrl-titel{
  margin:0 0 6px; padding:0; border:0;
  font-size:18px; font-weight:800; line-height:1.25; text-align:start;
  color:#ffd76a;
  background:linear-gradient(90deg,#ffd76a,#fb923c 45%,#f472b6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.bmrl-kop .bmrl-titel{ margin:0 }
.bmrl-kaart .bmrl-tekst{ margin:0 0 10px; padding:0; color:#ece9fb; text-align:start; overflow-wrap:anywhere }
.bmrl-kaart .bmrl-vraagzin{ font-size:15.5px; font-weight:700; color:#fff }
.bmrl-kaart .bmrl-klein{ margin:0 0 4px; padding:0; font-size:12.5px; color:#b9b3d6; text-align:start }

.bmrl-balk{ height:4px; border-radius:4px; background:rgba(255,255,255,.10); overflow:hidden; margin:2px 0 12px }
.bmrl-balk i{ display:block; height:100%; width:0; border-radius:4px;
  background:linear-gradient(90deg,#f97316,#ec4899 55%,#a855f7); transition:width .25s ease }

.bmrl-rij{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:12px }
.bmrl-rechts{ display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-inline-start:auto }

/* bm_site_theme geeft elke button in een blok margin auto en een eigen kleur
   (!important); de rondleiding staat buiten de blokken, behalve de startknop. */
.bmrl-knop{
  appearance:none; margin:0 !important; cursor:pointer;
  min-height:38px; padding:8px 16px; border-radius:999px;
  font-family:inherit; font-size:13.5px; font-weight:800; line-height:1.2;
  border:1px solid transparent;
  transition:transform .15s ease, filter .15s ease, background-color .15s ease, border-color .15s ease;
}
.bmrl-knop:focus-visible{ outline:2px solid #ffd76a; outline-offset:2px }
.bmrl-knop.bmrl-prim{
  color:#1a1206 !important;
  background:linear-gradient(90deg,#ffd76a,#fb923c 55%,#f472b6) !important;
  box-shadow:0 6px 18px -8px #f97316;
}
.bmrl-knop.bmrl-prim:hover{ transform:translateY(-1px); filter:brightness(1.06) }
.bmrl-knop.bmrl-rand{
  color:#ece9fb !important; background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.22);
}
.bmrl-knop.bmrl-rand:hover{ background:rgba(255,255,255,.12) !important }
.bmrl-knop.bmrl-stil{
  color:#b9b3d6 !important; background:transparent !important; padding-inline:8px;
}
.bmrl-knop.bmrl-stil:hover{ color:#fff !important; text-decoration:underline }

/* de knop "Rondleiding starten" in het dashboard */
.bmrl-startrij{ display:flex; justify-content:center; margin:12px 0 4px }
.bmrl-startknop{ font-size:14px; padding:9px 20px }

/* tijdens de rondleiding: de vaste voetbalk en de chatbel niet over de kaart */
html.bmrl-bezig .bmrl-kaart,
html.bmrl-bezig .bmrl-gat{ will-change:left, top }

@keyframes bmrl-op{ from{opacity:0} to{opacity:1} }

@media (max-width:520px){
  .bmrl-kaart{ padding:14px 14px 12px; font-size:13.5px }
  .bmrl-kaart .bmrl-titel{ font-size:16.5px }
  .bmrl-knop{ padding:8px 13px; font-size:13px }
}
@media (prefers-reduced-motion:reduce){
  .bmrl-gat, .bmrl-kaart, .bmrl-balk i, .bmrl-knop{ transition:none }
  .bmrl-kaart, .bmrl-scherm.bmrl-donker{ animation:none }
}