/* ============================================================================
   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.2 patch (Bug 3) — "Most popular" indicator for the PILL package style.
   The full ribbon text is hidden in pill mode (too long for the compact pill),
   leaving 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.
   Grid/list styles unchanged.
   ════════════════════════════════════════════════════════════════ */
.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;
}