@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');


  body {
  font-family: 'Poppins', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  }

  h1 {
  font-size: 34px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 26px;
  }

  h4 {
  font-size: 21px;
  }

  h5 {
  font-size: 18px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: #1a1a1a;
  }

  h1, h2, h3, h4, h5, h6 {
  color: #1a1a1a !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: #cba135 !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: #1a1a1a !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: #cba135 !important;
  color: #fff !important;
  }

  .btn:hover,
  .wpcf7-submit:hover,
  .woocommerce span.onsale:hover,
  .woocommerce a.button:hover,
  .woocommerce .button:hover,
  [type="submit"]:hover,
  .nf-form-content input[type=submit]:hover
  {
  background: #1a1a1a !important;
  color: #fff !important;
  }

  div.social-media ul li a {
  background: #b07418 !important;
  color: #fff !important;
  }

  div.social-media ul li a i {
  color: #fff !important;
  }

  div.social-media ul li a:hover {
  background: #1a1a1a !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: #cba135 !important;
  }

  div.phone a.phone, div.email a.email {
  background: #b07418 !important;
  color: #fff !important;
  }

  div.phone a.phone, div.email a.email i {
  color: #fff !important;
  }

  div.phone a.phone:hover, div.email a.email:hover {
  background: #1a1a1a !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: #b07418;
  border-color: #b07418;
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: #b07418 !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #b07418 !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  .modal__container,
  .footer-cta-box,
  .rimg,
  [type="submit"] {
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  }

  .img-responsive {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }



  header div.header {
  background-color: rgba(255, 255, 255, 1) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(255, 255, 255) !important;
  }

  @media only screen and (max-width : 992px) {
  header nav.navbar-default {
  background: none !important;
  }
  }

  header > div.wrapper {
  display: block;
  position: relative;
  }

  header div.header::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  }

  header > div.wrapper::after {
  background: url('https://belginbeautylaser.nl/wp-content/uploads/sites/482/2025/02/Laser.png');
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  }




  @media only screen and (min-width : 992px) {
  body.home header > div.wrapper {
  min-height: 350px;
      min-height: 460px;
    }
  body.home header > div.wrapper.above {
  min-height: 500px;
      min-height: 610px;
    }
  }

  @media only screen and (min-width : 992px) {
  body header > div.wrapper {
  min-height: 225px;
      min-height: 260px;
    }
  body header > div.wrapper.above {
  min-height: 375px;
      min-height: 410px;
    }
  body header > div.wrapper.above::after,
  body header > div.wrapper.above.shadow::before,
  body header > div.wrapper.above_shadow::before {
      top: 185px;
    }
  body header > div.wrapper.sticky_menu .header__content {
      margin-top: 185px;
    }
  }

  @media only screen and (min-width : 992px) {
  header > div.wrapper {
  min-height: 285px;
  }
  header > div.wrapper.above {
  min-height: 435px;
  }

  header div.header div.holder {
  height: 185px;
  }
  }





  nav.navbar-default, div.navbar-collapse {
  background-color: #ffffff; !important;
  }

  @media only screen and (min-width : 992px) {
  
  div.navbar-collapse {
  background: none !important;
  }

  header nav.navbar-default {
  background-color: rgba(255, 255, 255, 1) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  }

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:hover,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:focus,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:active {
  color: #b07418 !important;
  }
  }


  @media only screen and (min-width : 992px) {
  section.featured div.wrapper {
  margin-top: -100px;
  }
  header>div.wrapper .header__content {
  transform: translate3d(0, -40px, 0);
  }
  }





  header div.header {
  text-align: left;
  }

  header div.navbar-collapse ul.navbar-nav li a, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-bottom: 1px solid #cba135;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse ul.navbar-nav li a, header nav.navbar-default div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li.active > a {
  color: #cba135 !important;
  }
  }


  header div.header div.contact i {
  color: #cba135;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse {
  text-align: left;
  }
  }

  section.featured div.item p,
  section.news div.item p {
  color: #1a1a1a !important;
  }

  section.featured div.item,
  section.news div.item {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }

  section.partners {
  background: #cba135 !important;
  }

  section.partners img {
  border-radius: 0 !important;
  }

  footer,
  .footer-cta.center:after,
  .author {
  background: #b07418 !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid #cba135;
  }

  footer div.socket,
  .footer-sticky {
  background: #1a1a1a !important;
  }


  section.treatments div.items div.item img {
  border-radius: 100% !important;
  }

  .img-circle {
  border-radius: 100% !important;
  }

  section.treatments div.button-wrap {
  background: #9c7694;
  margin-top: 30px;
  }

  section.treatments div.item a {
  color: #1a1a1a !important;
  }

  section.prices table tr td a {
  color: #1a1a1a !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: #1a1a1a !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: #b07418;
  }

  /* Refactoring UI CSS Root
 * Een systeem gebaseerd op de principes van Refactoring UI
 * met grayscale en goud als basis kleuren
 */

