/* ==========================================================================
   ReBalans · SimplyBook custom CSS · v2.8 · 7 October 2026
   --------------------------------------------------------------------------
   Replaces the old custom CSS completely: delete the old code first, then
   paste this whole file. Sections:
     1  Design tokens          8  Booking: cards
     2  Base & typography      9  Booking: detail popup
     3  Header & navigation   10  Booking: calendar & time slots
     4  Hero                  11  Forms & buttons
     5  Home page blocks      12  Other pages
     6  Cookie banner         13  Tablet & phone layout
     7  Booking: steps        14  Kept from the old file
                              15  Entrance animations
                              16  Over ons block (over-ons.html)
   Colors: change them only in section 1 and everything follows.
   ========================================================================== */


/* 1 ─ DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
  --rb-page:      #120B06;   /* page background                          */
  --rb-card:      #1E140C;   /* cards, menus, popups                     */
  --rb-raised:    #2A1D12;   /* inputs, time slots, hover surfaces       */
  --rb-line:      #8A6E58;   /* borders & input edges (3.5:1 on raised)  */
  --rb-line-soft: rgba(138, 110, 88, .35);
  --rb-text:      #F3E9DA;   /* main text (15:1 on cards)                */
  --rb-muted:     #C9B79C;   /* secondary text (9:1 on cards)            */
  --rb-accent:    #D99A4E;   /* buttons, links, highlights               */
  --rb-accent-hi: #E6AE68;   /* hover                                    */
  --rb-on-accent: #1C0D00;   /* text on accent (7.9:1)                   */

  --rb-r-sm: 6px;            /* buttons, inputs, tags, slots             */
  --rb-r-lg: 12px;           /* cards, panels, popups                    */

  --rb-serif: "PlayfairDisplay", Georgia, "Times New Roman", serif;
  --rb-sans:  "PT-Sans", "PT Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: dark;        /* native controls & scrollbars in dark mode */
}


/* 2 ─ BASE & TYPOGRAPHY ───────────────────────────────────────────────── */
body,
#main-content,
#sb_content,
#content-view {
  background: var(--rb-page) !important;
  color: var(--rb-text) !important;
  font-family: var(--rb-sans);
}
/* The theme's sections are white boxes; behind our rounded cards they
   showed as white corners (calendar, time slots) */
div.section,
section.section { background-color: transparent !important; }

/* Serif for headings only, always sentence case */
.title-main,
.cap,
#custom-page h2 {
  font-family: var(--rb-serif) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--rb-text) !important;
}

/* Text pasted into descriptions: one size, no random italics or colors */
.txt span[style],
#about-us span[style] { font-size: inherit !important; }
.txt i, .txt em { font-style: normal !important; }
.txt span[style*="color"] { color: inherit !important; }

/* One tag style for "Targeted Relaxation", "Luxury Massage", etc. */
.txt span[style*="background-color"] {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 9px;
  background: transparent !important;
  color: var(--rb-accent) !important;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-sm);
  font: 600 12px/1.4 var(--rb-sans) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--rb-accent) !important;
  outline-offset: 2px;
}


/* 3 ─ HEADER & NAVIGATION ─────────────────────────────────────────────── */
#header {
  background: linear-gradient(to bottom, rgba(18, 11, 6, .8), rgba(18, 11, 6, 0)) !important;
}

#sb_menu .nav > li > a {
  font: 500 15px var(--rb-sans) !important;
  color: var(--rb-text) !important;
  text-transform: none !important;
}
/* Hover: the text warms to gold with a soft glow, and a thin gold line
   grows out from the centre beneath it */
#header .nav-wrapper #sb_menu .nav li a {
  position: relative;
  transition: color .35s ease, text-shadow .35s ease;
}
#sb_menu .nav > li > a:hover,
#sb_menu .nav > li > a:focus-visible {
  color: var(--rb-accent-hi) !important;
  text-shadow: 0 0 18px rgba(217, 154, 78, .45);
}
#header .nav-wrapper #sb_menu .nav li a::before { display: none !important; }
#header .nav-wrapper #sb_menu .nav li a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 6px !important;
  width: 56% !important;
  height: 2px !important;
  margin: 0 !important;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--rb-accent), transparent) !important;
  transform: translateX(-50%) scaleX(0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1) !important;
}
#header .nav-wrapper #sb_menu .nav li a:hover::after,
#header .nav-wrapper #sb_menu .nav li a:focus-visible::after { transform: translateX(-50%) scaleX(1); }

/* "Meer" dropdown */
#header .nav-wrapper #sb_menu .nav #sb_appended_menu_item ul {
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft);
  border-radius: var(--rb-r-lg);
  padding: 6px 0;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#sb_appended_child_menu li,
#sb_appended_child_menu a { border-color: transparent !important; }
#sb_appended_child_menu a {
  font: 500 15px var(--rb-sans) !important;
  color: var(--rb-text) !important;
  padding: 9px 18px !important;
  box-shadow: inset 0 0 0 var(--rb-accent);
  transition: padding .3s cubic-bezier(.22, .61, .36, 1), background-color .3s, color .3s, box-shadow .3s !important;
}
#sb_appended_child_menu a:hover {          /* slides right, with a gold edge */
  padding-left: 24px !important;
  color: var(--rb-accent-hi) !important;
  background: var(--rb-raised) !important;
  box-shadow: inset 2px 0 0 var(--rb-accent);
}

/* Hide the empty Team page from the menu.
   DELETE THIS RULE (and its twin in section 13) as soon as the Team page has content. */
#sb_menu li:has(> a[href="#page/team"]) { display: none !important; }

/* Built-in header "Book" button (SimplyBook hides it by default) */
#book-btn { display: flex !important; align-items: center; }
#book-btn img { display: none !important; }
#header #book-btn,
#header #book-btn .book-btn-container,
#header #book-btn .item-container {        /* stronger than the 44px icon rule below */
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
}
#book-btn a {
  display: inline-flex !important;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--rb-r-sm);
  background: var(--rb-accent);
  color: var(--rb-on-accent) !important;
  font: 600 15px var(--rb-sans);
  text-decoration: none !important;
  white-space: nowrap;
}
#book-btn a::after { content: "Boek nu"; }
#book-btn a { transition: background-color .3s, box-shadow .3s, transform .3s cubic-bezier(.22, .61, .36, 1); }
#book-btn a:hover {
  background: var(--rb-accent-hi);
  box-shadow: 0 8px 24px rgba(217, 154, 78, .35);
  transform: translateY(-1px);
}
/* not needed while someone is already booking */
body:has(#sb-timeline) #book-btn { display: none !important; }

/* Cart & account icons */
#header .items-wrapper .item-container,
#header .nav-trigger.toggle-mnu {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--rb-r-sm) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: var(--rb-text) !important;
}
#header .items-wrapper .item-container,
#header .nav-trigger.toggle-mnu { transition: border-color .3s, background-color .3s, box-shadow .3s; }
#header .items-wrapper .item-container:hover,
#header .nav-trigger.toggle-mnu:hover {
  border-color: var(--rb-accent) !important;
  background-color: rgba(217, 154, 78, .12) !important;
  box-shadow: 0 0 18px rgba(217, 154, 78, .25);
}
/* The theme draws these icons as images and switches to black versions
   below 1025px (made for its orange squares): keep the white ones everywhere */
#header .items-wrapper #sb_cart.nav-item .cart-container .item-container,
#header .items-wrapper #sb_client_info.nav-item .item-container .logged-out {
  background-color: transparent !important;
  background-size: 24px auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#header .items-wrapper #sb_cart.nav-item .cart-container .item-container { background-image: url("/v2/themes/classic/img/ics/basket.svg") !important; }
#header .items-wrapper #sb_client_info.nav-item .item-container .logged-out { background-image: url("/v2/themes/classic/img/ics/client-login.svg") !important; }
.sb-cart-btn .counter.sb-qty {
  top: -7px !important;                   /* top-right corner of the button */
  right: -7px !important;
  left: auto !important;
  background: var(--rb-accent) !important;
  color: var(--rb-on-accent) !important;
  font: 700 11px var(--rb-sans) !important;
}


/* 4 ─ HERO ────────────────────────────────────────────────────────────── */
#main-buttons .company-name {
  font-family: var(--rb-serif) !important;
  font-size: clamp(44px, 6vw, 68px) !important;
  line-height: 1.05 !important;
  text-transform: none !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .55);
}
#main-buttons .wrapper .inner .company-name::after {   /* the theme draws a white bar here */
  content: "Massage & Beauty" !important;
  display: block !important;
  width: fit-content !important;
  height: auto !important;
  margin: 14px auto 32px !important;
  padding: 14px 0 0 !important;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid rgba(243, 233, 218, .5) !important;
  color: var(--rb-text) !important;
  font: 400 clamp(18px, 2.1vw, 24px)/1.3 var(--rb-serif) !important;
  letter-spacing: .08em !important;
  text-transform: none !important;
}

