.rcp-root,
.rcp-root * {
  box-sizing: border-box;
  font-family: "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.rcp-root {
  --rcp-red: var(--rcp-accent, #e8202a);
  --fn-red: var(--rcp-accent, #e8202a);
  --fn-red-dark: color-mix(in srgb, var(--rcp-accent, #e8202a) 84%, #000);
  --fn-text: #1b1b1f;
  --fn-muted: #8b8e96;
  --fn-line: #ececed;
  --fn-font: "Inter", "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rcp-ink: #111114;
  --rcp-muted: #6f737c;
  --rcp-soft: #f5f5f6;
  --rcp-line: #e8e8eb;
  --rcp-green: #25d366;
}

/* Agency floating nav code copied from RedCommerce prototype. */
.rcw-floating-nav {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 999999;
  width: min(600px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  transform: translateX(-50%);
  font-family: var(--fn-font);
}

.rcw-floating-nav__menu {
  position: absolute;
  bottom: 100%;
  /* The card FILLS the wrapper — see "One width drives the whole popup" below. The width
     itself is set there, from the menu_width option, so the bar and the open card stay
     exactly the same width and edge-aligned. Setting a width here instead was what made
     "Popup-breedte" look broken: max-width:100% clamped it back to the bar's ~340px. */
  left: 0;
  right: 0;
  width: auto;
  max-width: 100%;
  margin: 0 auto 14px;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(18, 20, 30, 0.06);
  box-shadow: 0 16px 36px -16px rgba(18, 20, 30, 0.28), 0 4px 12px -8px rgba(18, 20, 30, 0.12);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom center;
  pointer-events: none;
  visibility: hidden;
  will-change: transform, opacity;
  transition:
    opacity 0.13s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.24s;
}

.rcw-floating-nav.is-menu-open .rcw-floating-nav__menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.13s ease,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* Entrance animation variants (Builder → Advanced → Behavior). Only the
   closed-state transform differs; the open state always resets to 0/scale(1). */
#rcp-root[data-rcp-anim="fadeUp"] .rcw-floating-nav__menu { transform: translateY(26px) scale(1); }
#rcp-root[data-rcp-anim="slideL"] .rcw-floating-nav__menu { transform: translateX(28px) scale(1); transform-origin: bottom right; }
#rcp-root[data-rcp-anim="zoom"] .rcw-floating-nav__menu { transform: scale(0.82); }

/* No text selection anywhere in the widget — it should feel like an app, not a page
   you can highlight. The only exception is form controls, where the visitor still
   needs to select/edit what they typed (and iOS needs it to place the caret). */
#rcp-root,
#rcp-root * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* kill the iOS long-press copy/callout bubble */
}
#rcp-root input,
#rcp-root textarea,
#rcp-root select,
#rcp-root [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

.rcw-floating-nav__menu-inner {
  padding: 14px 24px;
}

.rcw-floating-nav__row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: background 0.14s ease;
}

.rcw-floating-nav__row:hover,
.rcw-floating-nav__row:focus-visible {
  background: #f7f7f8;
  outline: none;
}

.rcw-floating-nav__row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex: 0 0 auto;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 10%, transparent);
  color: var(--fn-red);
}

.rcw-floating-nav__row-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

.rcw-floating-nav__row-title {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 3px;
  line-height: 1.2;
}

.rcw-floating-nav__row-sub {
  display: block;
  font-size: 12.5px;
  color: var(--fn-muted);
  line-height: 1.45;
}

.rcw-floating-nav__row-action,
.rcw-floating-nav__row-price {
  margin-left: auto;
  align-self: center;
  color: var(--fn-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.rcw-floating-nav__row-price {
  color: var(--fn-red);
  font-size: 13px;
  font-weight: 700;
}

.rcw-floating-nav__bar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 18px 50px -14px rgba(18, 20, 30, 0.3), 0 4px 14px -8px rgba(18, 20, 30, 0.16);
  padding: 12px;
}

.rcw-floating-nav__item {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--fn-text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1 1 0;
  padding: 11px 6px;
  border-radius: 16px;
  position: relative;
  transition: background 0.16s ease;
}

.rcw-floating-nav__item:hover,
.rcw-floating-nav__item:focus-visible {
  background: #f5f5f7;
  color: var(--fn-text);
  outline: none;
  text-decoration: none;
}

.rcw-floating-nav__item svg {
  width: 22px;
  height: 22px;
  display: block;
}

.rcw-floating-nav__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1;
}

/* The Bellen button's phone number, as real rendered text a call-tracking script can find
   and swap. The bar shows an icon and the word "Bellen", so the digits would otherwise live
   only in the tel: href — and no DNI vendor reads hrefs.

   Parked off-screen, NEVER display:none, for the same reason .rcf-trap in multistep.css is:
   a scanner that skips invisible nodes is the audience. display:none would take it out of
   the render tree and we would be back to a button nothing can swap.

   It must also stay out of the flex layout, or the bar reflows around a number nobody sees. */
.rcw-tel-swap {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.rcw-floating-nav__caret {
  width: 15px;
  height: 15px;
  color: var(--fn-muted);
  transition: transform 0.22s ease;
}

.rcw-floating-nav.is-menu-open .rcw-floating-nav__item--diensten .rcw-floating-nav__caret {
  transform: rotate(180deg);
  color: var(--fn-text);
}

.rcp-services-open .rcw-floating-nav #rcp-services-toggle {
  background: transparent;
}

.rcp-services-open .rcw-floating-nav #rcp-services-toggle:hover,
.rcp-services-open .rcw-floating-nav #rcp-services-toggle:focus-visible {
  background: #f5f5f7;
}

.rcw-floating-nav__cta {
  flex: 0 0 auto;
  min-width: 178px;
  background: var(--fn-red);
  color: #fff;
  flex-direction: row;
  gap: 10px;
  padding: 0 20px;
  border-radius: 14px;
  margin: 0 3px;
  transition: background 0.16s ease, transform 0.18s ease;
}

.rcw-floating-nav__cta:hover,
.rcw-floating-nav__cta:focus-visible {
  background: var(--fn-red-dark);
  color: #fff;
}

.rcw-floating-nav__cta svg {
  width: 21px;
  height: 21px;
}

.rcw-floating-nav__cta .rcw-floating-nav__label {
  font-size: 15px;
  font-weight: 700;
}

.rcw-floating-nav.is-cta-active .rcw-floating-nav__cta,
.rcp-modal-open .rcw-floating-nav__cta {
  transform: translateY(-2px);
}

.rcw-floating-nav__label--short {
  display: none;
}

/* One width drives the whole popup. The wrapper sets it; the bar pill fills it
   (buttons centered) and the menu popover fills it too — so the bar and the
   open menu are ALWAYS the same width and edge-aligned. Kept compact + capped
   to the viewport so it never goes full-width on a phone. */
.rcw-floating-nav--actions {
  /* Driven by the popup's menu_width option (builder → Popup-breedte). With NO option set
     the fallback is fit-content: the bar takes exactly the width its own buttons need, so a
     long CTA label ("Offerte Aanvragen") is never truncated and never shoves Chat/Bellen out.
     A fixed 340px default could not know how wide the label was. */
  width: min(var(--rcp-menu-w, fit-content), calc(100% - 20px));
  max-width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto;

  /* The form's button row scales its type to --rc-w, the popup's own width, so "Terug" and
     "Stuur aanvraag" keep fitting on one line in a narrow popup. That variable was only ever
     printed by the WhatsApp popup, so in booking mode the row always measured itself against
     380px however narrow the card really was, ran out of room and wrapped: "Terug" alone on
     one line with the send button stranded underneath. Reproduced at a 320 and a 340px card.
     The fallback matches the fit-content bar, which is about 340px wide. */
  --rc-w: var(--rcp-menu-w, 340px);
}

/* Builder "Vaste breedte": #rcp-root carries data-rcp-barw="fixed" plus the
   --rcp-bar-max custom property. Nothing consumed either before this rule, so
   the width setting silently did nothing (live AND in preview). */
#rcp-root[data-rcp-barw="fixed"] .rcw-floating-nav--actions {
  width: min(var(--rcp-bar-max, 340px), calc(100% - 20px));
}

.rcw-floating-nav--actions .rcw-floating-nav__bar {
  align-items: center;
  /* space-between + real side padding, so Chat and Bellen sit INSIDE the pill instead of
     against its rounded edge. Centring alone was not enough: the CTA does not shrink, so a
     long label (e.g. "Offerte Aanvragen") pushed the outer two buttons out over the padding
     and they ended up flush with the edge. */
  justify-content: space-between;
  gap: 10px;
  min-height: 70px;
  padding: 8px 16px;
  border-radius: 999px;
  width: 100%;               /* fill the wrapper so the bar pill == the menu popover width */
  box-sizing: border-box;
  max-width: 100%;
}

.rcw-floating-nav--actions .rcw-floating-nav__item {
  flex: 0 0 auto;
  gap: 6px;
  min-height: 46px;
  padding: 2px 16px;   /* hug the content with equal side padding — no min-width, so the
                          gap from the pill edge to Chat (left) and Bellen (right) is even */
  border-radius: 999px;
}

.rcw-floating-nav--actions .rcw-floating-nav__item svg {
  width: 25px;
  height: 25px;
}

/* WhatsApp is a filled glyph — it reads heavier than the outline icons, so
   shrink it a touch to optically match Bellen/Boeken. */
.rcw-floating-nav--actions #rcp-chat svg {
  width: 21px;
  height: 21px;
}

.rcw-floating-nav--actions .rcw-floating-nav__label {
  font-size: 15px;
  font-weight: 700;
}

.rcw-floating-nav--actions .rcw-floating-nav__cta {
  /* Takes the middle space, and is the one item allowed to shrink — flex:0 0 auto made it
     immovable, so everything else got squeezed to the edges instead. */
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  flex-direction: row;
  gap: 9px;
  padding: 0 20px;
  border-radius: 999px;
  margin: 0;
}