:root {
  /* Kleursysteem - Grayscale */
  --gray-50: #fafafa;
  --gray-100: #f7f7f7;
  --gray-200: #e6e6e6;
  --gray-300: #d1d1d1;
  --gray-400: #ababab;
  --gray-500: #808080;
  --gray-600: #666666;
  --gray-700: #4d4d4d;
  --gray-800: #333333;
  --gray-900: #1a1a1a;

/* Kleursysteem - Luxueus Goud */
--gold-100: #fef9ec;
--gold-200: #fdf3d9;
--gold-300: #fbebc5;
--gold-400: #fae3b2;
--gold-500: #d4af37; /* Klassiek luxueus goud */
--gold-600: #c09a2e;
--gold-700: #a88526;
--gold-800: #936f1f;
--gold-900: #7d5a17;

  /* Functionele kleuren */
  --primary: var(--gold-600);
  --primary-hover: var(--gold-700);
  --primary-light: var(--gold-100);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-500);
  --background: white;
  --background-alt: var(--gray-50);
  --border: var(--gray-300);
  --border-light: var(--gray-200);

  /* Typografie */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: var(--font-family-base);
  
  /* Font sizes - met schaalbare typografie volgens Refactoring UI */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);     /* 12px - 14px */
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);      /* 14px - 16px */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* 16px - 18px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);   /* 18px - 20px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20px - 24px */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);    /* 24px - 30px */
  --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);  /* 30px - 36px */
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);        /* 36px - 48px */
  
  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0.01em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* Font weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* Spacings - consistent schaal volgens Refactoring UI */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */
  
  /* Borders */
  --border-radius-sm: 0.125rem;  /* 2px */
  --border-radius: 0.25rem;      /* 4px */
  --border-radius-md: 0.375rem;  /* 6px */
  --border-radius-lg: 0.5rem;    /* 8px */
  --border-radius-xl: 0.75rem;   /* 12px */
  --border-radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Container breedte */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}


aside .block .head .list-unstyled {
  padding-left: 0 !important;
}

footer div.socket a, footer div.socket a:hover {
  color: var(--text-tertiary) !important;
}

/* Base styles voor HTML elementen */
html {
  font-size: 14px !important;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}
footer div.socket img[alt="netbeauty"] {
  filter: brightness(0.5);
}
.btn-group.btn-group-horizontal {
display: flex;
flex-direction: row;
gap: var(--space-3);
align-items: baseline;
flex-wrap: wrap;
}

footer .list-unstyled {
  padding: 0 !important;
}

body {
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--text-secondary) !important;
  background-color: var(--background) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: var(--tracking-normal);
  font-weight: var(--font-light);
}

.footer-cta .cta-home {
  background: var(--background-alt);
}

/* Typografie elementen */
h1, h2, h3, h4, h5, h6 {
/*  font-family: var(--font-family-heading) !important;*/
  font-weight: var(--font-medium) !important;
  line-height: var(--leading-tight) !important;
  color: var(--text-primary) !important;
  margin-top: var(--space-6) !important;
  margin-bottom: var(--space-4) !important;
}