#main-buttons .bar {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
#main-buttons .btn.custom {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 200px;
  height: auto !important;
  border-radius: var(--rb-r-sm) !important;
  overflow: hidden;
}
#main-buttons .wrapper .inner .bar .btn.custom a {   /* long selector beats the theme's padding: 0 !important */
  display: block;
  padding: 15px 30px !important;
  font: 600 16px var(--rb-sans) !important;
  text-decoration: none !important;
  text-align: center;
}
/* "Boek" first and filled; "Toon op kaart" second and quiet */
#main-buttons .btn.book {
  order: -1;
  background: var(--rb-accent) !important;
  border: 1px solid var(--rb-accent) !important;
}
#main-buttons .btn.book a { color: var(--rb-on-accent) !important; }
#main-buttons .btn.book:hover { background: var(--rb-accent-hi) !important; }
#main-buttons .btn.map {
  background: rgba(18, 11, 6, .45) !important;
  border: 1px solid rgba(243, 233, 218, .6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#main-buttons .btn.map a { color: var(--rb-text) !important; }

/* Every page except home: a slim photo band instead of the full hero */
body:not(:has(#descr-firm)) #main-buttons {
  height: 200px !important;
  min-height: 0 !important;
}
body:not(:has(#descr-firm)) #main-buttons .container-fluid,
body:not(:has(#descr-firm)) #sb_google_translate { display: none !important; }

/* Language picker: bigger, labelled, with a globe, so visitors find it */
#sb_google_translate {
  top: auto !important;
  bottom: 28px !important;
  left: 28px !important;
  width: auto !important;
}
#sb_google_translate::before {
  content: "Language · Taal";
  display: block;
  margin: 0 0 8px 2px;
  color: var(--rb-text);
  font: 700 12px var(--rb-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}
#google_translate_element { width: auto !important; display: inline-block; }
#google_translate_element .goog-te-gadget { font-size: 0 !important; color: transparent !important; }
#google_translate_element .goog-te-gadget > span { display: none !important; }
#google_translate_element select.goog-te-combo {
  min-width: 250px !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 42px 0 46px !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99A4E' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M2.5 12h19M12 2.5c2.6 2.8 3.9 6 3.9 9.5s-1.3 6.7-3.9 9.5c-2.6-2.8-3.9-6-3.9-9.5s1.3-6.7 3.9-9.5z'/%3E%3C/svg%3E") no-repeat left 15px center / 20px 20px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23D99A4E' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px,
    rgba(18, 11, 6, .72) !important;     /* globe + arrow drawn here; the theme's arrow is dark */
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--rb-accent) !important;
  border-radius: var(--rb-r-sm) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--rb-text) !important;
  font: 600 16px var(--rb-sans) !important;
  cursor: pointer;
  filter: none !important;
}
#google_translate_element select.goog-te-combo:hover {
  border-color: var(--rb-accent-hi) !important;
  background-color: rgba(42, 29, 18, .88) !important;
}
#google_translate_element select.goog-te-combo option { background: var(--rb-card); color: var(--rb-text); }
/* Tablets & phones: the hero gets room below the buttons and the picker sits centred there */
@media (max-width: 1024px) {
  body:has(#descr-firm) #main-buttons { height: auto !important; min-height: 0 !important; padding: 130px 0 140px !important; }
  #sb_google_translate {
    left: 50% !important;
    bottom: 26px !important;
    transform: translateX(-50%);
    text-align: center;
  }
}

/* Hero in motion: the photo slowly zooms, the candlelight flickers, light specks
   drift upward and the title rises in. All of it stops for visitors whose
   device is set to reduce motion. */
#main-buttons {
  overflow: hidden !important;
  isolation: isolate;
}
#main-buttons::before {                       /* the photo itself, slowly zooming */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: inherit;
  background-size: cover;
  background-position: inherit;
  transform-origin: 65% 45%;
  animation: rb-hero-zoom 28s ease-in-out infinite alternate;
  will-change: transform;
}
#main-buttons > .container-fluid::before {     /* candle glow, flickering */
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 40% at 72% 62%, rgba(255, 160, 60, .30), transparent 70%),
    radial-gradient(ellipse 25% 35% at 22% 40%, rgba(255, 150, 60, .18), transparent 70%);
  mix-blend-mode: screen;
  animation: rb-hero-flicker 5s ease-in-out infinite;
}
#main-buttons > .container-fluid::after {      /* specks of light drifting up */
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: -40px;
  right: -40px;
  height: calc(100% + 320px);
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 214, 150, .7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255, 190, 110, .55) 0 2px, transparent 4px),
    radial-gradient(circle at 45% 85%, rgba(255, 230, 180, .5) 0 1px, transparent 2.5px);
  background-size: 260px 320px, 340px 320px, 190px 160px;
  mix-blend-mode: screen;
  animation: rb-hero-specks 30s linear infinite;
}
#main-buttons::after {                        /* soft fade into the page below */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(18, 11, 6, .35) 0%, rgba(18, 11, 6, 0) 28%, rgba(18, 11, 6, 0) 62%, var(--rb-page) 100%);
}
#main-buttons .company-name { animation: rb-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
#main-buttons .bar { animation: rb-rise 1.1s .35s cubic-bezier(.2, .7, .2, 1) both; }
#sb_google_translate { animation: rb-fade 1s .7s both; }

@keyframes rb-hero-zoom    { from { transform: scale(1); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
@keyframes rb-hero-flicker { 0%, 100% { opacity: .75; } 20% { opacity: 1; } 35% { opacity: .85; } 55% { opacity: .95; } 70% { opacity: .7; } 85% { opacity: 1; } }
@keyframes rb-hero-specks  { from { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(20px, -160px, 0); } to { transform: translate3d(0, -320px, 0); } }
@keyframes rb-rise         { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rb-fade         { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #main-buttons::before,
  #main-buttons > .container-fluid::before,
  #main-buttons > .container-fluid::after,
  #main-buttons .company-name,
  #main-buttons .bar,
  #sb_google_translate { animation: none !important; }
}


/* 5 ─ HOME PAGE BLOCKS ────────────────────────────────────────────────── */
/* One content width for every section */
#content-view > .container-fluid,
#wrap-main-rama-galery > .container-fluid,
#wrap-main-page-map {
  max-width: 1080px !important;
  margin-inline: auto !important;
}

/* Cards: about, hours, contact (and the calendar panels) */
.section .section-pd {
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft);
  border-radius: var(--rb-r-lg);
  color: var(--rb-text);
}

/* Hours and contact cards: equal height side by side */
#descr-firm > .col-sm-6 > .section { flex: 1; display: flex; flex-direction: column; width: 100%; }
#descr-firm > .col-sm-6 > .section > .section-pd { flex: 1; }

/* Links inside text: gold, so they read as links */
.tab .txt a,
.modal .txt a,
#about-us a { color: var(--rb-accent) !important; }

/* One font everywhere, even where text was pasted with its own font */
.txt [style*="font-family"] { font-family: inherit !important; }

/* Over ons: an editorial card. Small gold kicker, left-aligned title,
   the first paragraph as a serif lead, the rest at a readable width */
#about-us,
#about-us .section-pd { height: 100%; }
#about-us .section-pd { padding: 44px 48px !important; }
#about-us .title-main { text-align: left !important; }
#about-us .title-main::before {
  content: "ReBalans · Den Haag";
  display: block;
  margin-bottom: 14px;
  color: var(--rb-accent);
  font: 700 12px/1 var(--rb-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
#about-us .title-main::after {
  width: 64px !important;
  height: 2px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background: var(--rb-accent) !important;
  transform-origin: left center;
}
#about-us .txt {                 /* the block itself, so loose lines match too */
  max-width: 60ch;
  margin: 26px 0 0 !important;
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--rb-muted) !important;
}
#about-us .txt p {
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: left !important;
  color: inherit !important;
}
#about-us .txt p:first-child {   /* lead */
  margin-bottom: 18px !important;
  color: var(--rb-text) !important;
  font: 400 21px/1.55 var(--rb-serif) !important;
}
#about-us .txt p:first-child * { font-family: inherit !important; }
#about-us .txt p:empty { display: none; }
#about-us b,
#about-us strong { color: var(--rb-text); }

/* Opening hours */
table.overview td {
  font: 16px var(--rb-sans) !important;
  font-variant-numeric: tabular-nums;
  color: var(--rb-muted) !important;
  border-color: var(--rb-line-soft) !important;
  padding-block: 7px !important;
}
table.overview td.day { color: var(--rb-text) !important; }
table.overview td.time { text-align: right; }

/* Contact details */
#contacts,
#contacts *:not(.fa):not(.fab):not(.fas):not(.far):not(.fal):not(.title-main) { font-family: var(--rb-sans) !important; }   /* not icons or the heading */
#contacts a {
  color: var(--rb-text) !important;
  text-decoration: none !important;
}
#contacts a:hover { color: var(--rb-accent) !important; }

/* Gallery: a calm 16:9 frame instead of a full-screen slideshow */
#sb_gallery .fotorama__stage { max-height: 62vh !important; }
#sb_gallery .fotorama__img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
#sb_gallery .fotorama__arr {
  background-color: rgba(18, 11, 6, .6) !important;
  border-radius: 50%;
}
#sb_gallery .fotorama__thumb-border { border-color: var(--rb-accent) !important; }
#sb_gallery .fotorama__nav-wrap { display: none !important; }   /* no thumbnail strip, just the photos */

/* Wide screens: Over ons and the gallery side by side, the photo sized to the
   text card; hours & contact sit below, then the map. */
