/* ===== Forceer max. 2 gaven, derde wordt volledig afgeknipt ===== */
.op_bullets{
  height:40px!important;       /* ruimte voor precies 2 regels (2 × ±20px) */
  overflow:hidden!important;   /* alles daaronder onzichtbaar */
  margin-bottom:8px!important; /* lucht onder de gaven */
}

.op_bullets_check{
  display:block!important;     /* 1 gave per regel, nooit naast elkaar */
  line-height:20px!important;  /* matcht de 40px totaalhoogte */
  margin-bottom:2px!important; /* kleine verticale gap tussen de twee regels */
}



.currency_buttons
{
  display: none;
}

.sparkle-animate {
  display: inline-block;
  animation: sparkleJump 1.2s infinite;
}
@keyframes sparkleJump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.hero-banner-content {
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
}

.hero-banner-content h1 {
  margin: 0 0 4px 0;
  padding: 0;
  font-size: 28px;
  line-height: 1.2;
}

.hero-banner-content p {
  margin: 0 0 8px 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.2;
}

.hero-banner-content p strong {
  font-weight: 600;
  display: inline;
}

.sparkle-dot {
  position: absolute;
  background: white;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: sparkle 2s infinite ease-in-out;
  z-index: 1;
}

  /* Extra ruimte onderaan body zodat knop niets blokkeert */
  body {
    padding-bottom: 90px;
  }
.pakket-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
  max-width: 1000px;
}

