/* CUSTOM STYLES analyse pagina's (na omzetten naar risicobadges) - Toegevoegd door onszelf */

.card.text-bg-danger ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-left: 0;
  }

  .card.text-bg-danger ul li {
    margin-bottom: 0.3rem;   /* minder ruimte tussen regels */
    line-height: 1.3;        /* compacter regelhoogte */
  }

   /* ✅ Risico-dot + label */
  .riskline { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .riskdot { width:12px; height:12px; border-radius:999px; display:inline-block; }
  .risk-low { background:#22c55e; }     /* groen */
  .risk-mid { background:#f59e0b; }     /* oranje/geel */
  .risk-high{ background:#ef4444; }     /* rood */

  .risklabel { font-weight:800; }
  .risksub { font-size:.95rem; opacity:.8; }

  /* ✅ Lijstjes compact */
  .om-list { margin:0; padding-left:1.2rem; }
  .om-list li { margin-bottom:.35rem; line-height:1.35; }

  /* ✅ Kleine sectiekoppen */
  .om-h { font-weight:800; margin: 1rem 0 .5rem; display:flex; align-items:center; gap:.5rem; }
  .om-h i { opacity:.9; }

  /* ✅ "Wat betekent dit" box */
  .om-meaning { border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:12px 14px; }
  [data-bs-theme="dark"] .om-meaning { border-color: rgba(255,255,255,.16); }

  /* ✅ Lees meer knop */
  .om-morebtn { font-weight:700; }

  /* ✅ Zachte divider */
  .om-divider { border-top:1px dashed rgba(0,0,0,.14); margin:1rem 0; }
  [data-bs-theme="dark"] .om-divider { border-top-color: rgba(255,255,255,.16); }

  /* ✅ Bullets tonen in nieuwe blokken */
.card .om-list{
  list-style: disc !important;
  padding-left: 1.5rem !important;
  margin-left: 0 !important;
}

.card .om-list li{
  display: list-item !important;
}


/* ✅ Chic dot (20px) */
.om-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}

.om-dot--green{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.30), rgba(255,255,255,0) 45%),
    var(--om-green);
}

.om-dot--lightgreen{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.38), rgba(255,255,255,0) 45%),
    var(--om-lightgreen);
}

.om-dot--yellow{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), var(--om-yellow) !important;
}

.om-dot--orange{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), var(--om-orange);
}

.om-dot--red{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), var(--om-red);
}

[data-bs-theme="dark"] .om-dot{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* ✅ Risico badge: dot + tekst in dezelfde kleur */
.om-riskbadge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:1.0rem;
  line-height:1;
  white-space: nowrap;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

[data-bs-theme="dark"] .om-riskbadge{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}

/* badge kleuren */
.om-riskbadge--green{
  color: var(--om-green);
  border-color: rgba(22,163,74,.45);
  background: rgba(22,163,74,.10);
}

.om-riskbadge--lightgreen{
  color: #43b96b; /* iets donkerder tekst voor leesbaarheid */
  border-color: rgba(109,223,142,.58);
  background: rgba(109,223,142,.20);
}

.om-riskbadge--yellow{
  color: #b98500; /* iets warmer/geel-achtig leesbaar */
  border-color: rgba(246,204,85,.55);
  background: rgba(246,204,85,.16);
}

.om-riskbadge--orange{
  color: var(--om-orange);
  border-color: rgba(253,138,76,.55);
  background: rgba(253,138,76,.16);
}

/* ✅ nieuw: ROOD badge */
.om-riskbadge--red{
  color: var(--om-red);
  border-color: rgba(237,70,90,.55);
  background: rgba(237,70,90,.12);
}

/* ✅ Dot in badge iets kleiner zodat het chique blijft */
.om-riskbadge .om-dot{
  width: 16px;
  height: 16px;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
[data-bs-theme="dark"] .om-riskbadge .om-dot{
  border-color: rgba(255,255,255,.12);
}

/* ✅ Witte outline buttons (altijd wit, ook hover) */
.btn-outline-white{
  color: #fff !important;
  border-color: rgba(255,255,255,.85) !important;
  background: transparent !important;
  font-weight: 500;
}

.btn-outline-white:hover,
.btn-outline-white:focus,
.btn-outline-white:active{
  color: #000000 !important;
  border-color: #fff !important;
  background: #e7e7e7 !important; /* subtiele white glow */
}

.btn-outline-white:focus{
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18) !important;
}

/* optioneel: nog iets chiquer */
.btn-outline-white.om-navbtn{
  border-radius: 999px;
  padding: .45rem .85rem;
}



.om-navwrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.om-navwrap::-webkit-scrollbar{ display:none; }

.om-navrow{
  display:flex;
  gap:.6rem;
  flex-wrap: nowrap;
  padding-bottom:.25rem;
}

/* je bestaande btn styling blijft leidend */
.btn-outline-white.om-navbtn{
  flex: 0 0 auto; /* voorkomt dat ze smal worden */
}

/* desktop: mag weer naar meerdere regels */
@media (min-width: 992px){
  .om-navwrap{ overflow-x: visible; }
  .om-navrow{ flex-wrap: wrap; }
}

/* =========================
   SPOTLIGHT OVERLAY
   ========================= */
.om-spotlight-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1040;
}
.om-spotlight-overlay.is-active{
  opacity: 1;
  pointer-events: auto;
}
[data-bs-theme="dark"] .om-spotlight-overlay{
  background: rgba(0,0,0,.65);
}