@media (min-width: 992px) {
  #content-view:has(#descr-firm) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    max-width: 1080px;
    margin-inline: auto !important;
  }
  #content-view:has(#descr-firm) > .container-fluid.classic-row,
  #content-view #descr-firm { display: contents !important; }
  #content-view #descr-firm > div {
    float: none !important;
    width: auto !important;
  }
  #content-view #descr-firm > .col-sm-12 { grid-column: 1; grid-row: 1; }
  #content-view #descr-firm > .col-sm-6 { grid-row: 2; display: flex; margin-top: 30px; }
  #content-view #descr-firm > .col-sm-6:nth-child(2) { grid-column: 1; }
  #content-view #descr-firm > .col-sm-6:nth-child(3) { grid-column: 2; }
  #content-view:has(#descr-firm) > #wrap-main-rama-galery {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
  }
  /* every layer down to the photo takes the full height of the row */
  #content-view:has(#descr-firm) > #wrap-main-rama-galery > .container-fluid,
  #content-view:has(#descr-firm) #sb_gallery,
  #content-view:has(#descr-firm) #gallery-view,
  #content-view:has(#descr-firm) #gallery-view > .row,
  #content-view:has(#descr-firm) #gallery-view > .row > *,
  #content-view:has(#descr-firm) #sb_gallery .fotorama,
  #content-view:has(#descr-firm) #sb_gallery .fotorama__wrap { height: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  #content-view:has(#descr-firm) > #wrap-main-rama-galery > .container-fluid { max-width: none !important; padding: 0 15px !important; }
  #content-view:has(#descr-firm) > :not(.classic-row):not(#wrap-main-rama-galery) { grid-column: 1 / -1; }
  #content-view:has(#descr-firm) #gallery-view .title-section { display: none !important; }
  #content-view:has(#descr-firm) #sb_gallery .fotorama__stage {
    height: 100% !important;
    min-height: 480px;
    max-height: none !important;
    border-radius: var(--rb-r-lg);
  }
}

/* Map: warm dark tiles so it stops glowing */
#sb_map {
  border-radius: var(--rb-r-lg);
  overflow: hidden;
  border: 1px solid var(--rb-line-soft);
}
#map-view iframe {
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  filter: invert(1) hue-rotate(185deg) sepia(.35) saturate(.7) brightness(.85) contrast(.95);
}

/* Google review card: pinned to the bottom-right corner of the screen */
#sb_google_reviews_module .google-reviews {
  position: fixed !important;
  top: auto !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  width: auto !important;
  z-index: 60;
  margin: 0 !important;
}
#sb_google_reviews_card {
  position: relative !important;
  margin: 0 !important;
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft) !important;
  border-radius: var(--rb-r-lg) !important;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55) !important;
  cursor: pointer;
}
#sb_google_reviews_card:hover { border-color: var(--rb-accent) !important; }
/* the review list that opens above the card */
#sb_google_reviews_list_container {
  margin-bottom: 10px;
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft) !important;
  border-radius: var(--rb-r-lg) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6) !important;
  overflow: hidden;
}
#sb_google_reviews_list_container * { font-family: var(--rb-sans) !important; }
#sb_google_reviews_list_container .fa { font-family: "Font Awesome 5 Pro" !important; }
#sb_google_reviews_list_container .google-reviews__item { border-color: var(--rb-line-soft) !important; }
#sb_google_reviews_list_container .google-reviews__item-author-name { color: var(--rb-text) !important; font-weight: 600 !important; }
#sb_google_reviews_list_container .google-reviews__item-text { color: var(--rb-muted) !important; line-height: 1.55; }
#sb_google_reviews_list_container .google-reviews__item-date { color: var(--rb-muted) !important; }
#sb_google_reviews_list_container .google-reviews__close-icon,
#sb_google_reviews_list_container .google-reviews__close-icon i { color: var(--rb-text) !important; }
#sb_google_reviews_list_container .google-reviews__btn-wrapper {
  background: var(--rb-raised) !important;
  border-top: 1px solid var(--rb-line-soft);
}
#sb_google_reviews_list_container .google-reviews__btn {
  color: var(--rb-accent) !important;
  border-color: var(--rb-accent) !important;
  border-radius: var(--rb-r-sm) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#sb_google_reviews_list_container .google-reviews__btn:hover {
  background: var(--rb-accent) !important;
  color: var(--rb-on-accent) !important;
}
#sb_google_reviews_card *:not(.fa):not(.fab):not(.fas):not(.far):not(.fal) { font-family: var(--rb-sans) !important; }
#sb_google_reviews_card .google-reviews__card-left,
#sb_google_reviews_card .google-reviews__card-right { background: transparent !important; }
#sb_google_reviews_card .google-reviews__card-heading { color: var(--rb-muted) !important; }
#sb_google_reviews_card .google-reviews__card-rating-value,
#sb_google_reviews_card .google-reviews__card-reviews-value { color: var(--rb-text) !important; }
#sb_google_reviews_card .google-reviews__card-rating-text,
#sb_google_reviews_card .google-reviews__card-rating-text a,
#sb_google_reviews_card .google-reviews__card-reviews-text,
#sb_google_reviews_card .google-reviews__card-reviews-text a { color: var(--rb-accent) !important; }

/* Scroll-to-top button: sits above the Google card */
#sb_scroll_top_btn {
  bottom: 112px !important;
  background: var(--rb-raised) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
}

/* Footer */
#footer {
  background: var(--rb-page) !important;
  border-top: 1px solid var(--rb-line-soft);
}
#footer a { color: var(--rb-muted) !important; }
#footer a:hover { color: var(--rb-accent) !important; }


/* 6 ─ COOKIE BANNER: both choices equally easy ───────────────────────── */
#sb_cookies_block {
  background: var(--rb-card) !important;
  border-top: 1px solid var(--rb-line);
}
#sb_cookies_block .text {
  color: var(--rb-muted) !important;
  font: 14px/1.5 var(--rb-sans) !important;
}
#sb_cookies_block .buttons {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#sb_cookies_block .buttons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 1 280px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 18px !important;
  background: var(--rb-raised) !important;
  border: 1px solid var(--rb-accent) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
  font: 600 15px var(--rb-sans) !important;
  text-transform: none !important;
  text-decoration: none !important;
}
#sb_cookies_block .buttons a:hover { background: var(--rb-accent) !important; color: var(--rb-on-accent) !important; }


/* 7 ─ BOOKING: STEP BAR ───────────────────────────────────────────────── */
/* A progress bar: steps done + the current one in gold, steps to come in brown */
#sb-timeline #steps-nav {
  background: var(--rb-card) !important;
  border-block: 1px solid var(--rb-line-soft);
  overflow: hidden;                      /* clips the gold run-in on the left */
}
#sb-timeline #steps-nav #menu-active-bg { display: none !important; }   /* the theme's own fill is mis-sized */
#sb-timeline #steps-nav #sb_booking_info li.step_info_item {
  position: relative;
  background: transparent !important;
}
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.passed,
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.active { background: var(--rb-accent) !important; }
/* the gold continues to the left edge of the screen */
#sb-timeline #steps-nav #sb_booking_info li.step_info_item:first-child:is(.passed, .active) {
  box-shadow: -50vw 0 0 50vw var(--rb-accent);
}
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.passed a:hover .title-small { text-decoration: underline; text-underline-offset: 3px; }
#sb-timeline #steps-nav .title-small {
  font: 600 15px var(--rb-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
#sb-timeline #steps-nav .title-sub {
  font: 13px var(--rb-sans) !important;
  text-transform: none !important;
}
/* label colors need three IDs to beat the theme's own !important rule */
#sb-timeline #steps-nav #sb_booking_info li.step_info_item a .content .title-small,
#sb-timeline #steps-nav #sb_booking_info li.step_info_item a .content .title-sub { color: var(--rb-muted) !important; }
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.passed a .content .title-small,
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.passed a .content .title-sub,
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.active a .content .title-small,
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.active a .content .title-sub { color: var(--rb-on-accent) !important; }
#sb-timeline #steps-nav #sb_booking_info li.step_info_item a .content .title-sub { opacity: .85; }

/* Separators: a thin chevron between steps, a solid gold arrow after the current one */
#sb-timeline #steps-nav #sb_booking_info li.step_info_item::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: -9px !important;
  bottom: auto !important;
  left: auto !important;
  width: 18px !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  transform: none !important;
  background: var(--rb-line-soft) !important;
  clip-path: polygon(0 0, 2px 0, 100% 50%, 2px 100%, 0 100%, calc(100% - 2px) 50%);
  z-index: 2;
}
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.passed::after { background: rgba(28, 13, 0, .3) !important; }
#sb-timeline #steps-nav #sb_booking_info li.step_info_item.active::after {
  right: -18px !important;
  background: var(--rb-accent) !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#sb-timeline #steps-nav #sb_booking_info li.step_info_item:last-child::after { display: none !important; }
/* Phones: the theme shows only the current step; show all five as segments,
   with the name of the current one */
@media (max-width: 767px) {
  #sb-timeline #steps-nav #sb_booking_info ul { display: flex !important; }
  #sb-timeline #steps-nav #sb_booking_info li.step_info_item {
    display: block !important;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }
  #sb-timeline #steps-nav #sb_booking_info li.step_info_item.active { flex: 4 1 0; }
  #sb-timeline #steps-nav #sb_booking_info li.step_info_item:not(.active) .content { visibility: hidden; }
  #sb-timeline #steps-nav #sb_booking_info li.step_info_item .content { white-space: nowrap; overflow: hidden; }
}