/* Eerste heading in een sectie heeft geen extra margin-top nodig */
section > h1:first-child, 
section > h2:first-child, 
section > h3:first-child, 
section > h4:first-child, 
section > h5:first-child, 
section > h6:first-child,
.no-margin-top {
  margin-top: 0 !important;
}

h1 {
  font-size: var(--text-4xl) !important;
  letter-spacing: var(--tracking-tight) !important;
}

h2 {
  font-size: var(--text-3xl) !important;
  letter-spacing: var(--tracking-tight) !important;
}

h3 {
  font-size: var(--text-2xl) !important;
}

h4 {
  font-size: var(--text-xl) !important;
}

h5 {
  font-size: var(--text-lg) !important;
}

h6 {
  font-size: var(--text-base) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wide) !important;
}

.nbs_panel-heading a strong {
  font-weight: 300;
}


p {
  margin-top: 0 !important;
  margin-bottom: var(--space-4) !important;
 /* max-width: 65ch !important; */
}

small {
  font-size: var(--text-sm) !important;
  color: var(--text-tertiary) !important;
}

a {
  color: var(--primary) !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

a:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline !important;
}

/* Lijst elementen */
ul, ol {
  padding-left: var(--space-5) !important;
  margin-bottom: var(--space-4) !important;
}

li {
  margin-bottom: var(--space-2) !important;
}

div.page-header h1 {
  border-bottom: 0px solid #e6e6e6;
}

li:last-child {
  margin-bottom: 0 !important;
}

/* Dividers */
hr {
  height: 1px !important;
  background-color: var(--border-light) !important;
  border: none !important;
  margin: var(--space-6) 0 !important;
}

/* Code */
code, pre {
  font-family: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
  font-size: var(--text-sm) !important;
  background-color: var(--gray-100) !important;
  border-radius: var(--border-radius) !important;
}

.wrap h3 {
  margin-top: 0 !important;
}

.text-container {
max-width: var(--container-md);
margin: 0 auto;
}
.text-container p {
max-width: none !important;
}

.wrap {
  padding: var(--space-5);
  margin-top: var(--space-3);
  box-shadow: var(--shadow-md);
}

code {
  padding: var(--space-1) var(--space-2) !important;
}

pre {
  padding: var(--space-4) !important;
  overflow-x: auto !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-4) !important;
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--primary) !important;
  padding-left: var(--space-4) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-style: italic !important;
  color: var(--text-secondary) !important;
}

a.link-icon_special {
  color: var(--background) !important;
  background: var(--primary) !important;
  height: var(--icon-size);
  width: var(--icon-size);
  display: flex;
  --icon-size: 40px;
  border-radius: var(--border-radius-full) !important;
  justify-content: center;
  align-items: center;
}
a.link-icon_special:hover {
  background: var(--primary-hover) !important;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  border-top: none;
/*  padding-top: var(--space-10) !important;*/
}


/* Tabel */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: var(--space-4) !important;
}

.nbs_panel-group .nbs_panel + .nbs_panel {
  margin-top: var(--space-8);
}

.nbs_panel-heading a {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
  padding: var(--space-6) var(--space-8) !important;
border-bottom: 1px solid transparent !important;
border-top-right-radius: 3px !important;
border-top-left-radius: 3px !important;
border: none !important;
display: block;
}


th {
  text-align: left !important;
  padding: var(--space-3) var(--space-2) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: var(--font-semibold) !important;
}

td {
  padding: var(--space-3) var(--space-2) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* Form elementen */
input, select, textarea {
  font-family: var(--font-family-base) !important;
  font-size: var(--text-base) !important;
  padding: var(--space-2) var(--space-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  background-color: white !important;
  color: var(--text-primary) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-light) !important;
}

.footer__logo img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  margin: 0;
  max-height: 100px;
}
.footer__upper .list-inline.footer__socials {
  margin-bottom: 0 !important;
}

.intro_voorNazorg img {
max-width: 100%;
max-height: 630px;
object-fit: cover;
}
.intro_voorNazorg .col-md-24 {
padding: var(--space-10);
}

