/* ============================================================
   CHRIS beauty bar — eigen overrides voor de statische site
   (aanpassingen bovenop de originele WordPress/Elementor-CSS)
   ============================================================ */

/* Upgrade-items in prijslijsten tonen als een ingesprongen
   bullet-lijst onder de behandeling (i.p.v. het losse "+"-icoon). */
.bdt-price-list-item:has(i.fa-plus) {
  padding-left: 1.5rem;
}
.bdt-price-list-item:has(i.fa-plus) .fa-plus {
  display: none;
}
.bdt-price-list-item:has(i.fa-plus) .bdt-price-list-title::before {
  content: "•";
  color: rgb(245, 69, 63); /* merk-coral */
  font-weight: 700;
  margin-right: 0.55em;
}

/* Cookie-melder in merk-coral i.p.v. het standaard groen. */
#cookie-law-info-bar #cookie_action_close_header,
#cookie-law-info-bar .cli_action_button,
#cookie-law-info-bar .wt-cli-accept-btn,
#cookie-law-info-bar .wt-cli-accept-all-btn {
  background-color: rgb(245, 69, 63) !important;
  border-color: rgb(245, 69, 63) !important;
  color: #fff !important;
}
#cookie-law-info-bar .cli_settings_button,
#cookie-law-info-bar a.cli_settings_button {
  color: rgb(245, 69, 63) !important;
}

/* Footer: Cadeaubon/Webshop-kolom weg; de 3 info-kolommen
   (Adres, Contact, Openingstijden) gelijk verdeeld; logo-strip eronder. */
.footer-adv-widget-4 {
  display: none !important;
}
.footer-adv-widget-1,
.footer-adv-widget-2,
.footer-adv-widget-3 {
  width: 33.3333% !important;
  max-width: 33.3333% !important;
}
.footer-adv-widget-5 {
  clear: both;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center;
  padding-top: 2rem;
}

/* "Bel mij terug" vervangen door contactknoppen (advieswijzer). */
.ha-contact-intro { margin: 0.5rem 0 1rem; }
.ha-callback .ha-btn {
  display: inline-block;
  margin: 0.4rem 0.5rem 0.4rem 0;
  padding: 0.7em 1.2em;
  background: rgb(245, 69, 63);
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 4px;
}
.ha-callback .ha-btn:hover { opacity: 0.9; }

/* ============================================================
   Afspraak-maken: strakke, gecentreerde Salonized-boekingswidget.
   De Salonized-standalone-pagina toont z'n boekingsformulier in een
   gecentreerde ~500px-widget op een bijna-witte achtergrond (#F9FAFC).
   We halen het gedateerde grijze 2px-kader weg en laten de iframe de
   widget strak omsluiten als een licht, modern kaartje.
   (Geldt voor /afspraak-maken/ en /chris-beauty-advieswijzer/.)
   ============================================================ */
.chris-afsprak-iframe {
  border: 0 !important;
}
/* Het Salonized-formulier is een VASTE 500px (kleiner venster = responsive).
   Alles breder dan 500 geeft lege ruimte eromheen; daarom omsluiten we het
   kaartje strak op 500px en centreren het binnen z'n kolom. */
.chris-afsprak-iframe iframe {
  max-width: 500px;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  background: #fff;
}
/* Het 500px-kaartje gecentreerd binnen z'n kolom. De kolomverhoudingen
   blijven het origineel (boeking 60% / promo 40%); omdat het Salonized-
   formulier vast 500px is, staat er onvermijdelijk wat witruimte naast —
   centreren maakt die symmetrisch i.p.v. een scheve marge aan één kant.
   (!important overrulet Elementor's margin:0 op dit element.) */