/* "Onze tijd: … Europe/Amsterdam" */
#time-settings { display: none !important; }

/* Back button: a normal secondary button, in the page flow
   (the theme floats it up over the step bar) */
#sb-timeline #steps #sb_back_button {
  position: static !important;
  top: auto !important;
  margin: 0 0 18px !important;
}
#sb-timeline #steps #sb_back_button a,
#sb_back_to_bookings .back-to-services,
.invoice-pay-page .to-invoices-list,
.wrap-client-info-view .back-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px !important;
  background: transparent !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
  font: 600 15px var(--rb-sans) !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}
#sb-timeline #steps #sb_back_button a::before,
#sb-timeline #steps #sb_back_button a::after,
#sb_back_to_bookings .back-to-services::before,
#sb_back_to_bookings .back-to-services::after,
.invoice-pay-page .to-invoices-list::before,
.invoice-pay-page .to-invoices-list::after,
.wrap-client-info-view .back-button::before,
.wrap-client-info-view .back-button::after { display: none !important; }   /* the theme's arrow-tip shapes */


/* Same 1080px width as the home page (the theme uses 990 and 1200) */
#sb-timeline #steps,
#sb-timeline .container-fluid.column { max-width: 1080px !important; }
#sb-timeline #steps-nav > .container-fluid.column,
#sb-timeline #steps #steps-content > .container-fluid.column {
  width: auto !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
}
#sb-timeline #steps #sb_booking_content .step-content { max-width: none !important; width: auto !important; }


/* 8 ─ BOOKING: CARDS (categories, treatments, therapists, memberships) ─ */
.service-item.item,
.category-item.item,
.provider-item.item { box-sizing: border-box; }

/* Grid: 3 cards per row, 2 on tablets, 1 on phones */
#sb_category_step_container { display: flex !important; flex-wrap: wrap; }
#sb_category_step_container .category-item.item,
#sb_service_step_container .service-item.item {
  flex: 0 0 33.333% !important;
  width: 33.333% !important;
  max-width: 33.333% !important;
  padding: 0 10px 20px !important;
}
@media (max-width: 991px) {
  #sb_category_step_container .category-item.item,
  #sb_service_step_container .service-item.item { flex-basis: 50% !important; width: 50% !important; max-width: 50% !important; }
}
@media (max-width: 600px) {
  #sb_category_step_container .category-item.item,
  #sb_service_step_container .service-item.item { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; }
}

/* Therapists: smaller portrait cards, 4 in a row (2 on phones) */
#sb_provider_step_container { display: flex !important; flex-wrap: wrap; justify-content: center; }
#sb_provider_step_container .provider-item.item {
  flex: 0 0 25% !important;
  width: 25% !important;
  max-width: 25% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 10px 20px !important;
}
@media (max-width: 767px) {
  #sb_provider_step_container .provider-item.item {
    flex-basis: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 6px 12px !important;
  }
}
#sb_provider_step_container .provider-item .tab .tab {      /* the theme nests a second card inside */
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#sb_provider_step_container .provider-item .preloader {
  height: auto !important;
  aspect-ratio: 3 / 4;
  padding: 0 !important;
  overflow: hidden;
}
#sb_provider_step_container .provider-item .preloader a,
#sb_provider_step_container .provider-item .preloader .photo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center 20% !important;
}
#sb_provider_step_container .provider-item .excerpt-info {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: auto !important;
  padding: 14px 14px 16px !important;
}
/* no description on therapist cards: the "Lees meer" link and its popup are hidden */
#sb_provider_step_container .provider-item .read-more,
#sb_provider_step_container .provider-item .modal { display: none !important; }
#sb_provider_step_container .provider-item .name {
  margin: 0 !important;
  color: var(--rb-text) !important;
  font: 600 19px/1.25 var(--rb-serif) !important;
  text-align: center !important;
}
#sb_provider_step_container .provider-item .btn-bar { width: 100%; margin-top: 10px !important; }
#sb_provider_step_container .provider-item .btn.select { min-height: 40px; }
#sb_provider_step_container .provider-item .btn.select a { padding: 9px 0; }

.tab {
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft) !important;
  border-radius: var(--rb-r-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
  color: var(--rb-text);
}
.tab .excerpt-info,
.tab .tab-pd,
.tab .preloader,
.tab .user.img,
.tab .user-img,
.tab .btn-bar {
  background: transparent !important;
  border-radius: 0 !important;
}
.tab .excerpt-info { display: flex; flex-direction: column; height: 100%; }
.tab .tab-pd {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px !important;
}
.tab .tab-pd .content { display: flex; flex-direction: column; flex: 1; }

.tab .cap.short {
  display: block !important;
  margin: 0 0 10px !important;
  text-align: center !important;
  font: 600 21px/1.25 var(--rb-serif) !important;
}
.tab .name { text-align: center !important; }

.tab .txt.short,
.tab .txt.short p {
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--rb-muted) !important;
}

/* Treatments: the whole description in the card, no "Lees meer" popup */
#sb_service_step_container .tab .txt.short {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#sb_service_step_container .tab .read-more { display: none !important; }