.verwachten__header {
  border-radius: var(--border-radius-xl);
  padding: var(--space-5);
  margin: 0 auto var(--space-5) auto;
  display: block;
  text-align: center;
 /* background: var(--gold-100);*/
  border-top: 1px solid var(--primary);
  border-bottom: 1px solid var(--primary);
}

.footer__upper {
display: flex;
gap: var(--space-1);
align-ic: ;
align-items: center;
justify-content: start;
height: 100px;
overflow: hidden;
}
.column:not(div.col-sm-16:nth-child(1) > div:nth-child(1)) {
position: relative;
margin-top: calc(100px + 2rem);
display: block;
}
footer div.col-sm-16:nth-child(1) > div:nth-child(1) > h4:nth-child(1) {
display: none;
}
footer, .footer-cta.center::after, .author {
background: var(--background) !important;
  color: var(--text-primary);
}
footer div.column > h4, footer section.treatments div.items div.item a div.column > span, section.treatments div.items div.item a footer div.column > span, footer h4 {
color: var(--text-secondary) !important;
font-size: var(--text-sm) !important;
font-weight: var(--font-normal) !important;
margin-bottom: 0 !important;
  padding-bottom: 15px;
border-bottom: 0 !important;
}

main .cta {
margin: var(--space-8) auto var(--space-3) auto;
background: var(--primary-light);
padding: var(--space-4);
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-md);
}

.prices .table.table-hover tr:not(.prices .table.table-hover thead tr) {
  box-shadow: var(--shadow-sm);
}

label {
  display: block !important;
  margin-bottom: var(--space-2) !important;
  font-weight: var(--font-medium) !important;
  color: var(--text-secondary) !important;
}

/* Buttons - drie varianten met !important zoals gevraagd */
.btn {
  display: inline-block !important;
  font-weight: var(--font-medium) !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  padding: var(--space-2) var(--space-4) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
  border-radius: var(--border-radius) !important;
  transition: all 0.2s ease-in-out !important;
  text-decoration: none !important;
  margin-top: var(--space-3) !important;
}

/* Primary button - goud */
.btn-primary {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  color: white !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: white !important;
  text-decoration: none !important;
}

footer div.socket, .footer-sticky {
  background: var(--background) !important;
  color: var(--text-tertiary) !important;
}

/* Secondary button - gray outline */
.btn-secondary {
  background-color: white !important;
  border: 1px solid var(--gray-400) !important;
  color: var(--text-secondary) !important;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--gray-100) !important;
  border-color: var(--gray-500) !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

/* Tertiary button - text only met goud */
.btn-tertiary {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: var(--primary) !important;
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

.btn-tertiary:hover, .btn-tertiary:focus {
  background-color: var(--gold-100) !important;
  color: var(--primary-hover) !important;
  text-decoration: none !important;
}

/* Button sizes */
.btn-sm {
  font-size: var(--text-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
}

.btn-lg {
  font-size: var(--text-lg) !important;
  padding: var(--space-3) var(--space-5) !important;
}

/* Container classes */
.container {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}


img[class*="wp-image-"] {
  border-radius: var(--border-radius-xl) !important;
}

/* Responsive containers */
@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm) !important;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md) !important;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg) !important;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl) !important;
  }
}

/* Utility klassen */
.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.ml-4 { margin-left: var(--space-4) !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mr-4 { margin-right: var(--space-4) !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }

/* Responsive text utilities */
@media (max-width: 639px) {
  .text-sm-left { text-align: left !important; }
  .text-sm-center { text-align: center !important; }
  .text-sm-right { text-align: right !important; }
}

@media (min-width: 640px) and (max-width: 767px) {
  .text-md-left { text-align: left !important; }
  .text-md-center { text-align: center !important; }
  .text-md-right { text-align: right !important; }
}

@media (min-width: 768px) {
  .text-lg-left { text-align: left !important; }
  .text-lg-center { text-align: center !important; }
  .text-lg-right { text-align: right !important; }
}

/* Cards */
.card {
  background-color: white !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
}

.card-body {
  padding: var(--space-4) !important;
}

.card-header {
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--border-light) !important;
  background-color: var(--gray-100) !important;
}