/* =========================
   FOCUSED CARD (clean)
   - geen shadow
   - geen kleur rand (standaard)
   - optioneel 1 primary border via CSS var
   ========================= */
:root{
  --om-spotlight-border: 1px; /* zet naar 0px als je géén rand wilt */
  --om-green:      #16a34a;  /* Laag risico = donkerder, duidelijker groen */
  --om-lightgreen: #6ddf8e;  /* Beperkt risico = lichter/frisser groen */
  --om-yellow:     #eadd09;
  --om-orange:     #fd8a4c;
  --om-red:        #ed465a;
}

.om-block.is-spotlight,
#conclusion.is-spotlight,
#tips_section.is-spotlight,
#supplier_questions_section.is-spotlight{
  position: relative;
  z-index: 1041;
  box-shadow: none !important;
  transform: none !important;
  border: var(--om-spotlight-border) solid var(--bs-primary) !important; /* ✅ easy tweak */
  border-radius: 16px;
}

/* =========================
   Backup offset (als een anchor-jump gebeurt)
   ========================= */
#extended_advice_costs,
#extended_advice_trust,
#extended_advice_content,
#conclusion,
#tips_section,
#supplier_questions_section{
  scroll-margin-top: 100px;
}


/* default: overlay uit op mobile */
.om-spotlight-overlay{ display:none; }

/* vanaf md: overlay aan */
@media (min-width: 768px){
  .om-spotlight-overlay{ display:block; }
}



/* =========================
   OFFCANVAS - VRAGEN PANEL
   ========================= */
.om-qpanel{
  /* ✅ groot scherm: echt breed (2–2,5x t.o.v. de oude 620px) */
  width: min(1100px, 70vw);
}

/* ✅ mobiel: 80% zodat je naast het panel kunt klikken */
@media (max-width: 575.98px){
  .om-qpanel{
    width: 80vw;
  }
}

/* ✅ Accordion compacter */
.om-qpanel .accordion-body{
  padding: .75rem .85rem; /* was standaard ~1rem */
}

/* optioneel: header ook iets compacter */
.om-qpanel .accordion-button{
  padding: .85rem .95rem;
}

.om-qpanel .offcanvas-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}
[data-bs-theme="dark"] .om-qpanel .offcanvas-header{
  border-bottom-color: rgba(255,255,255,.12);
}

.om-qpanel .offcanvas-title{
  font-weight: 900;
}

.om-qhint{
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0,0,0,.02);
}
[data-bs-theme="dark"] .om-qhint{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}

.om-qchips{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.om-qchip{
  border-radius: 999px;
  padding: .35rem .65rem;
  font-weight: 700;
}

.om-qcount{
  font-weight: 800;
  opacity: .85;
}

.om-qrow{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 10px;
  background: #fff;
}
[data-bs-theme="dark"] .om-qrow{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.om-qrow .form-control{
  border-radius: 12px;
}

.om-qrow-actions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .5rem;
}

.om-qaddbtn{
  border-radius: 999px;
  font-weight: 800;
}

.om-qsavebtn{
  border-radius: 999px;
  font-weight: 900;
}

.om-qfloating{
  position: fixed;
  left: 20px;               /* ✅ links */
  bottom: 80px;            /* ✅ ~100px boven feedback (feedback zit bij jou op 20px) */
  z-index: 1030;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* ✅ FORCE OFFCANVAS WIDTH (Bootstrap gebruikt --bs-offcanvas-width) */
.offcanvas.om-qpanel{
  --bs-offcanvas-width: min(800px, 70vw) !important;
  width: var(--bs-offcanvas-width) !important;
  max-width: 1100px !important; /* extra zekerheid */
}

@media (max-width: 575.98px){
  .offcanvas.om-qpanel{
    --bs-offcanvas-width: 80vw !important;
    width: var(--bs-offcanvas-width) !important;
    max-width: none !important;
  }
}

/* =========================
   OFFCANVAS HERO BANNER
   ========================= */
.om-qhero{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 120px;     /* desktop */
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.20)),
    url('/images/dame-loep-banner.jpg') center/cover no-repeat;
  border: 1px solid rgba(0,0,0,.08);
}

