.bold{
  font-weight: bold;
}

/* Tooltip overlay moet in body absoluut kunnen staan */
body > .tooltip {
  position: absolute !important;
  display: none;
  margin: 0 !important;              /* voorkomt offset door .tooltip margins */
  z-index: 999999999;
}

/* ==============================
   WIDGET LAYOUT
============================== */
.review-widget-container.hide-mobile {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
}

.review-widget-container {
  box-sizing: border-box;
  margin: 0;
  padding: 2px 0;
  align-self: center;
  transform: translateY(5px);
}

@media (max-width: 767px) {
  .review-widget-container.hide-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 35px 0 0 0;
    padding: 2px 0;
    transform: scale(1.2);
  }
}

.rating-widget {
  display: block;
  line-height: 1.42857143;
  font-style: normal;
}

.star-container {
  font-family: "Ubuntu", Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
}

.rating-widget .rating-stars {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #008C0E;
  border-radius: 28px;
  padding: 4px 10px;
  gap: 6px;
}

.star {
  display: block;
  width: 16px;
  height: 16px;
}

.review-text {
  font-family: "Ubuntu", Arial, sans-serif;
  font-size: 12px;
  color: #5C5C5D;
  margin: 2px 0 0 2px;
  font-weight: normal;
}

.btn-tooltip,
.btn-tooltip img {
  cursor: pointer;
}

.tooltip-grey {
  width: 14px;
  vertical-align: top;
  padding-top: 5px;
}

.btn-tooltip .tooltip-inner .tooltip-clix {
  background-color: #efefef !important;
}

.review-count-text {
  font-family: "Ubuntu", Arial, sans-serif;
  color: #090C7D;
  font-weight: bold;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.review-count-text2 {
  font-family: "Ubuntu", Arial, sans-serif;
  color: #090C7D;
  font-weight: normal;
  font-size: 14px;
}

.inline {
  display: inline-block;
}

.gap {
  margin-right: 8px;
}

.from {
  font-family: "Ubuntu", Arial, sans-serif;
  color: #090C7D;
  font-weight: normal;
  font-size: 12px;
}

.rating-widget .tooltip {
  margin-top: 7px;
  margin-left: 12px !important;
}

/* Responsive show/hide containers */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }

  .review-widget-container.hide-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 24px 0 0 0;
    padding: 2px 0;
    transform: scale(1.2);
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (max-width: 320px) {
  .review-widget-container.hide-desktop {
    transform: scale(1);
  }
}

/* ==============================
   TOOLTIP BASE
   Ondersteunt:
   - oude structuur: .tooltip div
   - nieuwe structuur: .tooltip .tooltip-inner + .tooltip-arrow
============================== */

/* BELANGRIJK:
   .tooltip niet globaal absoluut maken, dat breekt layout (info-icon zakt/verschuift).
   Alleen tooltips die direct onder body hangen zijn overlays. */
.tooltip {
  z-index: 999999999;
  position: relative; /* veilig default */
  pointer-events: none !important; 
  font-style: normal;
}

/* Tooltip overlay moet in body absoluut kunnen staan */
body > .tooltip {
  position: absolute !important;
  display: none;
  margin: 0 !important;
  z-index: 999999999;
  font-weight: normal;
}

/* Fade effect (optioneel) */
.tooltip.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.tooltip.fade.in {
  opacity: 1;
}

/* Inner bubble: NIEUWE structuur */
.tooltip .tooltip-inner {
  background-color: #fff;
  color: #090C7D;
  font-size: 14px;
  padding: 12px;
  line-height: 20px;

  border-radius: 6px;
  border: 1px solid #d8d8d8;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);

  min-width: 330px;
  margin: 0; /* voorkomt "uit de container vallen" */
  position: relative;
  z-index: 1;
  max-width: 200px;
  white-space: normal;     /* tekst mag afbreken */
  word-break: break-word;
}

/* Inner bubble: OUDE structuur (fallback) */
.tooltip > div:not(.tooltip-arrow):not(.tooltip-inner),
.tooltip div.tooltip-clix,
.tooltip div:not(.tooltip-arrow):not(.tooltip-inner) {
  background-color: #fff;
  color: #090C7D;
  font-size: 14px;
  padding: 12px;
  line-height: 20px;

  border-radius: 6px;
  border: 1px solid #d8d8d8;
  box-shadow: 0 10px 25px rgba(0,0,0,0.18);

  min-width: 330px;
}

/* Arrow element (NIEUWE structuur) */
.tooltip .tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* RIGHT placement: pijltje zit "in" de bubble */
.tooltip.right .tooltip-arrow {
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* boven de bubble */

  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #d8d8d8; /* randkleur */
}

/* binnenkant pijltje */
.tooltip.right .tooltip-arrow::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 1px;

  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #fff; /* exact bubble-kleur */
}

/* BOTTOM placement: pijltje zit "in" de bubble */
.tooltip.bottom .tooltip-arrow {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* boven de bubble */

  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #d8d8d8; /* randkleur */
}

/* binnenkant pijltje */
.tooltip.bottom .tooltip-arrow::after {
  content: "";
  position: absolute;
  top: 1px;
  left: -8px;

  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff; /* exact bubble-kleur */
}

/* Small screens: pas toe op body overlay tooltips */
@media (max-width: 576px) {
  body > .tooltip {
    max-width: calc(100vw - 32px);  /* past altijd in scherm */
    transform: none !important;
  }

  body > .tooltip .tooltip-inner {
    max-height: none;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
    display: block;
  }

  body > .tooltip .tooltip-inner,
  body > .tooltip div:not(.tooltip-arrow):not(.tooltip-inner) {
    min-width: auto;
  }
}

/* Breedtes zoals jij had (voor body overlay) */
@media (max-width: 624px) {
  body > .tooltip .tooltip-inner,
  body > .tooltip div:not(.tooltip-arrow):not(.tooltip-inner) {
    min-width: 260px;
    max-width: 260px;
  }
}

@media (max-width: 500px) {
  body > .tooltip .tooltip-inner,
  body > .tooltip div:not(.tooltip-arrow):not(.tooltip-inner) {
    min-width: 230px;
    max-width: 230px;
  }
}

@media (max-width: 440px) {
  body > .tooltip .tooltip-inner,
  body > .tooltip div:not(.tooltip-arrow):not(.tooltip-inner) {
    min-width: 160px;
    max-width: 160px;
  }
}

/* Legacy rule: alleen binnen de widget, niet op body overlay */
@media (max-width: 991px) {
  .rating-widget .tooltip div:not(.tooltip-arrow) {
    margin-top: -5px;
  }
}