.card-footer {
  padding: var(--space-3) var(--space-4) !important;
  border-top: 1px solid var(--border-light) !important;
  background-color: var(--gray-100) !important;
}

/* Alerts */
.alert {
  padding: var(--space-3) var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
  border-radius: var(--border-radius) !important;
  border-left: 4px solid transparent !important;
}

.alert-primary {
  background-color: var(--gold-100) !important;
  border-left-color: var(--primary) !important;
}

.alert-secondary {
  background-color: var(--gray-100) !important;
  border-left-color: var(--gray-500) !important;
}

/* Badges */
.badge {
  display: inline-block !important;
  padding: var(--space-1) var(--space-2) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-medium) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
  border-radius: var(--border-radius-full) !important;
}

.badge-primary {
  background-color: var(--primary) !important;
  color: white !important;
}

.badge-secondary {
  background-color: var(--gold-200) !important;
  color: var(--gold-700);
}

/*Ninjaforms*/


/* 
 * Ninja Forms Styling
 * Styling in lijn met de Refactoring UI principes
 * Met grayscale en goud als basis
 */

/* Formulier container */
.nf-form-cont {
  max-width: 100% !important;
  margin: var(--space-5) 0 !important;
}

/* Labels */
.nf-form-fields-required {
  font-size: var(--text-sm) !important;
  color: var(--text-tertiary) !important;
  margin-bottom: var(--space-4) !important;
}

.nf-field-label label {
  font-weight: var(--font-medium) !important;
  color: var(--text-secondary) !important;
  margin-bottom: var(--space-2) !important;
  font-size: var(--text-base) !important;
}

/* Required asterisk */
.ninja-forms-req-symbol, 
.nf-field-label .ninja-forms-req-symbol {
  color: var(--gold-600) !important;
}