.rcw-floating-nav--actions .rcw-floating-nav__cta svg {
  width: 20px;
  height: 20px;
}

/* Theme-proofing the bar's button shape.
   Salient ships `border-radius: 8px !important` in salient-dynamic-styles.css (its
   "slightly_round" button style) and it matches our CTA, so the plugin's 999px pill lost
   and the middle button came out as a rounded rectangle on that site while looking correct
   everywhere else. An !important of our own is the only thing that can answer another
   stylesheet's !important — scoped through #rcp-root so it outranks it on specificity too,
   and limited to the radius so the theme keeps no say over the widget's shape. */
#rcp-root .rcw-floating-nav--actions .rcw-floating-nav__cta,
#rcp-root .rcw-floating-nav--actions .rcw-floating-nav__item {
  border-radius: 999px !important;
}

.rcw-floating-nav--actions .rcw-floating-nav__cta .rcw-floating-nav__label {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  /* The CTA may now shrink, so a long label has to degrade on ONE line rather than wrap the
     pill into two rows. Widen the popup (Popup-breedte) if a label needs more room. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .rcw-floating-nav {
    max-width: 430px;
  }

  .rcw-floating-nav__bar {
    gap: 2px;
    padding: 8px;
  }

  .rcw-floating-nav__item {
    gap: 6px;
    padding: 9px 4px;
  }

  .rcw-floating-nav__item svg {
    width: 21px;
    height: 21px;
  }

  .rcw-floating-nav__label {
    font-size: 11px;
  }

  .rcw-floating-nav__label--full {
    display: none;
  }

  .rcw-floating-nav__label--short {
    display: inline;
  }

  .rcw-floating-nav__cta {
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    width: 64px;
    padding: 10px 4px;
    border-radius: 18px;
    margin: -14px 2px 0;
  }

  .rcw-floating-nav__cta svg {
    width: 22px;
    height: 22px;
  }

  .rcw-floating-nav__cta .rcw-floating-nav__label {
    font-size: 11px;
    font-weight: 700;
  }

  .rcw-floating-nav--actions {
    /* The option applies below 720px too — this rule hard-coded 340px, which is why
       "Popup-breedte" appeared to do nothing: the BUILDER CANVAS is a 640px viewport, so
       this media query was always the one winning there (and on real phones). Unset =
       fit-content, same as desktop; the narrower cap keeps it on screen. */
    width: min(var(--rcp-menu-w, fit-content), calc(100% - 16px));
    max-width: calc(100% - 16px);
  }

  /* On a phone the pill HUGS its buttons instead of filling the configured width.
     Below 720px the labels swap to their short form and shrink, so the three buttons need
     noticeably less room than they do on desktop — while the wrapper stays at whatever
     Popup-breedte says. width:100% + space-between then spread them to the pill's edges and
     the bar read as a full-width strip on a large phone: [ chat    boeken    bellen ].
     Hugging keeps it compact and centred, and the configured width still caps it (max-width).
     The open menu card keeps the full wrapper width — it holds the booking form and must not
     shrink to the bar's size — so on mobile the bar is narrower than the card above it. */
  .rcw-floating-nav--actions .rcw-floating-nav__bar {
    gap: 8px;
    min-height: 64px;
    padding: 8px 12px;
    border-radius: 999px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  .rcw-floating-nav--actions .rcw-floating-nav__item {
    gap: 5px;
    min-width: 64px;
    min-height: 44px;
    padding: 2px 10px;
    border-radius: 999px;
  }

  .rcw-floating-nav--actions .rcw-floating-nav__item svg {
    width: 23px;
    height: 23px;
  }

  .rcw-floating-nav--actions #rcp-chat svg {
    width: 19px;
    height: 19px;
  }

  .rcw-floating-nav--actions .rcw-floating-nav__label {
    font-size: 13px;
    font-weight: 700;
  }

  .rcw-floating-nav--actions .rcw-floating-nav__cta {
    flex: 0 0 auto;
    min-width: 132px;
    width: auto;
    height: 48px;
    flex-direction: row;
    gap: 8px;
    padding: 0 18px;
    border-radius: 999px;
    margin: 0;
  }

  .rcw-floating-nav--actions .rcw-floating-nav__cta svg {
    width: 20px;
    height: 20px;
  }

  .rcw-floating-nav--actions .rcw-floating-nav__cta .rcw-floating-nav__label {
    font-size: 15px;
    font-weight: 700;
  }
}

.rcp-root button,
.rcp-root input,
.rcp-root select,
.rcp-root textarea,
.rcp-root a {
  font: inherit;
}

.rcp-root button,
.rcp-root a {
  -webkit-tap-highlight-color: transparent;
}

.rcp-lock {
  overflow: hidden;
}

.rcp-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(15, 15, 18, 0.34);
  opacity: 0;
  /* Same click-trap guard as .rcp-modal: a fullscreen fixed overlay must
     not eat clicks when closed if `hidden` is ever defeated. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.rcp-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Focus scrim: a slight dim over the whole page (behind the bar + menu) that
   fades in when a category is opened, so attention stays on the popup.
   z-index sits below the floating nav (999999) but above the page. */
.rcp-scrim {
  position: fixed;
  inset: 0;
  z-index: 999990;
  background: rgba(12, 13, 16, 0.34);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.rcp-scrim.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}

/* Confirmation dialog for the WhatsApp / call links (prevents accidental taps).
   Closed state is non-interactive even if the `hidden` attribute is defeated by
   a theme, so it can never trap clicks. */
.rcp-confirm {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.rcp-confirm.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}
.rcp-confirm__sheet {
  width: min(340px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 24px 20px 16px;
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.32);
  text-align: center;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.2s ease;
}
.rcp-confirm.is-open .rcp-confirm__sheet {
  transform: none;
}
.rcp-confirm__msg {
  margin: 0 0 18px;
  /* This heading is a <p>, and host themes style bare paragraphs. enjoyriding's theme
     alone adds `p { padding-bottom: 27px }` AND `p { padding-bottom: 1.5em }`, which
     landed 24px of invisible padding INSIDE our heading and made the sheet's spacing
     a property of whichever theme the client happens to run. Reset it explicitly so
     the confirm box measures the same everywhere. */
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--fn-text);
}

/* Optional phone capture inside the confirm sheet. Hidden unless the widget reveals it
   (ad visitors only, and only when the setting is on), so it can never flash into view
   on a site that has the feature switched off.

   There is no visible label — the placeholder carries it — so the input keeps an
   aria-label in the markup. A field a screen reader announces only as "edit text" is
   not a shorter field, it is an unusable one. */
.rcp-confirm__phone {
  margin: 0 0 14px;
  text-align: left;
}
.rcp-confirm__phone[hidden] { display: none; }
/* Pull the field up under the heading, but ONLY when it is actually showing. The same
   sheet is reused by the Bellen and logout confirms, where the heading's normal 18px
   breathing room below it is still what we want. If :has() is unsupported the rule is
   skipped and the spacing simply stays as it was — no breakage, just less snug. */
.rcp-confirm__sheet:has(.rcp-confirm__phone:not([hidden])) .rcp-confirm__msg {
  margin-bottom: 8px;
}
.rcp-confirm__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px; /* 16px-ish stops iOS zooming the page on focus */
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  background: #fff;
  color: inherit;
}
.rcp-confirm__input:focus-visible {
  /* The browser's own focus ring, not an accent-coloured one. `auto` is load-bearing:
     host themes commonly set `input:focus { outline: 0 }`, so simply removing this rule
     (or using `revert`) leaves the field with no visible focus at all. */
  outline: auto;
  outline-offset: 0;
}
.rcp-confirm__actions {
  display: flex;
  gap: 10px;
}
.rcp-confirm__btn {
  flex: 1 1 0;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.14s ease;
}
.rcp-confirm__btn--cancel {
  background: #f1f1f3;
  color: var(--fn-text);
}
.rcp-confirm__btn--cancel:hover {
  background: #e5e5e8;
}
.rcp-confirm__btn--ok {
  background: var(--fn-red);
  color: #fff;
}
.rcp-confirm__btn--ok:hover {
  background: var(--fn-red-dark);
}

/* Info modal — centered popup with a title + paragraph (FAQ answers), over a slight
   dim so it draws focus. */
.rcp-info {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(8, 9, 12, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.rcp-info.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}
.rcp-info__sheet {
  position: relative;
  width: min(380px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 26px 22px 22px;
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.32);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.2s ease;
}
.rcp-info.is-open .rcp-info__sheet {
  transform: none;
}
.rcp-info__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  background: #f1f1f3;
  color: var(--fn-text);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.14s ease;
}
.rcp-info__close:hover {
  background: #e5e5e8;
}
[dir="rtl"] .rcp-info__close {
  right: auto;
  left: 12px;
}
.rcp-info__title {
  margin: 0 0 10px;
  padding-right: 28px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fn-text);
}
[dir="rtl"] .rcp-info__title {
  padding-right: 0;
  padding-left: 28px;
}
.rcp-info__body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fn-muted, #555);
}

/* Loading state (Mijn lessen) — centered spinner + label while content "loads". */
.rcw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 52px 16px;
}
.rcw-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--fn-red);
  animation: rcwSpin 0.7s linear infinite;
}
@keyframes rcwSpin {
  to { transform: rotate(360deg); }
}
.rcw-loading__text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fn-muted);
}

/* Google review rows (Geslaagden & reviews). */
.rcw-review__ava {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 1px;
  background: #e7e8eb center / cover no-repeat;
}
.rcw-review__stars {
  margin-left: 7px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #f5a623;
  font-weight: 400;
  vertical-align: 1px;
}
.rcw-review__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rcw-review__attr {
  margin: 10px 6px 2px;
  font-size: 11.5px;
  color: var(--fn-muted);
  text-align: center;
}

.rcp-services-open #rcp-services-toggle {
  background: #eeeeef;
}