/* "Lees meer": no invert hack, a plain gold link with a soft fade */
.tab .read-more {
  filter: none !important;
  background: var(--rb-card) !important;
  color: var(--rb-accent) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tab .read-more::before {
  background: linear-gradient(90deg, rgba(30, 20, 12, 0), var(--rb-card) 75%) !important;
}

/* Duration + price row */
.tab .bar-service {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-top: auto !important;
  padding-top: 12px;
  border-top: 1px solid var(--rb-line-soft);
}
.tab .bar-service .time,
.tab .bar-service .time span {
  font: 600 13px/1 var(--rb-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--rb-text) !important;
}
/* the duration as a chip with a small gold clock */
.tab .bar-service .time {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px !important;
  background: var(--rb-raised) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  white-space: nowrap;
}
.tab .bar-service .time::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D99A4E' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.5'/%3E%3Cpath d='M8 4.5V8l2.5 1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tab .badge.price {
  padding: 0 !important;
  background: none !important;
  color: var(--rb-accent) !important;
  font: 700 18px var(--rb-sans) !important;
  font-variant-numeric: tabular-nums;
}
/* "Abonnementen vereist" label (was black on dark) */
.tab .service-bar__text,
.tab .service-bar__text a {
  color: var(--rb-accent) !important;
  font: 600 14px var(--rb-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* "Selecteer": one secondary button on every card */
.tab .btn-bar { margin-top: 14px !important; overflow: visible !important; }
.tab .btn.select {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 46px;
  height: auto !important;
  margin: 0 !important;
  padding: 0 16px !important;
  background: transparent !important;
  border: 1px solid var(--rb-accent) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
}
.tab .btn.select,
.tab .btn.select a,
.tab .btn.select span {
  font: 600 15px var(--rb-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  color: var(--rb-text) !important;
}
.tab .btn.select a { display: block; width: 100%; text-align: center; padding: 12px 0; }
.tab .btn.select:hover { background: var(--rb-accent) !important; }
.tab .btn.select:hover a,
.tab .btn.select:hover span { color: var(--rb-on-accent) !important; }


/* 9 ─ BOOKING: DETAIL POPUP ("Lees meer") ───────────────────────────────── */
.modal .full-info,
div.modal-content {
  background: var(--rb-card) !important;
  color: var(--rb-text) !important;
  border: 1px solid var(--rb-line-soft);
  border-radius: var(--rb-r-lg) !important;
  overflow: hidden;
}
.modal .full-info .tab-pd { background: transparent !important; padding: 24px 28px 28px !important; }
.modal .full-info .cap.full {
  text-align: left !important;
  font: 600 26px/1.25 var(--rb-serif) !important;
  margin-bottom: 12px;
}
.modal .full-info .txt.full,
.modal .full-info .txt.full p {
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--rb-muted) !important;
}
.modal .close-full-info {
  background: rgba(18, 11, 6, .75) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
}
.modal .close-full-info i { color: var(--rb-text) !important; }
div.modal.fade.in {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* 10 ─ BOOKING: CALENDAR & TIME SLOTS ─────────────────────────────────── */
/* Month navigation */
#sb_prev_month,
#sb_next_month,
.sb-date-navigate {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px !important;
  background: transparent !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
  cursor: pointer;
  text-decoration: none !important;
}
#sb_prev_month .txt,
#sb_next_month .txt,
.sb-date-navigate .txt {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;                  /* the theme's black 2px frame */
  white-space: nowrap;
  background: none !important;
  color: inherit !important;
  font: 600 14px var(--rb-sans) !important;
  text-transform: none !important;
}
/* Arrow-only square buttons; the label is hidden visually but still read out */
#sb_prev_month,
#sb_next_month,
.sb-date-navigate {
  justify-content: center;
  width: 42px !important;
  min-width: 42px;
  height: 42px !important;
  padding: 0 !important;
}
#sb_prev_month .txt,
#sb_next_month .txt,
.sb-date-navigate .txt {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
#sb_prev_month .fa,
#sb_next_month .fa,
.sb-date-navigate .fa { display: inline-block !important; font-size: 20px; line-height: 1; }
#sb_prev_month:hover,
#sb_next_month:hover,
.sb-date-navigate:hover { border-color: var(--rb-accent) !important; background: var(--rb-raised) !important; }
#sb_prev_month .txt::after, #sb_prev_month .txt::before,
#sb_next_month .txt::after, #sb_next_month .txt::before,
.sb-date-navigate .txt::after, .sb-date-navigate .txt::before { display: none !important; }

/* One week per row, so the weekday names appear once (desktop & tablet) */
@media (min-width: 768px) {
  .top-date-select .calendar { max-width: 760px; margin-inline: auto; }
  .top-date-select .weeks-name > div,
  .top-date-select .weeks-date > div {
    float: none !important;
    width: 100% !important;
  }
  .top-date-select .weeks-name > div:not(:first-child) { display: none !important; }
}
/* Wide screens: one row. Month calendar (pick the week) on the left,
   days & times on the right */
@media (min-width: 1100px) {
  /* this step gets a wider page than the others */
  body:has(#sb_datetime_step_container) #sb-timeline #steps,
  body:has(#sb_datetime_step_container) #sb-timeline #steps-nav > .container-fluid.column,
  body:has(#sb_datetime_step_container) #sb-timeline #steps #steps-content > .container-fluid.column { max-width: 1320px !important; }
  #sb_datetime_step_container {
    display: flex !important;
    align-items: flex-start;
  }
  #sb_datetime_step_container > .col-sm-12 { float: none !important; }
  #sb_datetime_step_container > .col-sm-12:first-child {
    flex: 0 0 430px;
    width: 430px !important;
    position: sticky;
    top: 24px;
  }
  #sb_datetime_step_container > .col-sm-12:not(:first-child) {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
  }
  #sb_datetime_step_container .top-date-select .calendar { max-width: none; }
  #sb_datetime_step_container .time-slot a.sb-cell.free {     /* fits seven days side by side */
    padding: 10px 2px !important;
    font-size: 14px !important;
  }
  #sb_datetime_step_container .time-slot a.sb-cell .end-time { font-size: 13px !important; }
}
.top-date-select .weeks-name .name {
  color: var(--rb-muted) !important;
  font: 600 12px var(--rb-sans) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.top-date-select .weeks-name .name.is-holiday { color: var(--rb-muted) !important; }   /* weekends are not warnings */
.top-date-select .weeks-date .date,
.top-date-select .weeks-date .date.selected {
  background: transparent !important;
  font-variant-numeric: tabular-nums;
}
.top-date-select .weeks-date .date a.day-on { color: var(--rb-text) !important; font-weight: 600; }
.top-date-select .weeks-date .date .day-off { color: #7A6A58 !important; }   /* unavailable, still legible */
.top-date-select .weeks-date .inner.selected {
  background: var(--rb-raised) !important;
  box-shadow: inset 0 0 0 1px var(--rb-accent);
  border-radius: var(--rb-r-sm) !important;
}
.top-date-select .weeks-date .date.today a { text-decoration: underline; text-underline-offset: 4px; }

/* Week view */
.slots-weekly-view .tab-pd {
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft);
  border-radius: var(--rb-r-lg) !important;
}
.slots-weekly-timeline .day-container .date {
  color: var(--rb-muted) !important;
  font: 13px var(--rb-sans) !important;
  text-transform: lowercase;                     /* "okt 7", as Dutch writes it */
}
.slots-weekly-timeline .day-container .day {
  color: var(--rb-text) !important;
  font: 600 18px var(--rb-serif) !important;
}
.slots-weekly-timeline .day-container .border { background: var(--rb-line) !important; border-color: var(--rb-line) !important; }

/* Time slots: start and end on one line */
.time-slot a.sb-cell.free {
  display: flex !important;
  flex-direction: row !important;           /* the theme stacks them */
  flex-wrap: nowrap !important;
  padding: 10px 8px !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 46px;
  background: var(--rb-raised) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
  font: 600 15px var(--rb-sans) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none !important;
}
.time-slot a.sb-cell .end-time {
  display: inline !important;
  width: auto !important;
  color: var(--rb-muted) !important;
  font-weight: 400;
}
.time-slot a.sb-cell.free:hover { background: var(--rb-accent) !important; border-color: var(--rb-accent) !important; color: var(--rb-on-accent) !important; }
.time-slot a.sb-cell.free:hover .end-time { color: var(--rb-on-accent) !important; }
.slots-weekly-view .time-legend { display: none !important; }   /* every slot shown is available */


/* 11 ─ FORMS & BUTTONS ─────────────────────────────────────────────────── */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  min-height: 46px;
  background-color: var(--rb-raised) !important;   /* -color only: keeps the envelope/lock icons */
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
  font: 16px var(--rb-sans) !important;
  box-shadow: none !important;
}
textarea.form-control { min-height: 140px; }
.form-control::placeholder { color: var(--rb-muted) !important; opacity: .8; }
.form-control:focus {
  border-color: var(--rb-accent) !important;
  outline: 2px solid var(--rb-accent) !important;
  outline-offset: 1px;
}
label,
.control-label { color: var(--rb-muted); }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--rb-accent); }
p.help-block { padding-bottom: 0 !important; margin-top: 12px !important; color: var(--rb-muted); }

/* Primary button: every SimplyBook action button */
a.btn:not(.select),
button.btn,
input.btn,
#sb_profile_form div.bar-with-btn #sb_update_btn {
  min-height: 44px;
  background: var(--rb-accent) !important;
  border: 1px solid var(--rb-accent) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-on-accent) !important;
  font: 600 15px var(--rb-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
a.btn:not(.select):hover,
button.btn:hover,
input.btn:hover { background: var(--rb-accent-hi) !important; border-color: var(--rb-accent-hi) !important; }

/* Secondary button */
a.btn.btn-second,
button.btn.btn-second,
a.btn.reload-page,
a.open-booking-widget-button {
  background: transparent !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-r-sm) !important;
  color: var(--rb-text) !important;
}

/* Destructive button (cancel booking) */
.btn.btn-danger {
  background: transparent !important;
  border-color: #B4574A !important;
  color: #F0B4A8 !important;
}

/* Client login panel */
.full-info.full-info--client-info { background: var(--rb-card) !important; }
.full-info.full-info--client-info .tab-pd { background: transparent !important; }
.full-info--client-info .inputs > .email { margin-bottom: 14px !important; }   /* room between email and password */
div.client-login-bar { border-color: var(--rb-line-soft) !important; border-radius: var(--rb-r-sm) !important; }
/* only "Aanmelden" is primary; register and social sign-in are secondary */
a.btn.btn--sign-up,
a.btn.btn--action {
  background-color: transparent !important;
  border: 1px solid var(--rb-line) !important;
  color: var(--rb-text) !important;
}
a.btn.btn--sign-up:hover,
a.btn.btn--action:hover {
  background-color: var(--rb-raised) !important;
  border-color: var(--rb-accent) !important;
}

/* Booking step "Klant" (sign in / register): the theme keeps it white */
#client-login.section {
  background-color: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft) !important;
  border-radius: var(--rb-r-lg) !important;
  color: var(--rb-text) !important;
}
#client-login .title-main,
#client-login .cap { color: var(--rb-text) !important; }
#client-login .txt,
#client-login .control-label,
#client-login .remember-me__small-text { color: var(--rb-muted) !important; }
#client-login .remind-pass { color: var(--rb-accent) !important; }
#client-login .border { background-color: var(--rb-line-soft) !important; width: 1px !important; }   /* column divider */
#client-login .sb-client-fields { border-color: var(--rb-line-soft) !important; }

/* Phone number: country picker dropdown */
.iti__country-selector,
.iti__dropdown-content,
.iti__country-list {
  background-color: var(--rb-card) !important;
  border-color: var(--rb-line) !important;
  color: var(--rb-text) !important;
}
.iti__search-input {
  background-color: var(--rb-raised) !important;
  border-color: var(--rb-line) !important;
  color: var(--rb-text) !important;
}
.iti__search-input-wrapper { border-color: var(--rb-line-soft) !important; }
.iti__country.iti__highlight,
.iti__country:hover { background-color: var(--rb-raised) !important; }
.iti__dial-code { color: var(--rb-muted) !important; }
/* Google & Facebook: gold logos on a dark tile, in the house style */
.btn--action .icon svg { display: block !important; }
.btn--action .icon svg path { fill: var(--rb-accent) !important; }
.btn--action .icon::before { display: none !important; }
.btn--action .icon {
  background: var(--rb-raised) !important;
  border: 1px solid var(--rb-line-soft) !important;
  border-radius: var(--rb-r-sm) !important;
}
a.btn.btn--action:hover .icon { border-color: var(--rb-accent) !important; }

/* Checkboxes ("Onthoud me", consent boxes): dark box, gold when ticked */
.custom-checkbox .custom-label {
  background-color: var(--rb-raised) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: 4px !important;
}
.custom-checkbox input:checked + .custom-label {
  background-color: var(--rb-accent) !important;
  border-color: var(--rb-accent) !important;
}