.chris-afsprak-iframe .elementor-widget-container {
  max-width: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   MOBIEL (≤767px) — losse verbeteringen.
   ============================================================ */
@media (max-width: 767px) {
  /* Footer: de 3 info-kolommen (Adres/Contact/Openingstijden) netjes
     STAPELEN i.p.v. geperst op 3× 33%. */
  .footer-adv-widget-1,
  .footer-adv-widget-2,
  .footer-adv-widget-3 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Home-hero op mobiel: de salonfoto als sectie-achtergrond. De mobiele hero
     is sectie 818ef89 (3vfx5aa is de desktop-versie en klapt op mobiel dicht,
     vandaar dat de foto daar niet verscheen). Het lichte tekstpaneel maken we
     doorschijnend zodat de foto doorkomt maar de tekst leesbaar blijft. */
  .elementor-908 .elementor-element.elementor-element-818ef89 {
    background-image: url("/media/uploads/2024/04/CHRIS_BEAUTYBAR_1A_AOS9568F-e1589988360167.webp") !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .elementor-908 .elementor-element.elementor-element-818ef89 > .elementor-container {
    min-height: auto !important;
  }
  .elementor-908 .elementor-element.elementor-element-818ef89 .elementor-element-populated {
    background-color: rgba(244, 244, 244, 0.5) !important;
  }
}

/* ============================================================
   HEADER — grijze balk weg; social-iconen in het hoofdmenu;
   mobiele koptekst compacter.
   ============================================================ */
/* De grijze adresbalk bovenaan verdwijnt. Het adres staat nog in de
   footer én (op mobiel) bovenin het uitklapmenu, dus niks gaat verloren. */
.elementor-element-4a987a5 {
  display: none !important;
}

/* Social-iconen (Facebook/Instagram) zijn via custom.js verhuisd naar het
   hoofdmenu, vlak vóór de "Afspraak maken"-knop. Netjes op één lijn met de
   menu-items, met wat lucht ernaast. */
.elementor-element-23b088f {
  display: flex !important;
  align-items: center;
  margin: 0 16px 0 8px;
}
.elementor-element-23b088f .elementor-icon-list-items {
  display: flex !important;
  align-items: center;
  margin: 0;
  padding: 0;
}
.elementor-element-23b088f .elementor-icon-list-item {
  margin: 0 !important;
}

/* Kloon van de social onderaan het mobiele uitklapmenu (donkere popup):
   iconen wit zodat ze zichtbaar zijn tegen de donkere achtergrond. */
.chris-menu-social {
  padding: 28px 0 16px 20px; /* uitlijnen met de menu-items (die staan op ~20px) */
}
.chris-menu-social .elementor-element-23b088f {
  margin: 0 !important;
}
.chris-menu-social .elementor-icon-list-items {
  display: flex !important;
  gap: 24px;
  margin: 0 !important; /* Elementor's negatieve inline-marge overrulen */
  padding: 0 !important;
  justify-content: flex-start;
}
.chris-menu-social .elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;
}
.chris-menu-social .elementor-icon-list-icon a,
.chris-menu-social .elementor-icon-list-icon svg,
.chris-menu-social svg {
  color: #fff !important;
  fill: #fff !important;
  width: 24px;
  height: 24px;
}

@media (max-width: 1024px) {
  /* Mobiel én tablet: logo, "Afspraak maken"-knop en hamburger op ÉÉN regel —
     logo links, knop + hamburger rechts uitgelijnd. Op tablet stapelde de
     header verticaal en viel hij over de content eronder; één compacte
     regel lost dat op. */
  .elementor-element-533b83f > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Logo links; margin-right:auto duwt knop + hamburger naar rechts. */
  .elementor-element-533b83f > .e-con-inner > .elementor-element-91b9a7a {
    flex: 0 1 auto !important;
    margin-right: auto !important;
    max-width: 120px !important;
  }
  /* De logo-afbeelding binnen z'n cel houden — anders puilt de sierstaart
     uit en overlapt hij de "Afspraak maken"-knop. */
  .elementor-element-533b83f .elementor-element-91b9a7a img {
    max-width: 100% !important;
    height: auto !important;
  }
  .elementor-element-533b83f > .e-con-inner > .elementor-element-7d4128cf,
  .elementor-element-533b83f > .e-con-inner > .elementor-element-54542bcb {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  /* Afspraak-knop compacter zodat alles op één regel past. */
  .elementor-element-533b83f .elementor-element-7d4128cf .elementor-button {
    padding: 12px 16px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   Rode bovenbalk: open/gesloten-status links, parkeertekst rechts.
   ============================================================ */
.sticky-notification {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding-left: 24px;
  padding-right: 24px;
}
.sticky-notification a {
  margin: 0;
}
.sticky-notification .chris-parking {
  white-space: nowrap;
  font-size: 18px;
}
@media (max-width: 767px) {
  /* Op smalle schermen past het niet naast elkaar: netjes gestapeld,
     gecentreerd (status boven, parkeren eronder). */
  .sticky-notification {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    text-align: center;
    /* rechts ruimte vrijhouden voor de vaste NL/EN-pill; het thema geeft de
       balk een vaste hoogte van 50px — laat hem meegroeien als de tekst
       door die ruimte over meer regels valt */
    height: auto !important;
    min-height: 50px;
    padding: 7px 92px 8px 14px;
    line-height: 1.3;
  }
  .sticky-notification a {
    font-size: 15px;
  }
  .sticky-notification .chris-parking {
    white-space: normal;
    font-size: 12px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablet: rechts ruimte vrijhouden voor de vaste NL/EN-pill. */
  .sticky-notification {
    padding-right: 110px;
  }
}

/* ============================================================
   Sticky menu: de header blijft bovenaan plakken bij het scrollen
   (de rode balk scrollt gewoon weg).
   ============================================================ */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* ============================================================
   Sitemap-pagina (/sitemap/): schone, gegroepeerde paginalijst
   (vervangt de kapotte WordPress-XML-viewer).
   ============================================================ */
.chris-sitemap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.chris-sitemap h1 {
  margin: 0 0 8px;
}
.chris-sitemap-intro {
  margin: 0 0 40px;
  opacity: 0.7;
}
.chris-sitemap-group {
  margin: 0 0 40px;
}
.chris-sitemap-group h2 {
  font-size: 1.3rem;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(245, 69, 63, 0.25);
}
.chris-sitemap-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 36px;
}
.chris-sitemap-group li {
  margin: 0 0 11px;
  break-inside: avoid;
}
.chris-sitemap-group a {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.chris-sitemap-group a:hover {
  color: rgb(245, 69, 63);
  border-bottom-color: rgb(245, 69, 63);
}
@media (max-width: 900px) {
  .chris-sitemap-group ul { columns: 2; }
}
@media (max-width: 600px) {
  .chris-sitemap-group ul { columns: 1; }
  .chris-sitemap { padding: 32px 18px 48px; }
}

/* ---- Taalwisselaar NL/EN ----
   Desktop: inline in het hoofdmenu, vlak vóór "Afspraak maken" (lang-inline).
   Mobiel: vaste pill rechtsboven wanneer de nav-knop verborgen is (lang-fixed). */
.lang-switch{display:flex;align-items:center;gap:6px;font-family:inherit;font-weight:700;line-height:1}
.lang-switch a{text-decoration:none}
.lang-switch a.is-active{pointer-events:none}
.lang-switch .sep{opacity:.45}

/* inline in de nav — duidelijk zichtbaar, actieve taal in huisstijl-rood */
.lang-switch.lang-inline{margin-right:20px;font-size:15px;letter-spacing:.5px}
.lang-switch.lang-inline a{color:#8a8a8a;padding:2px}
.lang-switch.lang-inline a.is-active{color:#F5453F}
.lang-switch.lang-inline a:hover{color:#111}

/* mobiele fallback: vaste pill rechtsboven */
.lang-switch.lang-fixed{position:fixed;top:10px;right:12px;z-index:99999;
  background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.12);border-radius:999px;
  padding:5px 12px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lang-switch.lang-fixed a{color:#8a8a8a}
.lang-switch.lang-fixed a.is-active{color:#111}
@media (min-width:1025px){.lang-switch.lang-fixed{display:none}}   /* desktop: alleen inline in de nav */
@media (max-width:1024px){.lang-switch.lang-inline{display:none}}  /* mobiel: alleen de vaste pill */

/* ---- Homepage-hero: tekstblok verticaal hoger/gecentreerd op desktop ----
   Het blok stond laag door ruimte boven de kolom; op desktop trekken we het omhoog. */
@media (min-width:1025px){
  body.home .elementor-element-h991bof{ margin-top:-160px !important; }
}

/* ---- Reviews (testimonial-sliders) site-breed verbergen ---- */
.testimonial-wrapper{ display:none !important; }

/* ============================================================
   Sticky-header logo: 20% kleiner in rust, 50% kleiner bij scroll.
   Basis-logobreedte was 164px (Elementor inline). 20% kleiner = 131px;
   50% kleiner = 82px. Geldt voor beide site-logo-widgets in de header
   (desktop + mobiel). De scroll-state komt van body.chris-scrolled
   (gezet door custom.js). Vloeiende overgang bij het krimpen.
   ============================================================ */
header.elementor-location-header .elementor-widget-theme-site-logo img {
  width: 131px !important;
  transition: width 0.28s ease;
}
body.chris-scrolled header.elementor-location-header .elementor-widget-theme-site-logo img {
  width: 82px !important;
}

/* ============================================================
   Compacte sticky header bij scroll. Naast het kleinere logo
   (zie hierboven) krimpt de balk zelf: de mega-menu-items hebben
   in rust 50px verticale padding (dat bepaalt de hoogte). Bij
   body.chris-scrolled brengen we die terug + iets minder padding
   op de logo-/nav-kolommen, zodat de hele header lager wordt.
   Vloeiende overgang (0.28s) gelijk aan het logo.
   ============================================================ */
header.elementor-location-header .e-n-menu-title,
header.elementor-location-header .elementor-element-39863390,
header.elementor-location-header .elementor-element-3ebed3a8 {
  transition: padding 0.28s ease;
}
body.chris-scrolled header.elementor-location-header .e-n-menu-title {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
body.chris-scrolled header.elementor-location-header .elementor-element-39863390,
body.chris-scrolled header.elementor-location-header .elementor-element-3ebed3a8 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* ---- Nav-layout: ruimte maken voor de inline taalwisselaar ----
   De taalwisselaar links van "Afspraak maken" kostte breedte, waardoor het
   mega-menu wrapte en de social-icons verticaal stapelden. We houden het
   mega-menu en de social-icons op hun natuurlijke breedte (niet laten krimpen);
   er is genoeg ruimte in de nav-kolom (logo is immers kleiner). Alleen desktop. */
@media (min-width:1025px){
  .elementor-element-18b074d0{ flex-shrink:0 !important; }                 /* mega-menu 1 regel */
  .elementor-element-23b088f{ flex-shrink:0 !important; }                  /* social-icons niet knijpen */
  .elementor-element-23b088f .elementor-icon-list-items{ flex-wrap:nowrap !important; } /* social horizontaal */
}

/* ---- Footer merkenstrook: uniforme logo-hoogtes ----
   De maat-regels voor de footerlogo's stonden alleen in een mobile media query
   (max-width 767px); op desktop renderden Skintech (661px) en Compagnie de
   Provence (1831px) op natuurlijke grootte en klapten de logo's tegen elkaar. */
.footerLogoWrapper .custom-html-widget {
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px 32px !important;
}
.footerLogoWrapper .custom-html-widget a { flex-shrink: 0 !important; line-height: 0; }
img.footerImage {
  height: 28px !important;
  width: auto !important;
  margin: 0 !important;
  vertical-align: middle;
  display: inline-block;
}
img.footerImage.skinvignet-logo { height: 64px !important; }
img.footerImage.beautyangel-logo { height: 20px !important; }
img.footerImage.opi-logo { height: 24px !important; }

/* ---- Tussenruimte waar voorheen een prijslijst stond ----
   Prijzen staan sinds 31 juli alleen nog op /prijzen/ (bron: Salonized).
   Zonder deze ruimte plakt de tekst tegen het volgende blok aan. */
.chris-prijslijst-spacer {
  display: block;
  width: 100%;
  height: 48px;
}
@media (max-width: 767px) {
  .chris-prijslijst-spacer { height: 32px; }
}

/* ---- Menu-popup boven de NL/EN-pill ----
   De vaste taal-pill (z-index 99999) viel over het sluitkruisje van het
   mobiele menu; de popup hoort bovenop. */
#elementor-popup-modal-26241 { z-index: 100001 !important; }

/* ---- NL/EN-pill verdwijnt bij scroll (mobiel/tablet) ----
   Bij scroll plakt de header bovenaan en stond de vaste pill over de
   'Afspraak maken'-knop en de hamburger. De taalkeuze hoort bij de rode
   balk bovenaan; zodra die wegscrollt, fadet de pill mee weg. */
@media (max-width: 1024px) {
  .lang-switch.lang-fixed {
    transition: opacity 0.25s ease;
  }
  body.chris-scrolled .lang-switch.lang-fixed {
    opacity: 0;
    pointer-events: none;
  }
}

/* ---- Chris-logo in merk-koraal ----
   Het logo is een zwarte PNG; deze filterketen kleurt hem #F5453F
   (empirisch bepaald: gemeten resultaat rgb(244,68,63)). Alleen het
   header-logo — de grijze varianten in footer en menu-popup blijven. */
.elementor-element-91b9a7a img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(100%) saturate(1400%) hue-rotate(-24deg) brightness(96%);
}