.rcp-back {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #f0f0f2;
  color: #434650;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
}

.rcp-choice-card__icon,
.rcp-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 9%, transparent);
  color: var(--rcp-red);
}

.rcp-choice-card__icon svg,
.rcp-service-card__icon svg {
  width: 20px;
  height: 20px;
}

.rcp-modal {
  position: fixed;
  left: 50%;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 92px);
  z-index: 999999;
  width: min(470px, calc(100% - 24px));
  max-height: min(720px, calc(100vh - 116px));
  overflow: hidden;
  border: 1px solid rgba(20, 20, 24, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(17, 24, 39, 0.28);
  opacity: 0;
  /* Closed state must not capture pointer events even if the `hidden`
     attribute's display:none is overridden by a theme rule like
     `section { display: block }` (this is a <section>). Without this it
     becomes an invisible fixed z-999999 click-trap over the live menu. */
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(18px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.rcp-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.rcp-modal__shell {
  max-height: min(720px, calc(100vh - 116px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 22px 20px, color-mix(in srgb, var(--rcp-accent, #e8202a) 8%, transparent), transparent 90px),
    #ffffff;
}

.rcp-close {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f0f0f2;
  color: #7f838c;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.rcp-close:hover,
.rcp-close:focus-visible {
  background: #e7e7ea;
  color: var(--rcp-ink);
  outline: none;
}

.rcp-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 17px 78px 15px 18px;
  border-bottom: 1px solid var(--rcp-line);
}

.rcp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.12);
}

.rcp-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rcp-red);
  color: #ffffff;
  font-weight: 700;
}

.rcp-agent {
  min-width: 0;
}

.rcp-agent strong,
.rcp-agent span {
  display: block;
}

.rcp-agent strong {
  overflow: hidden;
  color: var(--rcp-ink);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcp-agent span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #20b35a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.rcp-agent i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20c964;
  box-shadow: 0 0 0 4px rgba(32, 201, 100, 0.12);
}

.rcp-modal__mark {
  position: absolute;
  right: 52px;
  top: 18px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #111114;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.rcp-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 14px 0;
}

.rcp-tabs button {
  appearance: none;
  border: 0;
  border-radius: 14px;
  background: #f0f0f2;
  color: #5f646e;
  cursor: pointer;
  min-height: 42px;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease;
}

.rcp-tabs button.is-active {
  background: var(--rcp-red);
  color: #ffffff;
}

.rcp-panel {
  display: none;
  padding: 14px 18px 18px;
}

.rcp-panel.is-active,
.rcp-step.is-active {
  display: block;
  animation: rcp-slide-in 0.2s ease both;
}

.rcp-step {
  display: none;
}

.rcp-kicker {
  margin: 0 0 5px;
  color: var(--rcp-red);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.rcp-step h3,
.rcp-panel h3 {
  margin: 0 0 14px;
  color: var(--rcp-ink);
  font-size: 21px;
  line-height: 1.16;
}

.rcp-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 16px;
}

.rcp-progress span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  border-radius: 14px;
  background: #f0f0f2;
  color: #878b94;
  line-height: 1;
}

.rcp-progress b {
  font-size: 12px;
}

.rcp-progress em {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin-top: 4px;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rcp-progress span.is-active {
  background: var(--rcp-red);
  color: #ffffff;
}

.rcp-progress span.is-complete {
  background: #111114;
  color: #ffffff;
}

.rcp-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rcp-choice-card,
.rcp-service-card,
.rcp-date-chip {
  appearance: none;
  border: 1px solid var(--rcp-line);
  background: #ffffff;
  color: var(--rcp-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.rcp-choice-card {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 11px;
  padding: 14px;
  border-radius: 18px;
}

.rcp-choice-card strong,
.rcp-choice-card span {
  display: block;
}

.rcp-choice-card strong {
  font-size: 15px;
  line-height: 1.2;
}

.rcp-choice-card > span:not(.rcp-choice-card__icon) {
  color: var(--rcp-muted);
  font-size: 12px;
  line-height: 1.2;
}

.rcp-choice-card:hover,
.rcp-choice-card:focus-visible,
.rcp-choice-card.is-selected,
.rcp-service-card:hover,
.rcp-service-card:focus-visible,
.rcp-service-card.is-selected,
.rcp-date-chip:hover,
.rcp-date-chip:focus-visible,
.rcp-date-chip.is-selected {
  border-color: color-mix(in srgb, var(--rcp-accent, #e8202a) 55%, transparent);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.rcp-choice-card.is-selected,
.rcp-service-card.is-selected,
.rcp-date-chip.is-selected {
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 5%, transparent);
}

.rcp-choice-list,
.rcp-date-list,
.rcp-lessons-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rcp-service-card {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 18px;
}

.rcp-service-card strong,
.rcp-service-card em {
  display: block;
}

.rcp-service-card strong {
  color: var(--rcp-ink);
  font-size: 14px;
  line-height: 1.2;
}

.rcp-service-card em {
  overflow: hidden;
  margin-top: 4px;
  color: var(--rcp-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.rcp-service-card b {
  color: var(--rcp-red);
  font-size: 13px;
  white-space: nowrap;
}

.rcp-date-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.rcp-date-chip {
  min-height: 58px;
  padding: 11px 9px;
  border-radius: 16px;
  text-align: center;
}

.rcp-date-chip strong,
.rcp-date-chip span {
  display: block;
}

.rcp-date-chip strong {
  font-size: 13px;
  line-height: 1.15;
}

.rcp-date-chip span {
  margin-top: 4px;
  color: var(--rcp-muted);
  font-size: 10px;
  font-weight: 700;
}

.rcp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.rcp-field span {
  color: #4f535e;
  font-size: 12px;
  font-weight: 700;
}

.rcp-field input,
.rcp-field textarea,
.rcp-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dcdee4;
  border-radius: 15px;
  background: #f8f8f9;
  color: var(--rcp-ink);
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 13px;
  outline: none;
}

.rcp-field-error,
.rcw-field-error {
  display: block;
  margin: 2px 2px 0;
  color: #b42318;
  font-size: 12.5px;
  line-height: 1.35;
}

.rcp-field-error[hidden],
.rcw-field-error[hidden] {
  display: none;
}

.rcp-field textarea {
  min-height: 96px;
  resize: vertical;
}

.rcp-field input:focus,
.rcp-field textarea:focus,
.rcp-field select:focus {
  border-color: color-mix(in srgb, var(--rcp-accent, #e8202a) 70%, transparent);
  background: #ffffff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rcp-accent, #e8202a) 9%, transparent);
}

.rcp-summary {
  position: relative;
  margin-bottom: 12px;
  padding: 13px 88px 13px 14px;
  border: 1px solid color-mix(in srgb, var(--rcp-accent, #e8202a) 15%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 5%, transparent);
}

.rcp-summary strong,
.rcp-summary span {
  display: block;
}

.rcp-summary strong {
  color: var(--rcp-ink);
  font-size: 14px;
  line-height: 1.25;
}

.rcp-summary span {
  margin-top: 4px;
  color: var(--rcp-muted);
  font-size: 12px;
  line-height: 1.3;
}

.rcp-summary b {
  position: absolute;
  right: 13px;
  top: 50%;
  max-width: 78px;
  overflow: hidden;
  color: var(--rcp-red);
  font-size: 13px;
  text-overflow: ellipsis;
  transform: translateY(-50%);
  white-space: nowrap;
}

.rcp-submit,
.rcp-whatsapp-handoff,
.rcp-pay-link,
.rcp-invoice-btn {
  width: 100%;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  min-height: 50px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.rcp-submit {
  background: var(--rcp-red);
  color: #ffffff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--rcp-accent, #e8202a) 26%, transparent);
}

.rcp-submit:hover,
.rcp-submit:focus-visible {
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.rcp-after-submit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 9px;
}

.rcp-pay-link {
  display: block;
  background: #111114;
  color: #ffffff;
}

.rcp-pay-link:hover,
.rcp-pay-link:focus-visible {
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.rcp-invoice-btn {
  display: block;
  background: #f0f0f2;
  color: #202229;
}

.rcp-whatsapp-handoff {
  display: block;
  margin-top: 9px;
  background: var(--rcp-green);
  color: #ffffff;
}

.rcp-whatsapp-handoff:hover,
.rcp-whatsapp-handoff:focus-visible {
  color: #ffffff;
  outline: none;
  text-decoration: none;
}

.rcp-back {
  width: auto;
  margin-bottom: 10px;
}

.rcp-form-message {
  min-height: 20px;
  margin: 10px 0 0;
  color: #555965;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.rcp-form-message.is-success {
  color: #168846;
}

.rcp-form-message.is-error {
  color: #c41924;
}

.rcp-form-message.is-loading {
  color: var(--rcp-ink);
}

.rcp-lesson {
  position: relative;
  padding: 13px 13px 13px 34px;
  border: 1px solid var(--rcp-line);
  border-radius: 17px;
  background: #ffffff;
}

.rcp-lesson__dot {
  position: absolute;
  left: 13px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rcp-red);
}

.rcp-lesson strong,
.rcp-lesson span,
.rcp-lesson small {
  display: block;
}

.rcp-lesson strong {
  color: var(--rcp-ink);
  font-size: 14px;
  line-height: 1.25;
}

.rcp-lesson span {
  margin-top: 4px;
  color: #656974;
  font-size: 12px;
  line-height: 1.3;
}

.rcp-lesson small {
  margin-top: 6px;
  color: #989ba4;
  font-size: 11px;
}

/* Past-dated lesson: shown as "Afgerond" (completed), dimmed with a grey marker. */
.rcp-lesson.is-past {
  background: #f7f8fa;
  border-color: #e6e8ec;
}

.rcp-lesson.is-past .rcp-lesson__dot {
  background: #b7bcc5;
}

.rcp-lesson.is-past strong {
  color: #6b7280;
}

.rcp-lesson__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e7f4ec;
  color: #1f8a4c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.rcp-empty {
  margin: 0;
  padding: 20px;
  border: 1px dashed #d9dbe1;
  border-radius: 18px;
  background: #f8f8f9;
  color: #656974;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@keyframes rcp-slide-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {

  .rcp-modal {
    bottom: 114px;
  }
}

@media (max-width: 480px) {

  .rcp-modal {
    width: calc(100% - 14px);
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 88px);
  }

  .rcp-modal {
    max-height: calc(100vh - 104px);
    border-radius: 22px;
  }

  .rcp-modal__shell {
    max-height: calc(100vh - 104px);
  }

  .rcp-modal__header {
    padding: 15px 50px 13px 15px;
  }

  .rcp-modal__mark {
    display: none;
  }

  .rcp-panel {
    padding: 13px 15px 16px;
  }

  .rcp-step h3,
  .rcp-panel h3 {
    font-size: 19px;
  }

  .rcp-choice-grid,
  .rcp-date-list {
    grid-template-columns: 1fr;
  }

  .rcp-choice-card {
    min-height: 92px;
  }

  .rcp-progress {
    gap: 5px;
  }

  .rcp-progress span {
    min-height: 38px;
  }

  .rcp-progress em {
    display: none;
  }
}

@media (max-width: 370px) {

  .rcp-service-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
  }
}

/* RedCommerce agency parity layer. Keeps features, forces visual match. */
.rcp-root {
  --rcp-muted: #777777;
  --rcp-soft: #f3f3f3;
  --rcp-line: #dedede;
}

.rcp-overlay {
  background: rgba(0, 0, 0, 0.34);
}

.rcp-services-open #rcp-services-toggle {
  background: #f2f2f2;
}

.rcp-modal {
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 94px);
  width: min(440px, calc(100% - 28px));
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.15);
}

.rcp-modal__shell {
  background: #ffffff;
}

.rcp-modal__header {
  min-height: 72px;
  padding: 16px 58px 14px 18px;
}

.rcp-modal__mark {
  display: none;
}

.rcp-tabs button {
  border-radius: 12px;
  background: #f4f4f4;
}

.rcp-progress span {
  border-radius: 999px;
  background: #f2f2f2;
}

.rcp-choice-card {
  min-height: 104px;
  border-radius: 14px;
}

.rcp-choice-card__icon,
.rcp-service-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 8%, transparent);
  color: var(--rcp-red);
}

.rcp-choice-card__icon svg,
.rcp-service-card__icon svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 768px) {

  .rcp-modal {
    bottom: 116px;
  }
}

@media (max-width: 480px) {

  .rcp-modal {
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 94px);
  }
}

/* Exact copied floating-nav classes win over legacy RC Premium classes. */

@media (prefers-reduced-motion: reduce) {
  .rcp-root *,
  .rcp-root *::before,
  .rcp-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Offerte pop-out actions menu — matches RedCommerce reference ===== */
.rcw-floating-nav__menu--actions {
  width: 100%;
}

.rcw-floating-nav__menu--actions .rcw-floating-nav__menu-inner {
  padding: 6px 22px;
  /* The height cap + scroll live on the inner wrapper, NOT the card. Two reasons:
     (1) iOS Safari hides position:absolute children (the close/account buttons) of a
     -webkit-overflow-scrolling container; (2) overflow:hidden on the rounded card was
     clipping those same buttons away on iOS. The card stays unclipped so they show. */
  max-height: min(74vh, 620px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* RedCommerce credit link — home view only, top-LEFT of the header strip. The
   language flags are centered (see .rcw-lang) and the account/close buttons sit
   top-right, so the wordmark owns the left corner without colliding.
   Hidden on sub-views (they use the back/title header). */
.rcw-brand {
  position: absolute;
  top: 15px;
  left: 14px;
  z-index: 6;
  line-height: 0;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}
.rcw-brand__logo {
  display: block;
  height: 26px; /* icon-only R-mark (no wordmark) — a touch taller since it's compact */
  width: auto;
}
.rcw-floating-nav__menu--actions.rcp-subview .rcw-brand { display: none; }

/* No language bar (≤1 language): the sticky lang bar that normally reserves the top
   strip is gone, so the absolute close/account buttons (top:14px, 30px tall) would
   overlap the first row. Reserve that strip on the scroll wrapper instead. Only on the
   home view — sub-views have their own back/title header that clears the buttons. */
.rcw-floating-nav__menu--actions.rcp-no-langbar:not(.rcp-subview) .rcw-floating-nav__menu-inner {
  padding-top: 52px;
}
/* …unless the screen has its own title row. Then the row is padded clear of the close button
   instead, and the reserved strip is dead space: a one-language popup opened ~52px taller
   than its content with an empty band above "Aanvraag". Menu rows have no title row and keep
   the strip. rcp-has-head is set per view in rc-premium.js. */
.rcw-floating-nav__menu--actions.rcp-no-langbar:not(.rcp-subview).rcp-has-head .rcw-floating-nav__menu-inner {
  padding-top: 12px;
}
.rcw-floating-nav__menu--actions.rcp-has-head:not(.rcp-subview) .rcw-actions-head {
  padding-right: 44px;
}
[dir="rtl"] .rcw-floating-nav__menu--actions.rcp-has-head:not(.rcp-subview) .rcw-actions-head {
  padding-right: 0;
  padding-left: 44px;
}

/* Sub-views (booking steps, category pages, …): the language bar + account button are
   "home only". Hide them so they don't waste top space; keep just the close button
   top-right. The back/title header sits at the top and is padded so the long titles
   never run under the close button. */
.rcw-floating-nav__menu--actions.rcp-subview .rcw-lang,
.rcw-floating-nav__menu--actions.rcp-subview .rcw-floating-nav__login {
  display: none;
}
/* …except on the booking flow. Turning the category menu on makes the form a sub-view, and
   hiding the flags there left a two-language popup with no switch on the screen visitors
   actually fill in. The strip keeps its natural place: the sticky top row, flags left. */
.rcw-floating-nav__menu--actions.rcp-subview.rcp-langbar-keep .rcw-lang {
  display: flex;
}
.rcw-floating-nav__menu--actions.rcp-subview .rcw-actions-head {
  padding-right: 44px;
}
[dir="rtl"] .rcw-floating-nav__menu--actions.rcp-subview .rcw-actions-head {
  padding-right: 0;
  padding-left: 44px;
}
/* On sub-views the close button sits on the back/title row, so match the back button's
   size (38px, 20px icon) and align its top to the back button (menu-inner 6px + head 4px). */
.rcw-floating-nav__menu--actions.rcp-subview .rcw-floating-nav__close {
  width: 38px;
  height: 38px;
  top: 10px;
}
.rcw-floating-nav__menu--actions.rcp-subview .rcw-floating-nav__close svg {
  width: 20px;
  height: 20px;
}

.rcw-floating-nav__menu--actions .rcw-floating-nav__row {
  align-items: center;
  gap: 18px;
  padding: 15px 6px;
}

.rcw-floating-nav__menu--actions .rcw-floating-nav__row-icon {
  width: 28px;
  height: 28px;
  margin: 0;
  background: transparent;
  border-radius: 0;
  color: var(--fn-text);
}

.rcw-floating-nav__menu--actions .rcw-floating-nav__row-icon svg {
  width: 26px;
  height: 26px;
}

.rcw-floating-nav__menu--actions .rcw-floating-nav__row-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--fn-text);
}

.rcw-floating-nav__menu--actions .rcw-floating-nav__row-action {
  margin-left: auto;
  color: var(--fn-text);
  font-size: 20px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .rcw-floating-nav__menu--actions {
    width: 100%;
  }

  .rcw-floating-nav__menu--actions .rcw-floating-nav__menu-inner {
    padding: 4px 18px;
  }

  .rcw-floating-nav__menu--actions .rcw-floating-nav__row {
    padding: 20px 4px;
  }
}

.rcw-floating-nav__row-badge {
  margin-left: auto;
  align-self: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--fn-red);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* ===== Actions menu subpages + mock demo data ===== */
.rcw-floating-nav__menu-inner {
  position: relative;
}

.rcw-actions-view[hidden] {
  display: none;
}

/* Subtle navigation transition: a quick directional slide when going into a
   page/category (in from the right) or back (in from the left). Kept short and
   small so it reads as movement, not a slow "loading" pop-in. */
.rcw-actions-view:not([hidden]) {
  animation: rcwViewIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.rcw-floating-nav__menu-inner.is-back .rcw-actions-view:not([hidden]) {
  animation-name: rcwViewInBack;
}

@keyframes rcwViewIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rcwViewInBack {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.rcw-actions-sub {
  padding: 4px 0 6px;
}

.rcw-actions-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--fn-line);
}

/* The booking form only. Its progress circles sit directly under the header, and a rule
   plus a row of circles reads as two dividers stacked. Every other card view keeps the
   line — it is what separates the title from a list of rows. */
.rcw-actions-view[data-rcp-view="book.form"] .rcw-actions-head {
  border-bottom: 0;
  margin-bottom: 0;
}

/* An explicit `display` beats the browser's own [hidden] { display: none }, so setting
   the hidden attribute on this button did nothing at all — it stayed on screen on the
   booking form with the menu switched off. Any element with a display rule of its own
   needs this to make `hidden` mean hidden. */
.rcw-actions-back[hidden] { display: none !important; }

.rcw-actions-back {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  background: #f3f3f5;
  color: var(--fn-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.rcw-actions-back:hover,
.rcw-actions-back:focus-visible {
  background: #e8e8ec;
  outline: none;
}

.rcw-actions-back svg {
  width: 20px;
  height: 20px;
}

.rcw-actions-head__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fn-text);
}

.rcw-actions-lead {
  margin: 4px 4px 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fn-muted);
}

/* Some host themes add padding to <p> (the lead is a <p>); reset it so the gap
   below the lead text stays tight. #rcp-root beats the theme's selector. */
#rcp-root .rcw-actions-lead {
  padding: 0;
}

.rcw-line {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
  border-radius: 12px;
  transition: background 0.14s ease;
}

.rcw-line:hover,
.rcw-line:focus-visible {
  background: #f7f7f8;
  outline: none;
}

.rcw-line__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--fn-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcw-line__icon svg {
  width: 23px;
  height: 23px;
}

.rcw-line__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rcw-line__text b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fn-text);
}