/* 12 ─ OTHER PAGES ─────────────────────────────────────────────────────── */
/* Contact form */
.sb-widget-form {
  background: var(--rb-card) !important;
  border: 1px solid var(--rb-line-soft);
  border-radius: var(--rb-r-lg) !important;
  color: var(--rb-text) !important;
  box-shadow: none !important;
}
.sb-widget-form .title {
  color: var(--rb-text) !important;
  font: 600 22px/1.35 var(--rb-serif) !important;
}
.sb-widget-form .buttons { display: flex !important; flex-wrap: wrap; gap: 10px; }
.sb-widget-form .buttons > * {
  flex: 1 1 180px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 0 !important;
  float: none !important;
  font: 600 15px var(--rb-sans) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
}

/* 404 page */
.section-page-404 .section-pd,
.section-page-404 .error-card {
  background: var(--rb-card) !important;
  border-radius: var(--rb-r-lg);
}
.section-page-404 .title-main { color: var(--rb-text) !important; }
.section-page-404 .error-txt { color: var(--rb-muted) !important; }
.section-page-404 .redirect-block .txt {
  background: none !important;
  color: var(--rb-muted) !important;
}

/* Memberships (StripCards) */
.membership-service__list-item,
.membership-service__caption,
.date-bar,
.date-bar .date,
.session-remind,
.start-date-btn { color: var(--rb-muted) !important; font-family: var(--rb-sans) !important; }
.membership-service__list-item .icon,
.date-bar .icon i,
.session-remind .icon i { color: var(--rb-accent) !important; }
a.sb_start_date { color: var(--rb-accent) !important; }
div.membership-filters,
div#sb_membership_filter_service_container,
div.sb_filter_item,
label.filter-item-label,
div.filter-list.custom-form.filter--content { background: var(--rb-card) !important; color: var(--rb-text) !important; }

/* Gift cards: it's a voucher, not a discount */
.promotion-item__tag--on-image,
.bar-service__item-promo-label { display: none !important; }
.promotion-item__data .cap { text-align: center !important; }
.promotion-item__picture svg path { fill: var(--rb-accent) !important; }
.promotion-item__price::before { content: "· "; }

/* My bookings & account */
#booking-result-tabs,
div.tabs-container,
div.invoice-notification--content { background: var(--rb-card) !important; color: var(--rb-text) !important; }
div.alert.alert-info {
  background: var(--rb-raised) !important;
  border: 1px solid var(--rb-line-soft) !important;
  color: var(--rb-text) !important;
}
a.btn.btn-second.sb-client-edit-popup { text-decoration-color: var(--rb-muted) !important; }
.tabs-container .tab-link a {
  color: var(--rb-muted) !important;
  font: 600 15px var(--rb-sans) !important;
  text-decoration: none !important;
}
.tabs-container .tab-link.active a { color: var(--rb-text) !important; }
.tabs-container .tab-link.active { border-bottom-color: var(--rb-accent) !important; }

/* Embedded videos on your own pages */
.page-content iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: none;
}


/* 13 ─ TABLET & PHONE LAYOUT ───────────────────────────────────────────── */
/* Menu (☰, below 1025px): a full-screen overlay with the links centred on
   the screen. It fades and drifts in, and fades out again when closed;
   the ☰ turns into a gold ✕. */
@media (max-width: 1024px) {
  #header .nav-wrapper.clearfix {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 96px 24px calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    background:
      radial-gradient(ellipse 80% 55% at 50% 42%, rgba(217, 154, 78, .10), transparent 70%),
      rgba(18, 11, 6, .97) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition: opacity .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .45s !important;
    z-index: 1000 !important;
  }
  #header .nav-wrapper.clearfix.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1), visibility 0s !important;
  }
  #header .nav-wrapper.clearfix::before {          /* small gold kicker above the links */
    content: "Menu" !important;
    display: block !important;
    margin-bottom: 18px;
    color: var(--rb-accent);
    font: 700 12px/1 var(--rb-sans);
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  #header .nav-wrapper.clearfix::after {           /* address at the foot of the menu */
    content: "Juliana van Stolberglaan 294 · Den Haag" !important;
    display: block !important;
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    color: var(--rb-muted);
    font: 13px/1.4 var(--rb-sans);
    letter-spacing: .03em;
    text-align: center;
  }
  #header .nav-wrapper #sb_menu {
    display: block !important;
    width: 100%;
    max-width: 360px;
    margin: 0 !important;
  }
  #header .nav-wrapper #sb_menu .nav {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #header .nav-wrapper #sb_menu .nav > li {
    display: block !important;
    margin: 0 !important;
    text-align: center;
  }
  #header .nav-wrapper #sb_menu .nav > li + li { border-top: 1px solid var(--rb-line-soft); }
  #header .nav-wrapper #sb_menu .nav > li:has(> a[href="#page/team"]) { display: none !important; }   /* empty Team page, see section 3 */
  #header .nav-wrapper.clearfix #sb_menu .nav > li > a {
    display: block !important;
    min-width: 0 !important;
    padding: 16px 8px !important;
    color: var(--rb-text) !important;
    font: 400 24px/1.25 var(--rb-serif) !important;
    text-align: center !important;
  }
  /* logo and ✕ stay above the overlay */
  body:has(.nav-wrapper.active) #header .col-xs-8 { z-index: 1001; }
  #header .nav-trigger.toggle-mnu span,
  #header .nav-trigger.toggle-mnu span::before,
  #header .nav-trigger.toggle-mnu span::after {
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), top .3s ease, background-color .3s ease !important;
  }
  #header .nav-trigger.toggle-mnu.active span { background-color: transparent !important; }
  #header .nav-trigger.toggle-mnu.active span::before {
    top: 9px !important;
    transform: rotate(45deg) scaleX(.8) !important;
    background-color: var(--rb-accent) !important;
  }
  #header .nav-trigger.toggle-mnu.active span::after {
    top: 9px !important;
    transform: rotate(-45deg) scaleX(.8) !important;
    background-color: var(--rb-accent) !important;
  }
  #header .nav-trigger.toggle-mnu.active { border-color: var(--rb-accent) !important; }
}

