/* ============================================================================
   Javis Booking Pro — v6.1.0 Card System
   ----------------------------------------------------------------------------
   Booking.com / Trip.com inspired refinement layer.

   This file is loaded LAST (after public.css, ux-modes-v5108.css, and the
   optional rbp-luxury.css) so its rules win on source-order ties.  We use
   `!important` only where prior stylesheets (especially rbp-luxury.css) lock
   properties with `!important` of their own — never as a blanket strategy.

   Goals:
   1. Bullet-proof Service "pill" mode (the v5.13.9-era empty-blob bug) so it
      renders correctly in BOTH the standard and luxury skins, regardless of
      cache or custom primary colours.
   2. Lift every card mode to a booking.com-grade visual standard:
      • neutral resting state, strong primary-tinted selected state
      • clear hover/focus elevation
      • mobile touch targets ≥ 44px (WCAG 2.5.5)
      • consistent radius / shadow / spacing scale
   3. Stay 100% additive — no DOM changes, no breaking the existing skin
      system.  If anything regresses, this single file can be dequeued
      without affecting the rest of the plugin.
   ============================================================================ */


/* ─── §0  Design tokens (scoped to .rbp-booking-wrap so we never leak) ──── */
.rbp-booking-wrap {
  --rbpv6-radius-sm:   6px;
  --rbpv6-radius-md:   10px;
  --rbpv6-radius-lg:   14px;
  --rbpv6-radius-pill: 999px;

  --rbpv6-shadow-rest: 0 1px 2px rgba(15, 23, 42, .04);
  --rbpv6-shadow-hov:  0 6px 18px rgba(15, 23, 42, .10);
  --rbpv6-shadow-sel:  0 8px 24px rgba(15, 23, 42, .12);

  --rbpv6-border-rest:     1.5px solid #e5e7eb;
  --rbpv6-border-hover:    1.5px solid #cbd5e1;
  --rbpv6-border-selected: 2px solid var(--rbp-primary, #0d6efd);

  --rbpv6-bg-rest:     #ffffff;
  --rbpv6-bg-hover:    #f9fafb;
  /* Selected bg = primary at 6% alpha, falls back to a neutral tint if the
     theme didn't provide --rbp-primary-rgb (we read --rbp-primary instead). */
  --rbpv6-bg-selected: color-mix(in srgb, var(--rbp-primary, #0d6efd) 6%, #fff);

  --rbpv6-text:        #1f2937;
  --rbpv6-text-strong: #0f172a;
  --rbpv6-text-muted:  #6b7280;
  --rbpv6-text-on-primary: #ffffff;

  --rbpv6-transition: 160ms cubic-bezier(.4, 0, .2, 1);
  --rbpv6-touch:      48px;
}


/* ════════════════════════════════════════════════════════════════════════════
   §1  SERVICE CARDS — modes: grid (default), list, hero, pill
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── §1.1  Grid card resting state (default mode, used by 99% of installs) */
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill):not(.rbp-svc-style-list):not(.rbp-svc-style-hero) .rbp-svc-luxury-card {
  border-radius: var(--rbpv6-radius-lg);
  transition:
    transform var(--rbpv6-transition),
    box-shadow var(--rbpv6-transition),
    border-color var(--rbpv6-transition),
    background-color var(--rbpv6-transition);
}

/* Selected state: booking.com-style — light tinted bg + 2px primary border,
   NOT a full color flip (which destroys contrast on the inner text when the
   theme picks a dark primary like teal/burgundy). */
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-luxury-card[data-selected="1"] {
  background: var(--rbpv6-bg-selected) !important;
  border-color: var(--rbp-primary, #0d6efd) !important;
  box-shadow: var(--rbpv6-shadow-sel), 0 0 0 1px var(--rbp-primary, #0d6efd) inset !important;
}

/* Focus ring — keyboard accessibility (the cards are <button> elements) */
.rbp-booking-wrap .rbp-svc-luxury-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rbp-primary, #0d6efd) 35%, transparent);
  outline-offset: 2px;
}


/* ─── §1.2  PILL MODE — BULLETPROOF FIX (works in standard AND luxury skin)
   ────────────────────────────────────────────────────────────────────────
   Root cause history (v5.13.9 → fixed in hotfix2 → fully solved here):
   • Old CSS targeted .rbp-svc-title but the template renders .rbp-svc-name
   • In the LUXURY skin, `.rbp-lux .rbp-svc-name { color: var(--lux-ink-900)
     !important }` overrode any color we tried to set on a selected pill →
     dark text on dark-teal selected bg = invisible.
   • Cache busting was insufficient because the version number didn't change.

   v6.1.0 fix:
   • The CSS-DOM contract (target .rbp-svc-name, keep footer in flow) is
     already correct from hotfix2 (in public.css).  We harden it here with
     skin-agnostic selectors that defeat luxury's !important by being equally
     !important AND more specific (.rbp-booking-wrap + state attribute).
   ──────────────────────────────────────────────────────────────────────── */

/* Layout container — single-column vertical stack on every viewport */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  grid-template-columns: unset !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   v6.2.0 PILL REDESIGN (follow-up) — booking.com / trip.com style "option row".
   Each service is a clean selectable row:  [ name + price ] ........ [Select]
   • Service NAME is always visible (block-level, wraps — never collapses).
     The previous build set the name to `display:-webkit-box` which, as a flex
     item with min-width:0, collapsed to ~0 width and was clipped by
     overflow:hidden → the "empty pill" the user reported. Block-level text
     does not collapse, so the name is guaranteed to render.
   • A real "Select" button is shown (the affordance the pill was missing),
     on BOTH desktop and mobile; it fills with the primary colour when chosen.
   • On mobile the row becomes 2 lines (name on top, price + Select below) so
     nothing is cramped or truncated.
   ───────────────────────────────────────────────────────────────────────── */

/* v6.2.5 — box-sizing safety belt. Without it, a card with width:100% + padding
   + border (service pill, sidebar card) overflows its container by (2*pad+2*border)
   ≈ 40px on narrow screens (iPhone 12 = 375px). border-box absorbs pad+border so
   the card never exceeds 100% of its column. */
.rbp-booking-wrap .rbp-svc-luxury-card,
.rbp-booking-wrap .rbp-sidebar-svc-card,
.rbp-booking-wrap .rbp-svc-card {
  box-sizing: border-box !important;
}

/* Each pill: selectable option row */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  min-height: 60px !important;
  padding: 14px 18px !important;
  margin: 0 !important;
  background: var(--rbpv6-bg-rest) !important;
  border: var(--rbpv6-border-rest) !important;
  border-radius: var(--rbpv6-radius-lg) !important;
  box-shadow: var(--rbpv6-shadow-rest) !important;
  overflow: hidden !important;
  position: relative !important;
  cursor: pointer !important;
  text-align: left !important;
  transition:
    transform var(--rbpv6-transition),
    border-color var(--rbpv6-transition),
    box-shadow var(--rbpv6-transition),
    background-color var(--rbpv6-transition) !important;
  font-family: inherit !important;
}

/* Hover: subtle lift + primary border */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--rbp-primary, #0d6efd) !important;
  background: var(--rbpv6-bg-hover) !important;
  box-shadow: var(--rbpv6-shadow-hov) !important;
}

/* Selected: tinted bg + 2px primary border (readable in every skin) */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  background: var(--rbpv6-bg-selected) !important;
  border: var(--rbpv6-border-selected) !important;
  box-shadow: var(--rbpv6-shadow-sel) !important;
  transform: none !important;
}

/* Hide secondary content (badges/desc/meta/tick). The thumbnail + colour-bar
   are NOT hidden — they become a circular avatar (below). Select + price stay. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-category,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-row,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-plain,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-selected-tick {
  display: none !important;
}

/* v6.2.5 — circular avatar (40px) in the service pill, matching the package
   pill. The thumbnail OR the colour-bar fallback renders as a round avatar. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  position: relative !important;
  box-sizing: border-box !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-overlay {
  display: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar-icon {
  font-size: 19px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Body: holds the NAME (left, flexible) and the FOOTER (price + Select, right) */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
/* No decorative radio dot — the explicit Select button is the affordance. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body::before {
  content: none !important;
  display: none !important;
}

/* Service NAME — block-level so it always renders & wraps (no -webkit-box
   collapse). !important defeats the luxury skin's locked name rules. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  display: block !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--rbpv6-text-strong) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  white-space: normal !important;       /* wrap — full name always visible */
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important; /* defeat default 2-line clamp */
  -webkit-box-orient: unset !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  word-break: break-word !important;
}
/* Selected name — primary-tinted for a clear active state */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-name,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-name {
  color: var(--rbp-primary, #0d6efd) !important;
  font-weight: 700 !important;
}

/* Footer = price + Select button, pinned to the right of the row */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  width: auto !important;          /* v6.2.8 FIX: base footer is width:100% → it ate the
                                       whole row and squeezed the name to 0 (vertical text) */
  max-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}

/* Price */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price {
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--rbpv6-text-muted) !important;
  flex: 0 0 auto !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-price,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-price {
  color: var(--rbp-primary, #0d6efd) !important;
}

/* SELECT button — now SHOWN in pill mode (the missing affordance). Compact
   outline button that fills with the primary colour on hover / when selected.
   .rbp-booking-wrap + !important wins over the public.css pill-hide rule and
   the luxury-skin button rules. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 7px 14px !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
  color: var(--rbp-primary, #0d6efd) !important;
  background: transparent !important;
  border: 1.5px solid var(--rbp-primary, #0d6efd) !important;
  border-radius: var(--rbp-btn-radius, 8px) !important;
  cursor: pointer !important;
  transition: background var(--rbpv6-transition), color var(--rbpv6-transition) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-arrow {
  display: inline-block !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover .rbp-svc-select-btn {
  background: var(--rbp-primary, #0d6efd) !important;
  color: #fff !important;
}
/* Selected: button becomes a solid primary "chip" */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-select-btn,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-select-btn,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-select-btn,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-select-btn {
  background: var(--rbp-primary, #0d6efd) !important;
  color: #fff !important;
  border-color: var(--rbp-primary, #0d6efd) !important;
}


/* ─── §1.3  LIST mode polish — booking.com-style horizontal cards */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card {
  border-radius: var(--rbpv6-radius-md);
  transition:
    transform var(--rbpv6-transition),
    box-shadow var(--rbpv6-transition),
    border-color var(--rbpv6-transition);
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--rbpv6-shadow-hov);
}


/* ─── §1.4  HERO mode polish — large vertical cards (great desktop browse) */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-luxury-card {
  border-radius: var(--rbpv6-radius-lg);
  transition:
    transform var(--rbpv6-transition),
    box-shadow var(--rbpv6-transition);
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-luxury-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rbpv6-shadow-hov);
}


/* ════════════════════════════════════════════════════════════════════════════
   §2  TIMESLOT CARDS — modes: button, card, box, card_long, pill, dropdown
   ════════════════════════════════════════════════════════════════════════════ */

/* Default (button mode) — modest polish: smoother transition + focus ring */
.rbp-booking-wrap .rbp-slot-btn {
  transition:
    transform var(--rbpv6-transition),
    box-shadow var(--rbpv6-transition),
    border-color var(--rbpv6-transition),
    background-color var(--rbpv6-transition);
}
.rbp-booking-wrap .rbp-slot-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rbp-primary, #0d6efd) 35%, transparent);
  outline-offset: 2px;
}
.rbp-booking-wrap .rbp-slot-btn:hover:not(:disabled):not(.rbp-slot-full):not(.rbp-slot-active) {
  transform: translateY(-1px);
  box-shadow: var(--rbpv6-shadow-hov);
}

/* Selected timeslot button — primary-tinted bg + 2px primary border
   (consistent with service selected pattern). */