.rcw-line__text em {
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.3;
  color: var(--fn-muted);
}

.rcw-line__end {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rcw-line__arrow {
  font-size: 18px;
  font-weight: 700;
  color: var(--fn-text);
}

.rcw-line__price {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--fn-text);
}

.rcw-pill-btn {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--fn-red);
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

/* A claimed (remembered) aanbieding: green "Toegepast" pill + soft green row. */
.rcw-pill-btn.is-claimed {
  color: #0a7d34;
  background: color-mix(in srgb, #0a7d34 12%, #fff);
}
.rcw-line.is-claimed {
  background: color-mix(in srgb, #0a7d34 6%, transparent);
  border-radius: 14px;
}

/* Discount reminder shown on the confirmation / payment screen. */
.rcw-offer-applied {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 11px 13px;
  border-radius: 14px;
  background: color-mix(in srgb, #0a7d34 8%, transparent);
  border: 1px solid color-mix(in srgb, #0a7d34 20%, transparent);
}
.rcw-offer-applied__icon {
  display: flex;
  color: #0a7d34;
  flex: 0 0 auto;
}
.rcw-offer-applied__icon svg { width: 20px; height: 20px; }
.rcw-offer-applied__text { display: flex; flex-direction: column; line-height: 1.25; }
.rcw-offer-applied__text b { font-size: 14px; color: #0a5c27; }
.rcw-offer-applied__text em { font-style: normal; font-size: 12px; color: #0a7d34; }

.rcw-status {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.rcw-status--ok {
  color: #0a7d34;
  background: rgba(37, 211, 102, 0.16);
}

.rcw-status--wait {
  color: #aa6500;
  background: rgba(255, 176, 32, 0.18);
}

.rcw-actions-foot {
  margin-top: 6px;
  padding: 12px 4px 2px;
  border-top: 1px solid var(--fn-line);
}

.rcw-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.rcw-total span {
  font-size: 14px;
  font-weight: 600;
  color: var(--fn-muted);
}

.rcw-total b {
  font-size: 18px;
  font-weight: 700;
  color: var(--fn-text);
}

.rcw-actions-cta {
  width: 100%;
  min-height: 44px;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: var(--fn-red);
  font-size: 15px;
  font-weight: 700;
  padding: 13px;
  border-radius: 14px;
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--rcp-accent, #e8202a) 60%, transparent);
  transition: background 0.16s ease;
}

.rcw-actions-cta:hover,
.rcw-actions-cta:focus-visible {
  background: var(--fn-red-dark);
  outline: none;
}

.rcw-actions-stats {
  display: flex;
  gap: 10px;
  margin: 2px 2px 8px;
}

.rcw-stat {
  flex: 1 1 0;
  background: #f6f6f7;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
}

.rcw-stat b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--fn-text);
}

.rcw-stat span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fn-muted);
}

.rcw-foot-note {
  margin: 0 2px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fn-muted);
}

.rcw-hero {
  margin: 2px 2px 12px;
  padding: 18px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 6%, transparent);
  text-align: center;
}

.rcw-hero b {
  display: block;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--fn-red);
}