/* Tekstvelden, textareas en selects */
.nf-field-element input[type="text"],
.nf-field-element input[type="email"],
.nf-field-element input[type="tel"],
.nf-field-element input[type="number"],
.nf-field-element input[type="password"],
.nf-field-element textarea,
.nf-field-element select {
  width: 100% !important;
  padding: var(--space-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  font-size: var(--text-base) !important;
  font-family: var(--font-family-base) !important;
  color: var(--text-primary) !important;
  background-color: white !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* Focus states */
.nf-field-element input:focus,
.nf-field-element textarea:focus,
.nf-field-element select:focus {
  outline: none !important;
  border-color: var(--gold-600) !important;
  box-shadow: 0 0 0 3px var(--gold-200) !important;
}

/* Placeholder */
.nf-field-element input::placeholder,
.nf-field-element textarea::placeholder {
  color: var(--gray-400) !important;
  opacity: 1 !important;
}

/* Submit button */
.nf-field-element input[type="button"] {
  background-color: var(--gold-600) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  padding: var(--space-2) var(--space-5) !important;
  font-weight: var(--font-medium) !important;
  font-size: var(--text-base) !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
  font-family: var(--font-family-base) !important;
}

.nf-field-element input[type="button"]:hover,
.nf-field-element input[type="button"]:focus {
  background-color: var(--gold-700) !important;
  outline: none !important;
}

/* Checkboxes en radio buttons */
.nf-field-element input[type="checkbox"],
.nf-field-element input[type="radio"] {
  display: inline-block !important;
  margin-right: var(--space-2) !important;
  vertical-align: middle !important;
}

.nf-field-element input[type="checkbox"] + label,
.nf-field-element input[type="radio"] + label {
  display: inline-block !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

.list-checkbox-wrap .nf-field-element li,
.list-radio-wrap .nf-field-element li {
  margin-bottom: var(--space-2) !important;
}

/* Error berichten */
.nf-error-msg {
  font-size: var(--text-sm) !important;
  color: #e53e3e !important; /* Error rood */
  margin-top: var(--space-1) !important;
}

.nf-error .nf-field-element input,
.nf-error .nf-field-element textarea,
.nf-error .nf-field-element select {
  border-color: #e53e3e !important;
}

/* Success berichten */
.nf-response-msg {
  background-color: var(--gold-100) !important;
  border-left: 4px solid var(--gold-600) !important;
  padding: var(--space-4) !important;
  margin: var(--space-5) 0 !important;
  border-radius: var(--border-radius) !important;
}

.nf-response-msg p {
  margin: 0 !important;
  color: var(--text-primary) !important;
}

/* Description text */
.nf-field-description {
  font-size: var(--text-sm) !important;
  color: var(--text-tertiary) !important;
  margin-top: var(--space-1) !important;
  margin-bottom: var(--space-3) !important;
}

/* Field spacing */
.nf-field-container {
  margin-bottom: var(--space-5) !important;
}

/* Multi-part forms */
.nf-breadcrumb {
  background-color: var(--gray-100) !important;
  padding: var(--space-2) !important;
  border-radius: var(--border-radius) !important;
  margin-bottom: var(--space-5) !important;
}

.nf-breadcrumb li {
  padding: var(--space-2) var(--space-3) !important;
}

.nf-breadcrumb li.active {
  background-color: var(--gold-600) !important;
  color: white !important;
  border-radius: var(--border-radius) !important;
}

.nf-next-previous {
  margin-top: var(--space-4) !important;
}

.nf-next-previous input[type="button"] {
  background-color: var(--gray-500) !important;
}

.nf-next-previous input[type="button"]:hover {
  background-color: var(--gray-600) !important;
}

.nf-next-previous input[type="button"].nf-next {
  background-color: var(--gold-600) !important;
}

.nf-next-previous input[type="button"].nf-next:hover {
  background-color: var(--gold-700) !important;
}

/* Date picker */
.ui-datepicker {
  background-color: white !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--space-2) !important;
}

.ui-datepicker .ui-datepicker-header {
  background-color: var(--gold-600) !important;
  color: white !important;
  border-radius: var(--border-radius) !important;
  padding: var(--space-2) !important;
}

.ui-datepicker .ui-datepicker-title {
  font-weight: var(--font-medium) !important;
}

.ui-datepicker th {
  color: var(--text-secondary) !important;
  font-weight: var(--font-medium) !important;
}

.ui-datepicker td {
  padding: var(--space-1) !important;
}

.ui-datepicker td a {
  text-align: center !important;
  padding: var(--space-1) !important;
  border-radius: var(--border-radius) !important;
}

.ui-datepicker td a.ui-state-active {
  background-color: var(--gold-600) !important;
  color: white !important;
}

.ui-datepicker td a:hover {
  background-color: var(--gold-100) !important;
  color: var(--gold-700) !important;
}

/* List items */
.list-select-wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath fill='%23666' d='M0 0h8L4 6z'/%3E%3C/svg%3E") !important;
  background-position: right 1rem center !important;
  background-repeat: no-repeat !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding-right: 2.5rem !important;
}

/* HTML field */
.html-wrap {
  margin-bottom: var(--space-5) !important;
}

/* Kleurvelden */
.nf-field-element input[type="color"] {
  height: var(--space-6) !important;
  min-width: var(--space-8) !important;
  padding: var(--space-1) !important;
}

/* Star rating */
.starrating-wrap .nf-field-element {
  background-color: var(--gray-100) !important;
  padding: var(--space-2) !important;
  border-radius: var(--border-radius) !important;
}

.starrating-wrap .rating {
  color: var(--gold-500) !important;
}

/* Product selection */
.product-wrap .nf-product-field .nf-product-header {
  background-color: var(--gray-100) !important;
  padding: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
  border-radius: var(--border-radius) !important;
}

/* Progress Bar */
.nf-progress-container {
  background-color: var(--gray-200) !important;
  border-radius: var(--border-radius-full) !important;
  height: 8px !important;
  margin-bottom: var(--space-5) !important;
}

.nf-progress {
  background-color: var(--gold-600) !important;
  border-radius: var(--border-radius-full) !important;
  height: 100% !important;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .nf-field-container {
    margin-bottom: var(--space-4) !important;
  }
  
  .nf-field-label {
    margin-bottom: var(--space-1) !important;
  }
  
  .nf-field-element input[type="button"] {
    width: 100% !important;
  }
}


.cta-home {
display: flex;
text-align: left;
gap: var(--space-1);
}
.cta-home div {
flex: 0 45%;
}
.cta-home {
justify-content: space-between;
align-items: stretch;
padding: var(--space-10);
border-radius: var(--border-radius-md);
background: var(--background);
box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.cta__home-section {
background: var(--background-alt);
}
.cta-home__image img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: var(--border-radius-lg);
}

.content-grid {
display: grid;
grid-template-columns: 0.7fr 1fr;
column-gap: var(--space-16);
}
.image-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.image-gallery img:nth-child(1) {
grid-column: 1;
grid-row: 1 / span 2;
}
.image-gallery img:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.image-gallery img:nth-child(3) {
grid-row: 2;
grid-column: 2;
}
.image-gallery br {
display: none;
}
.image-gallery {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
align-items: center;
gap: var(--space-6);
}
.image-gallery img {
aspect-ratio: 1/1.3;
  border-radius: var(--border-radius-xl);
height: auto;
width: 100%;
object-fit: cover;
}



@media only screen and (min-width: 992px) {

.breadcrumbs {
  display: none;
}

  body header > div.wrapper {
    min-height: 225px;
    min-height: 500px;
    height: 70vh;
  }

nav.navbar-default div.navbar-collapse ul.navbar-nav {
  padding: 0 !important;
}

section.intro {
  padding: var(--space-12) 0;
}

 header > div.wrapper div.wrapper img.logo {
    padding: 10px 0;
  }
  nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
    color: var(--text-primary) !important;
    transition: 0.2s !important;
}
header nav.navbar-default ul.navbar-nav .active > a:focus, header nav.navbar-default ul.navbar-nav .active > a:hover, header nav.navbar-default ul.navbar-nav .active > a:visited {
  background: none;
    transition: 0.2s !important;
  color: var(--text-primary) !important;
}
  nav.navbar-default div.navbar-collapse ul.navbar-nav > li a:hover {
    transition: 0.2s !important;
    text-decoration: none !important;
    color: var(--primary) !important;
  }
#menu-item-587 {
float: right;
}
#menu-item-587 a {
color: var(--primary) !important;
    border-radius: var(--border-radius-lg);
}
#menu-item-587 {
border: 1px solid var(--primary);
    border-radius: var(--border-radius-lg);
}
#menu-item-587:hover a {
background: var(--primary) !important;
color: var(--gray-100) !important;
}
  body.home header > div.wrapper {
    min-height: 350px;
    min-height: 80vh;
  }

}

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