[data-bs-theme="dark"] .om-qhero{
  border-color: rgba(255,255,255,.12);
}

.om-qhero__inner{
  position: relative;
  padding: 14px 16px;
  color: #fff;
}

.om-qhero__title{
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
}

.om-qhero__sub{
  margin-top: 2px;
  font-size: .9rem;
  opacity: .9;
}

@media (min-width: 992px){
  .om-qhero{
    min-height: 140px; /* wat ruimer op desktop */
  }
  .om-qhero__title{
    font-size: 1.2rem;
  }
}

@media (max-width: 575.98px){
  .om-qhero{
    min-height: 110px;
    border-radius: 14px;
  }
}

/* ✅ Accordion headers: primary + fw-800 (altijd) */
.om-qpanel .accordion-button,
.om-qpanel .accordion-button.collapsed{
  color: var(--bs-primary) !important;
  font-weight: 800 !important;
}

/* ✅ Alleen actief/open: underline */
.om-qpanel .accordion-button:not(.collapsed){
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
}

/* ✅ Niet-actief/dicht: geen underline */
.om-qpanel .accordion-button.collapsed{
  text-decoration: none;
}

/* optioneel: icoontje (chevron) ook primary */
.om-qpanel .accordion-button::after{
  filter: none; /* reset */
  opacity: .9;
}

/* =========================
   OFFCANVAS INFO BOX
   ========================= */
.om-qinfo{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(13,110,253,.25);              /* primary */
  background: rgba(13,110,253,.06);
}

[data-bs-theme="dark"] .om-qinfo{
  border-color: rgba(13,110,253,.35);
  background: rgba(13,110,253,.12);
}

.om-qinfo__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,.15);
  color: var(--bs-primary);
  flex: 0 0 auto;
}

[data-bs-theme="dark"] .om-qinfo__icon{
  background: rgba(13,110,253,.20);
}

.om-qinfo__title{
  font-weight: 800;
  color: var(--bs-primary);
  margin-bottom: 2px;
}

.om-qinfo__text{
  font-size: .92rem;
  color: rgba(0,0,0,.75);
  line-height: 1.35;
}

/* ✅ Q-info als klikbare vraag + collapse */
.om-qfaq{
  border-radius: 16px;
  border: 1px solid rgba(13,110,253,.25);
  background: rgba(13,110,253,.06);
  overflow: hidden;
}

.om-qfaq__btn{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  display: flex;
  align-items: center;          /* ✅ alles op 1 hoogte */
  gap: .75rem;
  color: inherit;
}

.om-qfaq__btn:hover{
  background: rgba(13,110,253,.04);
}

.om-qfaq__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;          /* ✅ center */
  justify-content: center;      /* ✅ center */
  background: rgba(13,110,253,.15);
  color: var(--bs-primary);
  flex: 0 0 auto;
}

.om-qfaq__q{
  font-weight: 800;
  color: var(--bs-primary);
  line-height: 1.2;             /* ✅ strakker */
  margin: 0;                    /* ✅ geen baseline-issues */
  padding-top: 1px;             /* ✅ mini optical align */
}

.om-qfaq__chev{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-primary);
  opacity: .85;
  transition: transform .18s ease;
}

.om-qfaq__btn[aria-expanded="true"] .om-qfaq__chev{
  transform: rotate(180deg);
}

.om-qfaq__body{
  padding: 0 14px 12px 14px;
}

.om-qdeadline{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  padding: .28rem .62rem;
  font-weight: 900;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90); /* ✅ minder doorzichtig */
}

.om-qdeadline--danger{
  color: #dc3545;
  border-color: rgba(220,53,69,.35);
  background: rgba(220,53,69,.08);
}