.rcw-hero span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fn-muted);
}

.rcw-bullets {
  list-style: none;
  margin: 0 2px 6px;
  padding: 0;
}

.rcw-bullets li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fn-text);
}

.rcw-bullets li + li {
  border-top: 1px solid var(--fn-line);
}

.rcw-bullets li svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--fn-red);
}

/* ----- Language switcher + RTL ----- */
.rcw-lang {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  /* Top-LEFT on Julio's call. The brand logo used to own that corner, which is why the
     flags were centred; the logo is off by default (show_brand) and when it is on it sits
     in the same strip, so the flags start after it rather than under it. */
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 2px;
  padding: 10px 2px;
  background: #fff;
  border-bottom: 1px solid var(--fn-line);
}

/* With the RedCommerce logo on, it owns the top-left corner (absolute, left:14px), so the
   left-aligned flags start after it instead of underneath it. The logo is only in the DOM
   when the setting is on; rcp-brand-off is set by the builder bridge when it hides it live. */
.rcw-floating-nav__menu--actions:has(#rcp-brand) .rcw-lang { padding-left: 84px; }
.rcw-floating-nav__menu--actions.rcp-brand-off .rcw-lang { padding-left: 2px; }

.rcw-lang__btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.rcw-lang__btn svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

.rcw-lang__btn:hover {
  opacity: 0.85;
}

.rcw-lang__btn.is-active {
  opacity: 1;
  border-color: var(--fn-red);
  transform: translateY(-1px);
}

/* ----- Offers countdown / discount code / referral share ----- */
.rcw-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 2px 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--fn-red);
  color: #fff;
}

.rcw-countdown__label {
  font-size: 13px;
  font-weight: 700;
}

.rcw-countdown b {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.rcw-code {
  margin: 10px 2px 2px;
}

.rcw-code__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fn-muted);
}

.rcw-code__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 9px 14px;
  border: 1px dashed var(--fn-line);
  border-radius: 12px;
}

.rcw-code__row code {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fn-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multiple discount codes stack; each keeps the dashed pill look. */
.rcw-code__row + .rcw-code__row {
  margin-top: 8px;
}

.rcw-code__save {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--fn-red);
  white-space: nowrap;
}

.rcw-copy {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--fn-red);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
}

.rcw-share {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.rcw-share__btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  background: #f3f3f5;
  color: var(--fn-text);
  font-size: 14px;
  font-weight: 700;
}

.rcw-share__btn svg {
  width: 18px;
  height: 18px;
}

.rcw-share__btn--wa {
  background: #25d366;
  color: #fff;
}

/* ----- Native booking steps (form, summary, success) ----- */
/* The <form> only exists to give iOS its native Vorige/Volgende keyboard bar; it
   must be layout-transparent — fields space themselves via .rcw-field margins. */
.rcw-bookform {
  display: block;
  margin: 0;
  padding: 0;
}

.rcw-field {
  display: block;
  margin: 10px 2px 0;
}

.rcw-field > label,
.rcw-field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fn-muted);
}

.rcw-field input,
.rcw-field select,
.rcw-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--fn-line);
  border-radius: 12px;
  padding: 10px 13px;
  min-height: 44px;
  font-family: inherit;
  /* 16px min: iOS Safari zooms the page when you focus an input smaller than 16px,
     which throws off tapping the next field. 16px keeps each field a clean one-tap.
     Desktop gets a slightly smaller 14.5px (no zoom there); touch devices stay 16px. */
  font-size: 16px;
  color: var(--fn-text);
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Mouse/desktop (no focus-zoom problem) → slightly smaller, tidier field text. */
@media (hover: hover) and (pointer: fine) {
  .rcw-field input,
  .rcw-field select,
  .rcw-field textarea { font-size: 14.5px; }
}

.rcw-field input:focus,
.rcw-field select:focus,
.rcw-field textarea:focus {
  outline: none;
  border-color: var(--fn-red);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fn-red) 16%, transparent);
}

/* Consent (AVG) text under the booking form */
.rcw-consent {
  margin: 10px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fn-sub, #6b7280);
  text-align: center;
}
.rcw-consent a { color: var(--fn-red); text-decoration: underline; }
.rcw-consent p { margin: 0; }
.rcw-consent ul { list-style: disc; padding-left: 20px; margin: 4px 0; }
.rcw-consent ol { list-style: decimal; padding-left: 20px; margin: 4px 0; }

.rcw-field textarea {
  resize: vertical;
}

/* Some host themes force a larger font on <textarea> (e.g. the Opmerking field ends up
   bigger than the text inputs). The #rcp-root id selector out-specifies those theme rules
   so every field keeps the same 16px (also the iOS no-zoom size). */
#rcp-root .rcw-field input,
#rcp-root .rcw-field select,
#rcp-root .rcw-field textarea {
  font-size: 16px !important; /* beat theme rules that use !important on textarea */
  line-height: 1.4;
}

.rcw-field input.rcw-invalid,
.rcw-field select.rcw-invalid,
.rcw-field textarea.rcw-invalid {
  border-color: var(--fn-red);
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 4%, transparent);
}

.rcw-booksum {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 2px 8px;
  padding: 13px 15px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 6%, transparent);
}

.rcw-booksum b {
  font-size: 15px;
  font-weight: 700;
  color: var(--fn-text);
}

.rcw-booksum span {
  font-size: 12.5px;
  color: var(--fn-muted);
}

.rcw-booksum i {
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  color: var(--fn-red);
}

.rcw-bookmsg {
  margin: 9px 2px 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.rcw-bookmsg.is-error {
  color: var(--fn-red);
}

.rcw-bookmsg.is-loading {
  color: var(--fn-muted);
}

.rcw-booksuccess {
  text-align: center;
  padding: 6px 2px 2px;
}

.rcw-booksuccess svg {
  width: 46px;
  height: 46px;
  color: var(--fn-red);
}

.rcw-booksuccess b {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--fn-text);
}

.rcw-booksuccess span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--fn-muted);
}

/* The confirmation sentence, same width rule as the on-page form's success panel
   (multistep.css). Scoped to .rcw-sub rather than the `.rcw-booksuccess span` rule above,
   which also matches the tick's own span. */