.pakket_tr {
  flex: 1 1 300px;
  background: linear-gradient(to bottom right, #fffaf2, #f8e6e0);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  border: 1px solid #f3d2c1;
  max-width: 100%;
  pointer-events: auto;
  background-color: transparent !important;
  outline: none !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-weight: 500 !important;
  box-sizing: border-box;
  transition: none !important;
  transform: none !important;
}

/* Blokkeer hover/active gedrag op de container */
.pakket_tr:hover,
.pakket_tr:focus,
.pakket_tr:active {
  background: linear-gradient(to bottom right, #fffaf2, #f8e6e0) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  transform: none !important;
  outline: none !important;
  transition: none !important;
}

/* Blokkeer hover/klik-effecten van alle binnen-elementen */
.pakket_tr *,
.pakket_tr *:hover,
.pakket_tr *:focus,
.pakket_tr *:active {
  transition: none !important;
  transform: none !important;
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  animation: none !important;
  scale: 1 !important;
}

/* Vergrendel .pakket_td op vaste stijl */
.pakket_tr .pakket_td {
  transition: none !important;
  font-weight: 500 !important;
  transform: none !important;
  animation: none !important;
}

/* Mobiel: alles stapelen zonder verspringen */
@media (max-width: 767px) {
  .pakket-container {
    flex-direction: column;
    gap: 20px;
  }

  .pakket_tr {
    width: 100%;
  }

}
/* Zorg dat standaard kleur wordt overschreven */
a.setting b {
  color: inherit;
}

/* Standaard reset */
a.setting b {
  color: inherit;
  display: block;
  margin-bottom: 6px;
}

/* Reset: zorg dat tekst eronder altijd onder komt, niet ernaast */
a.setting b {
  color: inherit;
  display: block;
  margin-bottom: 6px;
}

/* Alleen "Credits bestellen" visueel laten opvallen */
a[href*="page16.html"] b {
  color: #3cb371 !important; /* Spiritchat groen */
  font-weight: bold;
  animation: creditPulse 2.5s ease-in-out infinite;
}

/* Pulse-effect */
@keyframes creditPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
/* Reset iconstructuur */
.settings .setting_icon_outer,
.settings .setting_icon,
.settings .setting_icon_td {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Pastelrondje */
.settings .setting_icon_outer {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
}

.settings .setting_icon_outer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
background: linear-gradient(to bottom right, #fff7ee 0%, #f4cfc3 55%, #dab7e3 100%);

  border: 1px solid #eac7b6;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04);
  z-index: 0;
}

.settings .setting_icon_td {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.settings .setting_icon_td img {
  width: 32px !important;
  height: 32px !important;
  display: block;
}

/* ✅ ULTRA-STRakke mobiele layout */
@media (max-width: 768px) {
  .settings {
    padding: 0 16px;
  }

  .settings .setting {
    margin-bottom: 40px !important;
    padding: 14px 0 !important;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
  }

  .settings .setting_icon_outer {
    width: 84px !important;
    height: 84px !important;
    margin-bottom: 18px !important; /* lucht onder icon */
  }

  .settings .setting_icon_outer::before {
    width: 84px;
    height: 84px;
  }

  .settings .setting_icon_td img {
    width: 40px !important;
    height: 40px !important;
  }

  .settings .setting b {
    display: block;
    margin-bottom: 8px !important;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.4;
  }

  .settings .setting {
    font-size: 15px;
    line-height: 1.6;
    color: #3a3a3a;
  }

  .settings .setting br + * {
    margin-top: 6px;
    display: inline-block;
  }

  /* ? SIERLIJN onder elk blok */
  .settings .setting::after {
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
    margin: 24px auto 0 auto;
    opacity: 0.5;
    border-radius: 2px;
  }
}
.avatar_small {
  background-image: url('/upload/ps/3353_3fc936d4-4b76-4019-8535-a00c691bc1f0.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 26px !important;
  height: 26px !important;
  border: none !important;
  border-radius: 50% !important;
  display: inline-block !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Verberg originele profielknop visueel maar behoud functionaliteit als klikbare tekst 'Meer...' */
.op_info_button:not(.op_info_button_chat) {
  background: none !important;
  color: #3a3a3a !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: underline !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  background-color: transparent !important;
  text-align: center !important;
  display: inline-block !important;
  cursor: pointer !important;
}

/* Maak coachhokje hoger voor extra ruimte */



/* Knoppencontainer centreren en subtiele ruimte forceren */
.op_td_buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column;
  padding: 0 !important;
  box-sizing: border-box;
  gap: 0.5px; /* Nog iets minder ruimte tussen profiel en chat */
  min-height: 90px !important;
}

/* Chatten-knop styling */
.op_info_button_chat,
.op_info_button_chat:hover,
.op_info_button_chat:focus,
.op_info_button_chat:active {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background-color: #3cb371 !important;
  color: #ffffff !important;
  font-family: 'Dosis', sans-serif;
  font-size: 16px !important;
  font-weight: 700 !important;
  height: 39px !important;
  width: 92% !important;
  max-width: 320px !important;
  border-radius: 10px !important;
  border: none !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 39px !important;
  transition: none !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}


/* Finale micro-finetuning spacing coach-info */

/* Naam en slogan spacing licht aangepast */
.op_name {
  margin-bottom: 2px !important;
}

.op_td_slogan {
  margin-bottom: 5px !important;
}

/* Reviewsblok iets compacter */
.op_td_reviews {
  margin-bottom: 5px !important;
}

/* Beschrijving en bullets subtiel compacter */
.op_description {
  margin-bottom: 5px !important;
}

.op_bullets {
  margin-bottom: 5px !important;
}

/* Contactregel iets lager laten zakken */
.op_bullets_contact {
  margin-top: 5px !important;
}

/* Totale padding onderaan net iets ruimer */
.op_info {
  padding-bottom: 8px !important;
}
div[style*="background-color: #ffff99"] {
  background-color: #f8e6e0 !important;
}
.lc_review_credits {
  background-color: #f8e6e0 !important;
  padding: 20px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  color: #3a3a3a;
  font-family: 'Dosis', sans-serif;
}

/* Verberg het gele credit-plaatje */
.lc_review_credits img[src*="credit_ani.gif"] {
  display: none !important;
}

/* Vervang met zalmkleurig blokje als placeholder */
.lc_review_credits::before {
  content: "";
  display: block;
  float: right;
  width: 56px;
  height: 70px;
  background-color: #f8e6e0;
  border-radius: 12px;
  margin-left: 12px;
  margin-bottom: 10px;
}

/* Styling voor de knop */
.lc_review_credits .button {
  background-color: #fb9700 !important;
  color: #fff !important;
  padding: 10px 18px;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

/* Pijltekst netjes uitlijnen */
.lc_review_credits .afspreken_arrow {
  margin-top: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lc_review_credits .afspreken_arrow img {
  width: 20px;
  height: auto;
}
.lc_review_credits > a.button {
  background-color: #3cb371 !important; /* Spiritchat groen */
  color: #ffffff !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 16px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.footer {
  background: linear-gradient(to bottom, #fffaf2 0%, #f8e6e0 65%, #ecd8ef 100%) !important;
}

#hamburger_menu_div {
  background: linear-gradient(to bottom, #fffaf2, #f8e6e0) !important;
}
.op_page_header {
  background-image: none !important;
  background: linear-gradient(to bottom, #fffaf2 0%, #f8e6e0 65%, #ecd8ef 100%) !important;
  background-repeat: no-repeat;
  background-position: center top !important;
  background-size: cover !important;
  height: 340px;
}

.op_td_photo {
  background: linear-gradient(to bottom, #fffaf2 0%, #fcdcc8 45%, #f3cde0 75%, #e5d4f2 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.op_photo {
  position: absolute;
  display: inline-block;
  width: 180px;
  height: 180px;
  border-radius: 90px;
  margin-left: 65px; /* iets aangepast voor center */
  margin-top: 10px;   /* iets meer ademruimte boven */
}
/* Verwijder grijze achtergrond bij categorieblok */
.filter_cat {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Algemene container filters (desktop-layout standaard verborgen) */




/* Focusstijl zoekveld */
#search.form_input:focus {
  outline: none;
  border-color: #d4afc1;
  box-shadow: 0 0 4px rgba(210, 160, 200, 0.15);
}

/* Categorieknoppen */

.filter_cat a.filter_cat_a,
.filter_cat a.filter_cat_a_selected {
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 14px;
  background: linear-gradient(to bottom right, #fbeae4, #f2c9b9);
  color: #3a3a3a !important;
  text-decoration: none;
  border: 1px solid #eac7b6;
  transition: background 0.2s, transform 0.2s;
  line-height: 1.3;
  display: inline-block;
  white-space: nowrap;
}

.filter_cat a:hover,
.filter_cat a.filter_cat_a_selected:hover {
  background: linear-gradient(to bottom right, #f8e6e0, #ecd8ef);
  transform: scale(1.02);
}

/* Dropdowns */
select.form_select {
  background: linear-gradient(to bottom right, #fffaf2 0%, #f8e6e0 55%, #ecd8ef 100%);
  border: 1px solid #eac7b6;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12.5px;
  height: 32px;
  color: #3a3a3a;
  max-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* "Kies jouw favoriete coach" knop */
#filters_link {
  display: none;
}

/* Mobielweergave */
@media (max-width: 768px) {
  #filters_link {
    display: inline-block;
    color: #3a3a3a;
    font-weight: bold;
    background: linear-gradient(to bottom right, #fffaf2 0%, #f8e6e0 60%, #ecd8ef 100%);
    border: 1px solid #eac7b6;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.3s ease;
    margin: 12px auto 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
  }

  #filters_link:hover {
    background: linear-gradient(to bottom right, #f8e6e0, #ecd8ef);
    cursor: pointer;
  }

  #filters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px 10px;
  }

  .filter_cat {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }

  select.form_select,
  #search.form_input {
    width: 100%;
    max-width: 100%;
  }
}
#search.form_input {
  height: 32px !important;
  line-height: 32px !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  max-width: 220px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(to bottom right, #fffaf2 0%, #f8e6e0 60%, #ecd8ef 100%) !important;
  border: 1px solid #eac7b6 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
  margin: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.op_table,
.op_table_busy {
  height: 405px !important;
  position: relative !important;
  overflow: hidden !important;
}

.op_info {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-bottom: 0 !important;
}

/* Inhoud boven de knop krijgt ruimte voor 'g' en 'y' */
.op_info > *:not(.op_td_buttons) {
  flex-grow: 1 !important;
  padding-bottom: 60px !important; /* +2px */
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Knop iets lager zodat alles past én netjes uitlijnt */
.op_td_buttons {
  position: absolute !important;
  bottom: 2px !important; /* was 4px → iets lager */
  left: 0;
  width: 100% !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

/* Gesprekken: max 2 regels, genoeg hoogte voor staartletters */
.op_page_review {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-bottom: 3px !important;
}

/* Alle andere content compact en luchtig */
.op_td_reviews,
.op_bullets,
.op_description,
.op_bullets_contact {
  font-size: 13px !important;
  line-height: 1.3 !important;
  margin-bottom: 3px !important;
  overflow: hidden !important;
}
@media (max-width: 768px) {
  /* Meer lucht boven filters */
  #filters {
    margin-top: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    background: none !important;
  }

  /* Zoekveld net iets lager en gecentreerd */
  #search.form_input {
    margin-top: 6px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Filters en dropdowns luchtiger uitgelijnd */
  .filter_cat {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px 12px !important;
    margin-bottom: 10px !important;
  }

  select.form_select {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* Knop 'Kies jouw coach' onderin mooi gecentreerd */
  #filters_link {
    margin-top: 12px !important;
    margin-bottom: 16px !important;
    text-align: center !important;
  }
}
img[src="/images/icons/vlag_en.png"] {
  display: none !important;
}
/* Verberg chatknop bij bezette coaches (maar niet offline) */
.op_table_busy:not(.op_table_offline) .op_info_button_chat {
  display: none !important;
}

/* Zet beide knoppen iets hoger in het coachvak */
.op_td_buttons {
  min-height: 80px !important;
  padding-top: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.op_table_busy:not(.op_table_offline) .op_td_buttons::before {
  content: "Maak een afspraak ↓";
  font-family: 'Dosis', sans-serif;
  font-size: 14px;
  color: #3a3a3a;
  margin-bottom: 6px;
  display: block;
  font-weight: 600; /* maakt het iets vetter */
}


.op_table_busy:not(.op_table_offline) .op_info_button {
  background: linear-gradient(to right, #d9b3f2, #a36edc) !important; /* zacht naar krachtiger paars */
  color: white !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  height: 39px !important;
  line-height: 39px !important;
  width: 90% !important;
  max-width: 240px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition: background 0.3s ease !important;
}


/* Zorg dat er geen ::after tekst verschijnt */
.op_table_busy:not(.op_table_offline) .op_info_button::after {
  display: none !important;
}
#ops_more a.button {
  background: #fff !important;
  color: #7a4db4 !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 20px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: 2px solid #b78bd2 !important;
  box-shadow: none !important;
}








/* Credits kopen button – paars en opvallend */
a[href="/credits-kopen"].button_small {
  background-color: #9575cd !important; /* iets donkerder paars dan b39ddb */
  color: #ffffff !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 26px !important;
  padding: 7px 15px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background-color 0.3s ease;
}

a[href="/credits-kopen"].button_small:hover {
  background-color: #7e57c2 !important; /* iets donkerdere hoverkleur */
}

.blog_home_div {
  display: table-cell;
  width: 270px;
  height: 270px;
  vertical-align: bottom;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0px 2px 4px #000000;
  text-align: left;
  font-family: 'Dosis', sans-serif;
  font-weight: bold;
  font-size: 19px;
  line-height: 26px;
  padding: 14px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: transparent;
  box-shadow:
    0 0 12px rgba(126, 87, 194, 0.12),
    inset 0 0 8px rgba(126, 87, 194, 0.07);
  transition: box-shadow 0.3s ease;
}


.blog_home_div:hover {
  box-shadow:
    0 0 16px rgba(126, 87, 194, 0.18),
    inset 0 0 10px rgba(126, 87, 194, 0.1);
}

.blog_home_div span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  margin-bottom: 6px;
}
.footer_gamunity,
.footer_gamunity:visited,
.footer_gamunity:active,
.footer_gamunity:hover {
  background-image: url('../images/layout/gamunity.png');
  background-repeat: no-repeat;
  background-position: left top;
  display: inline-block;
  width: 118px;           /* origineel 235px → nu 0.5x */
  height: 9px;            /* origineel 18px → nu 0.5x */
  padding: 3px;           /* compacter padding */
  padding-right: 0;
  opacity: 0.8;
  background-size: contain; /* zorgt voor schaalbare afbeelding */
} 

img[src="/images/icons/vlag_nl.png"] {
  display: none !important;
}
@media (max-width: 768px) {
  /* Logo kleiner én links uitgelijnd */
  .logo,
  .logo_nextpage {
    background-size: 210px 48.5px !important;
    width: 210px !important;
    height: 48.5px !important;
    margin: 15px 0 0 10px !important; /* Links uitlijnen */
  }

  /* Verwijder witruimte tussen menu en slider */
  .header_menu,
  .menu_div {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .slideshow,
  .slideshow_div,
  #slider,
  .slider {
    margin-top: -25px !important;
    padding-top: 0 !important;
  }
}
#login_button {
  font-size: 16.5px !important;
  line-height: 20px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
}


  .op_is_online {
    background-color: #00c676 !important; /* Frisse, felle groene kleur */
  }


/* Basisstijl voor coachkaarten */
.op_table,
.op_table_busy {
  background: #fff !important;
  border-radius: 16px !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
  contain: layout paint !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
  transform: translateZ(0) !important;
}

/* Alleen op desktop: hover-effect */
@media (hover: hover) and (pointer: fine) {
  .op_table,
  .op_table_busy {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }

  .op_table:hover,
  .op_table_busy:hover {
    transform: translateY(-6px) scale(1.015) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16) !important;
    z-index: 5 !important;
  }
}

/* Basisstijl voor coachkaarten */
.op_table,
.op_table_busy {
  background: #fff !important;
  border-radius: 16px !important;
  z-index: 2 !important;
  position: relative !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
}

/* Alleen op desktop: hover-effect toestaan */
@media (hover: hover) and (pointer: fine) {
  .op_table,
  .op_table_busy {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  }

  .op_table:hover,
  .op_table_busy:hover {
    transform: translateY(-6px) scale(1.015) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16) !important;
    z-index: 5 !important;
  }
}
.op_td_slogan {
  text-align: center;
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 0px;
  height: 30px;
  max-height: 30px;
  overflow: hidden;
  white-space: nowrap;            /* Zorgt dat tekst op één regel blijft */
  text-overflow: ellipsis;        /* Toont "..." bij overloop */
  display: block;                 /* Nodig voor ellipsis */
}


@media (max-width: 768px) {
  #ops_more a.button {
    pointer-events: auto !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: relative !important;
    display: inline-block !important;
    visibility: visible !important;
    transform: none !important;
    background: #fff !important;
    color: #7a4db4 !important;
  }
}
.submenu_item_vlag[src*="vlag_de.png"] {
  display: none !important;
}
.lc_chat_you {
  position: relative;
  background-color: #efe6f5 !important; /* zacht lavendel-lichtgrijs */
  border: 2px solid #d9cae6 !important;
  padding: 8px 14px 6px 42px !important;
  margin-bottom: 6px !important;
  border-radius: 20px !important;
  max-width: 80% !important;
  color: #2f2f2f !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  background-image: none !important;
}

.lc_chat_you::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 26px;
  height: 26px;
  background-image: url('/upload/operators/868_1747905053_tn.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.lc_chat_me {
  position: relative;
  background-color: #fdf7f2 !important; /* crème-peach, licht en spiritueel */
  border: 2px solid #f1e1d4 !important;
  padding: 8px 42px 6px 14px !important;
  margin-bottom: 6px !important;
  border-radius: 20px !important;
  max-width: 80% !important;
  color: #2f2f2f !important;
  text-align: right !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  background-image: none !important;
}

.lc_chat_me::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 6px;
  width: 26px;
  height: 26px;
  background-image: url('/images/icons/op_avatar.png');
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}


.lc {
  background: linear-gradient(to bottom, #fff3e8 0%, #f7d9cd 50%, #e8cde6 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  padding-bottom: 20px !important;
} 


html#page_html {
  background: linear-gradient(to bottom, #fffaf2 0%, #f8e6e0 65%, #ecd8ef 100%) !important;
  background-image: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
#op_related_short_description_4 {
    display: -webkit-box;
    -webkit-line-clamp: 3;  /* Beperk het aantal regels naar 3 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;  /* Toon '...' wanneer de tekst wordt afgebroken */
    line-height: 1.5;  /* Zorg voor voldoende ruimte tussen de regels */
    max-height: 4.5em;  /* Zorg ervoor dat de hoogte overeenkomt met de 3 regels */
}

/* Optioneel: Voeg een 'lees meer' link toe onder de korte beschrijving */
#op_related_short_description_4::after {
    content: '...';  /* Voeg een ellipsis toe aan het einde van de tekst */
    display: inline-block;
    color: #007bff;
    font-weight: bold;
    cursor: pointer;
}




.op_page_review {
  font-family: 'Dosis', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #3a3a3a !important;
  padding: 18px 20px !important;
  margin: 0 0 24px 0 !important;
  border-radius: 14px !important;
  background-color: #ffffff !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.10) !important;
}

/* Eerste review extra nadruk zonder kleur */
.op_page_review:first-of-type {
  border: 1px solid #e0d7cf !important;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 18px 32px rgba(0, 0, 0, 0.12) !important;
  transform: scale(1.01);
}





 /* Algemene stijl voor alle reviews */
.op_page_review {
  font-family: 'Dosis', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #3a3a3a !important;
  padding: 18px 20px 20px 20px !important;
  margin: 0 0 24px 0 !important;
  border-radius: 14px !important;
  background-color: #ffffff !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.10) !important;
  position: relative;
}

/* Eerste review krijgt extra aandacht */
.op_page_review:first-of-type {
  border: 1px solid #e0d7cf !important;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.08),
    0 18px 32px rgba(0, 0, 0, 0.12) !important;
  transform: scale(1.01);
  padding-top: 40px !important;
}

/* Label 'Meest recent' met ster */
.op_page_review:first-of-type::before {
  content: '⭐ Meest recent';
  position: absolute;
  top: 14px;
  left: 20px;
  font-size: 13px;
  font-weight: bold;
  color: #a35f00;
  background-color: #fffaf2;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-family: 'Dosis', sans-serif;
}

#button_contact_chat::before {
  content: "\1F4AC"; /* ? uit standaard systeemfont */
  margin-right: 8px;
  font-size: 18px;
  vertical-align: middle;
}

#button_contact_phone_credits::before {
  content: "\1F4F1"; /* ? mobiele telefoon */
  margin-right: 8px;
  font-size: 18px;
  vertical-align: middle;
}

.hero-banner a {
    background-color: #3cb371;
    color: white;
    padding: 14px 30px; /* GROTER */
    font-size: 18px; /* GROTER */
    font-weight: 800;
    border-radius: 10px; /* MOOIER */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: inline-block;
    margin-top: 10px;
    transition: all 0.3s ease;
}


.hero-banner a span {
  display: inline-block; /* Zorgt ervoor dat de tekst zich goed gedraagt */
  z-index: 2; /* Zorgt ervoor dat de tekst altijd boven het icoon staat */
  order: 1; /* Zet de tekst eerst */
}

.hero-banner a::before {
  content: "\1F4AC"; /* Chatballon Unicode karakter */
  font-size: 18px;   /* Grootte van het icoon */
  margin-left: 8px;  /* Ruimte tussen het icoon en de tekst */
  display: inline-block;
  position: relative; /* Veranderd naar relative om overlap te voorkomen */
  z-index: 0; /* Zorgt ervoor dat het icoon achter de tekst komt te staan */
  order: 2; /* Zet het icoon achter de tekst */
}

.hero-banner a:hover {
  background-color: #35a34a;  /* Verduidelijking van de knop bij hover */
}


@media screen and (max-width: 768px) {
  #reviews_more {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  #reviews_more .op_page_review {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
  }

  .tweeluik_td.op_page_reviews {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


.tweeluik_td.op_page_description .content_check {
  display: inline-block;
  background-color: #f0f0f0;
  border-radius: 4px;
  padding: 4px 10px 4px 22px; /* rechterruimte blijft, links genoeg voor vinkje */
  margin: 4px 6px 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #3a3a3a;
  vertical-align: middle;
  position: relative;
}

.tweeluik_td.op_page_description .content_check a {
  color: #3a3a3a;
  text-decoration: none;
}



/* Laat het label standaard zien bij de eerste review */
.op_page_review:first-of-type::before {
  content: '⭐ Meest recent';
  position: absolute;
  top: 14px;
  left: 20px;
  font-size: 13px;
  font-weight: bold;
  color: #a35f00;
  background-color: #fffaf2;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-family: 'Dosis', sans-serif;
}

/* Verberg label bij eerste review in het "meer reviews" blok */
#reviews_more .op_page_review:first-of-type::before {
  content: none !important;
}


#login_button {
  background-color: #3cb371 !important; /* Spiritchat groen */
  color: #ffffff !important;
  font-family: 'Dosis', sans-serif !important;
  font-size: 16.5px !important;
  line-height: 20px !important;
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  display: inline-block !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#login_button:hover {
  background-color: #35a34a !important; /* Donkerder groen bij hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer;
}

/* Coach is busy – lichtgrijs met subtiele koele blauwe hint */
.op_table_busy:not(.op_table_offline) .op_td_photo {
  background: linear-gradient(to bottom, #f6f8fb 0%, #e3e7ed 50%, #d5dbe2 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Coach is offline – matter en koeler blauwgrijs */
.op_table_offline .op_td_photo {
  background: linear-gradient(to bottom, #f2f4f7 0%, #dcdfe5 50%, #c8ccd4 100%) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


.pakket_tr:first-child {
  position: relative;
  border: 2px solid #e09b5f !important; /* warme, iets donkerdere perzikkleur */
  background: linear-gradient(to bottom right, #fffaf2, #fce3d1) !important;
  box-shadow: 0 10px 28px rgba(224, 155, 95, 0.12) !important;
  z-index: 2;
  overflow: hidden;
}

/* Schuine banner met subtiel pastel-oranje */
.pakket_tr:first-child::before {
  content: "Starterspakket";
  position: absolute;
  top: 14px;
  left: -50px;
  width: 180px;
  background: linear-gradient(to right, #f4cfc3, #f2b497);
  color: #3a3a3a;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-family: 'Dosis', sans-serif;
  padding: 5px 0;
  border-radius: 4px;
  z-index: 5;
  pointer-events: none;
}






/* Mobiel: pakketten altijd 100% breed, geen verschuiving of schaal mogelijk */
@media (max-width: 768px) {
  .pakket-container {
    flex-direction: column;
    gap: 20px;
  }

  .pakket_tr {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    transform: none !important;
    transition: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  }

  .pakket_tr:hover,
  .pakket_tr:focus,
  .pakket_tr:active {
    transform: none !important;
    transition: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  }

  .pakket_tr *,
  .pakket_tr *:hover,
  .pakket_tr *:focus,
  .pakket_tr *:active {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    scale: 1 !important;
  }
}





/* Verberg aanbevolen‑badge wanneer de kaart al het Nieuwe Coach‑lint heeft */
.op_td_photo div[style*="#fb9700"] ~ .recommended-badge {
  display: none !important;
}







@media screen and (max-width: 480px) {
  a[href="/credits-kopen"].button_small {
    font-size: 14px !important;
    padding: 4px 10px !important;
    line-height: 20px !important;
    height: auto !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}




/* ? DESKTOP: knoppen iets subtieler */
#chat-button-link, #lc_chat_upload, #end {
  background-color: rgb(253, 247, 242) !important;
  border: 2px solid rgb(241, 225, 212) !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 13.8px !important;
  font-weight: 600 !important;
  color: #424242 !important;
  text-decoration: none !important;
  display: inline-block !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  margin-right: 6px !important;
  min-width: 80px !important;
  text-align: center !important;
}

#chat-button-link:hover, #lc_chat_upload:hover, #end:hover {
  background-color: #fdf3ea !important;
  border-color: #ead4c3 !important;
  color: #1f1f1f !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.02) !important;
}

/* ⏱ Klokje */
#lc_chat_clock_time {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
}
#lc_chat_clock_time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a471b2' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 11 11A11.013 11.013 0 0 0 12 1zm0 20a9 9 0 1 1 9-9 9.01 9.01 0 0 1-9 9z'/%3E%3Cpath d='M13 7h-2v6h6v-2h-4V7z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ? MOBIEL: bredere knoppen, verfijnd */
@media screen and (max-width: 480px) {
  .lc_chat_button_group {
    text-align: left !important;
    display: block !important;
  }

  #chat-button-link, #lc_chat_upload, #end {
    display: inline-block !important;
    font-size: 14.5px !important;
    padding: 6px 16px !important; /* breder */
    margin: 0 6px 8px 0 !important;
    border-radius: 16px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    min-width: 90px !important;
    max-width: calc(100% - 12px) !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  #lc_chat_clock_time {
    padding-left: 26px !important;
    font-size: 14px !important;
  }

  #lc_chat_clock_time::before {
    width: 20px !important;
    height: 20px !important;
    left: 0 !important;
  }
}




@media screen and (max-width: 480px) {
  body:has(#lc_chat_box) {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background-color: #fffaf2 !important;
  }

  /* Verberg elementen bovenin */
  body:has(#lc_chat_box) a.logo_nextpage,
  body:has(#lc_chat_box) #hamburger_menu_icon,
  body:has(#lc_chat_box) .header {
    display: none !important;
  }

  /* Verberg 'Hoe werkt de chat?' link */
  body:has(#lc_chat_box) a[href*="chatten-met-mediums"] {
    display: none !important;
  }

  /* Lay-out fix voor contentkolom */
  body:has(#lc_chat_box) .main_col_table {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Header bovenaan in chat */
  body:has(#lc_chat_box) .lc_header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background-color: #fffaf2 !important;
    border-bottom: 1px solid #e2dcd6 !important;
    flex-shrink: 0 !important;
    gap: 10px !important;
  }

  body:has(#lc_chat_box) .lc_header .avatar_small {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
  }

  body:has(#lc_chat_box) .lc_header .header_menu_name {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  body:has(#lc_chat_box) .lc_header .coach-info {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
  }

  body:has(#lc_chat_box) .lc_header .credit-button {
    background: #fff2e6 !important;
    color: #3a3a3a !important;
    border: 1px solid #e4cfc1 !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    margin-left: 10px !important;
  }

  body:has(#lc_chat_box) .lc_header .lc_chat_clock {
    font-size: 12px !important;
    color: #3a3a3a !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }

  /* Chatvenster */
  body:has(#lc_chat_box) .lc_chat_box {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 10px !important;
    margin: 0 !important;
  }

  body:has(#lc_chat_box) .lc_chat_status,
  body:has(#lc_chat_box) .lc_chat_controls {
    flex-shrink: 0 !important;
  }

  body:has(#lc_chat_box) .lc_chat {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Credits-button onderaan */
  body:has(#lc_chat_box) a.button_small {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #fff2e6 !important;
    color: #3a3a3a !important;
    border: 1px solid #e4cfc1 !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 0 !important;
    margin: 8px 12px !important;
    text-decoration: none !important;
  }

  body:has(#lc_chat_box) a.button_small span#header_menu_shop_text_short {
    display: none !important;
  }
}








/* ? MOBIEL – Verberg overbodige links in de footer van de chat en voorkom witruimte */
@media screen and (max-width: 480px) {
  
  /* Verberg alle links in de .lc_footer (zoals "Algemene voorwaarden", "Privacy", etc.) */
  .lc_footer a,
  .lc_footer a:visited {
    display: none !important;
  }

  /* Minimaliseer de hele footer om visuele witruimte onderaan te voorkomen */
  .lc_footer {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
  }
}





@media screen and (max-width: 480px) {
  /* ? VLINDER BINNEN DE CHATBOX (SCROLLT MEE & VLADDERT) */
  .lc_chat_box {
    position: relative !important;
  }

  .lc_chat_box::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 10px;
    width: 36px;
    height: 36px;
    background-image: url('/upload/ps/3376_spiritchat-vlinder-aanbevolen-medium.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    pointer-events: none;
    z-index: 9;
    animation: fluttering 3s ease-in-out infinite;
  }

  @keyframes fluttering {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-5px);
    }
  }
}







@media screen and (max-width: 480px) {
  /* ? VERBERG FOOTER LINKS IN MOBIELE CHAT */
  .lc_footer a,
  .lc_footer a:visited {
    display: none !important;
  }

  /* ? TOON VRIENDELIJKE BEDANKT-TEKST ONDERIN IN PLAATS VAN LEGE RUIMTE */
  .lc_footer::before {
    content: " Bedankt voor je vertrouwen in Spiritchat!";
    display: block !important;
    text-align: center !important;
    font-size: 13.5px !important;
    color: #7a5a87 !important;
    padding: 12px 8px !important;
    font-family: 'Raleway', sans-serif !important;
    white-space: normal !important;
  }

  /* ? STRAKKE FOOTER ZONDER OVERBODIGE RUIMTE */
  .lc_footer {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
  }
} 




.footer_gamunity {
  display: none !important;
}




@media only screen and (max-width: 768px) {
  .lc.no-bg {
    background: none !important;
    background-image: none !important;
  }
}






/* Alleen op mobiel toepassen */
@media (max-width: 768px) {

  /* 1) Pak uitsluitend blog-afbeeldingen via hun pad */
  img[src*="/upload/blog/"],
  figure:has(> img[src*="/upload/blog/"]) {
    float: none !important;          /* geen tekst ernaast */
    display: block !important;
    margin: 0 auto 16px auto !important; /* centreren + ruimte eronder */
    max-width: 80% !important;       /* kleiner op mobiel; pas evt. aan naar 100% of 60% */
    height: auto !important;
    width: auto !important;          /* voorkom geforceerde widths */
    clear: both !important;
  }

  /* 2) Als de blog-afbeelding in een div/figure hing met inline float, zet die ook uit */
  div:has(> img[src*="/upload/blog/"]),
  figure:has(> img[src*="/upload/blog/"]) {
    float: none !important;
    display: block !important;
    width: 100% !important;
  }

  /* 3) Het eerstvolgende element NA de blog-afbeelding moet altijd eronder starten */
  img[src*="/upload/blog/"] + *,
  figure:has(> img[src*="/upload/blog/"]) + * {
    clear: both !important;
    display: block !important;
    width: 100% !important;
  }
}








/* Chathistory – elegante divider per operatorblok */
@supports selector(body:has(*)) {
  /* Scope: alleen als #chat_history op de pagina staat */
  body:has(#chat_history) #chat_history > div[id^="op_print_"] {
    position: relative;
  }

  /* Ruimte boven elk volgend operatorblok */
  body:has(#chat_history) #chat_history > div[id^="op_print_"]:not(:first-of-type) {
    margin-top: 36px;
    padding-top: 28px; /* ruimte voor de lijn */
  }

  /* De zachte, volle breedte scheidingslijn */
  body:has(#chat_history) #chat_history > div[id^="op_print_"]:not(:first-of-type)::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      #e6eaf1 14%,
      #dfe6ee 50%,
      #e6eaf1 86%,
      transparent
    );
  }

  /* Klein centraal ornament (past in Spiritchat-pastels) */
  body:has(#chat_history) #chat_history > div[id^="op_print_"]:not(:first-of-type)::after {
    content: "";
    position: absolute;
    top: -4px;                 /* net over de lijn */
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fffaf2, #ecd8ef); /* peach → lila */
    box-shadow: 0 0 0 3px #fff; /* wit randje snijdt door de lijn heen */
  }
}








/* ===== Chathistory – clean bubbles + subtiel me/you + auto scroll ===== */
:root{
  --sc-bubble-lines: 10;       /* aantal zichtbare tekstregels vóór scroll */
  --sc-text: #1f2937;
  --sc-muted:#6b7280;

  /* héél zachte tinten voor onderscheid (cool = coach, warm = jij) */
  --cool-bg:   #fcfdff;        /* operator/coach ondertoon */
  --cool-line: #e7edf7;
  --warm-bg:   #fffaf7;        /* jij/klant ondertoon */
  --warm-line: #f3e9e2;
}

@supports selector(body:has(*)) {

  /* scope deze styles alleen voor de chathistory-pagina */
  body:has(#chat_history) #chat_history{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 8px;
  }

  /* systeemregels: rustig, zonder bubble */
  body:has(#chat_history) #chat_history .chat_system{
    color: var(--sc-muted);
    font-style: italic;
    opacity: .95;
    display: block;
    margin: 6px 0;
    background: none; border: 0; box-shadow: none; padding: 0;
  }

  /* ===== UNIFIED “wolk” bubble voor coach én jij ===== */
  body:has(#chat_history) #chat_history
  .chat_you, .chat_op, .chat_coach, .chat_operator,
  .chat_me,  .chat_client, .chat_user, .chat_r{
    position: relative;
    display: block;
    color: var(--sc-text);
    background: #fff;                        /* basis wit */
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 12px 14px;
    margin: 8px 0;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.04);
    word-wrap: break-word; white-space: normal;
    /* Lange berichten → na ~10 regels scrollen */
    max-height: calc(1.5em * var(--sc-bubble-lines) + 24px); /* 24px ~ padding */
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* nette scrollbar in bubbles (WebKit/Blink) */
  body:has(#chat_history) #chat_history
  .chat_you::-webkit-scrollbar,
  .chat_op::-webkit-scrollbar,
  .chat_coach::-webkit-scrollbar,
  .chat_operator::-webkit-scrollbar,
  .chat_me::-webkit-scrollbar,
  .chat_client::-webkit-scrollbar,
  .chat_user::-webkit-scrollbar,
  .chat_r::-webkit-scrollbar { width: 6px; height: 6px; }
  body:has(#chat_history) #chat_history
  .chat_you::-webkit-scrollbar-thumb,
  .chat_op::-webkit-scrollbar-thumb,
  .chat_coach::-webkit-scrollbar-thumb,
  .chat_operator::-webkit-scrollbar-thumb,
  .chat_me::-webkit-scrollbar-thumb,
  .chat_client::-webkit-scrollbar-thumb,
  .chat_user::-webkit-scrollbar-thumb,
  .chat_r::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:10px; }

  /* subtiele gloss bovenin elke bubble (wolk-effect) */
  body:has(#chat_history) #chat_history
  .chat_you::after, .chat_op::after, .chat_coach::after, .chat_operator::after,
  .chat_me::after,  .chat_client::after, .chat_user::after, .chat_r::after{
    content:"";
    position:absolute; left:12px; right:12px; top:6px; height:10px;
    border-radius:10px;
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
    pointer-events:none;
  }

  /* ===== Subtiel onderscheid ===== */

  /* Coach / operator → superlichte koele ondertoon + mini-label */
  body:has(#chat_history) #chat_history
  .chat_you, .chat_op, .chat_coach, .chat_operator{
    background: linear-gradient(180deg,#fff 0%, var(--cool-bg) 100%);
    border-color: var(--cool-line);
  }
  body:has(#chat_history) #chat_history
  .chat_you::before, .chat_op::before, .chat_coach::before, .chat_operator::before{
    content: "Consulent";
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    font: 600 11px/1.6 Raleway, sans-serif;
    color: #475569;
    background: #f5f8ff;
    border: 1px solid var(--cool-line);
    border-radius: 10px;
  }

  /* Jij / klant → superlichte warme ondertoon + mini-label */
  body:has(#chat_history) #chat_history
  .chat_me, .chat_client, .chat_user, .chat_r{
    background: linear-gradient(180deg,#fff 0%, var(--warm-bg) 100%);
    border-color: var(--warm-line);
  }
  body:has(#chat_history) #chat_history
  .chat_me::before, .chat_client::before, .chat_user::before, .chat_r::before{
    content: "Jij";
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    font: 600 11px/1.6 Raleway, sans-serif;
    color: #475569;
    background: #fff7f2;
    border: 1px solid var(--warm-line);
    border-radius: 10px;
  }

  /* bubbles van dezelfde spreker vlak achter elkaar iets compacter */
  body:has(#chat_history) #chat_history
  .chat_you + .chat_you, .chat_op + .chat_op, .chat_coach + .chat_coach, .chat_operator + .chat_operator,
  .chat_me + .chat_me,   .chat_client + .chat_client, .chat_user + .chat_user, .chat_r + .chat_r{
    margin-top: 4px;
  }
}







/* ===== E-mail consults — alleen op /page9-emailconsults.html ===== */
@supports selector(body:has(*)) {

  /* Scope + basis lay-out */
  body:has(#email_consults) #email_consults{
    max-width: 980px;
    margin: 0 auto;
    padding: 0 8px;
  }

  /* ───────────────────────────
     Divider per consult-blok
     (op_options_table is de wrapper)
     ─────────────────────────── */
  body:has(#email_consults) #email_consults .op_options_table{
    position: relative;
  }
  /* Lijn vóór elk consult-blok behalve de eerste */
  body:has(#email_consults) #email_consults .op_options_table:not(:first-of-type){
    margin-top: 36px;
    padding-top: 28px; /* ruimte voor de lijn */
  }
  body:has(#email_consults) #email_consults .op_options_table:not(:first-of-type)::before{
    content:"";
    position:absolute; top:0; left:-8px; right:-8px; height:1px;
    background: linear-gradient(to right,
      transparent, #e6eaf1 12%, #dfe6ee 50%, #e6eaf1 88%, transparent);
  }

  /* Avatar netjes over de divider laten “zweven” */
  body:has(#email_consults) #email_consults .op_options_table .avatar{
    position: relative; z-index: 2;
  }
  body:has(#email_consults) #email_consults .op_options_table .avatar img{
    display:block; width:72px; height:72px; border-radius:50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    outline: 4px solid #fff;    /* wit randje snijdt door de lijn */
  }
  /* bij vervolgblokken de avatar iets optrekken over de lijn */
  body:has(#email_consults) #email_consults .op_options_table:not(:first-of-type)
  .op_options_td:first-child .avatar{ margin-top:-12px; }

  /* ───────────────────────────
     Bubbles (wolk-effect) + subtiel onderscheid
     ─────────────────────────── */
  :root{
    --cool-bg:   #fcfdff;   /* consulent — heel licht koel */
    --cool-line: #e7edf7;
    --warm-bg:   #fffaf7;   /* jij — heel licht warm */
    --warm-line: #f3e9e2;
    --text:      #1f2937;
    --muted:     #64748b;
  }

  /* Basis bubble voor alle chatregels */
  body:has(#email_consults) #email_consults
  .chat_you, .chat_op, .chat_coach, .chat_operator,
  .chat_me,  .chat_client, .chat_user, .chat_r{
    position: relative;
    display: block;
    color: var(--text);
    background: #fff;                  /* basis wit */
    border: 1px solid #ececec;
    border-radius: 16px;
    padding: 12px 14px;
    margin: 8px 0;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 10px 22px rgba(0,0,0,.04);
    word-wrap: break-word; white-space: normal;
  }
  /* subtiele “wolk”-glans */
  body:has(#email_consults) #email_consults
  .chat_you::after, .chat_op::after, .chat_coach::after, .chat_operator::after,
  .chat_me::after,  .chat_client::after, .chat_user::after, .chat_r::after{
    content:"";
    position:absolute; left:12px; right:12px; top:6px; height:10px;
    border-radius:10px;
    background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
    pointer-events:none;
  }

  /* Consulent — heel lichte koele ondertoon + mini-label */
  body:has(#email_consults) #email_consults
  .chat_you, .chat_op, .chat_coach, .chat_operator{
    background: linear-gradient(180deg,#fff 0%, var(--cool-bg) 100%);
    border-color: var(--cool-line);
    border-left-width: 3px; border-left-color: var(--cool-line);
    padding-left: 14px;
  }
  body:has(#email_consults) #email_consults
  .chat_you::before, .chat_op::before, .chat_coach::before, .chat_operator::before{
    content: "Consulent";
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    font: 600 11px/1.6 Raleway, sans-serif;
    color: #475569;
    background: #f5f8ff;
    border: 1px solid var(--cool-line);
    border-radius: 10px;
  }

  /* Jij — heel lichte warme ondertoon + mini-label */
  body:has(#email_consults) #email_consults
  .chat_me, .chat_client, .chat_user, .chat_r{
    background: linear-gradient(180deg,#fff 0%, var(--warm-bg) 100%);
    border-color: var(--warm-line);
    border-left-width: 3px; border-left-color: var(--warm-line);
    padding-left: 14px;
  }
  body:has(#email_consults) #email_consults
  .chat_me::before, .chat_client::before, .chat_user::before, .chat_r::before{
    content: "Jij";
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    font: 600 11px/1.6 Raleway, sans-serif;
    color: #475569;
    background: #fff7f2;
    border: 1px solid var(--warm-line);
    border-radius: 10px;
  }

  /* Opeenvolgende bubbles van dezelfde spreker iets compacter */
  body:has(#email_consults) #email_consults
  .chat_you + .chat_you, .chat_op + .chat_op, .chat_coach + .chat_coach, .chat_operator + .chat_operator,
  .chat_me + .chat_me,   .chat_client + .chat_client, .chat_user + .chat_user, .chat_r + .chat_r{
    margin-top: 4px;
  }

  /* Systeemregels sober */
  body:has(#email_consults) #email_consults .chat_system{
    color: var(--muted);
    font-style: italic;
    opacity: .95;
    display: block;
    margin: 6px 0;
    background: none; border: 0; box-shadow: none; padding: 0;
  }

  /* (Optioneel) Lange berichten scrollen binnen de bubble */
  body:has(#email_consults) #email_consults
  .chat_you, .chat_op, .chat_coach, .chat_operator,
  .chat_me,  .chat_client, .chat_user, .chat_r{
    max-height: clamp(180px, 40vh, 420px);
    overflow: auto;
    overscroll-behavior: contain;
  }
  body:has(#email_consults) #email_consults
  .chat_you::-webkit-scrollbar, .chat_op::-webkit-scrollbar,
  .chat_coach::-webkit-scrollbar, .chat_operator::-webkit-scrollbar,
  .chat_me::-webkit-scrollbar, .chat_client::-webkit-scrollbar,
  .chat_user::-webkit-scrollbar, .chat_r::-webkit-scrollbar{ width: 6px; height: 6px; }
  body:has(#email_consults) #email_consults
  .chat_you::-webkit-scrollbar-thumb, .chat_op::-webkit-scrollbar-thumb,
  .chat_coach::-webkit-scrollbar-thumb, .chat_operator::-webkit-scrollbar-thumb,
  .chat_me::-webkit-scrollbar-thumb, .chat_client::-webkit-scrollbar-thumb,
  .chat_user::-webkit-scrollbar-thumb, .chat_r::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:10px; }

  /* H2 boven elke thread wat strak en rustig */
  body:has(#email_consults) #email_consults h2{
    margin: 0 0 10px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
  }

  /* Beantwoorden-knop: klein beetje polish (optioneel) */
  body:has(#email_consults) #email_consults .op_options_td:last-child > a.button{
    display:inline-flex; align-items:center; gap:6px;
    margin-top: 10px;
    background: #9575cd; color:#fff; border-radius:10px;
    padding:8px 14px; text-decoration:none;
    box-shadow: 0 6px 16px rgba(149,117,205,.18);
  }
  body:has(#email_consults) #email_consults .op_options_td:last-child > a.button:hover{
    filter: brightness(.98);
  }

  /* Mobiel: avatar iets kleiner + bubbleradius iets ronder */
  @media (max-width: 480px){
    body:has(#email_consults) #email_consults .op_options_table .avatar img{
      width:60px; height:60px;
    }
    body:has(#email_consults) #email_consults
    .chat_you, .chat_op, .chat_coach, .chat_operator,
    .chat_me,  .chat_client, .chat_user, .chat_r{
      border-radius: 18px;
      padding: 12px 14px;
    }
  }
}


/* Container om buttons mooi te centreren */
.extra-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;              /* ruimte tussen knoppen */
  flex-wrap: wrap;
  margin: 40px 0;
  text-align: center;
}

/* Premium paarse buttons */
.extra-buttons .button_alt {
  background-color: #9575cd !important;   /* Spiritchat paars */
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-family: 'Dosis', sans-serif !important;
  padding: 14px 28px !important;
  border-radius: 30px !important;         /* rond premium gevoel */
  text-decoration: none !important;
  display: inline-block !important;
  min-width: 200px;                       /* zorgt dat ze gelijk breed lijken */
  text-align: center;
  box-shadow: 0 4px 12px rgba(149, 117, 205, 0.3); /* zachte glow */
  transition: all 0.3s ease;
}

/* Hover effect */
.extra-buttons .button_alt:hover {
  background-color: #7e57c2 !important;   /* donkerdere paars */
  box-shadow: 0 6px 18px rgba(149, 117, 205, 0.45);
  transform: translateY(-2px);
}



@media (max-width: 768px) {
  .lc_review_credits {
    display: none !important;
  }
}



@media(max-width:900px){

/* Coachkaart layout */
.op_table, .op_table_busy{
 width:100%!important;
 max-width:440px!important;
 margin:0 auto 28px auto!important;
 display:block!important;
 box-sizing:border-box!important;
 position:relative!important;
}

/* Tabellen uitschakelen */
.op_table tr, .op_table_busy tr,
.op_table td, .op_table_busy td{
 display:block!important;
 width:100%!important;
 padding:0!important;
 margin:0!important;
}

/* Foto wrapper */
.op_td_photo{
 width:100%!important;
 text-align:center!important;
 position:relative!important;
 margin:0 auto!important;
}

/* Foto */
.op_td_photo .op_photo{
  display:block!important;
  margin:9px auto 0 auto!important; /* ? 9px naar beneden */
  position:relative!important;
}


/* ======================================
   STATUS ICON — ALLEEN POSITIONEREN
   (GEEN styling, GEEN kleuren veranderen)
   ====================================== */

.op_table .phone_icon_online,
.op_table .phone_icon_busy,
.op_table .phone_icon_offline,
.op_table_busy .phone_icon_online,
.op_table_busy .phone_icon_busy,
.op_table_busy .phone_icon_offline{
 position:absolute!important;
 top:10px!important;
 left:10px!important;
 display:block!important;
 z-index:999!important;
}

/* STATUS-TEKST ALLEEN POSITIE */
.op_table .op_is_online,
.op_table .op_is_busy,
.op_table .op_is_offline,
.op_table_busy .op_is_online,
.op_table_busy .op_is_busy,
.op_table_busy .op_is_offline{
 position:absolute!important;
 top:34px!important;
 left:10px!important;
 display:block!important;
 z-index:999!important;
}

}





@media (max-width: 900px) {
  .op_td_photo div[style*="background-color: #fb9700"] {
    transform: translateY(-7px) !important;
  }
}





@media screen and (max-width:768px){

.op_info_button,
.op_info_button:visited,
.op_info_button:active,
.op_info_button:hover,
.op_info_button_chat,
.op_info_button_chat:visited,
.op_info_button_chat:active,
.op_info_button_chat:hover{
  width:92%!important;
  max-width:320px!important;

  height:46px!important;
  min-height:46px!important;
  line-height:46px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  padding:0!important;
  margin:0 auto!important;

  font-size:16px!important;
  font-weight:700!important;

  border-radius:10px!important;

  transition:none!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* ✅ GRATIS AFSPREKEN — ZELFDE BREEDTE ALS START CHAT */
.op_table_busy .op_td_buttons > a.op_info_button,
.op_table_offline .op_td_buttons > a.op_info_button{
  width:92%!important;        /* ? NIET 100% */
  max-width:320px!important;
}

}


@media (max-width:768px){
.op_td_photo *[style*="#fb9700"]{
  margin-top:-10px!important;
  float:none!important;
  display:inline-block!important;
}
}



.phone_icon_busy,
.phone_icon_offline{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
}


/* =========================================
   MOBILE HEADER ICONS – MATCH LOGO TEXT (FINAL)
========================================= */

@media (max-width: 768px) {

  /* Hamburger icon – 3 lijnen */
  #mobileHeader2026 button span {
    background-color: #3a3a3a !important;
  }

  /* Account / login icon (SVG) */
  #mobileHeader2026 a[aria-label] svg circle,
  #mobileHeader2026 a[aria-label] svg path {
    stroke: #3a3a3a !important;
  }

}


/* === FINAL OVERRIDE CTA BUTTON HERO (BALANCED SIZE) === */
.hero-banner a[href*="registreren"] {
    display: inline-block !important;
    padding: 14px 26px !important;   /* subtiel groter */
    font-size: 17px !important;      /* premium maar niet te groot */
    font-weight: 800 !important;
    border-radius: 10px !important;
    background-color: #3cb371 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22) !important;
    margin-top: 10px !important;
    transform: none !important;      /* geen vergrotingsscale */
}

/* Zorg dat niets het kan breken */
.hero-banner a[href*="registreren"]::before,
.hero-banner a[href*="registreren"] span {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* === MOBILE TUNING CTA HERO (iets kleiner op mobiel) === */
@media (max-width: 768px) {
  .hero-banner a[href*="registreren"] {
      padding: 12px 22px !important;   /* iets minder breed/hoog */
      font-size: 15.5px !important;    /* subtiel kleiner */
      border-radius: 9px !important;
      box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
      margin-top: 8px !important;
  }
}


/* SETTINGS ICONS – PROPORTIONEEL SCHALEN (ALLEEN MOBIEL) */
@media (max-width: 768px){

  .settings .setting_icon_outer{
    transform: scale(0.5);
    transform-origin: center center;
    margin-bottom: 0 !important;
  }

}



/* SETTINGS ICON ACHTERGROND – SPIRITCHAT PASTEL PAARS */
.settings .setting_icon_outer::before{
  background: linear-gradient(
    135deg,
    #f4e9fb 0%,   /* licht lila */
    #e6d6f5 45%,  /* pastel paars */
    #d9c3ee 100%  /* zachte lavendel */
  ) !important;

  border: 1px solid #d7c0ea !important;
  box-shadow:
    0 4px 10px rgba(122, 90, 183, 0.18) !important,
    inset 0 1px 0 rgba(255,255,255,0.7) !important;
}



/* =========================
   MOBIEL: OUDE HEADER & MENU UIT
   ========================= */
@media (max-width: 768px) {

  /* Oud logo (beeld + tekst) */
  #header > a.logo,
  #header > a.logo_nextpage {
    display: none !important;
  }

  /* Volledige oude header-balk */
  #header_placeholder,
  .header,
  .header_menu {
    display: none !important;
  }

  /* Oud desktop menu (home etc.) */
  #menu,
  .menu,
  .menu_normal {
    display: none !important;
  }

  /* Oude login / register knop */
  #login_button,
  .button_small {
    display: none !important;
  }
}

/* =========================
   MOBIEL: OUDE HEADER & MENU UIT (ALLE SITES)
========================= */
@media (max-width: 768px) {

  /* Alle oude headers */
  #header,
  #header_placeholder,
  .header,
  .header_div,
  .header_div_nextpage,
  .header_menu {
    display: none !important;
  }

  /* Alle oude logo varianten */
  #header a.logo,
  #header a.logo_nextpage {
    display: none !important;
  }

  /* Desktop menu structuren */
  #menu,
  .menu,
  .menu_div,
  .menu_normal,
  .dd {
    display: none !important;
  }

  /* Oude buttons (login / credits) */
  .button_small,
  #login_button,
  .header_menu_personal {
    display: none !important;
  }
}

/* =========================
   MOBIEL: OUDE HEADER & MENU UIT
   ========================= */
@media (max-width: 768px) {

  /* Oud logo (beeld + tekst) */
  #header > a.logo,
  #header > a.logo_nextpage {
    display: none !important;
  }

  /* Volledige oude header-balk */
  #header_placeholder,
  .header,
  .header_menu {
    display: none !important;
  }

  /* Oud desktop menu (home etc.) */
  #menu,
  .menu,
  .menu_normal {
    display: none !important;
  }

  /* Oude login / register knop */
  #login_button,
  .button_small {
    display: none !important;
  }
}