@media (max-width: 767px) {
  body, #content-view { font-size: 16px; }

  /* Header in one compact row: logo left, icons right (the theme leaves
     50px of empty space under the logo) */
  #header .brand,
  #header .brand .logo { height: 44px !important; display: flex !important; align-items: center; }
  #header { padding-bottom: 10px !important; }
  #header .brand .logo a img { max-height: 34px !important; width: auto !important; }
  #header .items-wrapper .item-container,
  #header .nav-trigger.toggle-mnu { border-color: var(--rb-line-soft) !important; }

  /* "Boek nu" becomes a bar fixed to the bottom of the screen */
  #header #book-btn {
    position: fixed !important;
    left: 16px;
    right: 16px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: block !important;
  }
  #header #book-btn .book-btn-container,
  #header #book-btn .item-container { width: 100% !important; }
  #header #book-btn a {
    display: flex !important;
    justify-content: center;
    width: 100%;
    height: 52px;
    font-size: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  }
  body:has(#sb_cookies_block[style*="block"]) #book-btn { display: none !important; }   /* not on top of the cookie banner */
  body { padding-bottom: 84px; }   /* so the bar never covers the footer */

  /* Over ons: phone padding */
  #about-us .section-pd { padding: 30px 22px !important; }
  #about-us .txt p:first-child { font-size: 19px !important; }

  /* Hero: sized to its content, not 90% of the screen */
  #main-buttons { height: auto !important; min-height: 0 !important; padding: 150px 0 72px !important; background-position: 62% center !important; }
  #main-buttons .btn.custom {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* Scroll button off; the (compact) Google card sits above the "Boek nu"
     bar, and steps aside while booking or while the cookie banner shows */
  #sb_scroll_top_btn { display: none !important; }
  #sb_google_reviews_module .google-reviews {
    right: 12px !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(#sb-timeline) #sb_google_reviews_module,
  body:has(#sb_cookies_block[style*="block"]) #sb_google_reviews_module { display: none !important; }

  /* Login panel centred on screen */
  .full-info.full-info--client-info.active {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: calc(100vw - 32px) !important;
    max-width: 420px;
    z-index: 1000;
  }

  /* Treatment list: compact rows instead of 500px photo cards */
  .service-item .tab .excerpt-info {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "img title" "img meta" "desc desc" "btn btn";
    column-gap: 14px;
    padding: 14px;
  }
  .service-item .tab .tab-pd,
  .service-item .tab .tab-pd .content { display: contents !important; }
  .service-item .tab .preloader {
    grid-area: img;
    align-self: start;
    width: 88px;
    height: 88px !important;
    aspect-ratio: 1;
    padding: 0 !important;
    border-radius: var(--rb-r-sm) !important;
    overflow: hidden;
  }
  .service-item .tab .preloader a,
  .service-item .tab .preloader .user.img { display: block; width: 100%; height: 100%; }
  .service-item .tab .preloader img {
    position: static !important;
    width: 100% !important;
    height: 88px !important;
    object-fit: cover;
  }
  .service-item .tab .cap.short { grid-area: title; align-self: end; text-align: left !important; font-size: 18px !important; margin: 0 0 4px !important; }
  .service-item .tab .bar-service { grid-area: meta; align-self: start; border-top: 0; padding-top: 0; margin-top: 0 !important; }
  .service-item .tab .txt.short { grid-area: desc; margin-top: 10px; }
  .service-item .tab .txt.short,
  .service-item .tab .txt.short p { text-align: left !important; }
  .service-item .tab .btn-bar { grid-area: btn; }

  /* Month calendar, sign-in step, contact form: same side margins as everything else */
  #sb_dateview_container.section,
  #client-login.section { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
  .sb-widget-form { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; }

  /* Week view: two columns of days, so the weekend is visible */
  .slots-weekly-timeline {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
    overflow: visible !important;
    width: auto !important;
  }
  .slots-weekly-timeline .data-col {
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
  }
  .slots-weekly-timeline .data-col.hide { display: none !important; }

  /* ── Phone polish ── */
  /* Menu or sign-in open: the bottom bar and the Google card step aside */
  body:has(.nav-wrapper.active) #header #book-btn,
  body:has(.full-info--client-info.active) #header #book-btn,
  body:has(.nav-wrapper.active) #sb_google_reviews_module,
  body:has(.full-info--client-info.active) #sb_google_reviews_module { display: none !important; }

  /* Sign-in panel: dim the page behind it */
  .full-info.full-info--client-info.active {
    border: 1px solid var(--rb-line-soft);
    border-radius: var(--rb-r-lg) !important;
    box-shadow: 0 0 0 100vmax rgba(8, 5, 2, .72), 0 24px 60px rgba(0, 0, 0, .6) !important;
  }

  /* Readable card text (the theme drops it to 13px on phones) */
  .tab .txt,
  .tab .txt p,
  .tab .txt li,
  .tab .txt i,
  .tab .txt em,
  .tab .txt b,
  .tab .txt strong,
  .tab .txt span:not([style*="background-color"]),
  .tab.tab-col .txt.short,
  .tab.tab-col .txt.short *:not(span[style*="background-color"]) { font-size: 15px !important; line-height: 1.6 !important; }
  .tab .read-more { font-size: 14px !important; }

  /* Bigger touch targets */
  .top-date-select .weeks-date .date a.day-on,
  .top-date-select .weeks-date .date .day-off {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border-radius: 50%;
  }
  #contacts a { display: inline-block; padding: 9px 0; }
  #footer a { display: inline-block; padding: 12px 8px; font-size: 14px !important; }

  /* Gallery a little taller; map shorter, so it doesn't trap scrolling */
  #sb_gallery .fotorama__stage { height: 78vw !important; max-height: none !important; }
  #map-view iframe { height: 300px; }

  /* Gift cards: compact rows instead of 54 tall cards */
  .promotion-item.item { padding-bottom: 10px !important; }
  .promotion-item .tab .excerpt-info {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "img title btn" "img meta btn";
    align-items: center;
    column-gap: 14px;
    padding: 12px 14px !important;
  }
  .promotion-item .tab .excerpt-info .preloader.promotion-item__picture {
    grid-area: img;
    width: 48px !important;
    height: 48px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .promotion-item .preloader a,
  .promotion-item .preloader .img { display: block; width: 100% !important; height: 100% !important; background-size: contain !important; }
  .promotion-item .promotion-item__data { grid-area: title; padding: 0 !important; }
  .promotion-item .promotion-item__data .cap.short {
    margin: 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .promotion-item .bar-service {
    grid-area: meta;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  .promotion-item .btn-bar { grid-area: btn; margin: 0 !important; padding: 0 !important; }
  .promotion-item .btn-bar .btn-bar__row { margin: 0 !important; padding: 0 !important; }
  .promotion-item .btn-bar .btn.select {
    width: auto !important;
    min-height: 40px;
    padding: 0 12px !important;
    white-space: nowrap;
  }
}

/* Phones: the header stays at the top and turns solid once you scroll;
   on the home page the "Boek nu" bar and Google card wait until the hero
   (with its own Boek button) has scrolled away */
@supports (animation-timeline: scroll()) {
  @media (max-width: 767px) {
    #header {
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
    }
    body:has(#sb-timeline) #header { position: absolute !important; }   /* booking: the theme scrolls the step bar to the very top */
    #header::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(18, 11, 6, .95);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
      opacity: 0;
      animation: rb-header-solid linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 140px;
    }
  }
}
@supports (animation-timeline: view()) {
  @media (max-width: 767px) {
    body:has(#descr-firm) { timeline-scope: --rb-hero; }
    body:has(#descr-firm) #main-buttons { view-timeline: --rb-hero block; }
    body:has(#descr-firm) #header #book-btn,
    body:has(#descr-firm) #sb_google_reviews_module .google-reviews {
      animation: rb-after-hero linear both !important;
      animation-timeline: --rb-hero !important;
      animation-range: exit 45% exit 70% !important;
    }
  }
}
@keyframes rb-header-solid { to { opacity: 1; } }
@keyframes rb-after-hero {
  from { opacity: 0; transform: translateY(24px); visibility: hidden; }
  to   { opacity: 1; transform: none; visibility: visible; }
}


/* 14 ─ KEPT FROM THE OLD FILE (intentional) ───────────────────────────── */
#sb_reviews_module { display: none; }                 /* SimplyBook's own reviews block */
.copyright { display: none; }
a.popup-hide.btn.btn-danger.modal--client-profile-btn-cancel { display: none !important; }


/* 15 ─ ENTRANCE ANIMATIONS ────────────────────────────────────────────── */
/* Every page arrives softly: blocks rise into place, cards follow one after
   another, section titles draw their gold line, popups ease in. Lower home
   blocks reveal as you scroll (in browsers that support it). Everything is
   off for visitors whose device asks for less motion.
   Fill mode is "backwards" on purpose: once finished, the animation leaves
   no trace, so popups inside cards keep working normally. */
@keyframes rb-in-up   { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes rb-in-card { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rb-in-down { from { opacity: 0; transform: translate3d(0, -12px, 0); } to { opacity: 1; transform: none; } }
@keyframes rb-in-pop  { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rb-line    { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* Page blocks */
  #descr-firm > div,
  #wrap-main-rama-galery,
  #wrap-main-page-map,
  .sb-widget-form,
  .section-page-404 .error-card,
  #client-login,
  #sb_dateview_container .section-pd,
  #sb_timeview_container,
  #booking-result-tabs { animation: rb-in-up .8s cubic-bezier(.22, .61, .36, 1) backwards; }
  #descr-firm > .col-sm-12 { animation-delay: .05s; }
  #wrap-main-rama-galery { animation-delay: .2s; }
  #descr-firm > .col-sm-6:nth-child(2) { animation-delay: .3s; }
  #descr-firm > .col-sm-6:nth-child(3) { animation-delay: .4s; }
  #wrap-main-page-map { animation-delay: .5s; }
  #sb_timeview_container { animation-delay: .15s; }
  #sb_google_reviews_module .google-reviews { animation: rb-in-up .8s 1s cubic-bezier(.22, .61, .36, 1) backwards; }

  /* Booking: step bar drops in, back button follows */
  #sb-timeline #steps-nav { animation: rb-in-down .6s cubic-bezier(.22, .61, .36, 1) backwards; }
  #sb-timeline #steps #sb_back_button { animation: rb-in-up .6s .1s cubic-bezier(.22, .61, .36, 1) backwards; }

  /* Cards one after another (categories, treatments, therapists, memberships, gift cards) */
  .category-item.item,
  .service-item.item,
  .provider-item.item,
  .promotion-item.item,
  .membership-item { animation: rb-in-card .7s .9s cubic-bezier(.22, .61, .36, 1) backwards; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(1),
  div:nth-child(1) > .membership-item { animation-delay: 0.05s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(2),
  div:nth-child(2) > .membership-item { animation-delay: 0.12s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(3),
  div:nth-child(3) > .membership-item { animation-delay: 0.19s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(4),
  div:nth-child(4) > .membership-item { animation-delay: 0.26s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(5),
  div:nth-child(5) > .membership-item { animation-delay: 0.33s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(6),
  div:nth-child(6) > .membership-item { animation-delay: 0.40s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(7),
  div:nth-child(7) > .membership-item { animation-delay: 0.47s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(8),
  div:nth-child(8) > .membership-item { animation-delay: 0.54s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(9),
  div:nth-child(9) > .membership-item { animation-delay: 0.61s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(10),
  div:nth-child(10) > .membership-item { animation-delay: 0.68s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(11),
  div:nth-child(11) > .membership-item { animation-delay: 0.75s; }
  :is(.category-item, .service-item, .provider-item, .promotion-item).item:nth-child(12),
  div:nth-child(12) > .membership-item { animation-delay: 0.82s; }

  /* Days of the week view, left to right */
  .slots-weekly-timeline .data-col { animation: rb-in-up .6s cubic-bezier(.22, .61, .36, 1) backwards; }
  .slots-weekly-timeline .data-col:nth-child(1) { animation-delay: 0.15s; }
  .slots-weekly-timeline .data-col:nth-child(2) { animation-delay: 0.21s; }
  .slots-weekly-timeline .data-col:nth-child(3) { animation-delay: 0.27s; }
  .slots-weekly-timeline .data-col:nth-child(4) { animation-delay: 0.33s; }
  .slots-weekly-timeline .data-col:nth-child(5) { animation-delay: 0.39s; }
  .slots-weekly-timeline .data-col:nth-child(6) { animation-delay: 0.45s; }
  .slots-weekly-timeline .data-col:nth-child(7) { animation-delay: 0.51s; }

  /* Section titles draw their gold line */
  .title-main::after { animation: rb-line .9s .3s cubic-bezier(.22, .61, .36, 1) backwards; }

  /* Popups and panels */
  .modal.in .full-info { animation: rb-in-pop .45s cubic-bezier(.22, .61, .36, 1) backwards; }
  .full-info.full-info--client-info.active { animation: rb-fade .3s ease-out backwards; }   /* opacity only: it is positioned with a transform on phones */

  /* Phone & tablet menu: links slide in one by one */
  .nav-wrapper.active #sb_menu .nav > li { animation: rb-in-up .45s cubic-bezier(.22, .61, .36, 1) backwards; }
  .nav-wrapper.active #sb_menu .nav > li:nth-child(1) { animation-delay: 0.04s; }
  .nav-wrapper.active #sb_menu .nav > li:nth-child(2) { animation-delay: 0.08s; }
  .nav-wrapper.active #sb_menu .nav > li:nth-child(3) { animation-delay: 0.12s; }
  .nav-wrapper.active #sb_menu .nav > li:nth-child(4) { animation-delay: 0.16s; }
  .nav-wrapper.active #sb_menu .nav > li:nth-child(5) { animation-delay: 0.20s; }
  .nav-wrapper.active #sb_menu .nav > li:nth-child(6) { animation-delay: 0.24s; }
  .nav-wrapper.active #sb_menu .nav > li:nth-child(7) { animation-delay: 0.28s; }

  /* Gentle hover: card photos zoom a touch, the edge warms up
     (no movement of the card itself, so popups inside stay put) */
  .tab .preloader:not(.img-full) img,
  .provider-item .preloader .photo { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
  .tab:hover .preloader:not(.img-full) img,
  .provider-item .tab:hover .preloader .photo { transform: scale(1.05); }
  .category-item .tab,
  .service-item .tab,
  .provider-item > .tab { transition: border-color .3s, box-shadow .3s; }
  .category-item .tab:hover,
  .service-item .tab:hover,
  .provider-item > .tab:hover {
    border-color: rgba(217, 154, 78, .55) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45) !important;
  }
  .time-slot a.sb-cell.free { transition: background-color .2s, border-color .2s, color .2s; }
}

/* Lower home blocks reveal as they scroll into view */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #descr-firm > .col-sm-6,
    #wrap-main-page-map {
      animation: rb-in-up linear both;
      animation-delay: 0s;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}


/* 16 ─ OVER ONS BLOCK ─────────────────────────────────────────────────── */
/* Styles the HTML from over-ons.html, pasted into the "Over ons" text
   (welcome line, three facts, four "What we do" tiles, closing line,
   two buttons). Without that HTML these rules simply do nothing. */
/* Lead: welcome line in serif, a little room below */
#about-us .rb-about .rb-lead { margin: 0 0 26px !important; }

/* Three facts in a row, divided by thin lines */
#content-view #about-us ul.rb-facts {   /* the theme indents lists by 30px */
  margin-left: 0 !important;
}
#about-us .rb-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 30px !important;
  padding: 18px 0 !important;
  list-style: none;
  border-block: 1px solid var(--rb-line-soft);
}
#about-us .rb-facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px;
  margin: 0 !important;
  text-align: center;
}
#about-us .rb-facts li + li { border-left: 1px solid var(--rb-line-soft); }
#about-us .rb-facts strong {
  color: var(--rb-accent) !important;
  font: 600 22px/1.15 var(--rb-serif) !important;
  white-space: nowrap;
}
#about-us .rb-facts span {
  color: var(--rb-muted) !important;
  font: 13px/1.35 var(--rb-sans) !important;
}

/* Small gold label above the offer list */
#about-us .rb-kicker {
  margin: 0 0 12px !important;
  color: var(--rb-accent) !important;
  font: 700 12px/1 var(--rb-sans) !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* What we do: four tiles in a 2 × 2 grid, each a link to that part of the booking */
#about-us .rb-offer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 28px;
}
#about-us a.rb-offer__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 14px;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 12px 12px 12px 12px;
  background: var(--rb-raised);
  border: 1px solid var(--rb-line-soft);
  border-radius: var(--rb-r-lg);
  color: var(--rb-text) !important;
  text-decoration: none !important;
  transition: border-color .3s, background-color .3s, transform .3s cubic-bezier(.22, .61, .36, 1);
}
#about-us a.rb-offer__item::before {               /* icon in a gold ring */
  content: "";
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(217, 154, 78, .45);
  border-radius: 50%;
  background: rgba(217, 154, 78, .08) center / 20px 20px no-repeat;
}
#about-us a.rb-offer__item--massage::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99A4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20c-4 0-7-3-7-7 3 0 5.5 1.5 7 4 1.5-2.5 4-4 7-4 0 4-3 7-7 7z'/%3E%3Cpath d='M12 17c-2-2-2.5-5-1.5-8 .4-1.2 1-2.3 1.5-3 .5.7 1.1 1.8 1.5 3 1 3 .5 6-1.5 8z'/%3E%3C/svg%3E"); }
#about-us a.rb-offer__item--facial::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99A4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 16l.7 1.8 1.8.7-1.8.7L19 21l-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E"); }
#about-us a.rb-offer__item--endo::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99A4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E"); }
#about-us a.rb-offer__item--wax::before     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99A4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3Cpath d='M9.5 14.5a2.5 2.5 0 0 0 2.5 2.5'/%3E%3C/svg%3E"); }
#about-us a.rb-offer__item::after {                /* chevron */
  content: "";
  grid-column: 3;
  grid-row: 1 / 3;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D99A4E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
#about-us a.rb-offer__item strong {
  grid-column: 2;
  align-self: end;
  color: var(--rb-text) !important;
  font: 600 17px/1.25 var(--rb-serif) !important;
}
#about-us a.rb-offer__item span {
  grid-column: 2;
  align-self: start;
  margin-top: 2px;
  color: var(--rb-muted) !important;
  font: 13px/1.4 var(--rb-sans) !important;
}
#about-us a.rb-offer__item:hover,
#about-us a.rb-offer__item:focus-visible {
  background: #322316;
  border-color: rgba(217, 154, 78, .6);
}
#about-us a.rb-offer__item:hover::after,
#about-us a.rb-offer__item:focus-visible::after { transform: translateX(4px); }

/* The closing line as a quiet quote between two gold rules */
#about-us .rb-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 24px !important;
  padding: 18px 0;
  border-block: 1px solid var(--rb-line-soft);
  color: var(--rb-text) !important;
  font: 400 20px/1.4 var(--rb-serif) !important;
  text-align: center !important;
}
#about-us .rb-quote span {
  color: var(--rb-accent) !important;
  font: 600 13px/1 var(--rb-sans) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Two buttons, same look as the rest of the site */
#about-us .rb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 !important;
}
#about-us a.rb-btn {
  display: inline-flex;
  flex: 1 1 180px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--rb-line);
  border-radius: var(--rb-r-sm);
  color: var(--rb-text) !important;
  font: 600 15px var(--rb-sans) !important;
  text-decoration: none !important;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
#about-us a.rb-btn:hover { border-color: var(--rb-accent); background: var(--rb-raised); }
#about-us a.rb-btn--primary {
  background: var(--rb-accent);
  border-color: var(--rb-accent);
  color: var(--rb-on-accent) !important;
}
#about-us a.rb-btn--primary:hover {
  background: var(--rb-accent-hi);
  border-color: var(--rb-accent-hi);
  box-shadow: 0 8px 24px rgba(217, 154, 78, .3);
}

/* Gentle entrance: facts, then the four tiles one after another */
@media (prefers-reduced-motion: no-preference) {
  #about-us .rb-facts,
  #about-us a.rb-offer__item,
  #about-us .rb-quote,
  #about-us .rb-actions { animation: rb-in-up .7s cubic-bezier(.22, .61, .36, 1) backwards; }
  #about-us .rb-facts { animation-delay: .25s; }
  #about-us a.rb-offer__item:nth-child(1) { animation-delay: .35s; }
  #about-us a.rb-offer__item:nth-child(2) { animation-delay: .43s; }
  #about-us a.rb-offer__item:nth-child(3) { animation-delay: .51s; }
  #about-us a.rb-offer__item:nth-child(4) { animation-delay: .59s; }
  #about-us .rb-quote { animation-delay: .7s; }
  #about-us .rb-actions { animation-delay: .8s; }
}

/* Phones */
@media (max-width: 767px) {
  #about-us .rb-facts li { padding: 0 6px; }
  #about-us .rb-facts strong { font-size: 19px !important; }
  #about-us .rb-facts span { font-size: 12px !important; }
  #about-us .rb-offer { gap: 8px; }
  #about-us a.rb-offer__item { grid-template-columns: 34px minmax(0, 1fr); padding: 10px; column-gap: 10px; }
  #about-us a.rb-offer__item::before { width: 34px; height: 34px; background-size: 18px 18px; }
  #about-us a.rb-offer__item::after { display: none; }
  #about-us a.rb-offer__item strong { font-size: 15px !important; }
  #about-us a.rb-offer__item span { font-size: 13px !important; }
  #about-us .rb-quote { font-size: 19px !important; }
}