.intro_voorNazorg .col-md-24 {
  padding: var(--space-10) var(--space-3);
}

 
html, body {
  overflow-x: hidden;
}

.btn-group.btn-group-horizontal {
  margin-bottom: var(--space-6);
}

header > div.wrapper::after {
    background-position: center 90px;
}

.column:not(div.col-sm-16:nth-child(1) > div:nth-child(1)) {
  margin-top: var(--space-10);
}

body header > div.wrapper {
  min-height: 330px;
  height: 55vh;
  max-height: 410px;
}

.nbs_panel-heading a {
  padding: var(--space-6) var(--space-2) !important;
}

.nbs_panel-group .nbs_panel + .nbs_panel {
  margin-top: var(--space-6);
}
header div.header div.cta {
 display: none;
}

header > div.wrapper {
  min-height: 60vh;
}
.menu-item {
  margin: var(--space-1) var(--space-4);
}

.cta-home {
  flex-direction: column;
  padding: var(--space-4);
}

header nav.navbar-default ul.navbar-nav .active > a:focus, header nav.navbar-default ul.navbar-nav .active > a:hover, header nav.navbar-default ul.navbar-nav .active > a:visited {
color: var(--primary) !important;
}
.current-menu-item, .header nav.navbar-default ul.navbar-nav .current-menu-item.active a {
background: var(--primary-light) !important;
color: var(--primary) !important;
    border-radius: var(--border-radius-lg);
}

/*.navbar-open::after {
  content: "";
  background: hsla(0, 0%, 0%, 0.32);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
}*/

