/* ============================================
   Branchepagina's "website laten maken" (/website-laten-maken/vakman/ en /kapsalon/)
   Waarden uit post-3021.css (vakman) en post-4258.css (kapsalon) + de eigen HTML-widgets van het origineel.
   ============================================ */

/* --------------------------------------------
   Sectie-omhulsel: 80px boven/onder, kolom met 24px tussenruimte (kit), mobiel 60px 20px
   -------------------------------------------- */
.wlm-sectie { padding: 80px 0; background-color: var(--color-white); }
.wlm-sectie--creme { background-color: var(--color-cream); }
.wlm-sectie--donker { background-color: var(--color-primary); }
.wlm-sectie__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.wlm-sectie__inner > * { min-width: 0; }
.wlm-sectie__intro {
  width: 100%; max-width: 100%;
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh);
  color: var(--color-primary);
}
.wlm-sectie__intro--45 { width: 45%; max-width: 45%; }
.wlm-sectie__intro--62 { width: 62%; max-width: 62%; }
.wlm-sectie__intro--licht { color: var(--color-white); }
.wlm-kop--zwart { color: #000; }
.wlm-sectie .heading-2 { width: 100%; }

@media (max-width: 767px) {
  .wlm-sectie { padding: 60px 20px; }
  .wlm-sectie__intro--45,
  .wlm-sectie__intro--62 { width: 100%; max-width: 100%; }
  .wlm-problemen .wlm-sectie__inner,
  .wlm-oplossing .wlm-sectie__inner,
  .wlm-rekenen .wlm-sectie__inner { align-items: center; }
  .wlm-werkwijze .wlm-sectie__inner { gap: 20px; }
}

/* Hero (a02acb7 / a0c32e3): component dienst-hero, varianten branche en kapsalon */

/* --------------------------------------------
   Logobalk (component logo-balk): sectie 20px boven/onder; verborgen op mobiel
   -------------------------------------------- */
.wlm-logos { padding: 20px 0; background-color: var(--color-white); }
@media (max-width: 767px) { .wlm-logos { display: none; } }

/* --------------------------------------------
   Rekentool vakman (component rekentool-tabel); sectie 518510f heeft 15px tussenruimte
   -------------------------------------------- */
.wlm-rekenen .wlm-sectie__inner { gap: 15px; }

/* --------------------------------------------
   Sectie-omhulsels van hergebruikte componenten
   -------------------------------------------- */
.wlm-cases { background-color: var(--color-white); padding: 80px 0; }
.wlm-prijzen { background-color: var(--color-cream); padding: 75px 0; }
.wlm-reviews { background-color: var(--color-primary); padding: 80px 0; }
.wlm-reviews__inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; }
@media (max-width: 767px) {
  .wlm-cases { padding: 60px 20px; }
  .wlm-prijzen { padding: 50px 15px; }
  .wlm-reviews { padding: 60px 20px 0; }
  .wlm-reviews__inner { gap: 20px; }
}

/* --------------------------------------------
   Getekende website-onderdelen (kapsalon, eigen widget "fxms2"): drie per scherm, 20px tussenruimte
   -------------------------------------------- */