.om-qdeadline--warn{
  color: #f59e0b;
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
}

.om-qdeadline--ok{
  color: #22c55e;
  border-color: rgba(32, 224, 102, 0.9);
  background: rgba(34,197,94,.10);
}

/* Inline save button in tekst */
.om-qsave-inline{
  border-radius: 999px;
  font-weight: 900;
  padding: .35rem .65rem;
}

/* ✅ Dikkere focus-border + ring voor je vraag-inputs (textarea / input) */
.om-qpanel .form-control:focus{
  border-width: 2px !important;                 /* dikker randje */
  border-color: var(--bs-primary) !important;   /* primary */
  box-shadow: 0 0 0 .35rem rgba(13,110,253,.25) !important; /* dikkere ring */
}

/* Badge als 2-rij grid: dot links gecentreerd, tekst rechts */
.om-riskbadge--stack{
  display: grid;
  grid-template-columns: 20px auto;   /* dot kolom + tekst kolom */
  grid-template-rows: auto auto;      /* label + why */
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 14px;
  max-width: 100%;                    /* voorkomt overflow */
}

/* Dot over beide rijen, verticaal gecentreerd */
.om-riskbadge--stack .om-dot{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}



/* Label */
.om-riskbadge__label{
  grid-column: 2;
  grid-row: 1;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;                /* label blijft 1 regel */
}

/* Grotere dot, maar chique */
.om-dot--lg{
  width: 18px !important;
  height: 18px !important;
}

/* “Waarom” onder label */
.om-riskbadge__why{
  grid-column: 2;
  grid-row: 2;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: .78rem;
  line-height: 1.1;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: .15em;
  color: currentColor;                /* volgt badge kleur */
  opacity: .75;
  white-space: nowrap;                /* blijft klein op 1 regel */
  cursor: pointer;
}

.om-riskbadge__why:hover{ opacity: .95; }
.om-riskbadge__why:focus{ outline: none; text-decoration-thickness: 2px; }

/* Op mobiel: voorkom dat badge te breed wordt */
@media (max-width: 575.98px){
  .om-riskbadge--stack{
    max-width: 92vw;
  }
}

/* =========================
   WHY SCORE OVERLAY + POPUP
   ========================= */
.om-reason-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1500;
}
.om-reason-overlay.is-active{
  opacity: 1;
  pointer-events: auto;
}

.om-reason-pop{
  position: fixed;
  z-index: 1501;
  width: min(420px, calc(100vw - 24px));
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  padding: 12px 12px 12px 14px;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.om-reason-pop.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.om-reason-close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.55);
  padding: 6px;
  border-radius: 10px;
}
.om-reason-close:hover{ background: rgba(0,0,0,.05); color: rgba(0,0,0,.85); }

.om-reason-body{
  font-size: .92rem;
  line-height: 1.35;
  color: rgba(0,0,0,.75);
  padding-right: 26px; /* ruimte voor close */
}

/* Force paragraphs in details_html to behave like real paragraphs */
#costs_details p,
#trust_details p,
#content_details p{
  display: block !important;
  margin: 0 0 .75rem 0 !important;
}

#costs_details p:last-child,
#trust_details p:last-child,
#content_details p:last-child{
  margin-bottom: 0 !important;
}

#supplier_questions_rendered ul{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ✅ Label + "Waarom deze beoordeling?" altijd links uitlijnen binnen de badge */
.om-riskbadge--stack{
  justify-items: start;   /* grid items links */
}

.om-riskbadge__label,
.om-riskbadge__why{
  justify-self: start;
  text-align: left;
}