.rcw-booksuccess .rcw-sub {
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

/* "Nog een aanvraag doen". A quiet text link on purpose: the deposit button can sit a few
   pixels below it, and two things that look like buttons is the visitor guessing which one
   the screen wants. Underlined so it reads as a link despite being a <button>, which it has
   to be — it goes nowhere, it restarts the flow in place. */
.rcw-booksuccess .rcw-bookagain {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--fn-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rcw-booksuccess .rcw-bookagain:hover,
.rcw-booksuccess .rcw-bookagain:focus-visible {
  color: var(--fn-text);
}

.rcw-actions-cta {
  margin-top: 10px;
}

/* Success screen CTAs are secondary confirmations — keep them more compact than the main flow buttons. */
.rcw-booksuccess ~ .rcw-actions-cta {
  font-size: 13.5px;
  padding: 10px;
  border-radius: 12px;
  margin-top: 8px;
}

a.rcw-actions-cta {
  display: block;
  text-align: center;
  text-decoration: none;
}

.rcw-actions-cta--ghost {
  background: #fff;
  color: var(--fn-red);
  border: 1.5px solid var(--fn-red);
  box-shadow: none;
}

.rcw-actions-cta--ghost:hover,
.rcw-actions-cta--ghost:focus-visible {
  background: color-mix(in srgb, var(--rcp-accent, #e8202a) 6%, transparent);
  color: var(--fn-red);
}

/* ==========================================================================
   Booking form — the RedCommerce Popup look
   Ported from assets/popup/css/multistep.css, taking its `.rc-popup` (white
   background) variant, because this card is white too. The brand colour becomes
   var(--rcp-red) so a school's accent still themes the form.

   border-radius carries !important on every <button> here, and that is not
   cargo cult. Salient ships this in salient-dynamic-styles.css:

     body[data-button-style^="rounded"] … button { border-radius: 200px !important }

   It matches on <body>, so #rcp-root is no protection and a plain 10px loses to
   it. Without the guard the choice cards and the Volgende button render as
   pills. This is what multistep.css's !important was always for.
   ========================================================================== */

/* ----- Progress: numbered circles with a line filling between them ----- */
.rcw-progress {
  margin: 4px 0 20px;
  padding: 0 4px;
}

.rcw-progress-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.rcw-step-circle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fn-font, inherit);
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 2px solid var(--rcp-line, #e8e8eb);
  background: #fff;
  color: var(--rcp-muted, #6f737c);
  padding: 0;
  margin: 0;
  line-height: 1;
}

.rcw-step-circle.is-active {
  background: var(--rcp-red);
  border-color: var(--rcp-red);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--rcp-red) 35%, transparent);
}

.rcw-step-circle.is-done {
  background: transparent;
  border-color: var(--rcp-red);
  color: var(--rcp-red);
}

.rcw-step-circle svg { width: 17px; height: 17px; display: block; }

.rcw-step-line {
  flex: 1 1 auto;
  height: 2px;
  min-height: 2px;
  background: var(--rcp-line, #e8e8eb);
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
}

.rcw-step-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--rcp-red);
  transition: width 0.4s ease;
}

.rcw-step-circle.is-completing {
  animation: rcw-check-bounce 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes rcw-check-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes rcw-slide-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ----- Choice cards (step 1) ----- */
.rcw-choice-groupname {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--rcp-muted, #6f737c);
  margin: 16px 0 8px;
}
.rcw-choice-groupname:first-child { margin-top: 0; }

.rcw-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  justify-content: center;
}

/* Three to a row where they fit, never more than two-up on a narrow card. */
#rcp-root .rcw-choice-group > .rcw-choice-item {
  flex: 1 1 calc(50% - 4px);
  max-width: calc(50% - 4px);
}

#rcp-root .rcw-choice-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: 6px;
  padding: 12px 14px;
  border: 2px solid var(--rcp-line, #e8e8eb);
  border-radius: 10px !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: var(--rcp-soft, #f5f5f6);
  color: var(--rcp-ink, #111114);
  text-align: center;
  user-select: none;
  position: relative;
  font-family: var(--fn-font, inherit);
}

#rcp-root .rcw-choice-item:hover {
  border-color: var(--rcp-red);
  background: color-mix(in srgb, var(--rcp-red) 5%, #fff);
}

#rcp-root .rcw-choice-item.is-selected {
  border-color: var(--rcp-red);
  background: color-mix(in srgb, var(--rcp-red) 8%, #fff);
}

.rcw-choice-icon {
  font-size: 28px;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.rcw-choice-icon svg { width: 28px; height: 28px; display: block; }

#rcp-root .rcw-choice-item.is-selected .rcw-choice-icon {
  opacity: 1;
  color: var(--rcp-red);
}

/* "Faalangstexamen" is one 15-character word in a 100px card. Without a break rule it
   renders straight out through both sides of the border. */
.rcw-choice-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: break-word;
}

.rcw-choice-desc {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--rcp-muted, #6f737c);
}

.rcw-choice-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--rcp-red);
}

.rcw-choice-group.is-invalid {
  outline: 2px solid #ef4444;
  outline-offset: 4px;
  border-radius: 10px;
}

/* ----- The one button bar every step shares ----- */
.rcw-btn-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 14px;
}

#rcp-root .rcw-btn-next {
  flex: 1 1 auto;
  padding: 14px 24px;
  background: var(--rcp-red);
  color: #fff;
  border: none;
  border-radius: 10px !important;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--fn-font, inherit);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s ease, transform 0.1s ease;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

#rcp-root .rcw-btn-next:hover { opacity: 0.88; }
#rcp-root .rcw-btn-next:active { transform: scale(0.98); }
#rcp-root .rcw-btn-next[disabled] { opacity: 0.4; cursor: not-allowed; }
#rcp-root .rcw-btn-next[disabled]:hover { opacity: 0.4; }
#rcp-root .rcw-btn-next[disabled]:active { transform: none; }

#rcp-root .rcw-btn-back {
  padding: 14px 18px;
  background: transparent;
  color: var(--rcp-ink, #111114);
  border: 2px solid var(--rcp-line, #e8e8eb);
  border-radius: 10px !important;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--fn-font, inherit);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.5px;
  opacity: 0.65;
}

#rcp-root .rcw-btn-back:hover { opacity: 0.9; }
#rcp-root .rcw-btn-back:active { transform: scale(0.98); }
#rcp-root .rcw-btn-back.is-visible { display: flex; }

/* ----- Review panel: last chance to spot a wrong phone number ----- */
.rcw-review-panel {
  margin: 16px 0 4px;
  animation: rcw-slide-in 0.25s ease;
}

.rcw-review-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--rcp-muted, #6f737c);
  margin-bottom: 10px;
}

.rcw-review-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rcw-review-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--rcp-soft, #f5f5f6);
  border-radius: 8px;
  font-size: 14px;
}