header .social-media.visible-xs.visisble-sm {
  display: none !important;
}
header div.navbar-collapse ul.navbar-nav li a, .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  border-bottom: 0px solid #cba135;
}
header div.navbar-collapse ul {
  padding-left: 0 !important;
}


header .type-fullsize .navbar-collapse {
position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100vh !important;
  transition: opacity .3s cubic-bezier(.46,.03,.52,.96);
  opacity: 0;
    backdrop-filter: none;
    padding-top: 150px;
    background: hsla(0, 0%, 0%, 0.33);
  margin: 0;
}
  header .type-fullsize .navbar-collapse .menu-primaire-navigatie-container {
    height: fit-content !important;
    box-shadow: var(--shadow);
    width: calc(100% - var(--space-4));
    margin: 0;
    left: 50%;
    transition: ;
    transform: ;
    top: 44px;
    text-align: ;
    transform: translate(-50%, 0%);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-light);
    padding-top: 50px;
    z-index: 12;
    position: fixed;
    background: #fff !important;
  }
.content-grid {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
html.navbar-open body.mm-fullsize nav.type-fullsize button.navbar-toggle {
  color: var(--primary);
}
header div.navbar-collapse ul li a {
  color: var(--text-primary) !important;
}

}

.topbar {
background: var(--gray-100);
font-size: var(--text-xs);
}



/*Tabellen*/


/* 
 * Tabel Styling
 * Met grayscale en goud kleurenpalet, gebaseerd op Refactoring UI principes
 */

/* Basis tabel styling */
.table {
  width: 100% !important;
  margin-bottom: var(--space-6) !important;
  color: var(--text-primary) !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background-color: transparent !important;
}




/* Tabel cellen */
.table td {
  padding: var(--space-6) var(--space-3) !important;
  vertical-align: middle !important;
  border-bottom: none !important;
}

/* Behandelingsnaam (eerste kolom) */
.table td:first-child {
  font-weight: var(--font-medium) !important;
}

/* Prijskolom (laatste kolom) */
.table td:last-child {
  font-weight: var(--font-semibold) !important;
  text-align: right !important;
  color: var(--gold-700) !important;
}

.table thead th:last-child {
  text-align: right !important;
}

/* Hover effect voor rijen */
.table-hover tbody tr:hover {
  background-color: var(--gold-100) !important;
}

/* Combi deal sectie extra prominent maken */
.table thead:nth-child(3) th {
}

/* Responsiveness voor kolommen */
/*.col-md-32 {
  width: 70% !important;
}*/

.col-md-8 {
  width: 15% !important;
}

/* Laatste rij afronden */
.table tbody:last-child tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius) !important;
}

.table tbody:last-child tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius) !important;
}

/* Responsive tabel voor mobiel */
@media (max-width: 768px) {
  .table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .col-md-32 {
    min-width: 200px !important;
  }
  
  .table td, .table th {
    white-space: nowrap !important;
  }
  
}

/* Optionele card-achtige styling */
.table-card {
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  background-color: white !important;
}

/* Zebra striping als alternatief voor hover */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--gray-50) !important;
}

/* Tabel caption voor titel */
.table caption {
  padding: var(--space-3) !important;
  caption-side: top !important;
  font-weight: var(--font-bold) !important;
  text-align: left !important;
  color: var(--text-primary) !important;
  font-size: var(--text-lg) !important;
  border-bottom: 1px solid var(--gray-200) !important;
}

/*Veelgestelde vragen*/


/* Pijltje rechts toevoegen */
.nbs_panel-heading a:after {
  content: '\002B' !important; /* Plus teken */
  position: absolute !important;
  right: var(--space-4) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: var(--text-xl) !important;
  color: var(--gold-600) !important;
  font-weight: var(--font-normal) !important;
  transition: all 0.2s ease !important;
}

/* Pijltje veranderen bij open panel */
.nbs_panel-heading a[aria-expanded="true"]:after {
  content: '\2212' !important; /* Min teken */
  transform: translateY(-50%) rotate(0deg) !important;
}