.om-floating-nav{
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: max-content;          /* ✅ breedte = inhoud */
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.om-floating-nav.is-visible{
  display: block !important;
}

.om-floating-nav__inner{
  display: flex;
  justify-content: center;     /* ✅ inhoud centreren */
  align-items: center;
  gap: .45rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: calc(100vw - 32px);
  padding: .50rem .60rem;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  pointer-events: auto;
  scrollbar-width: none;
  margin: 0;
}

.om-floating-nav__inner::-webkit-scrollbar{
  display: none;
}

.om-floatbtn{
  white-space: nowrap;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .92rem;
  font-weight: 700;
}

.om-floatbtn.is-active{
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

[data-bs-theme="dark"] .om-floating-nav__inner{
  background: rgba(33,37,41,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}

.om-floating-nav .om-floatbtn.is-active,
.om-floating-nav .om-floatbtn.active{
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

.om-floating-nav .om-floatbtn{
  white-space: nowrap;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .92rem;
  font-weight: 700;
}

.om-floating-nav .om-floatbtn.is-active,
.om-floating-nav .om-floatbtn.active,
.om-floating-nav .om-floatbtn[aria-current="true"]{
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

.om-floating-nav.om-force-hidden{
  display: none !important;
}

/* =========================================================
   Confirm modal vragen
========================================================= */
.om-confirm-modal {
  border-radius: 1.25rem;
  overflow: hidden;
  background: #ffffff;
}

.om-confirm-image-wrap {
  background: #ffffff;
  padding: 0.35rem;
  border-radius: 15px;
  box-shadow: 0 10px 28px rgba(8, 62, 178, 0.08);
  border: 1px solid rgba(8, 62, 178, 0.08);
}

.om-confirm-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
}

.om-confirm-title {
  color: var(--bs-heading-color, #111c2d);
  line-height: 1.2;
}

.om-confirm-text {
  font-size: 1rem;
  line-height: 1.7;
}

.om-confirm-alert {
  background: #fff8e8;
  border-width: 1px;
  color: #5f4b00;
  box-shadow: 0 6px 18px rgba(246, 153, 99, 0.08);
}

#omQuestionsConfirmYes {
  min-width: 240px;
  box-shadow: 0 8px 18px rgba(79, 205, 76, 0.22);
}

#omQuestionsConfirmYes:hover {
  transform: translateY(-1px);
}

.om-confirm-modal .btn {
  transition: all 0.2s ease-in-out;
}

/* Dark mode */
[data-bs-theme="dark"] .om-confirm-modal {
  background: #111C2D;
}

[data-bs-theme="dark"] .om-confirm-image-wrap {
  background: #111C2D;
  border-color: rgba(189, 200, 240, 0.18);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

[data-bs-theme="dark"] .om-confirm-alert {
  background: rgba(246, 153, 99, 0.12);
  border-color: rgba(246, 153, 99, 0.28) !important;
  color: #f7d69a;
}

/* Nieuwe riskbadge compact in bestaande grijze scorekaders */
.om-riskbadge--compact{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .6rem;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  width: 100%;
}

.om-riskbadge__label--compact{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.om-riskbadge__line1{
  display: block;
}

.om-riskbadge__line2{
  display: block;
  margin-top: 0px;
}

.star-badge-score .star-badge-content{
  min-height: 22px;
}

.star-badge-score .om-riskbadge{
  max-width: 100%;
}

.star-badge-score .om-dot{
  width: 9px;
  height: 9px;
  min-width: 9px;
  min-height: 9px;
}

@media (max-width: 767.98px){
  .om-riskbadge--compact{
    font-size: .62rem;
    padding: 3px 7px;
    gap: 4px;
  }

  .star-badge-score .om-dot{
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
  }

  .star-badge-score .star-badge-content{
    min-height: 20px;
  }
}


:root{
  --score-box-width: 170px;
}

.om-riskbadge-trigger{
  appearance: none;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
}

.om-riskbadge-trigger:hover .om-riskbadge,
.om-riskbadge-trigger:focus .om-riskbadge{
  transform: translateY(-1px);
}

.om-riskbadge-trigger .om-riskbadge{
  transition: transform .15s ease, box-shadow .15s ease;
}

.om-reason-pop{
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.om-risk-legend-link{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: .78rem;
  line-height: 1.2;
  color: #8b8f98;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .15s ease;
}

.om-risk-legend-link:hover,
.om-risk-legend-link:focus{
  color: #5f6770;
}

.om-risk-legend-modal .modal-content{
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.om-risk-legend-modal .modal-header{
  background: linear-gradient(135deg, #083eb2 0%, #4b7cff 100%);
  color: #fff;
  border-bottom: 0;
  padding: 1rem 1.25rem;
}

.om-risk-legend-modal .modal-title{
  color: #fff !important;
}

.om-risk-legend-modal .btn-close{
  filter: brightness(0) invert(1);
}

.om-risk-legend-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 1rem 1rem;
}

.om-risk-legend-item{
  padding: .85rem 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.om-risk-legend-item:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.om-risk-legend-item:first-child{
  padding-top: 0;
}

.om-risk-legend-text{
  color: #5f6770;
  line-height: 1.55;
}

.om-risk-legend-note{
  font-size: .85rem;
  color: #7b8088;
}

#omRiskLegendModal {
  z-index: 99999 !important;
}