.rcw-review-label {
  color: var(--rcp-muted, #6f737c);
  flex-shrink: 0;
  font-size: 13px;
}

.rcw-review-value {
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  min-width: 0;
  color: var(--rcp-ink, #111114);
}

@media (max-width: 480px) {
  .rcw-btn-group { flex-direction: column; }
  .rcw-btn-back.is-visible { order: 1; }
  .rcw-btn-next { order: 0; }
  .rcw-choice-item { padding: 10px 6px; }
}

/* ----- Date picker (flatpickr) step ----- */
.rcw-datechips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 2px 4px;
}

.rcw-datechip {
  border: 1.5px solid var(--fn-line);
  background: #fff;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fn-text);
  transition: border-color 0.14s ease, color 0.14s ease;
}

.rcw-datechip:hover,
.rcw-datechip:focus-visible {
  outline: none;
  border-color: var(--fn-red);
  color: var(--fn-red);
}

.rcw-datefield {
  cursor: pointer;
}

/* Tint flatpickr to the widget accent. The calendar is appended to <body> (outside
   .rcp-root), so these rules are global and use the literal accent colour, and the
   z-index is lifted above the floating widget (z-index 999999). */
.flatpickr-calendar {
  z-index: 1000001;
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(18, 20, 30, 0.3);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--rcp-accent, #e8202a);
  border-color: transparent; /* keep the gap; fill is inset via background-clip */
  color: #fff;
}

/* Midnight rollover: flash the new "today" cell so the day change is visible when the
   picker was left open across 00:00. */
@keyframes rcp-day-roll {
  0%   { transform: scale(0.6); opacity: 0; }
  55%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.flatpickr-day.rcp-day-rolled { animation: rcp-day-roll 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .flatpickr-day.rcp-day-rolled { animation: none; }
}

/* Kill the blue ring on the clicked day. flatpickr's `.flatpickr-day.selected:focus`
   forces a blue (#569ff7) border + box-shadow that out-specifies our accent fill — so
   re-assert the accent (and drop the ring) at higher specificity on focus. */
.flatpickr-day:focus,
.flatpickr-day:focus-visible {
  outline: none;
  box-shadow: none;
}
.flatpickr-day.selected:focus,
.flatpickr-day.selected:focus-visible {
  background: var(--rcp-accent, #e8202a);
  border-color: transparent;
  box-shadow: none;
  outline: none;
  color: #fff;
}
.rcp-root .flatpickr-day:focus,
.rcp-root .flatpickr-day:focus-visible {
  outline: none;
  box-shadow: none;
}
.rcp-root .flatpickr-day.selected:focus,
.rcp-root .flatpickr-day.selected:focus-visible {
  background: var(--rcp-red);
  border-color: transparent;
  box-shadow: none;
  outline: none;
  color: #fff;
}

.flatpickr-day.today {
  border-color: var(--rcp-accent, #e8202a);
}

.flatpickr-day.today:hover {
  background: var(--rcp-accent, #e8202a);
  color: #fff;
}

/* The inline calendar lives inside #rcp-root, so it sees --rcp-red (= the accent). These
   higher-specificity rules guarantee it tints to the school's accent, regardless of the
   global literals above. */
.rcp-root .flatpickr-day.selected,
.rcp-root .flatpickr-day.selected:hover,
.rcp-root .flatpickr-day.startRange,
.rcp-root .flatpickr-day.endRange {
  background: var(--rcp-red);
  color: #fff;
}

.rcp-root .flatpickr-day.today {
  border-color: var(--rcp-red);
}

.rcp-root .flatpickr-day.today:hover {
  background: var(--rcp-red);
  color: #fff;
}

/* Inline calendar fills the card width */
.rcw-cal { margin: 2px 0 4px; }

.flatpickr-calendar.inline {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: none;
  border: 0;
}

.flatpickr-calendar.inline .flatpickr-rContainer,
.flatpickr-calendar.inline .flatpickr-days,
.flatpickr-calendar.inline .dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.flatpickr-calendar.inline .flatpickr-day {
  box-sizing: border-box;
  max-width: none;
  width: 14.2857%;
  height: 44px;
  line-height: 34px;
  border: 5px solid transparent;     /* transparent border = visual gap between cells */
  background-clip: padding-box;       /* keep the gap even when a day is filled */
  border-radius: 12px;
  font-weight: 400;                   /* date numbers not bold */
}

/* Sharpen flatpickr header — strip native spinner / grey boxes */
.rcp-root .flatpickr-months {
  align-items: center;
  padding: 2px 0 6px;
}

.rcp-root .flatpickr-current-month,
.rcp-root .flatpickr-current-month .cur-month {
  font-family: inherit;   /* match the popup font (Prompt), not the --fn-font Inter stack */
  font-size: 16px;
  font-weight: 700;
  color: var(--fn-text);
  text-transform: capitalize;
}

.rcp-root .numInputWrapper,
.rcp-root .numInputWrapper:hover {
  background: transparent;
}

.rcp-root .numInputWrapper span {
  display: none;
}

.rcp-root .flatpickr-current-month input.cur-year {
  font-family: inherit;   /* match the popup font (Prompt) */
  font-size: 16px;
  font-weight: 700;
  color: var(--fn-text);
  -moz-appearance: textfield;
  appearance: textfield;
}

.rcp-root .flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.rcp-root .flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rcp-root .flatpickr-weekday {
  font-weight: 700;
  color: var(--fn-muted);
}

.rcp-root .flatpickr-months .flatpickr-prev-month svg,
.rcp-root .flatpickr-months .flatpickr-next-month svg {
  fill: var(--fn-text);
}

.rcp-root .flatpickr-months .flatpickr-prev-month:hover svg,
.rcp-root .flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--fn-red);
}

/* De-native the booking form selects */
.rcw-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8e96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}

/* Time slots */
.rcw-when-label {
  margin-top: 12px;
}

.rcw-times {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 2px 2px;
}

.rcw-time {
  border: 1.5px solid var(--fn-line);
  background: #fff;
  cursor: pointer;
  padding: 11px 6px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--fn-text);
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.rcw-time:hover {
  border-color: var(--fn-red);
}

.rcw-time.is-active {
  background: var(--fn-red);
  border-color: var(--fn-red);
  color: #fff;
}

/* "Eigen tijd" — our own time picker, sitting as the middle time option */
.rcw-time--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.rcw-time--custom.is-active { gap: 6px; } /* clock alone is centred; clock + picked time gets a gap */
.rcw-time--custom .rcw-time__ic { width: 16px; height: 16px; flex: 0 0 auto; }
.rcw-time--custom.is-open { border-color: var(--fn-red); color: var(--fn-red); }
.rcw-time--custom.is-active.is-open { color: #fff; }

/* Centered, human-readable date shown on the time step. */
#rcp-root .rcw-when-date { text-align: center; font-weight: 700; color: var(--fn-text); margin: 0 0 6px; }

/* Pop-up time modal — opened by the clock button for easy hour + minute entry. */
.rcw-tmodal {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(18, 20, 30, 0.5);
  touch-action: manipulation; /* kill iOS Safari double-tap-to-zoom inside the picker */
  font-family: "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Modal lives on <body>, outside .rcp-root — re-declare the vars the reused button classes need. */
  --fn-red: var(--rcp-accent, #e8202a);
  --fn-red-dark: color-mix(in srgb, var(--rcp-accent, #e8202a) 84%, #000);
  --fn-text: #1b1b1f;
}
.rcw-tmodal * { font-family: inherit; }
.rcw-tmodal__card {
  width: min(92vw, 320px); box-sizing: border-box;
  background: #fff; border-radius: 18px; padding: 20px 18px 16px;
  box-shadow: 0 20px 50px rgba(18, 20, 30, 0.28);
  text-align: center;
}
.rcw-tmodal__title { font-size: 16px; font-weight: 700; color: #1b1b1f; margin: 0 0 16px; }
.rcw-tmodal__clock { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.rcw-tmodal__col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rcw-tmodal__step {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 32px; border: 0; background: transparent;
  cursor: pointer; color: #b3b6be; padding: 0;
  transition: color 0.14s ease, transform 0.1s ease;
}
.rcw-tmodal__step:hover { color: var(--rcp-accent, #e8202a); }
.rcw-tmodal__step:active { transform: scale(0.86); }
.rcw-tmodal__chev { width: 26px; height: 26px; display: block; }
.rcw-tmodal__numwrap { height: 64px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rcw-tmodal__num {
  /* Plain <div>, not an <input>: an input's internal text metrics differ on iOS
     Safari and got clipped by the numwrap. A div sizes to its own line, so the
     numwrap flex-centres it with room to spare — no clipping, no zoom, no keyboard. */
  width: 70px; text-align: center;
  font-family: inherit; font-size: 40px; font-weight: 700; line-height: 1.1; color: #1b1b1f;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.rcw-tmodal__num:focus { outline: none; }
.rcw-tmodal__num::-webkit-outer-spin-button,
.rcw-tmodal__num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rcw-tmodal__num.is-up { animation: rcwTimeUp 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
.rcw-tmodal__num.is-down { animation: rcwTimeDown 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes rcwTimeUp { from { transform: translateY(60%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes rcwTimeDown { from { transform: translateY(-60%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rcw-tmodal__sep { font-size: 40px; font-weight: 700; color: #1b1b1f; padding-bottom: 4px; }
.rcw-tmodal__actions { margin-top: 4px; }

/* Confirmation check */
/* Scoped to .rcw-booksuccess so it beats the `.rcw-booksuccess span { display:block }`
   rule — otherwise the circle renders as a left-aligned block and the tick isn't
   flex-centered. inline-flex + the parent's text-align:center centers the whole circle. */
.rcw-booksuccess .rcw-checkcircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-top: 8px;
  border-radius: 50%;
  /*
   * Green, NOT the accent (owner's instruction, 2026-08-07).
   *
   * This was var(--fn-red), the popup's accent colour — so the "success" tick came out
   * whatever colour the school picked for its brand. On enjoyriding that is blue, which
   * reads as information, not as "it worked". A confirmation tick means one thing and
   * should look the same on every site, so this is deliberately a fixed green and must
   * not be turned back into a var(--fn-*).
   */
  background: #16a34a;
  color: #fff;
}

.rcw-booksuccess .rcw-checkcircle svg {
  width: 20px;
  height: 20px;
  color: #fff;   /* white tick over the accent (beats the .rcw-booksuccess svg red rule) */
}

.rcw-booksuccess .rcw-when {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fn-text);
}

.rcw-booksuccess .rcw-sub {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--fn-muted);
}

[dir="rtl"] .rcw-line,
[dir="rtl"] .rcw-floating-nav__row {
  text-align: right;
}

[dir="rtl"] .rcw-line__end,
[dir="rtl"] .rcw-floating-nav__row-action,
[dir="rtl"] .rcw-floating-nav__row-price,
[dir="rtl"] .rcw-floating-nav__row-badge {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .rcw-line__arrow,
[dir="rtl"] .rcw-floating-nav__row-action {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .rcw-actions-back svg {
  transform: scaleX(-1);
}

/* RTL (Arabic): the back button mirrors to the top-right, so move the close
   button to the top-left to avoid them colliding. */
[dir="rtl"] .rcw-floating-nav__close {
  right: auto;
  left: 14px;
}

/* Close button, top-right of the actions menu card (client request). */
.rcw-floating-nav__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f1f1f3;
  color: var(--fn-text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease, color 0.14s ease;
}
.rcw-floating-nav__close:hover,
.rcw-floating-nav__close:focus-visible {
  background: #e5e5e8;
  outline: none;
}
.rcw-floating-nav__close svg {
  width: 16px;
  height: 16px;
}

/* Book button + icon weight (client request). The in-menu CTA is a plain
   <button>, so some host themes reset its font-weight to normal; the #rcp-root
   id selector beats that. Icons are stroked SVG — bumping stroke-width is the
   visual equivalent of a heavier (700) weight. */
#rcp-root .rcw-actions-cta {
  font-weight: 700;
}
#rcp-root .rcw-floating-nav__cta svg [stroke],
#rcp-root .rcw-actions-view svg [stroke],
#rcp-root .rcw-line__icon svg [stroke],
#rcp-root .rcw-floating-nav__row-icon svg [stroke] {
  stroke-width: 2.1px;
}

/* Collapsible option cards (builder-driven priced options) -------------------
   A category-list option that has a price + body becomes a card whose whole
   header toggles a panel with the price, description, bullets and a booking CTA. */
#rcp-root .rcw-acc {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
#rcp-root .rcw-acc + .rcw-acc { margin-top: 2px; }
#rcp-root .rcw-acc__head { width: 100%; border-radius: 0; }
#rcp-root .rcw-acc.is-open .rcw-acc__head { background: rgba(0, 0, 0, .025); }
#rcp-root .rcw-acc__chev { display: inline-flex; color: #9aa0a6; transition: transform .22s ease; }
#rcp-root .rcw-acc__chev svg { width: 18px; height: 18px; }
#rcp-root .rcw-acc.is-open .rcw-acc__chev { transform: rotate(180deg); }
#rcp-root .rcw-acc__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 14px;
  transition: max-height .28s ease, opacity .2s ease, padding .28s ease;
}
#rcp-root .rcw-acc.is-open .rcw-acc__body { max-height: 640px; opacity: 1; padding: 4px 14px 14px; }
#rcp-root .rcw-acc__body .rcw-hero { margin-top: 4px; }
#rcp-root .rcw-acc__body .rcw-actions-cta { margin-top: 12px; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  #rcp-root .rcw-acc__chev, #rcp-root .rcw-acc__body { transition: none; }
}

/* ---- Student login + Mijn lessen sync + booking QR (v0.33) ---- */

/* Login (person) icon — top-right of the actions card, left of the close button. */
.rcw-floating-nav__login {
  position: absolute;
  top: 14px;
  right: 52px;
  z-index: 6;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f1f1f3;
  color: var(--fn-text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.14s ease, color 0.14s ease;
}
.rcw-floating-nav__login:hover,
.rcw-floating-nav__login:focus-visible { background: #e5e5e8; outline: none; }
.rcw-floating-nav__login svg { width: 17px; height: 17px; }
.rcw-floating-nav__login.is-authed { background: #f1f1f3; color: var(--fn-text, #1b1b1f); }
#rcp-root .rcw-line__qr { display: inline-flex; align-items: center; color: var(--rcp-accent, #e8202a); }
[dir="rtl"] .rcw-floating-nav__login { right: auto; left: 52px; }

/* Phone-login form. */
#rcp-root .rcw-login-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 12px 14px;
  margin: 4px 0 10px;
  border: 1px solid #d7dae0;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--fn-text);
}
#rcp-root .rcw-login-form > label {
  display: block;
  margin: 4px 2px 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fn-muted);
}
#rcp-root .rcw-login-input:focus { outline: none; border-color: var(--rcp-accent, #e8202a); }
#rcp-root .rcw-login-input[aria-invalid="true"] { border-color: #b42318; }
#rcp-root .rcw-login-note { font-size: 12px; color: #8a8f98; margin: 10px 2px 0; line-height: 1.4; }

/* Mijn lessen card with QR. */
#rcp-root .rcw-lesson { display: flex; flex-direction: column; }
#rcp-root .rcw-lesson__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0 14px;
}
#rcp-root .rcw-lesson__qr img {
  width: 116px;
  height: 116px;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  border: 1px solid #ececef;
}
#rcp-root .rcw-lesson__qr span { font-size: 12px; color: #8a8f98; text-align: center; }

/* Account footer (logout / delete). */
#rcp-root .rcw-account-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ececef;
}
#rcp-root .rcw-link-btn {
  border: 0;
  background: none;
  padding: 4px 2px;
  font: inherit;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
}
#rcp-root .rcw-link-btn:hover { color: var(--fn-text); }
#rcp-root .rcw-link-danger { color: var(--rcp-accent, #e8202a); }

/* Account card (logged-in / confirm name). */
#rcp-root .rcw-account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 4px 0 14px;
  border: 1px solid var(--fn-line, #ececed);
  border-radius: 14px;
  background: #fafafa;
}
#rcp-root .rcw-account-card__ava {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f1f1f3;
  color: var(--fn-text, #1b1b1f);
}
#rcp-root .rcw-account-card__ava svg { width: 22px; height: 22px; }
#rcp-root .rcw-account-card__name { font-size: 16px; font-weight: 700; color: var(--fn-text); }

/* Centered QR modal (mounted on <body>, so not scoped under #rcp-root).
   Dimmed backdrop keeps the lessons list visible; the white card stays bright
   so the instructor can still scan the code. */
.rcw-qrmodal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 16, 20, 0.6);
  font-family: "Inter", "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.rcw-qrmodal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(86vw, 360px);
  padding: 40px 24px 28px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.rcw-qrmodal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #f1f1f3;
  color: #1b1b1f;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.rcw-qrmodal__code { width: 100%; max-width: 280px; }
.rcw-qrmodal__code svg { width: 100%; height: auto; display: block; }
.rcw-qrmodal__hint { margin: 0; color: #1b1b1f; font-size: 16px; font-weight: 600; text-align: center; }
.rcw-qrmodal__ref { margin: 0; color: #8b8e96; font-size: 13px; letter-spacing: 3px; }

/* Buttons — one consistent weight (700) across all the widget's action buttons. */
#rcp-root .rcw-actions-cta,
#rcp-root .rcp-confirm__btn,
#rcp-root .rcw-pill-btn,
#rcp-root .rcw-floating-nav__cta .rcw-floating-nav__label { font-weight: 700; }

/* ==========================================================================
   The real multi-step form, hosted inside the booking card
   --------------------------------------------------------------------------
   multistep.css assumes a DARK background: inactive step circles and the
   connector lines are white-alpha, which is invisible on this white card. The
   light-background overrides live in rc-popup-frontend.css, and booking mode
   does not load that file (it carries the whole popup's fixed-position layout).
   So the one block that matters is copied here VERBATIM from
   assets/popup/css/rc-popup-frontend.css — same selectors, same values. Keep
   the two in step: if that block changes there, change it here.
   ========================================================================== */
/* ── MULTISTEP FORM INSIDE POPUP — light-background overrides ── */
/* The multistep CSS assumes a dark background (Salient theme).
   These overrides make inactive circles and lines visible on white. */

.rc-popup .rc-multistep {
  --rc-line-bg: #e9ecef;
  --rc-circle-border: #ced4da;
  --rc-circle-text: #868e96;
}

/* Back button: swap dark-border assumption for visible light-theme border */
.rc-popup .rc-multistep .rc-btn-group .rc-btn-back {
  border-color: #dee2e6 !important;
  color: #495057 !important;
  opacity: 1;
}

.rc-popup .rc-multistep .rc-btn-group .rc-btn-back:hover {
  opacity: 0.75;
  border-color: #adb5bd !important;
}

/* Tighten progress bar spacing inside popup */
.rc-popup .rc-multistep .rc-progress {
  margin-bottom: 14px !important;
}

/* ── INPUT FIELD OVERRIDES (fight Salient's large field styles) ──────────── */

.rc-popup .rc-multistep input[type="text"],
.rc-popup .rc-multistep input[type="email"],
.rc-popup .rc-multistep input[type="tel"],
.rc-popup .rc-multistep input[type="number"],
.rc-popup .rc-multistep input[type="url"],
.rc-popup .rc-multistep input[type="search"],
.rc-popup .rc-multistep input[type="date"],
.rc-popup .rc-multistep textarea,
.rc-popup .rc-multistep select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #212529 !important;
  background: #f8f9fa !important;
  border: 1.5px solid #dee2e6 !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.rc-popup .rc-multistep input[type="text"]:focus,
.rc-popup .rc-multistep input[type="email"]:focus,
.rc-popup .rc-multistep input[type="tel"]:focus,
.rc-popup .rc-multistep input[type="number"]:focus,
.rc-popup .rc-multistep input[type="url"]:focus,
.rc-popup .rc-multistep textarea:focus,
.rc-popup .rc-multistep select:focus {
  border-color: var(--rc-accent, #00b8d9) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0, 184, 217, 0.1) !important;
}

.rc-popup .rc-multistep input::placeholder,
.rc-popup .rc-multistep textarea::placeholder {
  color: #adb5bd !important;
  opacity: 1 !important;
}

/* Kill any Salient wrappers / pseudo-elements on inputs inside popup */
.rc-popup .rc-multistep .wpcf7-form-control-wrap::before,
.rc-popup .rc-multistep .wpcf7-form-control-wrap::after,
.rc-popup .rc-multistep p::before,
.rc-popup .rc-multistep p::after {
  display: none !important;
}

/* Tight paragraph wrappers from CF7 inside popup */
.rc-popup .rc-multistep fieldset.rc-step > p {
  margin: 0 0 8px !important;
  padding: 0 !important;
}

.rc-popup .rc-multistep fieldset.rc-step > p:last-child {
  margin-bottom: 0 !important;
}

/* Kill empty paragraphs (blank lines in CF7 template become <p><br></p>) */
.rc-popup .rc-multistep fieldset.rc-step > p:empty,
.rc-popup .rc-multistep fieldset.rc-step > br {
  display: none !important;
}

/* Kill the <p> wrapping the hidden submit button — it still eats space */
.rc-popup .rc-multistep fieldset.rc-step > p:last-of-type:has(input[type="submit"]),
.rc-popup .rc-multistep fieldset.rc-step > p:last-of-type:has(.wpcf7-submit) {
  display: none !important;
  margin: 0 !important;
}

.rc-popup .rc-multistep fieldset.rc-step .wpcf7-form-control-wrap {
  display: block !important;
  margin-bottom: 0 !important;
}

/* Textarea: limit height inside popup.
 *
 * The comment always said "limit" and there was only ever a MINIMUM here, which cannot
 * shrink anything. The block above forces height:auto, so the height came from the rows
 * attribute, and CF7 defaults a bare [textarea] to rows="10" — a 221px box in this
 * popup's 14px/11px field metrics.
 *
 * multistep.css caps it at 178px, but that number is sized for the base 15px/14px
 * metrics OUTSIDE the popup and is too tall in here. Measured in the builder against
 * enjoyriding's form 3947 at a 340px popup, steps came out 189 / 218 / 273 uncapped and
 * 189 / 218 / 230 at 178px — the message step still standing over the details step next
 * to it. 166px puts it at 218, dead level, and holds whether or not the select above it
 * has a value.
 *
 * MEASURE WITH offsetHeight, NOT getBoundingClientRect. The builder canvas is under a
 * CSS transform, so the rect is scaled by whatever zoom the canvas picked and reads
 * ~4% short; a first pass at this number was tuned on scaled figures and landed 13px
 * out.
 *
 * The 166 is tuned against a 4-field details step. It is a judgement about how tall a
 * message box should be in a card this size, not a law; re-measure before moving it.
 * Keep it in step with the same cap in rc-popup-frontend.css (WhatsApp mode), whose
 * field metrics are identical.
 */
.rc-popup .rc-multistep textarea {
  min-height: 80px !important;
  max-height: 166px !important;
  resize: vertical !important;
}