/* ============================================================================
   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; }
.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.5.0 — (#1) Rate-adjusted package prices · (#2) unmistakable service
   selected state. This file loads LAST (after public.css, ux-modes and
   rbp-luxury.css) so these rules win against every skin's !important border
   overrides by source order + matching specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── #1: package price — OTA pattern ── */
.rbp-booking-wrap .rbp-pkg-price-new {
  font-weight: 800;
}
.rbp-booking-wrap .rbp-pkg-price-deal { color: #1e7d46; }
.rbp-booking-wrap .rbp-pkg-price-old {
  margin-left: 7px;
  font-size: .82em;
  font-weight: 500;
  color: #98989d;
  text-decoration: line-through;
}
.rbp-booking-wrap .rbp-pkg-rate-chip {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: 2px;
  background: #fdeed3;
  color: #9c6410;
  font-variant-numeric: tabular-nums;
}
.rbp-booking-wrap .rbp-pkg-rate-chip-neutral { background: #e7eaf0; color: #3c4858; }

/* ── #2: selected service — works on EVERY skin/style ──
   1) Card ring: outline doesn't fight the luxury skin's
      `border:1px solid var(--lux-rule) !important` because outline is a
      different property — no !important war, always visible, and it isn't
      clipped by the card's own overflow:hidden.
   2) Button state: JS swaps the label to "✓ Selected"; these rules give the
      swapped button a filled state so the change reads instantly on light,
      parchment and dark themes alike.                                       */
.rbp-booking-wrap .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-card[data-selected="1"],
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-card[data-selected="1"] {
  outline: 2px solid var(--rbp-primary, #c0392b);
  outline-offset: 2px;
}
.rbp-booking-wrap .rbp-svc-select-btn.rbp-svc-btn-is-selected,
.rbp-booking-wrap.rbp-lux .rbp-svc-select-btn.rbp-svc-btn-is-selected {
  background: var(--rbp-primary, #c0392b) !important;
  border-color: var(--rbp-primary, #c0392b) !important;
  color: #fff !important;
}
.rbp-booking-wrap .rbp-svc-selected-check { font-weight: 900; }
/* Tick badge: force visible above any skin override when selected */
.rbp-booking-wrap .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-selected-tick,
.rbp-booking-wrap .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-selected-tick,
.rbp-booking-wrap.rbp-lux .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-selected-tick {
  opacity: 1 !important;
  transform: scale(1) !important;
  z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §v6.5.1 — (Bug 1) spotlight the chosen service: dim unselected siblings
   (JS-driven container class — no :has(), works on every browser/skin) and
   give the sidebar "Select →" pill a filled ✓ Selected state.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dim NOT-chosen cards once a selection exists (Trip.com fare-pick pattern).
   Hover briefly restores full opacity so switching still feels inviting.   */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-has-selection .rbp-svc-card:not(.rbp-svc-selected):not([data-selected="1"]),
.rbp-booking-wrap .rbp-sidebar-services.rbp-has-selection .rbp-sidebar-svc-card:not(.rbp-sidebar-selected) {
  opacity: .55;
  filter: saturate(.75);
  transition: opacity .18s ease-out, filter .18s ease-out;
}
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-has-selection .rbp-svc-card:not(.rbp-svc-selected):hover,
.rbp-booking-wrap .rbp-sidebar-services.rbp-has-selection .rbp-sidebar-svc-card:not(.rbp-sidebar-selected):hover {
  opacity: 1;
  filter: none;
}
/* Staff-locked cards stay at their stronger lock dimming (.38 from §v6.4.1) */
.rbp-booking-wrap .rbp-svc-luxury-grid.rbp-has-selection .rbp-svc-card.rbp-svc-staff-locked { opacity: .38; }

/* Sidebar chosen card: ring + filled label pill (the JS swaps its text to
   "✓ Selected"; .rbp-svc-btn-is-selected rules from §v6.5.0 already fill it —
   extend them to the sidebar span variant, which is not a <button>).        */
.rbp-booking-wrap .rbp-sidebar-svc-card.rbp-sidebar-selected {
  outline: 2px solid var(--rbp-primary, #c0392b);
  outline-offset: 2px;
}
.rbp-booking-wrap .rbp-sidebar-svc-select.rbp-svc-btn-is-selected {
  background: var(--rbp-primary, #c0392b) !important;
  border-color: var(--rbp-primary, #c0392b) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §v6.5.2 — Staff picker cards (authoritative layer).
   Moved here from ux-modes so the admin-set form text colour
   (`.rbp-booking-form{color:$text}`, injected by the dynamic design CSS that
   loads AFTER ux-modes) can no longer bleed onto staff names — the reported
   "white name on white card" bug on dark/inverted themes. Cards are an
   intentionally neutral white surface (Booking.com / Trip.com specialist
   picker), so text colours are locked to dark ink regardless of theme.
   All rules scoped under .rbp-booking-wrap + matching/higher specificity so
   they win by source order without an !important arms race.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Responsive grid: auto-fill keeps 4 or 40 staff tidy — ~5–6 cols desktop,
   3–4 tablet, 2 mobile. No fixed column count to break at odd roster sizes. */
.rbp-booking-wrap .rbp-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

/* Long rosters (>12): cap height + scroll so the date/time fields stay in
   view instead of being pushed far down the page. ~3 rows visible, rest
   scrolls; a subtle inset shadow hints there's more below.                  */
.rbp-booking-wrap .rbp-staff-grid-scroll {
  max-height: 318px;
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
  scrollbar-width: thin;
}
.rbp-booking-wrap .rbp-staff-grid-scroll::-webkit-scrollbar { width: 8px; }
.rbp-booking-wrap .rbp-staff-grid-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.18); border-radius: 8px;
}

/* Search box (shown only when >12 staff) */
.rbp-booking-wrap .rbp-staff-search-wrap { position: relative; margin: 0 0 10px; }
.rbp-booking-wrap .rbp-staff-search {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px 9px 34px;
  border: 1.5px solid #d9d9de; border-radius: 9px;
  font-size: 13.5px; color: #1f2937; background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E")
    no-repeat 11px center;
}
.rbp-booking-wrap .rbp-staff-search:focus {
  outline: none; border-color: var(--rbp-primary, #c0392b);
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.rbp-booking-wrap .rbp-staff-search-none {
  display: block; margin-top: 8px; font-size: 12.5px; color: #9a6a00;
}

/* Card surface — neutral white, dark ink locked (theme-proof) */
.rbp-booking-wrap .rbp-staff-card {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; cursor: pointer;
  background: #fff; border: 2px solid #e6e6e6; border-radius: 12px;
  transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
  font: inherit;
}
.rbp-booking-wrap .rbp-staff-card:hover { border-color: #cfcfcf; transform: translateY(-1px); }
.rbp-booking-wrap .rbp-staff-card:focus-visible {
  outline: 2px solid var(--rbp-primary, #c0392b); outline-offset: 2px;
}
.rbp-booking-wrap .rbp-staff-card.rbp-staff-selected {
  border-color: var(--rbp-primary, #c0392b);
  background: var(--rbp-tint-08, #fef5f4);
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.rbp-booking-wrap .rbp-staff-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.rbp-booking-wrap .rbp-staff-avatar-fallback,
.rbp-booking-wrap .rbp-staff-avatar-any { color: #fff; font-weight: 800; font-size: 17px; }
.rbp-booking-wrap .rbp-staff-avatar-any { background: linear-gradient(135deg,#8e9eab,#5d6d7e); font-size: 19px; }
.rbp-booking-wrap .rbp-staff-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* THE FIX: names/roles use locked ink, immune to inherited form text colour */
.rbp-booking-wrap .rbp-staff-name {
  font-size: 13.5px; font-weight: 700; color: #1f2937 !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rbp-booking-wrap .rbp-staff-role {
  font-size: 11px; color: #6b7280 !important;
  text-transform: uppercase; letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rbp-booking-wrap .rbp-staff-rating { font-size: 12px; font-weight: 700; color: #b8860b !important; }
.rbp-booking-wrap .rbp-staff-rating small { font-weight: 500; color: #999 !important; }

@media (max-width: 480px) {
  .rbp-booking-wrap .rbp-staff-grid { grid-template-columns: 1fr 1fr; }
  .rbp-booking-wrap .rbp-staff-grid-scroll { max-height: 60vh; }
}