.wlm-mockups-sectie { padding: 0 0 80px; background-color: var(--color-white); }
.wlm-mockups { width: 100%; }
.wlm-mockups__venster { overflow: hidden; }
.wlm-mockups__rij {
  --gap: 20px;
  display: flex; gap: var(--gap);
  transform: translateX(calc(var(--i, 0) * -1 * ((100% - 2 * var(--gap)) / 3 + var(--gap))));
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.wlm-mockup { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); min-width: 0; }
.wlm-mockups .slider-nav { margin-top: 20px; padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .wlm-mockups__rij { transition: none; } }
@media (max-width: 767px) { .wlm-mockups-sectie { display: none; } }
.wlm-mockups__venster * { box-sizing: border-box; margin: 0px; padding: 0px; }
.fx-sm { width: 100%; height: 200px; position: relative; display: flex; flex-direction: column; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgb(235, 235, 235); border-radius: 12px; transition: transform 0.25s, box-shadow 0.25s; }
.fx-sm-bar { display: flex; align-items: center; gap: 4px; padding: 7px 10px; background: rgb(244, 244, 244); border-bottom: 1px solid rgb(232, 232, 232); flex-shrink: 0; }
.fx-sm-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.fx-sm-dot-r { background: rgb(255, 95, 87); }
.fx-sm-dot-y { background: rgb(254, 188, 46); }
.fx-sm-dot-g { background: rgb(39, 200, 64); }
.fx-sm-url-bar { flex: 1 1 0%; height: 12px; border-radius: 6px; background: rgb(224, 224, 224); margin-left: 5px; }
.wlm-mockup__label { margin-top: 10px; font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; color: rgb(0, 5, 22); text-align: center; }
.fx-team-bg { background: rgb(250, 250, 250); flex: 1 1 0%; padding: 10px 8px; }
.fx-team-head { height: 8px; width: 70px; border-radius: 4px; background: rgb(34, 34, 34); margin-bottom: 10px; }
.fx-team-cards { display: flex; gap: 7px; overflow: hidden; }
.fx-team-card { background: rgb(255, 255, 255); border-radius: 9px; padding: 8px 7px 7px; text-align: center; flex-shrink: 0; width: 62px; box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 8px; border: 1px solid rgb(240, 240, 240); }
.fx-avatar { width: 36px; height: 36px; border-radius: 50%; margin: 0px auto 5px; }
.fx-tc-name { height: 5px; border-radius: 3px; background: rgb(51, 51, 51); margin-bottom: 3px; }
.fx-tc-role { height: 4px; border-radius: 2px; background: rgb(224, 224, 224); width: 65%; margin: 0px auto; }
.fx-tc-tag { height: 13px; border-radius: 7px; margin-top: 6px; }
.fx-price-bg { background: rgb(255, 255, 255); flex: 1 1 0%; padding: 10px 12px; }
.fx-price-head { height: 8px; width: 80px; border-radius: 4px; background: rgb(34, 34, 34); margin-bottom: 10px; }
.fx-price-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0px; border-bottom: 1px solid rgb(240, 240, 240); }
.fx-price-name { height: 5px; border-radius: 3px; background: rgb(51, 51, 51); }
.fx-price-val { height: 5px; width: 28px; border-radius: 3px; background: #ee8432; flex-shrink: 0; }
.fx-price-cat { height: 4px; width: 45px; border-radius: 2px; background: rgb(221, 221, 221); margin-bottom: 6px; }
.fx-book-bg { background: rgb(255, 248, 242); flex: 1 1 0%; padding: 10px; }
.fx-book-head { height: 8px; width: 80px; border-radius: 4px; background: rgb(34, 34, 34); margin-bottom: 8px; }
.fx-book-weekrow { display: flex; gap: 3px; margin-bottom: 6px; }
.fx-book-day { flex: 1 1 0%; border-radius: 5px; padding: 4px 2px; background: rgb(255, 255, 255); border: 1px solid rgb(238, 238, 238); }
.fx-bday-letter { height: 4px; border-radius: 2px; background: rgb(204, 204, 204); margin: 0px auto 3px; width: 10px; }
.fx-bday-num { height: 5px; border-radius: 3px; background: rgb(221, 221, 221); margin: 0px auto; width: 12px; }
.fx-book-day.bk-active { background: #ee8432; border-color: #ee8432; }
.fx-book-day.bk-active .fx-bday-letter, .fx-book-day.bk-active .fx-bday-num { background: rgba(255, 255, 255, 0.85); }
.fx-book-slots { display: flex; gap: 4px; flex-wrap: wrap; }
.fx-slot { width: 38px; height: 16px; border-radius: 8px; background: rgb(255, 255, 255); border: 1px solid rgb(224, 224, 224); }
.fx-slot.sl-orange { background: #ee8432; border-color: #ee8432; }
.fx-slot.sl-taken { background: rgb(240, 240, 240); border-color: rgb(240, 240, 240); }
.fx-rv-bg { background: rgb(255, 255, 255); flex: 1 1 0%; padding: 10px 12px; }
.fx-rv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fx-rv-score { font-family: "Red Hat Display", sans-serif; font-size: 22px; font-weight: 900; color: rgb(34, 34, 34); line-height: 1; }
.fx-rv-right { display: flex; flex-direction: column; gap: 2px; }
.fx-rv-stars { font-size: 11px; color: rgb(255, 193, 7); letter-spacing: 1px; }
.fx-rv-count { font-size: 8px; color: rgb(170, 170, 170); }
.fx-rv-card { background: rgb(250, 250, 250); border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; border: 1px solid rgb(240, 240, 240); }
.fx-rv-card-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.fx-rv-av { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.fx-rv-nm { height: 5px; width: 45px; border-radius: 3px; background: rgb(51, 51, 51); }
.fx-rv-st { font-size: 8px; color: rgb(255, 193, 7); margin-left: auto; }
.fx-rv-line { height: 4px; border-radius: 2px; background: rgb(224, 224, 224); margin-bottom: 2px; }
.fx-mobile-bg { background: rgb(30, 30, 46); flex: 1 1 0%; display: flex; align-items: center; justify-content: center; }
.fx-phone { width: 72px; height: 116px; border-radius: 16px; border: 3px solid rgba(255, 255, 255, 0.2); background: rgb(255, 255, 255); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 32px; }
.fx-phone-notch { height: 8px; background: rgb(244, 244, 244); display: flex; align-items: center; justify-content: center; }
.fx-phone-notch-dot { width: 12px; height: 4px; border-radius: 2px; background: rgb(221, 221, 221); }
.fx-phone-hero { height: 46px; background: linear-gradient(135deg, #ee8432 0%, rgb(200, 98, 26) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.fx-phone-logo-bar { width: 40px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); }
.fx-phone-tagline { width: 55px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
.fx-phone-body { padding: 6px 5px; }
.fx-phone-h { height: 6px; border-radius: 3px; background: rgb(34, 34, 34); margin-bottom: 4px; }
.fx-phone-p { height: 4px; border-radius: 2px; background: rgb(224, 224, 224); margin-bottom: 3px; }
.fx-phone-cta { height: 16px; border-radius: 9px; background: #ee8432; margin-top: 4px; }

/* --------------------------------------------
   Kapsalon: "Wat wij anders doen" (1f871fc) heeft 40px onderpadding
   -------------------------------------------- */
.wlm-anders { padding-bottom: 40px; }
@media (max-width: 767px) {
  .wlm-anders { padding-bottom: 60px; }
  .wlm-anders .wlm-sectie__inner,
  .wlm-rekenen-kap .wlm-sectie__inner { align-items: center; }
}

/* --------------------------------------------
   Kapsalon: demosite aanvragen (6c174d6) — breedte 1280, 6% boven/onder, tekst 50% + formulier 30%
   -------------------------------------------- */
.wlm-demo { padding: 6% 0; background-color: var(--color-cream); }
.wlm-demo__inner {
  --container: 1280px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 72px;
}
.wlm-demo__tekst { display: flex; flex-direction: column; justify-content: center; gap: 24px; width: 50%; min-width: 0; }
.wlm-demo__form { display: flex; flex-direction: column; width: 30%; min-width: 0; }
.wlm-demo__punten {
  margin-top: 19px;
  --icoon-maat: 16px; --icoon-box: 20px; --icoon-uitlijning: flex-end; --icoon-verschuiving: -4px; --ruimte: 12px;
  --tekst-font: var(--font-ui); --tekst-maat: 16px; --tekst-gewicht: 400; --tekst-lh: 1.7em; --tekst-kleur: var(--color-primary);
  --icoon-kleur: var(--color-accent);
}

/* Formulier (Elementor-formulier 15911fb): labels Red Hat Display 17/800, velden 40px hoog, knop 1/3 breed */
.wlm-form__honeypot { display: none; }
.wlm-form__velden { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.wlm-form__groep { display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin-bottom: 10px; padding: 0 5px; }
.wlm-form__label {
  display: block; padding-bottom: 7px;
  font-family: var(--font-heading); font-size: 17px; font-weight: 800; line-height: 1.08; color: var(--color-primary);
  cursor: pointer;
}
.wlm-form__veld {
  display: block; flex: 1 1 100%; width: 100%; max-width: 100%; min-height: 40px;
  padding: 8px 16px; border: 1px solid #69727d; border-radius: 3px;
  background-color: var(--color-white); color: #1f2124;
  font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.4;
  vertical-align: middle;
}
.wlm-form__veld--tekst { padding: 5px 14px; resize: vertical; }
.wlm-form__veld::placeholder { color: inherit; font-family: inherit; opacity: 0.6; }
.wlm-form__veld:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.wlm-form__groep--knop { width: 33.333%; align-items: flex-end; }
.wlm-form__knop {
  min-height: 40px; padding: 13px 26px; border: 0; border-radius: 7px;
  background-color: var(--color-accent); color: var(--color-white);
  font-family: var(--font-ui); font-size: 17px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  cursor: pointer; transition: all 0.3s;
}
.wlm-form__knop:hover, .wlm-form__knop:focus { background-color: #0a0705; border-radius: 5px; } /* kit-knop hover */
.wlm-form__knop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 1024px) {
  .wlm-demo { padding: 50px 30px 75px; }
}
@media (max-width: 767px) {
  .wlm-demo { padding: 30px 20px 60px; }
  .wlm-demo__inner { flex-direction: column; justify-content: center; align-items: flex-start; gap: 50px; }
  .wlm-demo__tekst { width: 100%; justify-content: flex-start; align-items: flex-start; }
  .wlm-demo__form { width: 100%; align-items: center; }
  .wlm-demo__punten { margin-top: 0; width: 100%; --icoon-uitlijning: center; --icoon-verschuiving: 0px; --ruimte: 14px; --tekst-lh: 1.2em; }
  .wlm-form__groep--knop { width: 100%; }
  .wlm-form__knop { width: 100%; padding: 11px 22px; }
}

/* --------------------------------------------
   Kapsalon: rekentool (eigen widget "kap2")
   -------------------------------------------- */
.kap-rt {
  display: grid; grid-template-columns: 1fr 1fr; width: 100%;
  background: var(--color-primary); overflow: hidden;
  font-family: var(--font-ui); color: var(--color-white);
}
.kap-rt > * { min-width: 0; }
.kap-rt__links { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.kap-rt__rechts { display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; }
.kap-rt__veld { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; }
.kap-rt__uitkomst { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: center; }
.kap-rt__veld:last-child { border-bottom: 0; } /* de derde uitkomst houdt zijn lijn (in het origineel is de voetnoot het laatste kind) */
.kap-rt__label {
  display: block; margin: 0 0 6px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4); cursor: default;
}
.kap-rt__waarde {
  display: block; margin-bottom: 16px;
  font-family: var(--font-heading); font-size: 32px; font-weight: 900; line-height: 1; color: var(--color-accent);
}
.kap-rt__schuif {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; margin: 0 0 8px; border-radius: 2px; outline: none; cursor: pointer;
}
.kap-rt__schuif::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-accent); box-shadow: rgba(238, 131, 49, 0.5) 0 2px 8px; cursor: pointer; transition: transform 0.15s;
}
.kap-rt__schuif::-moz-range-thumb {
  width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: var(--color-accent); box-shadow: rgba(238, 131, 49, 0.5) 0 2px 8px; cursor: pointer;
}
.kap-rt__schuif::-webkit-slider-thumb:hover { transform: scale(1.15); }
.kap-rt__schuif:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }
.kap-rt__minmax { display: flex; justify-content: space-between; font-size: 12px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.3); }
.kap-rt__val {
  margin: 0 0 4px;
  font-family: var(--font-heading); font-size: 32px; font-weight: 900; line-height: 1; color: var(--color-white);
}
.kap-rt__val--hl { color: var(--color-accent); }
.kap-rt__sub { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, 0.35); }
.kap-rt__noot { margin-top: 16px; font-size: 11px; font-weight: 500; line-height: 1.6; text-align: center; color: rgba(255, 255, 255, 0.55); }
@media (max-width: 768px) {
  .kap-rt { grid-template-columns: 1fr; }
  .kap-rt__links { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
}

/* --------------------------------------------
   Kapsalon: boekingssystemen (d863ca4) — twee kolommen die samen krimpen (beide 100% breed, zoals Elementor)
   -------------------------------------------- */
.wlm-boek__inner { display: flex; align-items: center; gap: 24px; }
.wlm-boek__tekst { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.wlm-boek__badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; font-family: var(--font-ui); }
.wlm-boek__badge,
.wlm-boek__meer {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px;
  background: var(--color-white);
  font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--color-primary);
  transition: box-shadow 0.2s, transform 0.2s;
}
.wlm-boek__badge img { display: block; width: auto; height: 20px; }
.wlm-boek__grijs { filter: grayscale(100%); }
.wlm-boek__badge--uitgelicht { border: 1.5px solid var(--color-accent); }
.wlm-boek__meer { border-color: rgba(0, 0, 0, 0.12); background: transparent; line-height: 1; cursor: default; }
@media (hover: hover) {
  .wlm-boek__badge:hover { box-shadow: rgba(0, 0, 0, 0.08) 0 4px 16px; transform: translateY(-2px); }
}
.wlm-boek__partner {
  display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0;
  padding: 30px; border-radius: 12px; background: var(--color-primary);
}
.wlm-boek__lockup { display: inline-flex; align-items: center; gap: 14px; }
.wlm-boek__lockup img { display: block; width: auto; height: 24px; border-radius: 0; filter: brightness(0) invert(1); }
.wlm-boek__x { font-family: Georgia, serif; font-size: 18px; font-weight: 400; font-style: italic; line-height: 1; color: rgba(255, 255, 255, 0.3); }
.wlm-boek__titel {
  margin: 0; font-family: var(--font-heading); font-size: var(--h-text-size); font-weight: 700; line-height: var(--h-text-lh);
  color: var(--color-white);
}
.wlm-boek__uitleg { font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh); color: var(--color-white); }
@media (max-width: 768px) {
  .wlm-boek__badges { gap: 6px; }
  .wlm-boek__badge, .wlm-boek__meer { gap: 6px; padding: 6px 10px; border-radius: 7px; font-size: 11px; }
  .wlm-boek__badge img { height: 14px; }
}
@media (max-width: 767px) {
  .wlm-boek__inner { flex-direction: column; align-items: center; }
}

/* --------------------------------------------
   Kapsalon: reviews op wit (970c1aa)
   -------------------------------------------- */
@media (max-width: 767px) {
  .wlm-reviews-licht .wlm-sectie__inner { gap: 20px; }
}

/* Kapsalon: resultaten staan in het origineel als losse widgets in de sectie (geen template 4953),
   dus zonder de extra binnenpadding die .cases op mobiel heeft */
@media (max-width: 767px) {
  .wlm-cases--los .cases { padding: 0; }
}

/* Kapsalon: de prijstabel is in het origineel een losse kopie van template 1336 direct in de sectie,
   waardoor kop, kaarten en "Combineer met" 30px uit elkaar staan (template: 24px, mobiel 50px) */
.wlm-prijzen--los .prijslijst { gap: 30px; }