.rbp-booking-wrap .rbp-slot-btn.rbp-slot-active {
  background: var(--rbpv6-bg-selected) !important;
  border-color: var(--rbp-primary, #0d6efd) !important;
  color: var(--rbp-primary, #0d6efd) !important;
  box-shadow: var(--rbpv6-shadow-sel), 0 0 0 1px var(--rbp-primary, #0d6efd) inset !important;
  font-weight: 700 !important;
}

/* Full / sold-out timeslot — clearer disabled affordance */
.rbp-booking-wrap .rbp-slot-btn.rbp-slot-full {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
  text-decoration-thickness: 1.5px;
}


/* ════════════════════════════════════════════════════════════════════════════
   §3  PACKAGE CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.rbp-booking-wrap .rbp-pkg-card {
  border-radius: var(--rbpv6-radius-md);
  transition:
    transform var(--rbpv6-transition),
    box-shadow var(--rbpv6-transition),
    border-color var(--rbpv6-transition);
}
.rbp-booking-wrap .rbp-pkg-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rbpv6-shadow-hov);
}
.rbp-booking-wrap .rbp-pkg-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--rbp-primary, #0d6efd) 35%, transparent);
  outline-offset: 2px;
}
.rbp-booking-wrap .rbp-pkg-card.selected {
  background: var(--rbpv6-bg-selected) !important;
  border-color: var(--rbp-primary, #0d6efd) !important;
  box-shadow: var(--rbpv6-shadow-sel), 0 0 0 1px var(--rbp-primary, #0d6efd) inset !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   §6  FORM BUILDER (v6.2.0) — custom field display: half-width, icon, desc
   ════════════════════════════════════════════════════════════════════════════ */

/* Half-width custom fields pair up side-by-side on desktop, stack on mobile.
   Implemented via float so it works inside the existing .rbp-panel which
   does NOT use flex/grid for its direct children. A clearfix on the next
   full-width sibling restores normal flow. */
.rbp-booking-wrap .rbp-field-half {
  float: left;
  width: calc(50% - 7px);
  margin-right: 14px;
}
.rbp-booking-wrap .rbp-field-half + .rbp-field-half {
  margin-right: 0;
}
/* Pair-clearing: any non-half field that follows a half field clears the float
   so the next full-width field doesn't squeeze next to a leftover half. */
.rbp-booking-wrap .rbp-field-half + .rbp-field:not(.rbp-field-half),
.rbp-booking-wrap .rbp-field-half + div:not(.rbp-field-half),
.rbp-booking-wrap .rbp-field-half + h3,
.rbp-booking-wrap .rbp-field-half + p {
  clear: both;
}
/* Self-clearfix at the panel level so wrappers always size their children. */
.rbp-booking-wrap .rbp-panel::after {
  content: '';
  display: table;
  clear: both;
}

/* Icon prefix on labels — vertical alignment + soft default size. */
.rbp-booking-wrap .rbp-cf-icon {
  display: inline-block;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}

/* Help text under fields — muted, small, single-line gap above */
.rbp-booking-wrap .rbp-cf-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin: 4px 0 0;
}

/* Radio / multi-checkbox groups — visible option list with comfortable spacing */
.rbp-booking-wrap .rbp-cf-radio-group label,
.rbp-booking-wrap .rbp-cf-checkgroup label {
  padding: 8px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: var(--rbpv6-radius-sm);
  transition: background-color var(--rbpv6-transition), border-color var(--rbpv6-transition);
}
.rbp-booking-wrap .rbp-cf-radio-group label:hover,
.rbp-booking-wrap .rbp-cf-checkgroup label:hover {
  background: var(--rbpv6-bg-hover);
  border-color: #cbd5e1;
}
.rbp-booking-wrap .rbp-cf-radio-group label:has(input:checked),
.rbp-booking-wrap .rbp-cf-checkgroup label:has(input:checked) {
  background: var(--rbpv6-bg-selected);
  border-color: var(--rbp-primary, #0d6efd);
}

/* Mobile: half-width fields stack to single column (no point side-by-side
   on a 360-380px viewport — labels & inputs become unreadable). */
@media (max-width: 600px) {
  .rbp-booking-wrap .rbp-field-half {
    float: none;
    width: 100%;
    margin-right: 0;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   §7  MOBILE — tap targets, spacing, font scale (≤ 480px)
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Pill on mobile: stack the body so the NAME gets the full row width on
     top, with price + Select on a second row. Guarantees the name is never
     squeezed against the button on narrow screens. */
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    min-height: 56px !important;
    padding: 12px 14px !important;
    border-radius: var(--rbpv6-radius-lg) !important;
    align-items: center !important;
    gap: 12px !important;
  }
  /* v6.2.5 FIX — on mobile the NAME takes its own full-width line; price + Select
     wrap to a second line. The previous single-row layout collapsed long names to
     1-character-per-line vertical text on 375px. */
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
    flex: 1 1 100% !important;     /* full first line — never squeezed */
    min-width: 0 !important;
    font-size: 14.5px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
    flex: 1 1 100% !important;     /* second line: price left, Select right */
    justify-content: space-between !important;
    width: 100% !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price {
    font-size: 13.5px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
    padding: 8px 16px !important;   /* comfortable tap target on mobile */
  }

  /* Timeslot buttons: ensure 44×44 minimum (WCAG 2.5.5) */
  .rbp-booking-wrap .rbp-slot-btn {
    min-height: 44px;
  }

  /* Service grid on small phones: 2-col below 380px is too cramped — single
     column keeps content readable.  Only override for the default grid
     style (not list, hero, or pill which have their own rules). */
  .rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill):not(.rbp-svc-style-list):not(.rbp-svc-style-hero) {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 360px) {
  /* Ultra-small (older Android, foldable closed): pad less aggressively */
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    padding: 12px 14px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   §5  ACCESSIBILITY — reduced motion + high contrast
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .rbp-booking-wrap .rbp-svc-luxury-card,
  .rbp-booking-wrap .rbp-slot-btn,
  .rbp-booking-wrap .rbp-pkg-card,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    transition: none !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-card:hover,
  .rbp-booking-wrap .rbp-slot-btn:hover,
  .rbp-booking-wrap .rbp-pkg-card:hover {
    transform: none !important;
  }
}

/* High-contrast mode (Windows users on dark/contrast themes) — defer to
   system colors for the selected affordance. */
@media (forced-colors: active) {
  .rbp-booking-wrap .rbp-svc-luxury-card.rbp-svc-selected,
  .rbp-booking-wrap .rbp-svc-luxury-card[data-selected="1"],
  .rbp-booking-wrap .rbp-slot-btn.rbp-slot-active,
  .rbp-booking-wrap .rbp-pkg-card.selected {
    border: 3px solid Highlight !important;
    forced-color-adjust: none;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   §8  (v6.2.0) Sidebar service "Select" button — Bug fix
   In split / wizard layout the desktop services render as sidebar cards which
   previously had no Select affordance (only a ✓ on selection). Add a clear,
   booking.com-style Select button so desktop matches the mobile pill.
   ════════════════════════════════════════════════════════════════════════════ */
.rbp-booking-wrap .rbp-sidebar-svc-select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  width: fit-content;              /* v6.2.4: compact — was full-width (too large) */
  margin: 12px 0 0 auto;           /* right-aligned, booking.com style */
  padding: 7px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .2px;
  color: #fff;
  background: var(--rbp-primary, #c0392b);
  border: 1.5px solid var(--rbp-primary, #c0392b);
  border-radius: var(--rbp-btn-radius, 8px);
  box-shadow: 0 1px 4px rgba(0,0,0,.18);   /* v6.2.5: solid fill so it never sinks into a dark sidebar */
  cursor: pointer;
  transition: background var(--rbpv6-transition), color var(--rbpv6-transition), filter var(--rbpv6-transition);
}
.rbp-booking-wrap .rbp-sidebar-svc-select-arrow { display: inline-block; transition: transform var(--rbpv6-transition); }
.rbp-booking-wrap .rbp-sidebar-svc-card:hover .rbp-sidebar-svc-select { filter: brightness(0.92); }
.rbp-booking-wrap .rbp-sidebar-svc-card:hover .rbp-sidebar-svc-select-arrow { transform: translateX(3px); }
.rbp-booking-wrap .rbp-sidebar-svc-card.rbp-sidebar-selected .rbp-sidebar-svc-select {
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  border-color: var(--rbp-primary, #c0392b);
}


/* ════════════════════════════════════════════════════════════════════════════
   §9  (v6.2.4) PACKAGE card styles — grid (vertical) | list (horizontal) | pill
   Booking.com / Trip.com option-card standard. DOM per card:
     .rbp-pkg-card > [.rbp-pkg-popular-ribbon] .rbp-pkg-img .rbp-pkg-body
        (.rbp-pkg-name .rbp-pkg-desc .rbp-pkg-price .rbp-pkg-select) .rbp-pkg-check
   Selected state = .rbp-pkg-card.selected (added by rbpPickPkg).

   v6.2.4 UX fixes:
     • box-sizing:border-box on every styled card  → no more horizontal overflow
       ("tràn ra ngoài") from width:100% + padding + border.
     • Compact Select button (width:fit-content) instead of full-width        → not oversized.
     • Circular thumbnail image + 14px rounded corners, matching the service
       card look on desktop.
   ════════════════════════════════════════════════════════════════════════════ */

/* Card hardening — applies to all three styles */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-card,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-card,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-card {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 14px;
}

/* Shared compact "Select" button (outline → fills on hover/selected) */
.rbp-booking-wrap .rbp-pkg-card .rbp-pkg-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  width: fit-content;            /* compact — never full width */
  margin-top: 10px;
  padding: 7px 15px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .2px;
  color: var(--rbp-primary, #c0392b);
  background: transparent;
  border: 1.5px solid var(--rbp-primary, #c0392b);
  border-radius: var(--rbp-btn-radius, 8px);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background var(--rbpv6-transition), color var(--rbpv6-transition);
}
.rbp-booking-wrap .rbp-pkg-select-arrow { display: inline-block; transition: transform var(--rbpv6-transition); }
.rbp-booking-wrap .rbp-pkg-card:hover .rbp-pkg-select { background: var(--rbp-primary, #c0392b); color: #fff; }
.rbp-booking-wrap .rbp-pkg-card:hover .rbp-pkg-select-arrow { transform: translateX(3px); }
.rbp-booking-wrap .rbp-pkg-card.selected .rbp-pkg-select {
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  border-color: var(--rbp-primary, #c0392b);
}

/* Circular image helper — shared sizing for img + placeholder */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-img,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-img,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-img {
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-img > img,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-img > img,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-img > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ── GRID (vertical) — circular image on top, centered content, compact CTA ── */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 14px 16px;
  overflow: hidden;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-img {
  width: 84px; height: 84px;
  margin: 0 0 10px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-img-placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-body { padding: 0; width: 100%; min-width: 0; }
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-grid .rbp-pkg-select { margin: 12px auto 0; }

/* ── LIST (horizontal) — circular image left, content, compact CTA ───────── */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  gap: 12px !important;
  max-width: none !important;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  overflow: hidden;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-img {
  width: 72px; height: 72px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-img-placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 3px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-select {
  align-self: flex-start;
  margin-top: 6px;
}

/* ── PILL PRO — compact rows: small circular image + name + price + CTA ───── */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  gap: 10px !important;
  max-width: none !important;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  overflow: hidden;
}
/* hide description, ribbon, corner-check in pill (kept: small image + name + price + select) */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-desc,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-popular-ribbon,
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-check {
  display: none !important;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-img {
  width: 40px; height: 40px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-img-placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-price { margin: 0; flex: 0 0 auto; white-space: nowrap; }
/* v6.3.6 RATE-UX: in pill layout the rate chip joins the flex row as a compact item */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-rate-note { margin: 0; flex: 0 1 auto; min-width: 0; }
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-select { margin: 0; flex: 0 0 auto; }

/* ── Package styles: mobile (≤480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  .rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-card { padding: 12px 14px; gap: 12px; }
  .rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-img  { width: 60px; height: 60px; }
  .rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-card { padding: 10px 14px; }
  /* v6.2.5 FIX — name on its own full-width line; price + Select wrap below.
     Prevents 1-char-per-line vertical collapse of long names at 375px. */
  .rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-body {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    row-gap: 6px !important;
    column-gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-name {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-select { padding: 7px 12px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   §10  (v6.2.5) Timeslot safety belt — box-sizing on grid-item slot elements.
   The slot grids already fit at 375px (auto-fill minmax → 1–2 cols, pills/tabs
   use flex-wrap), so this changes nothing visually for stretched grid items; it
   only guarantees padding+border can never push a slot past its column on any
   host theme. Pills are intentionally excluded (auto-width; their min-width is
   content-based and must not be reinterpreted).
   ════════════════════════════════════════════════════════════════════════════ */
.rbp-booking-wrap .rbp-slot-btn,
.rbp-booking-wrap .rbp-slot-card,
.rbp-booking-wrap .rbp-slot-card-long,
.rbp-booking-wrap .rbp-slot-box {
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════════════════════
   §11  (v6.2.7) Package "MOST POPULAR" ribbon — LIST (horizontal) overlap fix
   In the horizontal list the absolute ribbon (top:10/left:10) overlapped the
   service name (image is on the left, name starts at the top of the body).
   Reserve a top band on popular list cards so the ribbon sits ABOVE the
   vertically-centred image + content instead of covering the title.
   (Grid is unaffected: there the name sits below the centred image.)
   ════════════════════════════════════════════════════════════════════════════ */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-card.rbp-pkg-popular {
  padding-top: 40px;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-popular-ribbon {
  top: 10px;
  left: 14px;
}
@media (max-width: 480px) {
  .rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-list .rbp-pkg-card.rbp-pkg-popular { padding-top: 38px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   §12  (v6.2.8) Service LIST (horizontal) — booking.com row polish
   DESKTOP/TABLET (≥601px): image left (capped), content centred, CTA anchored
   under the content (no full-width divider band, no floating Select).
   MOBILE (≤600px): stack — image full-width on top, content below, name visible,
   compact Select. (The base only stacked at ≤480, leaving 481–600 cramped.)
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card {
    align-items: center !important;          /* vertically centre image + content */
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap {
    width: 200px !important;
    max-width: 30% !important;
    align-self: stretch !important;
    border-radius: 12px 0 0 12px !important;   /* v6.3.1: hug the card's rounded left edge (no corner gap) */
    overflow: hidden !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-footer {
    width: auto !important;
    margin-top: 12px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    align-self: flex-start !important;        /* sit right under the content */
    justify-content: flex-start !important;
  }
}
@media (max-width: 600px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;          /* legacy grid card forces height:220px → clips body */
    max-height: none !important;
    min-height: 0 !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    align-self: stretch !important;
    /* v6.3.1: extend the image edge-to-edge UNDER the 2px border and round it to the
       card's OUTER radius, so the border is drawn over the image edge — no card-bg
       sliver at the rounded top corners. */
    margin: -2px -2px 0 !important;
    width: calc(100% + 4px) !important;
    max-width: calc(100% + 4px) !important;
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-body {
    width: 100% !important;
    overflow: visible !important;
  }
  /* name was -webkit-line-clamp:2 + display:flow-root → collapsed to 0px height */
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-name {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    white-space: normal !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-footer {
    width: auto !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   §13  (v6.3.0) Service PILL — clearer selection (Bug UX 1) + mobile polish (Bug UX 2)
   ════════════════════════════════════════════════════════════════════════════ */

/* Bug UX 1 — once a card is picked, recede the others (booking.com-style focus). */
@supports selector(:has(*)) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill:has(.rbp-svc-luxury-card.rbp-svc-selected, .rbp-svc-luxury-card[data-selected="1"]) .rbp-svc-luxury-card:not(.rbp-svc-selected):not([data-selected="1"]) {
    opacity: .5 !important;
    filter: saturate(.85) !important;
  }
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  position: relative !important;
  transition: opacity var(--rbpv6-transition), filter var(--rbpv6-transition),
              box-shadow var(--rbpv6-transition), border-color var(--rbpv6-transition) !important;
}
/* Selected — primary ring for prominence */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  box-shadow: 0 0 0 1px var(--rbp-primary, #0d6efd), var(--rbpv6-shadow-sel) !important;
}
/* Corner ✓ badge (top-left, over the avatar) — only on the selected pill card */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-selected-tick,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-selected-tick {
  display: flex !important;
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--rbp-primary, #0d6efd) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25) !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 3 !important;
}

/* Bug UX 2 — mobile pill: smaller Select + tidy layout when price is OFF. */
@media (max-width: 480px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
    padding: 6px 13px !important;     /* was 8px 16px — felt oversized on mobile */
    font-size: 12px !important;
  }
  /* Price OFF (no .rbp-svc-price node) → name + Select share ONE row, no empty
     second line / wasted space. Higher specificity than the two-row price-ON rule. */
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:not(:has(.rbp-svc-price)) .rbp-svc-body {
    flex-wrap: nowrap !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:not(:has(.rbp-svc-price)) .rbp-svc-name {
    flex: 1 1 auto !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:not(:has(.rbp-svc-price)) .rbp-svc-footer {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v6.3.4 (Bug 3) — "Most popular" indicator for the PILL package style.
   The full ribbon text is hidden in pill mode (too long for the compact
   silhouette), which left an admin-chosen popular package with NO marker.
   Show a gold ★ badge after the name + a gold accent border so it is still
   clearly flagged. Language-independent; visible on selected (primary bg) too.
   ════════════════════════════════════════════════════════════════ */
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-card.rbp-pkg-popular{
  border-color:#f5b50a !important;
}
.rbp-booking-wrap .rbp-pkg-grid.rbp-pkg-style-pill .rbp-pkg-card.rbp-pkg-popular .rbp-pkg-name::after{
  content:"\2605";            /* ★ */
  margin-left:7px;padding:1px 6px;
  font-size:10px;line-height:1.4;font-weight:800;
  color:#fff;background:#f5b50a;
  border-radius:6px;vertical-align:middle;white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v6.3.6 SVC-SEL FIX — palette-proof selected state for service cards
   ═══════════════════════════════════════════════════════════════════════════
   BUG (desktop screenshot): on skins where --rbp-primary sits close to the
   card/background colour (dark teal demo), every existing selected cue —
   2px primary border, 6% primary tint, primary-coloured name/price/button —
   collapsed to invisible. Customers could not tell which service was chosen.

   FIX (trip.com / booking.com pattern):
   1. CONTENT change — the Select button flips to "✓ Selected" (JS swap in
      syncServiceUI; immune to any palette).
   2. DOUBLE-RING HALO — a white gap ring between the card and a primary
      outer ring (the Stripe/Airbnb focus-ring technique). On dark surfaces
      the white ring carries the contrast; on light surfaces the primary
      ring does. At least one ring is always clearly visible.
   3. The grid/list/hero corner tick gets a white border for the same reason.
   Appended at the END of this sheet, which loads after public.css,
   ux-modes and the luxury skin — source order guarantees the win. */

/* (2) Double-ring halo — all luxury card styles (grid / list / hero) */
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-luxury-card[data-selected="1"] {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4.5px var(--rbp-primary, #0d6efd),
    0 8px 24px rgba(15, 23, 42, .14) !important;
}
/* Pill cards: slightly tighter halo so adjacent pills don't visually collide */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px var(--rbp-primary, #0d6efd),
    0 6px 18px rgba(15, 23, 42, .12) !important;
}

/* (3) Corner tick (grid / list / hero) — white border keeps it visible when
   the primary fill blends into a dark hero image or dark skin */
.rbp-booking-wrap .rbp-svc-selected-tick {
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .35) !important;
}

/* (1) Selected button reads as a solid confirmation chip in pill mode too —
   the "✓ Selected" text is injected by JS; here we only make sure the chip
   keeps white text on the primary fill (rule already exists above; this
   repeats it after the halo block so the cascade can never regress it). */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-select-btn,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-select-btn {
  background: var(--rbp-primary, #0d6efd) !important;
  color: #fff !important;
  border-color: #ffffff !important; /* white edge = chip visible on dark primaries */
}

/* Sidebar (split layout) selected chip — same content swap target */
.rbp-booking-wrap .rbp-sidebar-svc-card.rbp-sidebar-selected .rbp-sidebar-svc-select {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v6.3.6 STAFF-CARD FIX — palette-proof, OTA-grade staff member cards
   ═══════════════════════════════════════════════════════════════════════════
   BUG (two client screenshots): the staff NAME had no colour declaration in
   the template — it inherited the theme's text colour. Dark skins set white
   body text → name rendered white on the white card = invisible, while the
   role stayed readable (it was hard-coded #888). Every colour below is
   declared with !important so no theme/skin inheritance can break it again.
   UX model: Fresha / Booksy team pickers — avatar, dark bold name, muted
   role, ✓ badge + double-ring halo on selection (same selection language
   as the service cards), "Anyone available" explicit-default card, and a
   "Show all N members" expander for large teams. */

.rbp-booking-wrap .rbp-staff-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  gap: 10px !important;
}
.rbp-booking-wrap .rbp-staff-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 12px 10px 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}
.rbp-booking-wrap .rbp-staff-card:hover {
  border-color: var(--rbp-primary, #0d6efd) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08) !important;
}

/* THE BUG FIX — name is ALWAYS dark on the white card, on every skin */
.rbp-booking-wrap .rbp-staff-card .rbp-staff-name {
  color: #0f172a !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rbp-booking-wrap .rbp-staff-card .rbp-staff-role {
  color: #6b7280 !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  min-height: 13px !important; /* nbsp placeholder keeps every card equal height */
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Avatar — photo, initial fallback, and the Anyone ✦ variant share one size */
.rbp-booking-wrap .rbp-staff-card .rbp-staff-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  flex: 0 0 auto !important;
}
.rbp-booking-wrap .rbp-staff-card .rbp-staff-avatar-initial {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,.18) !important;
}
.rbp-booking-wrap .rbp-staff-card .rbp-staff-avatar-any {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f1f5f9 !important;
  color: var(--rbp-primary, #0d6efd) !important;
  font-size: 21px !important;
  border: 2px dashed #cbd5e1 !important;
}

/* Selected — same palette-proof language as service cards:
   double-ring halo (white gap + primary) + ✓ badge + primary name */
.rbp-booking-wrap .rbp-staff-card .rbp-staff-check {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  background: var(--rbp-primary, #0d6efd) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 15px !important;
  text-align: center !important;
  display: none !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.3) !important;
  pointer-events: none !important;
}
.rbp-booking-wrap .rbp-staff-card.rbp-staff-selected {
  border-color: var(--rbp-primary, #0d6efd) !important;
  background: color-mix(in srgb, var(--rbp-primary, #0d6efd) 5%, #fff) !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px var(--rbp-primary, #0d6efd) !important;
  transform: none !important;
}
.rbp-booking-wrap .rbp-staff-card.rbp-staff-selected .rbp-staff-check { display: block !important; }
.rbp-booking-wrap .rbp-staff-card.rbp-staff-selected .rbp-staff-name { color: var(--rbp-primary, #0d6efd) !important; }

/* Expander for >8 members (booking.com "Show more" pattern) */
.rbp-booking-wrap .rbp-staff-more {
  display: block;
  background: none !important;
  border: 0 !important;
  cursor: pointer !important;
  padding: 4px 2px !important;
  margin: -2px 0 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--rbp-primary, #0d6efd) !important;
  font-family: inherit !important;
}
.rbp-booking-wrap .rbp-staff-more:hover { text-decoration: underline !important; }

/* Mobile: 3-up keeps tap targets ≥ ~110px on a 380px viewport */
@media (max-width: 480px) {
  .rbp-booking-wrap .rbp-staff-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}


/* ==========================================================================
   v6.6.2 UX contrast + global-industry polish
   - Prevent selected pill times from turning white-on-white on custom themes.
   - Prevent service headlines from inheriting white overlay text on light cards.
   - Make sidebar service title a professional pill card across industries.
   ========================================================================== */
.rbp-booking-wrap .rbp-slot-pill.selected,
.rbp-booking-wrap .rbp-slot-pill.rbp-slot-active,
.rbp-booking-wrap .rbp-slot-btn.selected,
.rbp-booking-wrap .rbp-slot-btn.rbp-slot-active {
  background: #ffffff !important;
  border-color: var(--rbp-slot-primary, var(--rbp-primary, #0d6efd)) !important;
  color: #0f172a !important;
  text-shadow: none !important;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px var(--rbp-slot-primary, var(--rbp-primary, #0d6efd)),
    0 8px 22px rgba(15, 23, 42, .14) !important;
  transform: none !important;
}
.rbp-booking-wrap .rbp-slot-pill.selected .sl-time,
.rbp-booking-wrap .rbp-slot-pill.rbp-slot-active .sl-time,
.rbp-booking-wrap .rbp-slot-btn.selected .sl-time,
.rbp-booking-wrap .rbp-slot-btn.rbp-slot-active .sl-time {
  color: var(--rbp-slot-primary, var(--rbp-primary, #0d6efd)) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.rbp-booking-wrap .rbp-slot-pill.selected .sl-name,
.rbp-booking-wrap .rbp-slot-pill.rbp-slot-active .sl-name,
.rbp-booking-wrap .rbp-slot-btn.selected .sl-name,
.rbp-booking-wrap .rbp-slot-btn.rbp-slot-active .sl-name {
  color: #475569 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.rbp-booking-wrap .rbp-slot-pill.selected .sl-dot,
.rbp-booking-wrap .rbp-slot-pill.rbp-slot-active .sl-dot {
  background: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-name,
.rbp-booking-wrap .rbp-svc-card .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-card .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-card .rbp-svc-name {
  color: #111827 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-name,
.rbp-booking-wrap .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-name,
.rbp-booking-wrap .rbp-svc-card.rbp-svc-selected .rbp-svc-name,
.rbp-booking-wrap .rbp-svc-card[data-selected="1"] .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-name {
  color: var(--rbp-primary, #0d6efd) !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  display: inline-flex !important;
  max-width: 100% !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.08) !important;
}
.rbp-booking-wrap .rbp-svc-style-hero .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-style-hero .rbp-svc-name {
  background: rgba(255,255,255,.92) !important;
  color: #111827 !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  text-shadow: none !important;
}
.rbp-booking-wrap .rbp-sidebar-head .rbp-sidebar-title,
.rbp-booking-wrap.rbp-lux .rbp-sidebar-head .rbp-sidebar-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,.96) !important;
  color: #0f172a !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.08) !important;
  text-shadow: none !important;
  line-height: 1.2 !important;
}
.rbp-booking-wrap .rbp-sidebar-head .rbp-sidebar-title::before {
  content: "✦";
  color: var(--rbp-primary, #0d6efd);
  font-size: 12px;
  line-height: 1;
}
.rbp-booking-wrap .rbp-sidebar-count {
  border-radius: 999px !important;
  min-width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--rbp-primary, #0d6efd) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(15,23,42,.14) !important;
}
.rbp-booking-wrap .rbp-ms-help,
.rbp-booking-wrap .rbp-ms-note {
  margin: 8px 0 10px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}
.rbp-booking-wrap .rbp-ms-guest-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: 8px !important;
  font-size: 12px !important;
  color: #64748b !important;
  white-space: nowrap !important;
}
.rbp-booking-wrap .rbp-ms-guest-wrap select.rbp-ms-guest-select {
  min-height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  background: #fff !important;
  color: #0f172a !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 12px !important;
}
@media (max-width: 520px) {
  .rbp-booking-wrap .rbp-ms-cart-list li { flex-wrap: wrap !important; }
  .rbp-booking-wrap .rbp-ms-guest-wrap { margin-left: 0 !important; width: 100% !important; }
}

/* ========================================================================
   v6.6.4 — Booking form service card UX hardening
   - Grid/Vertical cards: keep the title in the white body, never clipped under image.
   - Hero cards: keep name/meta/footer visible below the photo on every skin.
   - Multi-service cart: line remove button + guest selector layout.
   ======================================================================== */
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-luxury-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-img-wrap {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-height: 58px !important;
  padding: 12px 14px 14px !important;
  margin: 0 !important;
  background: #ffffff !important;
  color: #111827 !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-name {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  color: #0f172a !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  line-height: 1.28 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-luxury-card {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-img-wrap {
  flex: 0 0 auto !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 86px !important;
  padding: 14px 16px 16px !important;
  background: #ffffff !important;
  color: #111827 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-name {
  display: block !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #0f172a !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  font-size: 17px !important;
  line-height: 1.28 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-footer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-desc { display: -webkit-box !important; }
.rbp-booking-wrap .rbp-ms-cart-list li { gap: 8px !important; }
.rbp-booking-wrap .rbp-ms-line-remove {
  flex: 0 0 auto !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  background: #fff !important;
  color: #64748b !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.rbp-booking-wrap .rbp-ms-line-remove:hover,
.rbp-booking-wrap .rbp-ms-line-remove:focus-visible {
  color: #b91c1c !important;
  border-color: rgba(185,28,28,.35) !important;
  background: #fef2f2 !important;
}

/* ============================================================================
   v6.7.2 — Service Card UX hardening + selected-services sidebar mini cart
   --------------------------------------------------------------------------
   Fixes all customer-reported service-card modes without touching booking core.
   Goals: every card shows image, title, useful details, duration/price and a
   compact selected state; no title is pushed below a clipped image; hero cards
   are not image-only; pill mode does not let the select chip hide the service.
   ============================================================================ */

.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-luxury-card {
  min-width: 0 !important;
  color: #0f172a !important;
  background: #fff !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-img-wrap {
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  max-height: 240px !important;
  background: #e2e8f0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-img { object-fit: cover !important; object-position: center !important; }
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-img-overlay { display: none !important; }
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-body {
  background: #fff !important;
  color: #0f172a !important;
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid .rbp-svc-name {
  color: #0f172a !important;
  text-shadow: none !important;
  opacity: 1 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid .rbp-svc-meta-plain {
  color: #475569 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
.rbp-booking-wrap .rbp-svc-meta-row:has(.rbp-svc-meta-empty),
.rbp-booking-wrap .rbp-sidebar-svc-meta-row:has(.rbp-svc-meta-empty) { display: none !important; }

/* Grid / Vertical: stable image + title/body below image. */
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill):not(.rbp-svc-style-list):not(.rbp-svc-style-hero) .rbp-svc-luxury-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill):not(.rbp-svc-style-list):not(.rbp-svc-style-hero) .rbp-svc-body {
  padding: 14px 16px 16px !important;
  min-height: 126px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill):not(.rbp-svc-style-list):not(.rbp-svc-style-hero) .rbp-svc-name {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.28 !important;
  margin: 0 0 4px !important;
  -webkit-line-clamp: 2 !important;
}

/* Hero: image-led but never image-only. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 16px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-luxury-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-color-bar {
  border-radius: 0 !important;
  height: auto !important;
  max-height: 260px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-body {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 18px 18px !important;
  gap: 8px !important;
  min-height: 132px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-name {
  display: block !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-footer { margin-top: auto !important; }

/* List: recommended for Spa / Salon / Barbershop — readable, fast scanning. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  min-height: 132px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-color-bar {
  width: 132px !important;
  height: 100% !important;
  min-height: 132px !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-body {
  padding: 14px 16px !important;
  min-height: 132px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-name {
  font-size: 16px !important;
  line-height: 1.28 !important;
  margin-bottom: 4px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-footer { margin-top: auto !important; }

/* Pill: compact mode. Keep the select chip small so it never covers the title. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  min-height: 64px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 999px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body { gap: 10px !important; }
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  font-size: 15px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  min-width: 88px !important;
  max-width: 128px !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-txt {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Sidebar cards used in split layouts. */
.rbp-booking-wrap .rbp-sidebar-svc-card {
  display: grid !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  min-height: 116px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-img {
  width: 112px !important;
  height: 100% !important;
  min-height: 116px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-body {
  padding: 12px 14px !important;
  min-width: 0 !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-name {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.28 !important;
  color: #0f172a !important;
  margin-bottom: 4px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-select {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 160px !important;
  min-width: 94px !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Selected mini-cart in the service/info sidebar. */
.rbp-booking-wrap .rbp-sidebar-selection {
  background: #fff !important;
  border: 1px solid #dbe4ee !important;
  border-radius: 16px !important;
  padding: 12px !important;
  margin: 0 0 14px !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.06) !important;
}
.rbp-booking-wrap .rbp-side-sel-head,
.rbp-booking-wrap .rbp-side-sel-total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #0f172a !important;
}
.rbp-booking-wrap .rbp-side-sel-head strong { font-size: 13px !important; }
.rbp-booking-wrap .rbp-side-sel-head span {
  background: var(--rbp-primary, #0d6efd) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.rbp-booking-wrap .rbp-side-sel-list { list-style: none !important; margin: 10px 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.rbp-booking-wrap .rbp-side-sel-list li {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 6px 8px !important;
  padding: 8px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
}
.rbp-booking-wrap .rbp-side-sel-guest { grid-column: 1 / 2 !important; font-size: 11px !important; font-weight: 800 !important; color: #0f766e !important; background: #ccfbf1 !important; border-radius: 999px !important; padding: 2px 7px !important; }
.rbp-booking-wrap .rbp-side-sel-name { grid-column: 2 / 4 !important; color: #0f172a !important; font-weight: 800 !important; font-size: 13px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.rbp-booking-wrap .rbp-side-sel-dur,
.rbp-booking-wrap .rbp-side-sel-price { font-size: 12px !important; color: #475569 !important; font-weight: 700 !important; white-space: nowrap !important; }
.rbp-booking-wrap .rbp-side-sel-total { border-top: 1px solid #e2e8f0 !important; padding-top: 9px !important; font-size: 12px !important; }
.rbp-booking-wrap .rbp-side-sel-total strong { font-size: 12px !important; }

@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card,
  .rbp-booking-wrap .rbp-sidebar-svc-card { grid-template-columns: 96px minmax(0,1fr) !important; min-height: 108px !important; }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-color-bar,
  .rbp-booking-wrap .rbp-sidebar-svc-img { width: 96px !important; min-height: 108px !important; }
  .rbp-booking-wrap .rbp-svc-footer { gap: 6px !important; }
  .rbp-booking-wrap .rbp-svc-select-btn { padding: 7px 10px !important; font-size: 12px !important; }
  .rbp-booking-wrap .rbp-svc-price { font-size: 13px !important; }
}

/* ============================================================================
   v6.7.3 — Global service-card hardening pass
   Fixes split-layout and card-mode regressions seen with dark/brand palettes:
   - Grid / Vertical: image owns the top region; title/body never slide under it.
   - Hero: never image-only; visible title, details, price and CTA below image.
   - Pill: compact CTA cannot cover the service title.
   - Sidebar: image, body and selected CTA use a real two-column layout.
   ============================================================================ */
.rbp-booking-wrap .rbp-svc-luxury-grid,
.rbp-booking-wrap .rbp-svc-luxury-grid * ,
.rbp-booking-wrap .rbp-sidebar-services,
.rbp-booking-wrap .rbp-sidebar-services * {
  box-sizing: border-box !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  text-align: left !important;
  color: #0f172a !important;
  background: #fff !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-color-bar {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  background: #e2e8f0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-img-overlay { display: none !important; }
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-body {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  background: #fff !important;
  color: #0f172a !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-card .rbp-svc-name {
  color: #0f172a !important;
  text-shadow: none !important;
  opacity: 1 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-meta-plain {
  color: #475569 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-card .rbp-svc-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: auto !important;
  min-width: 0 !important;
}

/* Grid / Vertical */
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-luxury-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 268px !important;
  padding: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-color-bar {
  width: 100% !important;
  height: auto !important;
  min-height: 156px !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 14px 16px 16px !important;
  min-height: 128px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Hero */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-rows: minmax(178px, 220px) minmax(144px, auto) !important;
  min-height: 334px !important;
  padding: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-color-bar {
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 178px !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-body {
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 18px 18px !important;
  min-height: 144px !important;
  border-top: 1px solid #e2e8f0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-name {
  display: block !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

/* Pill */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-columns: 46px minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 68px !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  grid-column: 1 !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  grid-column: 2 / 4 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-row,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-selected-badge,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-check {
  display: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  margin: 0 !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  min-width: max-content !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price {
  display: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  min-width: 82px !important;
  max-width: 118px !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

/* Split-layout sidebar service cards */
.rbp-booking-wrap .rbp-sidebar-services {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 112px minmax(0,1fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-height: 116px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  color: #0f172a !important;
  background: #fff !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-img {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 112px !important;
  height: 100% !important;
  min-height: 116px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  z-index: 1 !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 3px !important;
  border-radius: 0 !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  color: #0f172a !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-name {
  display: block !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-desc,
.rbp-booking-wrap .rbp-sidebar-svc-price,
.rbp-booking-wrap .rbp-sidebar-svc-meta-row {
  color: #475569 !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-check {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-select {
  align-self: flex-end !important;
  margin-top: auto !important;
  min-width: 90px !important;
  max-width: 150px !important;
  padding: 8px 13px !important;
}

@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-list):not(.rbp-svc-style-hero):not(.rbp-svc-style-pill) .rbp-svc-color-bar {
    min-height: 132px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-hero .rbp-svc-luxury-card {
    grid-template-rows: minmax(148px, 190px) minmax(136px, auto) !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-card {
    grid-template-columns: 96px minmax(0,1fr) !important;
    min-height: 108px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-img,
  .rbp-booking-wrap .rbp-sidebar-svc-body {
    min-height: 108px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-img {
    width: 96px !important;
  }
}

/* ==========================================================
   v6.7.4 — Guest-first UX polish + Pill v6.7.1-style restore
   - Prevent theme hover states from turning guest/staff controls black.
   - Keep compact Add guest CTA inside pill/card rows.
   - Make Booking Summary and selected-service remove control readable.
   ========================================================== */
.rbp-booking-wrap .rbp-gfb-chip,
.rbp-booking-wrap .rbp-gfb-add,
.rbp-booking-wrap .rbp-gfb-card,
.rbp-booking-wrap .rbp-ms-guest-select,
.rbp-booking-wrap .rbp-staff-card,
.rbp-booking-wrap .rbp-sidebar-svc-select,
.rbp-booking-wrap .rbp-svc-select-btn {
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
}
.rbp-booking-wrap .rbp-gfb-chip,
.rbp-booking-wrap .rbp-gfb-chip:hover,
.rbp-booking-wrap .rbp-gfb-chip:focus,
.rbp-booking-wrap .rbp-gfb-chip:active,
.rbp-booking-wrap .rbp-gfb-add,
.rbp-booking-wrap .rbp-gfb-add:hover,
.rbp-booking-wrap .rbp-gfb-add:focus,
.rbp-booking-wrap .rbp-gfb-add:active {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #d6e3f3 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03) !important;
}
.rbp-booking-wrap .rbp-gfb-chip.is-active,
.rbp-booking-wrap .rbp-gfb-chip.is-active:hover,
.rbp-booking-wrap .rbp-gfb-chip.is-active:focus,
.rbp-booking-wrap .rbp-gfb-chip.is-active:active {
  background: #fff7ed !important;
  color: #991b1b !important;
  border-color: #fb7185 !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, .14) !important;
}
.rbp-booking-wrap .rbp-gfb-card,
.rbp-booking-wrap .rbp-gfb-card:hover,
.rbp-booking-wrap .rbp-gfb-card:focus,
.rbp-booking-wrap .rbp-gfb-card:active {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05) !important;
}
.rbp-booking-wrap .rbp-gfb-card.is-active,
.rbp-booking-wrap .rbp-gfb-card.is-active:hover,
.rbp-booking-wrap .rbp-gfb-card.is-active:focus,
.rbp-booking-wrap .rbp-gfb-card.is-active:active {
  background: #f8fbff !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .13), 0 12px 30px rgba(15, 23, 42, .07) !important;
}
.rbp-booking-wrap .rbp-gfb-card .rbp-gfb-title,
.rbp-booking-wrap .rbp-gfb-card strong,
.rbp-booking-wrap .rbp-gfb-card em,
.rbp-booking-wrap .rbp-gfb-card .rbp-gfb-meta {
  color: inherit !important;
}
.rbp-booking-wrap .rbp-gfb-card .rbp-gfb-meta,
.rbp-booking-wrap .rbp-gfb-card em {
  color: #475569 !important;
}
.rbp-booking-wrap .rbp-gfb-status.is-ready {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}
.rbp-booking-wrap .rbp-gfb-status.needs-service {
  background: #fff7ed !important;
  color: #9a3412 !important;
  border-color: #fed7aa !important;
}
.rbp-booking-wrap .rbp-staff-card:hover,
.rbp-booking-wrap .rbp-staff-card:focus,
.rbp-booking-wrap .rbp-staff-card:active {
  background: #ffffff !important;
  color: #0f172a !important;
}
.rbp-booking-wrap .rbp-staff-card.is-selected,
.rbp-booking-wrap .rbp-staff-card.is-selected:hover,
.rbp-booking-wrap .rbp-staff-card.is-selected:focus {
  background: #f8fbff !important;
  color: #0f172a !important;
}

.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 84px !important;
  padding: 12px 14px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-color-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-img-wrap img,
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-img-wrap .rbp-svc-img-placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-badges,
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-price,
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-meta-row {
  display: none !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-title,
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-title-link {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #0f172a !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-footer {
  grid-column: 2 !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 128px !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-select-btn {
  min-width: 74px !important;
  max-width: 128px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-select-txt {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.rbp-booking-wrap .rbp-ms-cart-list li {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
}
.rbp-booking-wrap .rbp-ms-name {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}
.rbp-booking-wrap .rbp-ms-line-remove {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid #fecaca !important;
  background: #fff7f7 !important;
  color: #b91c1c !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-ms-line-remove:hover,
.rbp-booking-wrap .rbp-ms-line-remove:focus {
  background: #fee2e2 !important;
  color: #7f1d1d !important;
  border-color: #fca5a5 !important;
}
.rbp-booking-wrap .rbp-live-table {
  table-layout: fixed !important;
}
.rbp-booking-wrap .rbp-live-label {
  width: 34% !important;
}
.rbp-booking-wrap .rbp-live-value {
  width: 66% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.45 !important;
}

@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-luxury-card {
    grid-template-columns: 48px minmax(0,1fr) !important;
    min-height: 76px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-color-bar {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  .rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-body {
    gap: 8px !important;
  }
  .rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-select-btn {
    max-width: 112px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================
   v6.7.5 — Global UX hardening pass
   - Normalize service/card media so uploaded image dimensions cannot resize cards.
   - Restore compact professional Pill row with rounded-rectangle image.
   - Prevent payment method headings/CTAs from overflowing narrow cards.
   - Make guest-first chips reliably tappable on mobile and split shortcodes.
   ========================================================== */
.rbp-booking-wrap .rbp-svc-luxury-card,
.rbp-booking-wrap .rbp-sidebar-svc-card,
.rbp-booking-wrap .rbp-pay-card,
.rbp-booking-wrap .rbp-gfb-chip,
.rbp-booking-wrap .rbp-gfb-card,
.rbp-booking-wrap .rbp-gfb-add {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Split/sidebar service cards: one fixed visual rhythm regardless of uploaded media size. */
.rbp-booking-wrap .rbp-sidebar-services { gap: 12px !important; }
.rbp-booking-wrap .rbp-sidebar-svc-card {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 132px !important;
  max-height: 132px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-img {
  width: 132px !important;
  height: 132px !important;
  min-height: 132px !important;
  max-height: 132px !important;
  object-fit: cover !important;
  object-position: center !important;
  align-self: stretch !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-body {
  min-height: 132px !important;
  max-height: 132px !important;
  overflow: hidden !important;
  padding: 14px 16px !important;
  justify-content: center !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-name {
  font-size: 16px !important;
  line-height: 1.28 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-desc,
.rbp-booking-wrap .rbp-sidebar-svc-meta,
.rbp-booking-wrap .rbp-sidebar-svc-meta-plain {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-select {
  align-self: flex-end !important;
  max-width: 138px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Standard card modes: image area is ratio-driven, not upload-dimension-driven. */
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill):not(.rbp-svc-style-list):not(.rbp-svc-style-hero) .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill):not(.rbp-svc-style-list):not(.rbp-svc-style-hero) .rbp-svc-color-bar {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid:not(.rbp-svc-style-pill) .rbp-svc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card {
  grid-template-columns: 128px minmax(0, 1fr) !important;
  min-height: 132px !important;
  max-height: 148px !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-color-bar {
  width: 128px !important;
  height: 132px !important;
  min-height: 132px !important;
  overflow: hidden !important;
}

/* Pill PRO: compact option row, not a large oval-image card. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 92px !important;
  max-height: 104px !important;
  padding: 10px 14px 10px 10px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  grid-column: 1 !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  grid-column: 1 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  grid-column: 2 !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 128px !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  width: auto !important;
  min-width: 88px !important;
  max-width: 128px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-row,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-plain,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-selected-tick {
  display: none !important;
}

/* Payment cards: no title/CTA overflow even when labels include amount. */
.rbp-booking-wrap .rbp-pay-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
.rbp-booking-wrap .rbp-pay-card {
  min-width: 0 !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-pc-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  min-width: 0 !important;
}
.rbp-booking-wrap .rbp-pc-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: 18px !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.rbp-booking-wrap .rbp-pc-badge {
  align-self: flex-start !important;
  max-width: 100% !important;
  white-space: normal !important;
}
.rbp-booking-wrap .rbp-pc-cta-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

/* Guest-first touch targets: protects A group on mobile from theme overlays. */
.rbp-booking-wrap .rbp-guest-builder,
.rbp-booking-wrap .rbp-gfb-mode,
.rbp-booking-wrap .rbp-gfb-cards {
  position: relative !important;
  z-index: 5 !important;
  isolation: isolate !important;
}
.rbp-booking-wrap .rbp-gfb-chip,
.rbp-booking-wrap .rbp-gfb-card,
.rbp-booking-wrap .rbp-gfb-add {
  position: relative !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

@media (min-width: 681px) {
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-svc-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-svc-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-svc-mobile-only {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .rbp-booking-wrap .rbp-pay-cards { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-sidebar-svc-card {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    min-height: 96px !important;
    max-height: 104px !important;
    border-radius: 22px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-img {
    width: 78px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 104px !important;
    border-radius: 0 !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-body {
    min-height: 96px !important;
    max-height: 104px !important;
    padding: 12px 14px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 84px !important;
    max-height: 96px !important;
    padding: 9px 12px 9px 9px !important;
    border-radius: 24px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    border-radius: 18px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
    font-size: 15px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
    min-width: 82px !important;
    max-width: 112px !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }
  .rbp-booking-wrap .rbp-gfb-mode {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-gfb-chip {
    width: 100% !important;
    min-height: 44px !important;
    text-align: center !important;
  }
  .rbp-booking-wrap .rbp-ms-help {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}

/* ============================================================
   v6.7.6 — Global UX hardening: compact pill, visible guest builder,
   split-layout service picker and admin filter affordance parity.
   ============================================================ */

/* In split layouts the guest-first chooser must stay visible on desktop; only
   the duplicate in-form service grid is hidden because the sidebar is the
   desktop picker. On mobile the sidebar is hidden and this grid returns. */
@media (min-width: 681px) {
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-svc-grid-mobile-only {
    display: none !important;
  }
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-svc-sec-split,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-svc-sec-split,
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-svc-sec-split {
    display: block !important;
  }
}
@media (max-width: 680px) {
  .rbp-booking-wrap .rbp-svc-grid-mobile-only {
    display: grid !important;
  }
}

/* Pill PRO restore: small, rounded, image-led option row. Important booking
   info (price type + duration) stays in compact badges above the service name. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 14px !important;
  min-height: 82px !important;
  max-height: 88px !important;
  padding: 8px 14px 8px 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  grid-column: 1 !important;
  width: 66px !important;
  height: 66px !important;
  min-width: 66px !important;
  min-height: 66px !important;
  max-width: 66px !important;
  max-height: 66px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: 3px solid rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.18) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badge {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  max-width: 120px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 86px !important;
  max-width: 132px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-row,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-plain,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-selected-tick {
  display: none !important;
}

/* Split sidebar service cards: normalize the visual rhythm and restore a
   compact pill-like option row with a circular demo/avatar image. */
.rbp-booking-wrap .rbp-sidebar-services {
  gap: 10px !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 14px !important;
  min-height: 94px !important;
  max-height: 100px !important;
  padding: 8px 16px 8px 8px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-img {
  grid-column: 1 !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  border: 3px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-body {
  grid-column: 2 !important;
  min-height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-name {
  grid-column: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-price,
.rbp-booking-wrap .rbp-sidebar-svc-desc,
.rbp-booking-wrap .rbp-sidebar-svc-meta,
.rbp-booking-wrap .rbp-sidebar-svc-meta-plain,
.rbp-booking-wrap .rbp-sidebar-svc-bar {
  display: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-select {
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  max-width: 132px !important;
  min-width: 86px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 74px !important;
    max-height: 82px !important;
    padding: 7px 10px 7px 7px !important;
    column-gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badge {
    max-width: 92px !important;
    padding: 0 6px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
  .rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
    font-size: 14px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
    min-width: 72px !important;
    max-width: 96px !important;
    height: 34px !important;
    padding: 0 10px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 78px !important;
    max-height: 86px !important;
    padding: 7px 10px 7px 7px !important;
    column-gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-select {
    min-width: 72px !important;
    max-width: 96px !important;
    height: 34px !important;
    padding: 0 10px !important;
  }
}

/* ============================================================
   v6.7.7 — Pill/service UX final hardening + split duplicate guard
   ------------------------------------------------------------
   Goals:
   • restore compact, image-led service pills with true circular avatars;
   • remove white title capsules and double-border artifacts;
   • use one clean selected halo + elevation instead of stacked inner borders;
   • in split desktop, keep the sidebar as the single service picker and hide
     the duplicate in-form picker. Mobile still uses the in-form picker because
     the sidebar stacks/gets hidden on narrow screens.
   ============================================================ */

@media (min-width: 681px) {
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-svc-picker-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-svc-picker-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-svc-picker-mobile-only {
    display: none !important;
  }
}
@media (max-width: 680px) {
  .rbp-booking-wrap .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap .rbp-svc-picker-mobile-only {
    display: grid !important;
  }
  .rbp-booking-wrap .rbp-svc-context.rbp-svc-picker-mobile-only {
    display: flex !important;
  }
}

/* Public form pill cards: old compact row restored, but with stronger selected
   affordance and no white title chip. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 76px !important;
  max-height: 86px !important;
  padding: 8px 14px 8px 8px !important;
  border: 1px solid rgba(148, 163, 184, .26) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07) !important;
  overflow: hidden !important;
  transform: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:focus-visible {
  border-color: color-mix(in srgb, var(--rbp-primary, #0d6efd) 45%, #cbd5e1) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .11) !important;
  transform: translateY(-1px) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  border-color: color-mix(in srgb, var(--rbp-primary, #0d6efd) 72%, #ffffff) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rbp-primary, #0d6efd) 7%, #ffffff), #ffffff) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--rbp-primary, #0d6efd) 16%, transparent),
    0 16px 38px rgba(15, 23, 42, .14) !important;
  transform: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  display: block !important;
  flex: 0 0 58px !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid rgba(255,255,255,.98) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
  display: block !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 4px 12px !important;
  padding: 0 !important;
  background: transparent !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badge {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  max-width: 128px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px !important;
  max-width: 132px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 7px 16px rgba(15, 23, 42, .14) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-row,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-plain,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-selected-tick {
  display: none !important;
}

/* Split sidebar cards: same compact pill language on the dark service rail. */
.rbp-booking-wrap .rbp-sidebar-svc-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 82px !important;
  max-height: 90px !important;
  padding: 8px 16px 8px 8px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 26px rgba(2, 6, 23, .12) !important;
  overflow: hidden !important;
  transform: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card:hover {
  border-color: rgba(255,255,255,.34) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 34px rgba(2, 6, 23, .18) !important;
  transform: translateY(-1px) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card.rbp-sidebar-selected,
.rbp-booking-wrap .rbp-sidebar-svc-card[data-selected="1"] {
  border-color: color-mix(in srgb, var(--rbp-primary, #22c55e) 72%, #ffffff) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--rbp-primary, #22c55e) 18%, transparent),
    0 18px 40px rgba(2, 6, 23, .20) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-img {
  flex: 0 0 62px !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,.94) !important;
  object-fit: cover !important;
  object-position: center !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, .28) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-sidebar-svc-name {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-select {
  justify-self: end !important;
  align-self: center !important;
  min-width: 88px !important;
  max-width: 132px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  box-shadow: 0 7px 16px rgba(2, 6, 23, .18) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-price,
.rbp-booking-wrap .rbp-sidebar-svc-desc,
.rbp-booking-wrap .rbp-sidebar-svc-meta,
.rbp-booking-wrap .rbp-sidebar-svc-meta-plain,
.rbp-booking-wrap .rbp-sidebar-svc-bar {
  display: none !important;
}

@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card,
  .rbp-booking-wrap .rbp-sidebar-svc-card {
    min-height: 72px !important;
    max-height: 82px !important;
    padding: 7px 10px 7px 7px !important;
    gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar,
  .rbp-booking-wrap .rbp-sidebar-svc-img {
    flex-basis: 54px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges {
    display: none !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
    grid-template-rows: auto !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
  .rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
  .rbp-booking-wrap .rbp-sidebar-svc-name {
    grid-row: 1 !important;
    font-size: 14px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
    grid-row: 1 !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn,
  .rbp-booking-wrap .rbp-sidebar-svc-select {
    min-width: 72px !important;
    max-width: 98px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   v6.7.8 — Final pill/sidebar UX hardening + duplicate service picker guard
   ------------------------------------------------------------
   Source-first patch: keep the plugin logic untouched and normalize only the
   service-picker presentation + desktop split visibility.
   ============================================================ */

/* Desktop split/wizard layout: sidebar is the single service picker. The in-form
   picker remains in the DOM for mobile, but must never compete visually on desktop. */
@media (min-width: 681px) {
  .rbp-booking-wrap.rbp-has-sidebar-svc-picker .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap.rbp-has-sidebar-svc-picker .rbp-svc-picker-mobile-only,
  .rbp-booking-wrap:not(.rbp-no-sidebar) .rbp-booking-sidebar ~ .rbp-booking-inner .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap:not(.rbp-no-sidebar) .rbp-booking-sidebar ~ .rbp-booking-inner .rbp-svc-picker-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-svc-picker-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-svc-picker-mobile-only,
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-svc-picker-mobile-only {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
@media (max-width: 680px) {
  .rbp-booking-wrap .rbp-svc-grid-mobile-only {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .rbp-booking-wrap .rbp-svc-context.rbp-svc-picker-mobile-only,
  .rbp-booking-wrap .rbp-ms-cart.rbp-svc-picker-mobile-only {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Public pill cards: compact legacy-style row with a real circular avatar,
   clear title, compact badges above, and a single luminous selected state. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  column-gap: 14px !important;
  width: 100% !important;
  min-height: 78px !important;
  max-height: 90px !important;
  padding: 8px 14px 8px 8px !important;
  border: 1px solid rgba(20, 83, 45, .12) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
  transform: none !important;
  outline: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:focus-visible {
  border-color: rgba(13, 110, 253, .35) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .12) !important;
  transform: translateY(-1px) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  border-color: rgba(34, 197, 94, .70) !important;
  background: linear-gradient(135deg, rgba(240,253,244,.98), rgba(255,255,255,.98)) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18), 0 18px 44px rgba(15, 23, 42, .16) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid #ffffff !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  box-shadow: 0 9px 20px rgba(15, 23, 42, .18) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badge {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 120px !important;
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 82px !important;
  max-width: 122px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-desc,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-dl,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-row,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-plain,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-selected-tick,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-overlay {
  display: none !important;
}

/* Sidebar service picker: a compact pill, one continuous surface, circular avatar.
   This deliberately overrides earlier grid/card rules that created the white title slab. */
.rbp-booking-wrap .rbp-sidebar-services {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 14px !important;
  width: 100% !important;
  min-height: 86px !important;
  max-height: 98px !important;
  padding: 8px 16px 8px 8px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.90)) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
  transform: none !important;
  outline: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card:hover,
.rbp-booking-wrap .rbp-sidebar-svc-card:focus-visible {
  border-color: rgba(13, 110, 253, .32) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12) !important;
  transform: translateY(-1px) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card.rbp-sidebar-selected,
.rbp-booking-wrap .rbp-sidebar-svc-card[data-selected="1"] {
  border-color: rgba(34, 197, 94, .70) !important;
  background: linear-gradient(135deg, rgba(240,253,244,.96), rgba(255,255,255,.96)) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18), 0 18px 44px rgba(15, 23, 42, .15) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-avatar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid #ffffff !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: var(--rbp-svc-color, #0f6b7a) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .20) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-img,
.rbp-booking-wrap img.rbp-sidebar-svc-img,
.rbp-booking-wrap .rbp-sidebar-svc-img--fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  box-shadow: none !important;
  vertical-align: top !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-bar,
.rbp-booking-wrap .rbp-sidebar-svc-price,
.rbp-booking-wrap .rbp-sidebar-svc-desc,
.rbp-booking-wrap .rbp-sidebar-svc-meta,
.rbp-booking-wrap .rbp-sidebar-svc-meta-row,
.rbp-booking-wrap .rbp-sidebar-svc-meta-plain {
  display: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-check {
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 5 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  background: #0f766e !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .18) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card.rbp-sidebar-selected .rbp-sidebar-svc-check,
.rbp-booking-wrap .rbp-sidebar-svc-card[data-selected="1"] .rbp-sidebar-svc-check {
  display: flex !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  color: #0f172a !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-badges {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-badge {
  display: inline-flex !important;
  align-items: center !important;
  height: 19px !important;
  max-width: 118px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 118, 110, .09) !important;
  color: #0f766e !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-sidebar-svc-name {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-select {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 78px !important;
  max-width: 116px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .14) !important;
}

@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    min-height: 72px !important;
    max-height: 82px !important;
    padding: 7px 10px 7px 7px !important;
    column-gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges,
  .rbp-booking-wrap .rbp-sidebar-svc-badges {
    display: none !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body,
  .rbp-booking-wrap .rbp-sidebar-svc-body {
    grid-template-rows: auto !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
  .rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
  .rbp-booking-wrap .rbp-sidebar-svc-name,
  .rbp-booking-wrap.rbp-lux .rbp-sidebar-svc-name {
    grid-row: 1 !important;
    font-size: 14px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer,
  .rbp-booking-wrap .rbp-sidebar-svc-select {
    grid-row: 1 !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn,
  .rbp-booking-wrap .rbp-sidebar-svc-select {
    min-width: 70px !important;
    max-width: 96px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    min-height: 74px !important;
    max-height: 84px !important;
    padding: 7px 10px 7px 7px !important;
    column-gap: 10px !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-avatar {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }
}

/* ============================================================
   v6.7.9 — Pill/sidebar final responsive polish
   ------------------------------------------------------------
   Fixes clipped selected glow, tiny-sidebar badge/title collisions, and makes
   each service pill consume the service color saved in admin settings.
   ============================================================ */
.rbp-booking-wrap .rbp-booking-sidebar,
.rbp-booking-wrap .rbp-sidebar-inner,
.rbp-booking-wrap .rbp-sidebar-services {
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-sidebar-services {
  padding: 6px 8px 12px !important;
  margin: -6px -8px 0 !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill {
  overflow: visible !important;
  padding: 4px 0 !important;
}

/* Public pill: compact legacy language, but with clean title and no clipped glow. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  min-height: 78px !important;
  max-height: none !important;
  padding: 8px 14px 8px 8px !important;
  overflow: visible !important;
  border: 1.5px solid rgba(15, 23, 42, .08) !important;
  border-left-color: var(--rbp-svc-color, rgba(15, 23, 42, .12)) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.92)) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.09) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:focus-visible {
  border-color: var(--rbp-svc-color, rgba(13,110,253,.38)) !important;
  box-shadow: 0 16px 36px rgba(15,23,42,.14) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  border-color: var(--rbp-svc-color, #22c55e) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 0 5px rgba(34,197,94,.20), 0 18px 44px rgba(15,23,42,.16) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  border-color: #fff !important;
  box-shadow: 0 9px 18px rgba(15,23,42,.20), 0 0 0 1px var(--rbp-svc-color, rgba(15,23,42,.12)) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  grid-column: 2 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "badges cta" "title cta" !important;
  align-items: center !important;
  column-gap: 12px !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges {
  grid-area: badges !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badge {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 105px !important;
  height: 20px !important;
  padding: 0 7px !important;
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  grid-area: title !important;
  background: transparent !important;
  color: #0f172a !important;
  text-shadow: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  grid-area: cta !important;
  align-self: center !important;
}

/* Sidebar pill: circular avatar, transparent/elegant title area, service-color ring. */
.rbp-booking-wrap .rbp-sidebar-svc-card,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card {
  display: grid !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
  align-items: center !important;
  min-height: 82px !important;
  max-height: none !important;
  padding: 8px 14px 8px 8px !important;
  column-gap: 13px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  border: 1.5px solid rgba(255,255,255,.18) !important;
  border-left-color: var(--rbp-svc-color, rgba(255,255,255,.28)) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.12) !important;
  isolation: isolate !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rbp-svc-color, #14b8a6) 16%, transparent), transparent 62%) !important;
  opacity: .55 !important;
  z-index: -1 !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card:hover,
.rbp-booking-wrap .rbp-sidebar-svc-card:focus-visible {
  border-color: var(--rbp-svc-color, rgba(13,110,253,.42)) !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.18) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-card.rbp-sidebar-selected,
.rbp-booking-wrap .rbp-sidebar-svc-card[data-selected="1"] {
  border-color: var(--rbp-svc-color, #22c55e) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10)) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.88), 0 0 0 5px rgba(34,197,94,.20), 0 18px 42px rgba(15,23,42,.20) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: var(--rbp-svc-color, #0f6b7a) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.22), 0 0 0 1px var(--rbp-svc-color, rgba(15,23,42,.12)) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-img,
.rbp-booking-wrap img.rbp-sidebar-svc-img,
.rbp-booking-wrap .rbp-sidebar-svc-img--fallback {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-body {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "badges button" "name button" !important;
  align-items: center !important;
  row-gap: 4px !important;
  column-gap: 10px !important;
  min-width: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-badges {
  grid-area: badges !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-badge {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 92px !important;
  height: 19px !important;
  padding: 0 7px !important;
  background: color-mix(in srgb, var(--rbp-svc-color, #0f766e) 12%, #ffffff) !important;
  color: var(--rbp-svc-color, #0f766e) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-sidebar-svc-name {
  grid-area: name !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  text-shadow: none !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-select {
  grid-area: button !important;
  min-width: 76px !important;
  max-width: 112px !important;
  height: 35px !important;
  padding: 0 12px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.18) !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-check {
  top: 5px !important;
  left: 6px !important;
  background: var(--rbp-svc-color, #0f766e) !important;
  z-index: 4 !important;
}
.rbp-booking-wrap .rbp-sidebar-svc-bar,
.rbp-booking-wrap .rbp-sidebar-svc-price,
.rbp-booking-wrap .rbp-sidebar-svc-desc,
.rbp-booking-wrap .rbp-sidebar-svc-meta,
.rbp-booking-wrap .rbp-sidebar-svc-meta-row,
.rbp-booking-wrap .rbp-sidebar-svc-meta-plain {
  display: none !important;
}
@media (max-width: 1080px) {
  .rbp-booking-wrap .rbp-sidebar-svc-card { grid-template-columns: 60px minmax(0,1fr) !important; padding-right: 10px !important; column-gap: 10px !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-avatar { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; max-width: 56px !important; max-height: 56px !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-badge { max-width: 72px !important; font-size: 9.5px !important; padding: 0 6px !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-select { min-width: 66px !important; max-width: 94px !important; padding: 0 10px !important; font-size: 13px !important; }
}
@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-sidebar-services { padding: 4px 6px 10px !important; margin: -4px -6px 0 !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-card { min-height: 76px !important; grid-template-columns: 56px minmax(0,1fr) !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-avatar { width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important; max-width: 54px !important; max-height: 54px !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-badges { display: none !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-body { grid-template-areas: "name button" !important; grid-template-rows: auto !important; }
  .rbp-booking-wrap .rbp-sidebar-svc-select { height: 33px !important; min-width: 66px !important; max-width: 88px !important; }
}
/* v6.7.9: CSS-only duplicate guard where :has() is available. JS still backs up old browsers/cache order. */
@media (min-width: 769px) {
  .rbp-booking-wrap:has(.rbp-booking-sidebar .rbp-sidebar-svc-card) .rbp-booking-inner .rbp-svc-grid-mobile-only,
  .rbp-booking-wrap:has(.rbp-booking-sidebar .rbp-sidebar-svc-card) .rbp-booking-inner .rbp-svc-picker-mobile-only {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ============================================================
   v6.7.10 — Final responsive pill/sidebar polish + large-group UX
   ------------------------------------------------------------
   - Soft rounded title/content capsule instead of a hard white slab.
   - Badges shrink/wrap safely in narrow sidebars; title stays readable.
   - Selected state uses a single service-color halo + elevated shadow.
   - Large group builder gets a bulk-card visual instead of 50 guest cards.
   ============================================================ */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill,
.rbp-booking-wrap .rbp-sidebar-services {
  overflow: visible !important;
}

/* Public pill card: stable avatar + elegant rounded information capsule. */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 78px !important;
  max-height: none !important;
  padding: 8px 12px 8px 8px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  border: 1.5px solid color-mix(in srgb, var(--rbp-svc-color, #0f6b7a) 22%, rgba(15,23,42,.10)) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rbp-svc-color, #0f6b7a) 10%, rgba(255,255,255,.98)), rgba(255,255,255,.94)) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.10) !important;
  color: #0f172a !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:focus-visible {
  border-color: var(--rbp-svc-color, #0f6b7a) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.14) !important;
  transform: translateY(-1px) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  border-color: var(--rbp-svc-color, #22c55e) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.95),
    0 0 0 5px color-mix(in srgb, var(--rbp-svc-color, #22c55e) 22%, transparent),
    0 18px 44px rgba(15,23,42,.16) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  grid-column: 1 !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid #fff !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.20), 0 0 0 1px color-mix(in srgb, var(--rbp-svc-color, #0f6b7a) 70%, transparent) !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "badges cta" "title cta" !important;
  align-items: center !important;
  gap: 4px 10px !important;
  min-width: 0 !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.52)) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76) !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges {
  grid-area: badges !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-height: 42px !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badge {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 86px !important;
  height: 19px !important;
  padding: 0 6px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--rbp-svc-color, #0f6b7a) 10%, #ffffff) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  grid-area: title !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0f172a !important;
  font-size: clamp(13px, 1.25vw, 15px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  grid-area: cta !important;
  align-self: center !important;
  justify-self: end !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn {
  min-width: 72px !important;
  max-width: 108px !important;
  height: 34px !important;
  padding: 0 12px !important;
}

/* Split sidebar: no square white slab. Use a rounded glass capsule that adapts
   on dark sidebar rails and keeps Fixed/60min visible instead of clipped. */
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
  min-height: 82px !important;
  max-height: none !important;
  padding: 8px 12px 8px 8px !important;
  border-radius: 999px !important;
  overflow: visible !important;
  color: #fff !important;
  border: 1.5px solid color-mix(in srgb, var(--rbp-svc-color, #14b8a6) 38%, rgba(255,255,255,.16)) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
  box-shadow: 0 14px 34px rgba(2,6,23,.16) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:hover,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:focus-visible {
  border-color: var(--rbp-svc-color, #14b8a6) !important;
  box-shadow: 0 18px 44px rgba(2,6,23,.22) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card.rbp-sidebar-selected,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card[data-selected="1"] {
  border-color: var(--rbp-svc-color, #22c55e) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.90),
    0 0 0 5px color-mix(in srgb, var(--rbp-svc-color, #22c55e) 24%, transparent),
    0 18px 44px rgba(2,6,23,.24) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 22px rgba(2,6,23,.28), 0 0 0 1px var(--rbp-svc-color, rgba(255,255,255,.18)) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-body {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  grid-template-areas: "badges button" "name button" !important;
  align-items: center !important;
  gap: 4px 8px !important;
  min-width: 0 !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20) !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badges {
  grid-area: badges !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-height: 40px !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badge {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 74px !important;
  height: 18px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--rbp-svc-color, #0f766e) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-booking-sidebar .rbp-sidebar-svc-name {
  grid-area: name !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: none !important;
  font-size: clamp(12.5px, 1.15vw, 14.5px) !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-select {
  grid-area: button !important;
  min-width: 70px !important;
  max-width: 96px !important;
  height: 34px !important;
  padding: 0 10px !important;
}
.rbp-booking-wrap .rbp-gfb-card.is-bulk-group {
  border-color: rgba(14,165,233,.36) !important;
  background: linear-gradient(135deg, rgba(240,249,255,.98), rgba(255,255,255,.98)) !important;
}

@media (max-width: 1180px) {
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card {
    grid-template-columns: 56px minmax(0,1fr) !important;
    column-gap: 9px !important;
    padding-right: 9px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-avatar {
    width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-body {
    padding: 6px 8px !important;
    gap: 3px 6px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badge {
    max-width: 58px !important;
    font-size: 8.5px !important;
    padding: 0 5px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-select {
    min-width: 64px !important;
    max-width: 84px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 640px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    min-height: 72px !important;
    padding: 7px 9px 7px 7px !important;
    gap: 9px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-avatar {
    width: 54px !important; height: 54px !important; min-width: 54px !important; min-height: 54px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-body {
    grid-template-areas: "title cta" !important;
    grid-template-rows: auto !important;
    padding: 6px 8px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badges {
    display: none !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-name {
    grid-area: title !important;
    font-size: 13px !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-select {
    grid-area: cta !important;
  }
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-select {
    min-width: 62px !important;
    max-width: 82px !important;
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   v6.7.13 — Mobile selected-services cart + clean pill/sidebar UX
   ------------------------------------------------------------
   - Fix mobile one-brand shortcode where .rbp-ms-cart was forced into a
     horizontal flex row and its children collapsed into vertical text.
   - Remove visual noise from service cards: text-only badges, compact rows,
     circular avatars, single service-color border and clean selected shadow.
   ============================================================ */
.rbp-booking-wrap,
.rbp-booking-wrap * {
  writing-mode: horizontal-tb;
}
.rbp-booking-wrap .rbp-ms-cart,
.rbp-booking-wrap .rbp-ms-cart.rbp-svc-picker-mobile-only {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-ms-cart[style*="display: none"] {
  display: none !important;
}
.rbp-booking-wrap .rbp-ms-cart-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 10px !important;
  min-width: 0 !important;
  white-space: normal !important;
}
.rbp-booking-wrap .rbp-ms-cart-head strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rbp-booking-wrap .rbp-ms-cart-head span {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
.rbp-booking-wrap .rbp-ms-cart-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
}
.rbp-booking-wrap .rbp-ms-cart-list li {
  display: grid !important;
  grid-template-columns: 26px auto minmax(0, 1fr) auto 30px !important;
  grid-template-areas:
    "seq guest name dur remove"
    "seq assign assign assign remove" !important;
  align-items: center !important;
  gap: 7px 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
}
.rbp-booking-wrap .rbp-ms-seq { grid-area: seq !important; }
.rbp-booking-wrap .rbp-ms-guest-badge { grid-area: guest !important; white-space: nowrap !important; }
.rbp-booking-wrap .rbp-ms-name {
  grid-area: name !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.rbp-booking-wrap .rbp-ms-dur { grid-area: dur !important; white-space: nowrap !important; }
.rbp-booking-wrap .rbp-ms-guest-wrap {
  grid-area: assign !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.rbp-booking-wrap .rbp-ms-line-remove { grid-area: remove !important; justify-self: end !important; }
.rbp-booking-wrap .rbp-ms-note,
.rbp-booking-wrap .rbp-ms-duration-pills {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 520px) {
  .rbp-booking-wrap .rbp-ms-cart,
  .rbp-booking-wrap .rbp-ms-cart.rbp-svc-picker-mobile-only {
    padding: 12px !important;
    border-radius: 16px !important;
  }
  .rbp-booking-wrap .rbp-ms-cart-list li {
    grid-template-columns: 24px minmax(0,1fr) auto 30px !important;
    grid-template-areas:
      "seq name dur remove"
      "guest guest guest guest"
      "assign assign assign assign" !important;
    align-items: center !important;
  }
  .rbp-booking-wrap .rbp-ms-guest-badge {
    justify-self: start !important;
  }
  .rbp-booking-wrap .rbp-ms-guest-wrap {
    width: 100% !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  .rbp-booking-wrap .rbp-ms-guest-wrap select.rbp-ms-guest-select {
    width: auto !important;
    min-width: 124px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 380px) {
  .rbp-booking-wrap .rbp-ms-cart-list li {
    grid-template-columns: 24px minmax(0,1fr) 30px !important;
    grid-template-areas:
      "seq name remove"
      "guest guest guest"
      "dur dur dur"
      "assign assign assign" !important;
  }
  .rbp-booking-wrap .rbp-ms-dur { justify-self: start !important; }
}

/* Text-only service badges; hide decorative icons even if old HTML remains cached. */
.rbp-booking-wrap .rbp-svc-badge,
.rbp-booking-wrap .rbp-sidebar-svc-badge {
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* Final sidebar service picker polish. */
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-services {
  overflow: visible !important;
  padding: 4px 8px 12px !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card {
  grid-template-columns: 58px minmax(0,1fr) !important;
  gap: 10px !important;
  min-height: 76px !important;
  padding: 8px 10px 8px 8px !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--rbp-svc-color, #0f6b7a) 42%, rgba(255,255,255,.24)) !important;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--rbp-svc-color, #0f6b7a) 18%, transparent), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
  box-shadow: 0 14px 30px rgba(2,6,23,.16) !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:hover,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:focus-visible {
  transform: translateY(-1px) !important;
  border-color: var(--rbp-svc-color, #0f6b7a) !important;
  box-shadow: 0 18px 42px rgba(2,6,23,.22) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card.rbp-sidebar-selected,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card[data-selected="1"] {
  border-color: var(--rbp-svc-color, #22c55e) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.86),
    0 0 0 5px color-mix(in srgb, var(--rbp-svc-color, #22c55e) 22%, transparent),
    0 20px 44px rgba(2,6,23,.24) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-avatar,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-img {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-img--fallback {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--rbp-svc-color, #0f6b7a), color-mix(in srgb, var(--rbp-svc-color, #0f6b7a) 70%, #111827)) !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "badges button" "name button" !important;
  gap: 4px 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badges {
  grid-area: badges !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badge {
  flex: 0 1 auto !important;
  max-width: 74px !important;
  height: 18px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  line-height: 18px !important;
  font-weight: 900 !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--rbp-svc-color, #0f6b7a) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-booking-sidebar .rbp-sidebar-svc-name {
  grid-area: name !important;
  color: #ffffff !important;
  font-size: clamp(13px, 1.25vw, 15px) !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-select {
  grid-area: button !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: 76px !important;
  max-width: 104px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
@media (max-width: 1120px) {
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card {
    grid-template-columns: 54px minmax(0,1fr) !important;
    gap: 9px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-avatar,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-img {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badge {
    max-width: 62px !important;
    padding: 0 6px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-select {
    min-width: 68px !important;
    max-width: 88px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
  }
}
@media (max-width: 680px) {
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badges {
    display: none !important;
  }
}
.rbp-booking-wrap .rbp-ms-cart[style*="display:none"] { display: none !important; }

/* ============================================================
   v6.7.14 — Mobile one-brand selected-services + sidebar hover guard
   ------------------------------------------------------------
   Global UX direction: compact cart lines, no vertical text collapse, no
   sticky hover slabs on touch devices, one elegant glass pill surface.
   ============================================================ */
.rbp-booking-wrap .rbp-ms-cart,
.rbp-booking-wrap .rbp-ms-cart.rbp-svc-picker-mobile-only {
  container-type: inline-size;
  display: block !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  overflow: visible !important;
}
.rbp-booking-wrap .rbp-ms-cart,
.rbp-booking-wrap .rbp-ms-cart *,
.rbp-booking-wrap .rbp-sidebar-selection,
.rbp-booking-wrap .rbp-sidebar-selection * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
}
.rbp-booking-wrap .rbp-ms-cart-list li {
  min-inline-size: 0 !important;
  overflow: hidden !important;
}
.rbp-booking-wrap .rbp-ms-name,
.rbp-booking-wrap .rbp-side-sel-name {
  min-inline-size: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
@container (max-width: 430px) {
  .rbp-booking-wrap .rbp-ms-cart-list li {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      "name remove"
      "guest dur"
      "assign assign" !important;
    gap: 6px 8px !important;
    padding: 11px 12px !important;
  }
  .rbp-booking-wrap .rbp-ms-seq { display: none !important; }
  .rbp-booking-wrap .rbp-ms-guest-badge { grid-area: guest !important; justify-self: start !important; }
  .rbp-booking-wrap .rbp-ms-name { grid-area: name !important; font-size: 14px !important; line-height: 1.25 !important; }
  .rbp-booking-wrap .rbp-ms-dur { grid-area: dur !important; justify-self: end !important; }
  .rbp-booking-wrap .rbp-ms-line-remove { grid-area: remove !important; justify-self: end !important; }
  .rbp-booking-wrap .rbp-ms-guest-wrap {
    grid-area: assign !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    white-space: normal !important;
  }
  .rbp-booking-wrap .rbp-ms-guest-wrap select.rbp-ms-guest-select {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
@media (max-width: 520px) {
  .rbp-booking-wrap .rbp-ms-cart-list li {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      "name remove"
      "guest dur"
      "assign assign" !important;
  }
  .rbp-booking-wrap .rbp-ms-seq { display: none !important; }
}

/* Sidebar and pill service cards: remove old hover white slabs permanently. */
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card,
.rbp-booking-wrap .rbp-sidebar-svc-card {
  overflow: visible !important;
  isolation: isolate !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-body,
.rbp-booking-wrap .rbp-sidebar-svc-body,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:hover .rbp-sidebar-svc-body,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:focus-visible .rbp-sidebar-svc-body,
.rbp-booking-wrap .rbp-sidebar-svc-card:hover .rbp-sidebar-svc-body,
.rbp-booking-wrap .rbp-sidebar-svc-card:focus-visible .rbp-sidebar-svc-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-name,
.rbp-booking-wrap.rbp-lux .rbp-booking-sidebar .rbp-sidebar-svc-name,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:hover .rbp-sidebar-svc-name,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:focus-visible .rbp-sidebar-svc-name {
  color: #ffffff !important;
  background: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
  opacity: 1 !important;
}
.rbp-booking-wrap:not(.rbp-lux) .rbp-booking-inner .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name,
.rbp-booking-wrap:not(.rbp-lux) .rbp-booking-inner .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover .rbp-svc-name {
  color: #0f172a !important;
  text-shadow: none !important;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover .rbp-svc-body,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:focus-visible .rbp-svc-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badge,
.rbp-booking-wrap .rbp-sidebar-svc-badge,
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badge {
  max-inline-size: 82px !important;
  min-inline-size: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-avatar,
.rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-img,
.rbp-booking-wrap .rbp-sidebar-svc-avatar,
.rbp-booking-wrap .rbp-sidebar-svc-img {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}
@media (hover: none), (pointer: coarse) {
  .rbp-booking-wrap .rbp-sidebar-svc-card:hover,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:hover,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover {
    transform: none !important;
  }
  .rbp-booking-wrap .rbp-sidebar-svc-card:hover .rbp-sidebar-svc-body,
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card:hover .rbp-sidebar-svc-body,
  .rbp-booking-wrap .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover .rbp-svc-body {
    background: transparent !important;
    color: inherit !important;
  }
}
@media (max-width: 420px) {
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-card,
  .rbp-booking-wrap .rbp-sidebar-svc-card {
    grid-template-columns: 52px minmax(0,1fr) !important;
    min-height: 68px !important;
    padding: 7px 8px 7px 7px !important;
    gap: 8px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-avatar,
  .rbp-booking-wrap .rbp-sidebar-svc-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-body,
  .rbp-booking-wrap .rbp-sidebar-svc-body {
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas: "name button" !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-badges,
  .rbp-booking-wrap .rbp-sidebar-svc-badges { display: none !important; }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-name,
  .rbp-booking-wrap .rbp-sidebar-svc-name { font-size: 12.5px !important; }
  .rbp-booking-wrap .rbp-booking-sidebar .rbp-sidebar-svc-select,
  .rbp-booking-wrap .rbp-sidebar-svc-select { min-width: 60px !important; max-width: 78px !important; }
}