/* ============================================
   Restaurant Booking Pro - Public Styles v5.5.2
   ============================================ */
.rbp-booking-wrap {
  width: 880px;          /* explicit width — overridden by design CSS when customized */
  max-width: 880px;      /* BUG FIX v3.14.0: was 100%, capped by theme container  */
  box-sizing: border-box;
  margin: 0 auto;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  /* BUG-2 FIX v5.4.12: Prevent iOS Safari from auto-inflating text sizes inside the
     booking form. Without this, small text (badges, labels) gets enlarged on mobile
     because iOS tries to "help" readability in narrow-width contexts. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Responsive: shrink to viewport on screens narrower than 880px */
@media (max-width: 880px) {
  .rbp-booking-wrap { width: 100% !important; max-width: 100% !important; }
}
.rbp-booking-header {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff;
  padding: 20px 28px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 0;
}
.rbp-booking-header h3 { margin: 0; font-size: 20px; font-weight: 700; }

.rbp-booking-form {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.rbp-field {
  margin-bottom: 18px;
}
.rbp-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
}
.rbp-req { color: #c0392b; }

.rbp-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d0d0d0;
  border-radius: 7px;
  font-size: 14px;
  color: #333;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  appearance: none;
}
.rbp-input:focus {
  outline: none;
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.rbp-input::placeholder { color: #aaa; }
.rbp-textarea { resize: vertical; min-height: 80px; }

.rbp-input-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.rbp-input-icon > span:first-child {
  position: absolute;
  left: 12px;
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
}
.rbp-input-icon .rbp-input { padding-left: 38px; }
.rbp-input-icon.rbp-icon-top { align-items: flex-start; }
.rbp-input-icon.rbp-icon-top > span:first-child { top: 10px; }

/* Phone */
.rbp-phone-group { display: flex; gap: 8px; }
.rbp-phone-code  { width: 130px; flex-shrink: 0; padding: 10px 10px; border: 1.5px solid #d0d0d0; border-radius: 7px; font-size: 13px; background: #fff; }
.rbp-phone-num   { flex: 1; }

/* Select */
.rbp-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.rbp-select.rbp-input-icon .rbp-select { padding-left: 38px; }

/* Country dropdown */
.rbp-country-wrap { position: relative; width: 100%; }
.rbp-country-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
  background: #fff; border: 1.5px solid #d0d0d0; border-top: none;
  border-radius: 0 0 8px 8px; max-height: 220px; overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.rbp-country-item { padding: 9px 14px; cursor: pointer; font-size: 13px; }
.rbp-country-item:hover { background: #fef0ee; color: #c0392b; }

/* Two col */
.rbp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .rbp-two-col { grid-template-columns: 1fr; } .rbp-booking-wrap { max-width: 100%; } }
/* ── Desktop form scale +20% (v3.3.6) ─────────────────────────────── */
@media (min-width: 481px) {
  .rbp-booking-header        { padding: 24px 34px; }
  .rbp-booking-header h3     { font-size: 22px; }
  .rbp-booking-form          { padding: 28px 34px; }
  .rbp-slot-grid             { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 12px; }
  .rbp-slot-btn              { padding: 14px 12px; font-size: 14px; }
  .rbp-input, .rbp-select    { font-size: 15px; padding: 10px 14px; }
  .rbp-label                 { font-size: 14px; }
  .rbp-pay-option            { padding: 14px 18px; font-size: 14px; }
  .rbp-btn-primary           { font-size: 16px; padding: 14px 28px; max-width: 340px; }
  .rbp-step-num              { width: 34px; height: 34px; font-size: 15px; line-height: 34px; }
  .rbp-step-label            { font-size: 12px; }
  .rbp-review-table td       { font-size: 14px; padding: 9px 12px; }
  .rbp-summary-box           { padding: 20px 24px; }
  .rbp-success-icon          { font-size: 56px; }
  .rbp-alert                 { font-size: 14px; padding: 14px 18px; }
}


/* Slot full message */
.rbp-slot-full-msg {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 10px 14px; margin-top: 8px; font-size: 13px; color: #856404;
}
.rbp-slot-status-wrap { margin-top: 4px; }

/* Alerts */
.rbp-alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }
.rbp-alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.rbp-alert-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* Submit button */
.rbp-form-footer { margin-top: 24px; text-align: center; }
.rbp-btn-book {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff; border: none; border-radius: 8px;
  padding: 14px 40px; font-size: 16px; font-weight: 700;
  cursor: pointer; width: 100%; max-width: 300px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 12px rgba(192,57,43,.35);
}
.rbp-btn-book:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(192,57,43,.45); }
.rbp-btn-book:disabled { opacity: .7; transform: none; }

/* Availability calendar */
.rbp-cal-wrap { font-family: 'Segoe UI', Arial, sans-serif; }
.rbp-cal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.rbp-slot-card {
  border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 14px;
  text-align: center; cursor: pointer; transition: all .2s;
}
.rbp-slot-card:hover { border-color: #c0392b; }
.rbp-slot-card.full  { border-color: #e74c3c; background: #fff5f5; cursor: default; }
.rbp-slot-name  { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.rbp-slot-time  { font-size: 22px; font-weight: 800; color: #c0392b; }
.rbp-slot-type  { font-size: 11px; color: #888; text-transform: uppercase; margin-top: 2px; }
.rbp-slot-avail { margin-top: 8px; font-size: 12px; }
.rbp-slot-avail.full { color: #e74c3c; font-weight: 700; }
.rbp-slot-avail.ok   { color: #27ae60; }

/* Table layout public */
.rbp-table-layout { font-family: 'Segoe UI', Arial, sans-serif; }
.rbp-tl-floor { margin-bottom: 28px; }
.rbp-tl-floor-name { font-size: 16px; font-weight: 700; margin-bottom: 12px; color: #333; }
.rbp-tl-room  { margin-bottom: 20px; }
.rbp-tl-room-name { font-size: 13px; color: #888; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.rbp-tl-grid  { display: flex; flex-wrap: wrap; gap: 10px; }
.rbp-tl-table {
  border: 2px solid #e0e0e0; border-radius: 8px; padding: 12px 18px;
  text-align: center; min-width: 90px; font-size: 13px;
  transition: all .2s;
}
.rbp-tl-table.available { border-color: #27ae60; background: #f0fff4; }
.rbp-tl-table.occupied  { border-color: #e74c3c; background: #fff5f5; cursor: not-allowed; }
.rbp-tl-table.locked    { border-color: #e67e22; background: #fff9f0; cursor: not-allowed; }
.rbp-tl-table .tbl-num  { font-weight: 700; font-size: 16px; }
.rbp-tl-table .tbl-cap  { font-size: 11px; color: #888; }
.rbp-tl-table .tbl-lbl  { font-size: 10px; margin-top: 4px; font-weight: 600; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.available .tbl-lbl { background: #d4edda; color: #155724; }
.occupied  .tbl-lbl { background: #f8d7da; color: #721c24; }
.locked    .tbl-lbl { background: #ffe5cc; color: #c0392b; }

/* ── Step wizard ── */
.rbp-steps {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 28px 0; background: linear-gradient(135deg,#c0392b,#e74c3c);
  border-radius: 10px 10px 0 0;
}
.rbp-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 90px;
}
.rbp-step-num {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.3);
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.5); transition: all .3s;
}
.rbp-step.active .rbp-step-num,
.rbp-step.done   .rbp-step-num { background: #fff; color: #c0392b; border-color: #fff; }
/* v5.11.8 UX FIX — inactive label baseline bumped .7 → .92 for readability
   on saturated dark gradients (navy/red/wine). Active/done remain solid white. */
.rbp-step-label { font-size: 11px; color: rgba(255,255,255,.92); white-space: nowrap; }
.rbp-step.active .rbp-step-label,
.rbp-step.done   .rbp-step-label { color: #fff; font-weight: 600; }
.rbp-step-line { flex: 1; height: 2px; background: rgba(255,255,255,.45); max-width: 60px; }

/* v5.11.6 — Completed-step checkmark.
   Replaces the digit "1/2/3" inside a `.rbp-step.done` circle with a ✓ glyph.
   The digit is hidden by zeroing the parent's font-size; the ::before pseudo-
   element renders the ✓ at its own font-size so it survives unchanged.
   Color is INHERITED from the parent .rbp-step-num color, so this rule plays
   nicely with every layout variant (default, wizard, luxury) and with the
   v5.11.6 auto-contrast palette emitted from class-rbp-design.php — whatever
   color the digit WOULD have shown, the ✓ shows in.
   ::before is preferred over ::after so the glyph sits inside the natural
   text-flow position of the parent (which is a flex item: center / center). */
.rbp-step-num { position: relative; }
.rbp-step.done .rbp-step-num { font-size: 0 !important; }
.rbp-step.done .rbp-step-num::before {
  content: '✓';
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

/* ── Slot grid ── */
.rbp-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
/* button mode: apply CSS variable sizing */
.rbp-slot-mode-button .rbp-slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.rbp-slot-btn {
  border: 2px solid #e0e0e0;
  border-radius: var(--rbp-slot-btn-radius, 8px);
  padding: var(--rbp-slot-btn-pad, 11px 16px);
  background: var(--rbp-slot-bg, #fff); /* v4.5.5: admin-configurable slot bg color */
  cursor: pointer;
  text-align: center;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  font-size: var(--rbp-slot-btn-fnt, 14px);
}
.rbp-slot-btn:hover:not(:disabled) {
  border-color: var(--rbp-slot-primary, #c0392b);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.rbp-slot-btn.selected {
  border-color: var(--rbp-slot-primary, #c0392b);
  background: rgba(192,57,43,.06);
  color: var(--rbp-slot-primary, #c0392b);
}
.rbp-slot-btn.rbp-slot-full { border-color: #e74c3c; background: #fff5f5; opacity: .7; cursor: not-allowed; }
/* v5.4.34: Button mode with thumbnail image (admin uploaded one) */
.rbp-slot-btn-img {
  padding-top: 0;
  overflow: hidden;
}
.rbp-slot-btn-img .sl-img {
  width: calc(100% + var(--rbp-slot-btn-pad-x, 32px));
  margin-left: calc(-1 * var(--rbp-slot-btn-pad-x, 16px));
  margin-right: calc(-1 * var(--rbp-slot-btn-pad-x, 16px));
  margin-top: -2px; /* sit flush with border */
  margin-bottom: 8px;
  height: 80px;
  object-fit: cover;
  display: block;
  border-radius: 6px 6px 0 0;
}
.sl-name  { font-weight: 700; font-size: 13px; color: #333; }
.sl-time  { font-size: 22px; font-weight: 800; color: #c0392b; line-height: 1; }
.sl-type  { font-size: 16px; }
.sl-desc  { font-size: 11px; color: #888; font-style: italic; white-space: normal; line-height: 1.4; }
.sl-avail { font-size: 11px; color: #27ae60; font-weight: 500; }
.sl-avail-low { color: #e67e22 !important; font-weight: 700 !important; animation: rbp-pulse .8s ease infinite alternate; }
@keyframes rbp-pulse { from { opacity:.7; } to { opacity:1; } }
.sl-full-lbl { font-size: 11px; color: #e74c3c; font-weight: 700; }

/* ── Step panels ── */
.rbp-panel { padding: 24px 28px; }
.rbp-step-title { margin: 0 0 18px; font-size: 16px; font-weight: 700; color: #333; }
.rbp-step-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #f0f0f0; }

/* v5.11.6 — Step-transition fade animation (scoped to 2-column layouts).
   Only the entering panel animates: when JS swaps panels by toggling
   display:'' / display:none, the new panel briefly starts with opacity 0 and
   transitions to opacity 1 over ~220ms. The leaving panel is hidden instantly
   (display:none) — animating it would create a layout/scroll glitch because
   both panels would briefly occupy the same vertical space. "Fade only" was
   chosen (over slide) precisely because it never shifts layout — safest for
   long forms inside any host theme.

   Scope: the wrap carries data-rbp-layout="wizard|split_left|split_right"
   (set by booking-form.php from RBP_Design::get_layout_mode). single,
   elegant_center, and magazine_wide are intentionally excluded — they render
   the form in a single flow where the existing instant swap is preferable.

   The `.rbp-anim-fade-in` class is toggled by goStep() in booking-form.js. */
.rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-panel,
.rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-panel,
.rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-panel {
  transition: opacity .22s ease-out;
}
.rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-panel.rbp-anim-fade-in,
.rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-panel.rbp-anim-fade-in,
.rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-panel.rbp-anim-fade-in {
  opacity: 0;
}
/* Respect users with reduced-motion preference — skip animation entirely. */
@media (prefers-reduced-motion: reduce) {
  .rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-panel,
  .rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-panel,
  .rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-panel {
    transition: none;
  }
}

/* ── Summary box ── */
.rbp-summary-box { background: #f8f9fa; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.rbp-sum-table { width: 100%; border-collapse: collapse; }
.rbp-sum-table td { padding: 6px 8px; font-size: 13px; border-bottom: 1px solid #eee; }
.rbp-sum-table td:first-child { width: 24px; font-size: 16px; }
.rbp-sum-table td:nth-child(2) { width: 130px; }
.rbp-sum-table td:last-child { font-weight: 500; }

/* ── Guest warning ── */
.rbp-guest-warn { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 8px 12px; margin-top: 6px; font-size: 13px; color: #856404; }
.rbp-slot-full-msg { background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 10px 14px; margin-top: 8px; font-size: 13px; color: #856404; }

/* ── Booking form wrapper adjustments ── */
.rbp-booking-form { padding: 0 !important; }
.rbp-booking-header { display: none; }

/* ── Step nav buttons (v5.6.1) ── */
.rbp-btn-next {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .2s;
  box-shadow: 0 3px 10px rgba(192,57,43,.3);
}
.rbp-btn-next:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(192,57,43,.45);
}
.rbp-btn-next:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.rbp-btn-outline {
  background: #fff;
  color: #555;
  border: 1.5px solid #d0d0d0;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.rbp-btn-outline:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* ── Step indicator active/done states ── */
.rbp-step.active .rbp-step-num,
.rbp-step.done   .rbp-step-num  { background: #fff; color: #c0392b; border-color: #fff; }
.rbp-step.active .rbp-step-label,
.rbp-step.done   .rbp-step-label { color: #fff; font-weight: 600; }

/* ── Slot card selected ── */
.rbp-slot-btn.selected {
  border-color: #c0392b !important;
  background: #fef0ee !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.18);
}

/* ── v5.6.1 additions ── */
.rbp-loading-msg { color:#888; padding:10px 0; font-size:14px; }

/* ══════════════════════════════════════════
   v5.6.5 — Payment Step + 4-step indicator
   ══════════════════════════════════════════ */

/* 4-step indicator adjustments */
.rbp-steps { padding-bottom: 16px; }
.rbp-step   { min-width: 64px; }
.rbp-step-label { font-size: 10px; white-space: nowrap; text-align: center; }
@media (max-width: 520px) {
  .rbp-step-label { display: none; }
  .rbp-step       { min-width: 36px; }
}

/* Payment option cards */
.rbp-pay-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }

.rbp-pay-card {
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  display: block;
}
.rbp-pay-card:hover { border-color: #c0392b; box-shadow: 0 3px 10px rgba(192,57,43,.12); }
.rbp-pay-card.selected {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.15);
  background: #fff9f8;
}
.rbp-pay-card input[type=radio] { display: none; }

.rbp-pay-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
}
.rbp-pay-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.rbp-pay-info {
  flex: 1;
}
.rbp-pay-info strong { display: block; font-size: 14px; color: #222; margin-bottom: 4px; }
.rbp-pay-info small  { display: block; font-size: 12px; color: #777; line-height: 1.5; }
.rbp-pay-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #d0d0d0; display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 13px; flex-shrink: 0; transition: all .2s; margin-top: 2px;
}
.rbp-pay-card.selected .rbp-pay-check {
  background: #c0392b; border-color: #c0392b; color: #fff;
}

.rbp-pay-badge {
  background: #27ae60; color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: middle;
}

/* QR section */
.rbp-qr-section {
  border-top: 1px solid #f0e0de;
  background: #fffaf9;
  padding: 16px;
  animation: rbpFadeIn .25s ease;
}
.rbp-qr-info {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.rbp-qr-img-wrap {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rbp-qr-img      { width: 160px; height: 160px; object-fit: contain; }
.rbp-qr-loading  { color: #888; font-size: 13px; text-align: center; padding: 8px; }
.rbp-qr-details  { flex: 1; min-width: 160px; }
.rbp-qr-row      { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.rbp-qr-row span { color: #888; }
.rbp-qr-row strong { color: #222; text-align: right; }
.rbp-qr-amount   { color: #c0392b !important; font-size: 15px; }
.rbp-qr-note     { font-size: 12px; color: #856404; background: #fff3cd; border-radius: 5px; padding: 8px 10px; margin-top: 10px; }

/* Deposit banner */
.rbp-deposit-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.rbp-deposit-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.rbp-deposit-banner strong { display: block; color: #856404; margin-bottom: 4px; }
.rbp-deposit-banner p { margin: 0; font-size: 13px; color: #856404; }

/* Deposit hint (below guests field) */
.rbp-deposit-hint {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 8px 12px; margin-top: 8px; font-size: 13px; color: #856404;
}

/* Prepaid notice */
.rbp-prepaid-notice {
  background: #d4edda; border: 1px solid #c3e6cb; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; color: #155724;
}

/* Prepaid section */
.rbp-prepaid-section {
  border-top: 1px solid #f0f0f0;
  padding: 12px 16px;
  background: #f8fff8;
  font-size: 13px;
  color: #333;
  animation: rbpFadeIn .25s ease;
}

@keyframes rbpFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Summary box enhancement */
.rbp-sum-table td { vertical-align: top; }

/* Step nav full width on mobile */
@media (max-width: 480px) {
  .rbp-step-nav { flex-direction: column-reverse; }
  .rbp-step-nav button { width: 100%; }
  .rbp-qr-img-wrap { width: 130px; height: 130px; }
  .rbp-qr-img { width: 130px; height: 130px; }
}


/* ══════════════════════════════════════════
   v5.6.8 — Payment Step + Widget
   ══════════════════════════════════════════ */

/* 4-step indicator tweaks */
.rbp-steps { padding-bottom: 16px; gap: 0; }
.rbp-step  { min-width: 60px; }
.rbp-step-label { font-size: 10px; white-space: nowrap; text-align: center; }
@media (max-width: 520px) { .rbp-step-label { display: none; } .rbp-step { min-width: 32px; } }

/* Success */
.rbp-success-icon { font-size: 36px; display: block; margin-bottom: 6px; }
.rbp-status-ok   { color: #155724; font-weight: 700; }
.rbp-status-pend { color: #856404; font-weight: 700; }

/* ── STEP 3: Payment choice list ── */
.rbp-pay-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1.5px solid #e0e0e0; border-radius: 10px;
  overflow: hidden; margin-bottom: 4px;
}
.rbp-pay-row {
  display: block; cursor: pointer;
  border-bottom: 1.5px solid #e8e8e8;
  transition: background .15s; user-select: none;
}
.rbp-pay-row:last-child { border-bottom: none; }
.rbp-pay-row:hover      { background: #fafafa; }
.rbp-pay-row.selected   { background: #fff9f8; }
.rbp-pay-row input[type=radio] { display: none; }

.rbp-pay-row-inner {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
}
.rbp-pay-row-icon { font-size: 26px; flex-shrink: 0; }
.rbp-pay-row-text { flex: 1; }
.rbp-pay-row-text strong { display: block; font-size: 14px; color: #222; margin-bottom: 3px; }
.rbp-pay-row-text span   { font-size: 12px; color: #777; line-height: 1.5; }
.rbp-pay-radio-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc;
  flex-shrink: 0; transition: all .2s; position: relative;
}
.rbp-pay-row.selected .rbp-pay-radio-dot { border-color: #c0392b; background: #c0392b; }
.rbp-pay-row.selected .rbp-pay-radio-dot::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}

/* Badges */
.rbp-badge-auto { background: #27ae60; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.rbp-badge-deal { background: #e67e22; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }

/* Sub-payment area inside each payment row (Step 3 preview) */
.rbp-pay-sub {
  border-top: 1.5px solid #f0e8e8; background: #fff9f8;
  padding: 14px 16px; animation: rbpSlideDown .2s ease;
}
.rbp-sub-opt {
  background: #fff; border: 1.5px solid #eee;
  border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
}
.rbp-sub-opt:last-child { margin-bottom: 0; }
.rbp-sub-opt-head { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px; gap: 6px; }
.rbp-sub-opt-head strong { font-size: 13px; }

/* Deposit required banner */
.rbp-dep-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff3cd; border: 1.5px solid #ffc107; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 14px; font-size: 13px;
}
.rbp-dep-banner > span { font-size: 20px; flex-shrink: 0; }
.rbp-dep-banner strong { display: block; color: #856404; margin-bottom: 3px; }
.rbp-dep-banner p { margin: 0; color: #856404; }

/* Deposit hint below guests input */
.rbp-deposit-hint {
  background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px;
  padding: 8px 12px; margin-top: 8px; font-size: 13px; color: #856404;
}

/* Info notes in step 4 summary */
.rbp-info-note {
  border-radius: 7px; padding: 10px 14px; margin-top: 10px;
  font-size: 13px; line-height: 1.6;
}
.rbp-dep-note { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }
.rbp-pre-note { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }

/* ── POST-SUBMIT PAYMENT WIDGET ── */
.rbp-pay-widget-outer {
  margin-top: 16px;
}
.rbp-pay-widget {
  background: #fff;
  border: 2px solid #c0392b;
  border-radius: 12px;
  padding: 20px 20px 16px;
  box-shadow: 0 4px 20px rgba(192,57,43,.12);
}
.rbp-pay-widget-title {
  margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #c0392b;
}
.rbp-pay-widget-sub { margin: 0 0 14px; font-size: 13px; color: #666; }

/* Payment gateway tabs */
.rbp-pay-tabs {
  display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap;
}
.rbp-pay-tab {
  padding: 7px 16px; border: 1.5px solid #d0d0d0;
  border-radius: 20px; background: #fff; font-size: 13px;
  cursor: pointer; transition: all .15s;
}
.rbp-pay-tab.active  { background: #c0392b; color: #fff; border-color: #c0392b; font-weight: 700; }
.rbp-pay-tab:hover:not(.active) { border-color: #c0392b; color: #c0392b; }

/* VietQR */
.rbp-qr-wrap     { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.rbp-qr-left     { flex-shrink: 0; }
.rbp-qr-box {
  width: 160px; height: 160px; border: 1.5px solid #e0e0e0;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: #f8f8f8; overflow: hidden;
}
.rbp-qr-img  { width: 160px; height: 160px; object-fit: contain; display: block; }
.rbp-qr-right { flex: 1; min-width: 160px; }
.rbp-qr-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; font-size: 12px; }
.rbp-qr-row span  { color: #888; }
.rbp-qr-row b     { color: #222; text-align: right; word-break: break-all; }
.rbp-qr-amt       { color: #c0392b !important; font-size: 13px; }
.rbp-qr-tip       { font-size: 11px; color: #856404; background: #fff3cd; border-radius: 5px; padding: 6px 10px; margin: 6px 0 0; }
.rbp-pay-note     { font-size: 12px; color: #777; margin: 6px 0 0; }

/* OnePay button (large, in widget) */
.rbp-btn-onepay {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: #fff; border: none; border-radius: 8px;
  padding: 12px 24px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 10px rgba(192,57,43,.3);
  width: 100%; margin-top: 4px;
}
.rbp-btn-onepay:hover     { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(192,57,43,.4); }
.rbp-btn-onepay:disabled  { opacity: .6; cursor: wait; transform: none; }
.rbp-btn-onepay-lg        { font-size: 15px; padding: 14px 28px; }

/* Payment confirmed message */
.rbp-pay-confirmed {
  text-align: center; padding: 20px;
  background: #d4edda; border-radius: 8px; color: #155724;
}
.rbp-pay-confirmed strong { font-size: 16px; }
.rbp-pay-confirmed p      { margin: 6px 0 0; font-size: 13px; }

/* PayPal placeholder */
.rbp-paypal-placeholder { padding: 16px; text-align: center; }

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

/* Mobile */
@media (max-width: 480px) {
  .rbp-step-nav { flex-direction: column-reverse; }
  .rbp-step-nav button { width: 100%; }
  .rbp-qr-wrap  { flex-direction: column; }
  .rbp-qr-right { min-width: 0; width: 100%; }
  .rbp-pay-widget { padding: 16px 14px 12px; }
}

/* ════════════════════════════════════════════
   Payment Widget — post-submit (v5.6.8)
   Appears below success banner after booking
   ════════════════════════════════════════════ */

/* Outer container */
.rbp-pay-widget-outer {
  margin-top: 18px;
}

/* Widget card */
.rbp-pay-widget {
  background: #fff;
  border: 1.5px solid #d5e8d4;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 4px 16px rgba(39,174,96,.10);
}

.rbp-pw-title {
  margin: 0 0 6px;
  font-size: 16px;
  color: #155724;
  font-weight: 700;
}

.rbp-pw-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: #555;
}

/* Tab bar */
.rbp-pw-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 0;
}

.rbp-pw-tab {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #555;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.rbp-pw-tab:hover {
  background: #ebebeb;
  color: #222;
}
.rbp-pw-tab.active {
  background: #fff;
  color: #c0392b;
  border-color: #ddd;
  border-bottom-color: #fff;
  font-weight: 700;
}

/* Panels */
.rbp-pw-panel { animation: rbpFadeIn .2s ease; }

/* Post-pay confirmed state */
.rbp-pay-confirmed {
  background: #d4edda; border: 1.5px solid #c3e6cb; border-radius: 10px;
  padding: 18px 20px; text-align: center; color: #155724; font-size: 15px;
}
.rbp-pay-confirmed p { margin: 6px 0 0; font-size: 13px; }

/* PayPal loading placeholder */
.rbp-paypal-loading {
  color: #888; font-size: 13px; padding: 12px 0; text-align: center;
}

/* v5.5.11: PayPal button container alignment fix.
 * PayPal SDK renders an iframe inside the container. Without explicit
 * width:100% the SDK may size the buttons relative to the iframe's own
 * computed width, causing them to appear right-shifted on some browsers. */
[id$="-paypal-btn-container"],
#rbp-rec-paypal-btn-container {
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
}
[id$="-paypal-btn-container"] > *,
#rbp-rec-paypal-btn-container > * {
  margin-left: auto !important;
  margin-right: auto !important;
}
[id$="-paypal-btn-container"] iframe,
#rbp-rec-paypal-btn-container iframe {
  max-width: 100% !important;
  width: 100% !important;
  display: block;
  margin: 0 auto !important;
}

/* OnePay button (large, widget version) */
.rbp-btn-onepay-lg {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  border-radius: 8px;
  margin-bottom: 4px;
}

@keyframes rbpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Summary table in Step 4 — v4.1.14 FIX: fixed col widths + aligned baseline */
/* v4.1.19: Summary info rows — flex layout matching Price Breakdown style */
.rbp-sum-rows { margin-bottom: 0; }
.rbp-sum-rows .rbp-pb-row { font-size: 13px; padding: 4px 0; align-items: baseline; }
.rbp-sum-rows .rbp-pb-row:not(:last-child) { border-bottom: 1px dashed #e0e0e0; }
/* Label: muted, smaller — mirrors .rbp-pbd-muted approach */
.rbp-sum-lbl { color: #888; font-size: 12px; font-weight: 400; flex-shrink: 0; min-width: 90px; }
/* Value: same weight/size as Price Breakdown values */
.rbp-sum-val  { color: #222; font-size: 13px; font-weight: 500; text-align: right; word-break: break-word; }
/* Info box container — mirrors .rbp-pbd border/radius/padding */
.rbp-sum-info-box {
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 0;
}

/* Keep table styles for any legacy usage */
.rbp-sum-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.rbp-sum-table tr { border-bottom: 1px solid #f0f0f0; }
.rbp-sum-table tr:last-child { border-bottom: none; }
.rbp-sum-table td { padding: 7px 6px; vertical-align: middle; word-break: break-word; }

/* v4.1.19 — Step 4 Review two-column layout (summary left, custom panel right) */
.rbp-review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}
.rbp-review-left { min-width: 0; }
.rbp-review-right { min-width: 0; }
.rbp-review-panel {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  height: 100%;
  box-sizing: border-box;
}
.rbp-review-panel h1,
.rbp-review-panel h2,
.rbp-review-panel h3,
.rbp-review-panel h4 { margin-top: 0; }
.rbp-review-panel p:last-child { margin-bottom: 0; }
.rbp-review-panel img { max-width: 100%; height: auto; border-radius: 6px; }
.rbp-review-panel a { color: inherit; }
.rbp-review-panel ul,
.rbp-review-panel ol { padding-left: 20px; margin: 8px 0; }
@media (max-width: 680px) {
  .rbp-review-layout { grid-template-columns: 1fr; }
}

/* Pay row note (badges in radio list) */
.rbp-pay-row-note { display: block; margin-top: 4px; }

/* Info notes below summary */
.rbp-info-note {
  margin-top: 12px;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.6;
}
.rbp-dep-note { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }
.rbp-pre-note { background: #d4edda; border: 1px solid #c3e6cb; color: #155724; }

/* ── Package Cards (v3.3.7) ─────────────────────────────────────────── */
.rbp-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.rbp-pkg-card {
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .15s;
  background: #fff;
  position: relative;
  user-select: none;
  outline: none;
}
.rbp-pkg-card:hover {
  border-color: #c0392b;
  box-shadow: 0 4px 14px rgba(192,57,43,.13);
  transform: translateY(-2px);
}
.rbp-pkg-card:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.2);
}
.rbp-pkg-card.selected {
  border-color: #c0392b;
  background: #fff8f8;
  box-shadow: 0 4px 16px rgba(192,57,43,.18);
}
.rbp-pkg-img {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
}
.rbp-pkg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rbp-pkg-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}
.rbp-pkg-body {
  padding: 12px 14px 14px;
}
.rbp-pkg-name {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
  line-height: 1.3;
}
.rbp-pkg-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rbp-pkg-price {
  font-size: 15px;
  font-weight: 800;
  color: #c0392b;
  margin-top: 4px;
}
.rbp-pkg-per {
  font-size: 11px;
  font-weight: 400;
  color: #888;
}
.rbp-pkg-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .15s, transform .15s;
}
.rbp-pkg-card.selected .rbp-pkg-check {
  opacity: 1;
  transform: scale(1);
}
/* Single package — wider card */
.rbp-pkg-grid:has(.rbp-pkg-card:only-child) { grid-template-columns: 1fr; max-width: 320px; }
/* Mobile */
@media (max-width: 480px) {
  .rbp-pkg-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rbp-pkg-img  { height: 90px; }
  .rbp-pkg-name { font-size: 12px; }
  .rbp-pkg-price { font-size: 13px; }
}
@media (max-width: 360px) {
  .rbp-pkg-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SLOT DISPLAY MODES — v3.7.1
   button (default) | card | box (with image)
   ============================================================ */

/* ── CARD MODE ────────────────────────────────────────────── */
.rbp-slot-mode-card {
  display: grid;
  grid-template-columns: repeat(var(--rbp-slot-cols, 3), minmax(0, 1fr));
  gap: 12px;
}
.rbp-slot-card {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.rbp-slot-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rbp-primary, #c0392b);
  transform: scaleX(0);
  transition: transform .2s;
  transform-origin: left;
}
.rbp-slot-card:hover { border-color: var(--rbp-slot-primary, var(--rbp-primary, #c0392b)); box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); }
.rbp-slot-card:hover::before { transform: scaleX(1); }
.rbp-slot-card.selected { border-color: var(--rbp-slot-primary, var(--rbp-primary, #c0392b)); background: #fef5f4; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.rbp-slot-card.selected::before { transform: scaleX(1); }
.rbp-slot-card.rbp-slot-full { opacity: .45; cursor: not-allowed; pointer-events: none; }

.rbp-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rbp-card-icon   { font-size: 22px; flex-shrink: 0; }
/* v5.4.34: thumbnail image in Card mode header (replaces icon when admin uploaded one) */
.rbp-card-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.rbp-card-meta   { flex: 1; min-width: 0; }
.rbp-card-name   { display: block; font-size: 14px; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbp-card-time   { display: block; font-size: 12px; color: #888; margin-top: 1px; }
.rbp-card-desc   { font-size: 12px; color: #666; margin: 0 0 8px; line-height: 1.45; }
.rbp-card-footer { font-size: 12px; font-weight: 600; color: #27ae60; }
.rbp-slot-card.rbp-slot-full .rbp-card-footer { color: #c0392b; }

/* ── BOX MODE (with image) ───────────────────────────────── */
.rbp-slot-mode-box {
  display: grid;
  grid-template-columns: repeat(var(--rbp-slot-cols, 3), minmax(0, 1fr));
  gap: 14px;
}
.rbp-slot-box {
  background: #fff;
  border: 2px solid #e8e8e8;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.rbp-slot-box:hover { border-color: var(--rbp-primary, #c0392b); box-shadow: 0 6px 22px rgba(192,57,43,.14); transform: translateY(-3px); }
.rbp-slot-box.selected { border-color: var(--rbp-primary, #c0392b); box-shadow: 0 6px 22px rgba(192,57,43,.18); }
.rbp-slot-box.rbp-slot-full { opacity: .42; cursor: not-allowed; pointer-events: none; }

.rbp-box-visual   { position: relative; height: 120px; overflow: hidden; background: #f5f5f5; transition: height .25s ease; }
.rbp-box-img      { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.rbp-slot-box:hover .rbp-box-img { transform: scale(1.04); }
/* v5.4.34: when slot is SELECTED, expand image height for a richer visual emphasis */
.rbp-slot-box.selected .rbp-box-visual { height: 170px; }
.rbp-slot-box.selected .rbp-box-img    { transform: scale(1.02); }
.rbp-box-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  background: linear-gradient(135deg, var(--rbp-primary, #c0392b), var(--rbp-secondary, #e74c3c));
}

.rbp-slot-badge {
  display: inline-block;
  background: var(--rbp-slot-badge-bg, var(--rbp-primary, #c0392b));
  color: var(--rbp-slot-badge-txt, #fff);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.rbp-box-badge {
  position: absolute;
  top: 8px; left: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.rbp-slot-card .rbp-slot-badge {
  position: absolute;
  top: 10px; right: 10px;
}

.rbp-box-body    { padding: 12px 14px; }
.rbp-box-name    { display: block; font-size: 14px; font-weight: 700; color: #222; margin-bottom: 3px; }
.rbp-box-time    { display: block; font-size: 12px; color: #888; margin-bottom: 5px; }
.rbp-box-desc    { font-size: 12px; color: #666; margin: 0 0 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rbp-box-footer  { font-size: 12px; font-weight: 600; color: #27ae60; }
.rbp-slot-box.rbp-slot-full .rbp-box-footer { color: #c0392b; }

/* selected checkmark overlay on box */
.rbp-slot-box.selected::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.rbp-slot-box { position: relative; }

/* ── CURRENCY SELECTOR ───────────────────────────────────── */
.rbp-currency-sel {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  align-items: center;
}
.rbp-currency-sel::before {
  content: '💱';
  font-size: 14px;
  margin-right: 2px;
}
.rbp-curr-btn {
  padding: 4px 12px;
  border: 1.5px solid #d0d0d0;
  border-radius: 20px;
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  letter-spacing: .3px;
}
.rbp-curr-btn:hover { border-color: var(--rbp-primary, #c0392b); color: var(--rbp-primary, #c0392b); }
.rbp-curr-btn.rbp-curr-active {
  background: var(--rbp-primary, #c0392b);
  border-color: var(--rbp-primary, #c0392b);
  color: #fff;
}

/* ── Mobile slot modes ───────────────────────────────────── */
@media (max-width: 520px) {
  .rbp-slot-mode-card { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rbp-slot-card { padding: 10px; }
  .rbp-slot-mode-box  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rbp-box-visual { height: 90px; }
  /* v5.4.34: mobile selected-state image height boost (proportional to mobile size) */
  .rbp-slot-box.selected .rbp-box-visual { height: 130px; }
  .rbp-box-body   { padding: 9px 11px; }
  .rbp-box-name   { font-size: 12px; }
}
@media (max-width: 340px) {
  .rbp-slot-mode-card,
  .rbp-slot-mode-box  { grid-template-columns: 1fr; }
}

/* ── Admin: timeslot mode preview cards ──────────────────── */
.rbp-mode-preview {
  transition: border-color .15s, background .15s;
  min-height: 90px;
}
.rbp-mode-preview:hover { border-color: #c0392b !important; }

/* ── Slot Design CSS variable fallbacks (used when design not customized) ── */
:root {
  --rbp-slot-primary: #c0392b;
  --rbp-slot-btn-radius: 8px;
  --rbp-slot-btn-pad: 11px 16px;
  --rbp-slot-btn-fnt: 14px;
  --rbp-slot-badge-bg: #c0392b;
  --rbp-slot-badge-txt: #ffffff;
  --rbp-slot-cols: 3;
}

/* ── Mobile responsive for CSS-var grid ── */
@media (max-width: 640px) {
  .rbp-slot-mode-card,
  .rbp-slot-mode-box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 380px) {
  .rbp-slot-mode-card,
  .rbp-slot-mode-box {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   v3.8.0 — Card Long mode + Currency in Payment Step
   ══════════════════════════════════════════════════════════ */

/* ── Card Long (card_long) mode — horizontal cards.
   v5.10.9 fix — previously forced `grid-template-columns:1fr !important`
   which overrode the JS inline style applied from slot_card_cols. Result:
   admin choosing "2 cols" had no effect on card_long. Removed !important;
   JS renderSlots() now sets repeat(N, 1fr) inline, and the ≤880px media
   query below drops to 1 col automatically when cards would crush. */
.rbp-slot-mode-card_long .rbp-slot-grid,
.rbp-slot-grid.rbp-slot-mode-card_long {
  gap: 10px;
}

/* Tablet ≤880px — horizontal cards with image + arrival pills cannot fit
   comfortably below ~440px each. Force 1 col regardless of admin setting. */
@media (max-width: 880px) {
  .rbp-slot-mode-card_long .rbp-slot-grid,
  .rbp-slot-grid.rbp-slot-mode-card_long {
    grid-template-columns: 1fr !important;
  }
}

.rbp-slot-card-long {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  overflow: hidden;
  min-height: 76px;
}
.rbp-slot-card-long:hover:not(.rbp-slot-full) {
  border-color: var(--rbp-slot-primary, #c0392b);
  box-shadow: 0 4px 16px rgba(192,57,43,.14);
  transform: translateY(-1px);
}
.rbp-slot-card-long.selected {
  border-color: var(--rbp-slot-primary, #c0392b) !important;
  background: rgba(192,57,43,.04) !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.18);
}
.rbp-slot-card-long.rbp-slot-full {
  opacity: .55;
  cursor: not-allowed;
}

/* Left accent strip with icon */
.rbp-clong-left {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-height: 76px;
  background: linear-gradient(135deg, var(--rbp-slot-primary,#c0392b) 0%, rgba(192,57,43,.75) 100%);
  flex-shrink: 0;
  font-size: 26px;
}
/* v5.4.34: when image is uploaded, replace gradient with image */
.rbp-clong-left.rbp-clong-left-img {
  width: 100px;
  background: none;
  padding: 0;
}
.rbp-clong-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 76px;
}

/* Body — name, time, type, badge */
.rbp-clong-body {
  flex: 1;
  padding: 14px 16px;
  min-width: 0;
}
.rbp-clong-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.rbp-clong-name {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rbp-clong-time {
  font-size: 13px;
  color: var(--rbp-slot-primary, #c0392b);
  font-weight: 600;
  white-space: nowrap;
}
.rbp-clong-type {
  font-size: 11px;
  color: #888;
  background: #f5f5f5;
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.rbp-badge-inline {
  background: var(--rbp-slot-badge-bg, #c0392b);
  color: var(--rbp-slot-badge-txt, #fff);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.rbp-clong-desc {
  font-size: 12px;
  color: #666;
  margin: 4px 0 0;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right — availability + select arrow */
.rbp-clong-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 14px 18px 14px 12px;
  flex-shrink: 0;
  text-align: right;
}
.rbp-clong-right .sl-avail,
.rbp-clong-right .sl-full-lbl {
  font-size: 12px;
  white-space: nowrap;
}
.rbp-clong-select {
  font-size: 11px;
  font-weight: 700;
  color: var(--rbp-slot-primary, #c0392b);
  opacity: .7;
  white-space: nowrap;
}
.rbp-slot-card-long:hover .rbp-clong-select { opacity: 1; }

/* ── Currency selector in Payment Step ── */
.rbp-pay-currency-wrap { margin-bottom: 16px; }
.rbp-currency-sel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rbp-currency-sel::before {
  content: '💱';
  font-size: 15px;
  margin-right: 2px;
}
.rbp-curr-btn {
  padding: 6px 14px;
  border: 1.5px solid #d0d0d0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  letter-spacing: .3px;
}
.rbp-curr-btn:hover {
  border-color: var(--rbp-slot-primary, #c0392b);
  color: var(--rbp-slot-primary, #c0392b);
}
.rbp-curr-btn.rbp-curr-active {
  border-color: var(--rbp-slot-primary, #c0392b);
  background: var(--rbp-slot-primary, #c0392b);
  color: #fff;
}

/* Auto-fill notice when currency switches by country */
.rbp-curr-auto-note {
  font-size: 11px;
  color: #27ae60;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  animation: rbp-fadein .3s ease;
}
@keyframes rbp-fadein { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ── Resource naming (Spots Available / Availability) ── */
.sl-avail { font-size: 12px; color: #27ae60; font-weight: 500; }
.sl-full-lbl { font-size: 12px; color: #e74c3c; font-weight: 700; }

/* ── Mobile: card_long stacks vertically ── */
@media (max-width: 520px) {
  .rbp-slot-card-long { flex-direction: column; align-items: stretch; min-height: unset; }
  .rbp-clong-left { width: 100%; min-height: 44px; flex-direction: row; gap: 10px; padding: 10px 16px; justify-content: flex-start; font-size: 20px; border-radius: 0; }
  .rbp-clong-right { flex-direction: row; justify-content: space-between; padding: 8px 16px; }
  .rbp-clong-desc { white-space: normal; }
}

/* ── v3.13.0: Language Switcher ───────────────────────────────── */
.rbp-lang-switcher {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding: 10px 20px 0;  /* 20px sides → trigger clears border by ~15px */
  flex-wrap: wrap;
}
/* v4.3.10: Position modifier classes */
.rbp-lang-sw--top-left    { justify-content: flex-start; padding: 10px 20px 0; }
.rbp-lang-sw--top-right   { justify-content: flex-end;   padding: 10px 20px 0; }
.rbp-lang-sw--top-center  { justify-content: center;     padding: 10px 20px 0; }
.rbp-lang-sw--bottom-left  { justify-content: flex-start; padding: 0 20px 10px; }
.rbp-lang-sw--bottom-right { justify-content: flex-end;   padding: 0 20px 10px; }
.rbp-lang-sw--bottom-center{ justify-content: center;     padding: 0 20px 10px; }

/* ════════════════════════════════════════════════════════════════════
   v5.13.9 FIX — Lang switcher: dedicated toolbar row above steps
   ────────────────────────────────────────────────────────────────────
   Previous approach (v5.13.7-8): position:absolute overlay on steps.
   Problem: on wider triggers (🇩🇪 DE | GBP) the pill visually collides
   with step 3 labels, especially in German/French translations where
   step labels are longer. Users perceive this as broken.

   New approach (v5.13.9): the lang switcher renders as a FLOW element
   in a slim toolbar row ABOVE the steps header. No absolute positioning,
   no z-index fights, no overflow hacks. Inspired by Booking.com's
   currency bar and Airbnb's language toolbar — clean separation between
   navigation chrome and booking progress.
   ════════════════════════════════════════════════════════════════════ */
.rbp-booking-inner,
.rbp-booking-inner--single { position: relative; }

/* ── Top-position: slim toolbar row ── */
.rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-right,
.rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-left,
.rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-center,
.rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-right,
.rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-left,
.rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-center {
  position: relative;            /* v5.13.9: flow element, NOT absolute */
  z-index: auto;                 /* v5.13.9 FIX: MUST be auto — NOT a number.
                                    Any numeric z-index + position:relative creates
                                    a stacking context that TRAPS the popup panel
                                    (position:fixed; z-index:999999) inside it.
                                    Result: panel paints behind form elements, user
                                    cannot click language/currency options.
                                    z-index:auto = no stacking context = panel
                                    participates in ROOT context → paints above all. */
  width: 100% !important;
  box-sizing: border-box;
  padding: 8px 16px !important;
  background: rgba(0,0,0,.025);
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-radius: 10px 10px 0 0;   /* v6.2.7: top language bar IS the form's top edge → round it */
  pointer-events: auto;
}
/* v6.2.7: when the top bar is present it owns the rounded top, so the steps bar
   directly below it must be square (standard skin). Luxury steps is a separate
   floating box (margin + full radius) and is intentionally left untouched. */
.rbp-booking-wrap:not(.rbp-lux) .rbp-lang-switcher[class*="rbp-lang-sw--top"] + .rbp-steps {
  border-radius: 0 !important;
}
/* Alignment within the toolbar row */
.rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-right,
.rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-right { justify-content: flex-end; }
.rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-left,
.rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-left { justify-content: flex-start; }
.rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-center,
.rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-center { justify-content: center; }

/* v5.13.9: Steps no longer need extra padding-top — switcher is a flow sibling above */

/* Wizard / split layouts: overflow is safe — no absolute escaping needed */
.rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-booking-inner,
.rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-booking-inner,
.rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-booking-inner { overflow: visible !important; }

/* Mobile: compact toolbar */
@media (max-width: 680px) {
  .rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-right,
  .rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-left,
  .rbp-booking-inner > .rbp-lang-switcher.rbp-lang-sw--top-center,
  .rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-right,
  .rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-left,
  .rbp-booking-inner--single > .rbp-lang-switcher.rbp-lang-sw--top-center {
    padding: 6px 12px !important;
  }
}

/* v4.3.10: Dropdown style */
.rbp-lang-select {
  background: transparent;
  border: 1.5px solid #e0e0e0;
  border-radius: 20px;
  padding: 4px 28px 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: #666;
  font-family: inherit;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .2s, color .2s;
}
.rbp-lang-select:hover,
.rbp-lang-select:focus {
  border-color: var(--rbp-slot-primary, #c0392b);
  color: var(--rbp-slot-primary, #c0392b);
  outline: none;
}
.rbp-lang-btn {
  background: transparent;
  border: 1.5px solid #e0e0e0;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: #666;
  transition: border-color .2s, color .2s, background .2s;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.5;
}
.rbp-lang-btn:hover {
  border-color: var(--rbp-slot-primary, #c0392b);
  color: var(--rbp-slot-primary, #c0392b);
}
.rbp-lang-btn.active {
  background: var(--rbp-slot-primary, #c0392b);
  border-color: var(--rbp-slot-primary, #c0392b);
  color: #fff;
  font-weight: 600;
}

/* ── v4.5.25: Globe popup — Language + Currency panel ── */
/* ══════════════════════════════════════════════════════════════════
   v5.4.28 Globe Popup — Professional 2-column panel
   Light theme, no scrollbar, 2-col on all screen sizes.
   Trigger: pill OR elegant square-icon style.
   ══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.rbp-lang-popup-wrap {
  display: flex;
  align-items: center;
  overflow: visible;
  width: 100%;
}

/* ── CSS Variables for admin color overrides ── */
:root {
  --rbp-globe-trigger-bg:        #ffffff;
  --rbp-globe-trigger-color:     #222222;
  --rbp-globe-trigger-border:    rgba(0,0,0,.18);
  --rbp-globe-trigger-bg-hover:  #f5f5f5;
  --rbp-globe-check-color:       #1d9e5e;
}

/* ═══════════════════════════════════════════════════
   STYLE A — Pill trigger (default): "🌐 EN | USD ▲"
   ═══════════════════════════════════════════════════ */
.rbp-lang-popup-trigger.rbp-globe-trigger-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 6px;
  border-radius: 19px;
  border: 1px solid var(--rbp-globe-trigger-border);
  background: var(--rbp-globe-trigger-bg);
  color: var(--rbp-globe-trigger-color);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  letter-spacing: 0;
  flex-shrink: 0;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-pill:hover {
  background: var(--rbp-globe-trigger-bg-hover);
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.rbp-lang-popup-trigger.rbp-globe-trigger-pill[aria-expanded="true"] {
  border-color: var(--rbp-globe-trigger-color);
  box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}
.rbp-lang-popup-trigger.rbp-globe-trigger-pill .rbp-globe-icon {
  opacity: .55;
  flex-shrink: 0;
}
/* v5.4.34: Flag emoji before lang code (replaces country-code text badge from v5.4.30) */
.rbp-globe-trig-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  /* Slight platform-quirk hedge: some emoji fonts render flags taller than expected.
     Constrain visual height with display:inline-flex and align baseline. */
  display: inline-flex;
  align-items: center;
  /* Prefer system color emoji rendering */
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",
               "Android Emoji",sans-serif;
}
/* Backward-compat: keep .rbp-globe-trig-cc rule in case any markup still uses it */
.rbp-globe-trig-cc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(0,0,0,.55);
  background: rgba(0,0,0,.05);
  padding: 3px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.rbp-globe-trig-lang {
  font-weight: 700;
  color: inherit;
  letter-spacing: .02em;
}
.rbp-globe-trig-divider {
  color: rgba(0,0,0,.18);
  font-weight: 300;
  font-size: 13px;
  margin: 0 -2px;
}
.rbp-globe-trig-curr {
  color: inherit;
  font-weight: 500;
  opacity: .85;
  letter-spacing: .02em;
}
.rbp-globe-trig-arrow {
  opacity: .45;
  flex-shrink: 0;
  transition: transform .2s;
  margin-left: 1px;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-pill[aria-expanded="true"] .rbp-globe-trig-arrow {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════
   STYLE B — Elegant square trigger (when admin sets
   rbp_design_globe_trigger_style = 'elegant')
   Small square icon badge, no text labels, clean.
   ═══════════════════════════════════════════════════ */
.rbp-lang-popup-trigger.rbp-globe-trigger-elegant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid var(--rbp-globe-trigger-border);
  background: var(--rbp-globe-trigger-bg);
  color: var(--rbp-globe-trigger-color);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
  flex-shrink: 0;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  position: relative;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-elegant:hover {
  background: var(--rbp-globe-trigger-bg-hover);
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  transform: scale(1.04);
}
.rbp-lang-popup-trigger.rbp-globe-trigger-elegant[aria-expanded="true"] {
  border-color: var(--rbp-globe-trigger-color);
  box-shadow: 0 0 0 3px rgba(0,0,0,.07);
  transform: scale(1);
}
/* Active indicator dot */
.rbp-lang-popup-trigger.rbp-globe-trigger-elegant::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rbp-globe-check-color);
  border: 1.5px solid #fff;
  opacity: 0;
  transition: opacity .2s;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-elegant[aria-expanded="true"]::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   STYLE C — Compact trigger (v5.4.32)
   Borderless, text-only "EN · USD ▾" — minimal footprint,
   blends into header. Uses same CSS vars so admin colors apply.
   ═══════════════════════════════════════════════════ */
.rbp-lang-popup-trigger.rbp-globe-trigger-compact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  border: none;
  /* v5.4.34 FIX: was hardcoded `transparent` — admin Design bg setting had no effect.
     Now consumes --rbp-globe-trigger-bg with `transparent` as fallback when var is unset.
     If admin doesn't set a custom bg, var resolves to its default (#ffffff) — but for
     compact we want transparent-by-default look. So use a SECOND fallback layer:
     Design class only emits the var when admin actually customized → otherwise
     `transparent` from this declaration's fallback layer is used. */
  background: var(--rbp-globe-trigger-bg-compact, transparent);
  color: var(--rbp-globe-trigger-color);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  letter-spacing: .02em;
  flex-shrink: 0;
  line-height: 1;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-compact:hover {
  background: rgba(0,0,0,.05);
}
.rbp-lang-popup-trigger.rbp-globe-trigger-compact[aria-expanded="true"] {
  background: rgba(0,0,0,.06);
}
.rbp-lang-popup-trigger.rbp-globe-trigger-compact .rbp-globe-trig-lang {
  font-weight: 700;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-compact .rbp-globe-trig-curr {
  font-weight: 500;
  opacity: .8;
}
.rbp-globe-trig-dot {
  color: rgba(0,0,0,.3);
  font-weight: 700;
  font-size: 13px;
  margin: 0 -1px;
  line-height: 1;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-compact .rbp-globe-trig-arrow {
  opacity: .45;
  flex-shrink: 0;
  transition: transform .2s;
  margin-left: 1px;
}
.rbp-lang-popup-trigger.rbp-globe-trigger-compact[aria-expanded="true"] .rbp-globe-trig-arrow {
  transform: rotate(180deg);
}

/* Fallback: old dark round trigger (backward compat, not used in popup style) */
.rbp-lang-popup-trigger:not(.rbp-globe-trigger-pill):not(.rbp-globe-trigger-elegant):not(.rbp-globe-trigger-compact) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.7);
  background: rgba(0,0,0,.28);
  color: #fff;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.3);
}

/* ── Panel ── */
.rbp-globe-panel {
  position: fixed;
  z-index: 999999;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,.05), 0 24px 64px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
  animation: rbpGlobeIn .18s cubic-bezier(.34,1.3,.64,1);
  overflow: hidden;
  /* width driven by content — positionPanel() reads actual offsetWidth */
  width: max-content;
  max-width: calc(100vw - 16px);
}
@keyframes rbpGlobeIn {
  from { opacity: 0; transform: translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rbpGlobeOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-5px) scale(.97); }
}
.rbp-globe-panel.rbp-globe-closing {
  animation: rbpGlobeOut .14s ease forwards;
  pointer-events: none;
}

/* Panel inner */
.rbp-globe-panel-inner {
  padding: 0;
}

/* ── Panel header ── */
.rbp-globe-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.rbp-globe-panel-title {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rbp-globe-panel-close {
  background: #f4f4f4;
  border: none;
  color: #555;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background .12s, color .12s;
  padding: 0;
  flex-shrink: 0;
}
.rbp-globe-panel-close:hover { background: #e8e8e8; color: #111; }

/* ── Two-column body — 2 cols on ALL screen sizes ── */
.rbp-globe-cols {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  /* NO overflow-y — no scrollbar, let content determine height */
}
.rbp-globe-col {
  padding: 14px 0 10px;
  /* removed overflow-y and max-height — no scrollbar */
}
.rbp-globe-col:first-child { padding-left: 0; }
.rbp-globe-col:last-child  { padding-right: 0; }
.rbp-globe-col-divider {
  background: #f0f0f0;
  width: 1px;
  margin: 10px 0;
  align-self: stretch;
}

/* Column head */
.rbp-globe-col-head {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 16px 8px;
}

/* Option list */
.rbp-globe-opt-list {
  list-style: none;
  margin: 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
}

/* Individual option row */
.rbp-globe-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .1s;
  outline: none;
  background: transparent;
  border: 1.5px solid transparent;
  min-width: 0;
}
.rbp-globe-opt:hover,
.rbp-globe-opt:focus {
  background: #f5f5f5;
}
.rbp-globe-opt.is-selected {
  border-color: #e5e5e5;
  background: #fafafa;
}

/* Icon */
.rbp-globe-opt-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rbp-globe-opt-icon--sym {
  font-size: 14px;
  font-weight: 700;
  background: #eef2ff;
  color: #3b6ef6;
  border-radius: 8px;
}
.rbp-globe-opt-icon--code {
  font-size: 10px;
  font-weight: 800;
  background: #f0f0f0;
  color: #555;
  border-radius: 8px;
}

/* Text body */
.rbp-globe-opt-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.rbp-globe-opt-name {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rbp-globe-opt-sub {
  font-size: 11px;
  color: #999;
  line-height: 1.2;
}

/* Checkmark — shown only when selected */
.rbp-globe-opt-check {
  display: none;
  color: var(--rbp-globe-check-color);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
}
.rbp-globe-opt.is-selected .rbp-globe-opt-check {
  display: flex;
}

/* ── Backdrop ── */
.rbp-globe-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  z-index: 999998;
  animation: rbpFadeIn .18s ease;
}
@keyframes rbpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Mobile — bottom sheet but KEEP 2 columns ── */
@media (max-width: 600px) {
  .rbp-globe-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0;
    animation: rbpGlobeUp .22s cubic-bezier(.34,1.2,.64,1);
  }
  @keyframes rbpGlobeUp {
    from { opacity:0; transform:translateY(100%); }
    to   { opacity:1; transform:translateY(0); }
  }
  .rbp-globe-panel.rbp-globe-closing {
    animation: rbpGlobeDown .18s ease forwards;
  }
  @keyframes rbpGlobeDown {
    from { opacity:1; transform:translateY(0); }
    to   { opacity:0; transform:translateY(100%); }
  }
  /* Keep 2-column layout on mobile (no stacking) */
  .rbp-globe-cols {
    grid-template-columns: 1fr 1px 1fr;
  }
  .rbp-globe-col-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    margin: 10px 0;
  }
  .rbp-globe-opt-name { font-size: 12px; }
  .rbp-globe-opt-sub  { font-size: 10px; }
  .rbp-globe-opt      { padding: 8px 8px; gap: 7px; }
  .rbp-globe-opt-icon { font-size: 18px; width: 26px; height: 26px; }
  .rbp-globe-opt-icon--sym, .rbp-globe-opt-icon--code { font-size: 11px; }
  .rbp-globe-panel-inner::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 10px auto 0;
  }
  .rbp-globe-col-head { padding: 0 10px 6px; font-size: 9px; }
}

/* ── Luxury skin overrides ── */
/* v5.4.31 FIX: was using !important on background/color/border which silently
   killed all admin Design color settings. Now we only override the CSS variable
   *defaults* scoped to .rbp-lux. If admin saves any value in Design tab, the
   inline <style> from RBP_Design::output_css() writes :root{ --rbp-globe-... }
   which has equal specificity but appears LATER in the cascade, so it wins.
   Result: luxury skin keeps its dark trigger by default; admin overrides apply. */
.rbp-lux {
  --rbp-globe-trigger-bg:        rgba(0,0,0,.22);
  --rbp-globe-trigger-color:     #ffffff;
  --rbp-globe-trigger-border:    rgba(255,255,255,.35);
  --rbp-globe-trigger-bg-hover:  rgba(0,0,0,.36);
}

/* ── v4.3.10: Sticky Confirm button — Step 3 mobile ───────────────── */
/* On mobile, the p3 nav bar (Confirm & Pay) sticks to the bottom so the
   guest can always tap it without scrolling past price breakdown.
   Only applies inside #F-p3 panel — not on other panels. */
@media (max-width: 680px) {
  [id$="-p3"] > .rbp-step-nav:last-child,
  [id$="-p3"] .rbp-step-nav:last-of-type {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid #e8e8e8;
    box-shadow: 0 -3px 12px rgba(0,0,0,.10);
    padding: 10px 16px;
    margin-left: -28px;
    margin-right: -28px;
    margin-bottom: -24px;
    border-radius: 0;
    flex-direction: column;
    gap: 8px;
  }
  [id$="-p3"] > .rbp-step-nav:last-child button,
  [id$="-p3"] .rbp-step-nav:last-of-type button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   v3.14.0 — Split Section Layout
   ============================================================ */

/* Inner booking form column */
.rbp-booking-inner {
  min-width: 0;
}

/* v4.3.11: Service selector shown only on mobile in split layout.
   Desktop: sidebar handles service display → hide this block.
   Mobile (≤680px): sidebar is hidden → show this block so user can still select a service. */
.rbp-svc-mobile-only {
  display: none;
}

/* Sidebar service cards column */
.rbp-booking-sidebar {
  min-width: 0;
}
.rbp-sidebar-inner {
  padding: 4px 0;
}
/* v5.13.7 FIX: Make "Our Services" title visible on ANY page background.
   v5.13.8 SCOPE FIX: Only apply white-pill styling when the sidebar does NOT
   already have its own auto-contrast background (wizard / split layouts force
   their own sidebar background + text color via class-rbp-design.php's wizard
   CSS block; layering a white pill on top causes white-text-on-white invisible
   text — exactly what the user reported as the "empty pill" bug). For those
   layouts we revert to a clean transparent heading with a subtle separator,
   letting the auto-contrast palette handle visibility. */
.rbp-sidebar-title {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  background: #fff;
  margin: 0 0 16px;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  letter-spacing: .2px;
  border-bottom: none;
}
/* In layouts with their own forced sidebar background, suppress the pill so it
   doesn't fight the wizard/split auto-contrast palette (which sets title color
   to white on dark headers, transparent on light — both incompatible with our
   white-pill background). */
.rbp-booking-wrap[data-rbp-layout="wizard"] .rbp-sidebar-title,
.rbp-booking-wrap[data-rbp-layout="split_left"] .rbp-sidebar-title,
.rbp-booking-wrap[data-rbp-layout="split_right"] .rbp-sidebar-title {
  display: block;
  background: transparent;
  padding: 0 0 10px;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid currentColor;
  opacity: .85;
  margin: 0 0 16px;
}
/* v5.13.9 FIX #4: Ensure sidebar title is always readable on any page background.
   For single/elegant_center/magazine_wide layouts, the white pill approach
   already works. For other layouts without explicit sidebar background,
   add a text-shadow halo to guarantee readability against both light and dark. */
.rbp-sidebar-title {
  text-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 2px rgba(255,255,255,.9);
}
.rbp-sidebar-services {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rbp-sidebar-svc-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rbp-sidebar-svc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
.rbp-sidebar-svc-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.rbp-sidebar-svc-bar {
  height: 4px;
  width: 100%;
}
.rbp-sidebar-svc-body {
  padding: 14px 16px;
}
.rbp-sidebar-svc-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 6px;
}
.rbp-sidebar-svc-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 8px;
}

/* v4.3.31: Structured description meta (Label: Value rows) — sidebar */
.rbp-sidebar-svc-meta {
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rbp-sidebar-svc-meta-row {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  align-items: baseline;
}
.rbp-sidebar-svc-meta-key {
  font-weight: 700;
  color: #444;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
}
.rbp-sidebar-svc-meta-key::after { content: ':'; }
.rbp-sidebar-svc-meta-val {
  color: #666;
  flex: 1;
  min-width: 0;
}
.rbp-sidebar-svc-meta-plain {
  font-size: 12px;
  color: #777;
  font-style: italic;
  line-height: 1.4;
}
.rbp-sidebar-svc-price {
  font-size: 14px;
  font-weight: 700;
}

/* v3.15.2 — Sidebar service card selection + checkmark */
.rbp-sidebar-svc-card {
  position: relative;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.rbp-sidebar-svc-card.rbp-sidebar-selected {
  border: 2px solid var(--rbp-slot-primary, #c0392b);
  box-shadow: 0 0 0 2px rgba(192,57,43,.15);
}
.rbp-sidebar-svc-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rbp-slot-primary, #c0392b);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.rbp-sidebar-selected .rbp-sidebar-svc-check {
  display: block;
}

/* ============================================================
   v3.14.1 — Payment Widget: Price Breakdown & i18n strings
   ============================================================ */

/* Prepaid price breakdown row */
.rbp-pw-breakdown {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
  font-size: 14px;
}
.rbp-pw-original {
  color: #999;
  text-decoration: line-through;
}
.rbp-pw-arrow {
  color: #aaa;
}
.rbp-pw-final {
  color: #1a1a2e;
  font-size: 17px;
}

/* Discount badge */
.rbp-save-badge {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}

/* ============================================================
   v3.14.2 — Per-pax price breakdown panel
   ============================================================ */

.rbp-pb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: #444;
  gap: 8px;
}
.rbp-pb-row:not(:last-child) {
  border-bottom: 1px dashed #e0e0e0;
}

/* ============================================================
   v3.17.0 — Enhanced Price Breakdown (Feature #5)
   ============================================================ */
.rbp-pb-header {
  cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
  user-select: none;
}
.rbp-pb-details {
  border-top: 1px dashed #ddd;
  padding-top: 8px;
}
.rbp-pb-totals {
  border-top: 2px solid #ddd;
  margin-top: 8px;
  padding-top: 8px;
}
.rbp-pb-grand {
  font-size: 16px;
  font-weight: 700;
  padding: 8px 0;
  color: #c0392b;
}

/* ============================================================
   v3.17.0 — Realtime Booking Summary Panel (Feature #1)
   ============================================================ */
.rbp-live-summary {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  position: sticky;
  top: 20px;
  /* v5.11.3: Booking.com / Trip.com style — keep the running summary in view.
     Cap height on tall viewports so a long summary scrolls internally instead of
     pushing the sticky panel off-screen. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
/* v5.11.3: on small screens the layout stacks — sticky would trap the summary,
   so reset to normal flow (matches the design split media query at 768px). */
@media (max-width: 768px) {
  .rbp-live-summary { position: static; max-height: none; overflow: visible; }
}
.rbp-live-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1a1a2e;
}
.rbp-live-row {
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}
.rbp-live-row:last-child {
  border-bottom: none;
}
.rbp-live-empty {
  font-size: 12px;
  color: #aaa;
  text-align: center;
  margin: 8px 0;
}
/* Single layout: sticky bottom bar */
.rbp-booking-inner--single .rbp-live-summary {
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  border-radius: 12px 12px 0 0;
  background: #fff;
  margin-top: 16px;
  padding: 14px 20px;
}

/* ============================================
   v3.17.1 — Live Summary Table (Bug #3 fix)
   ============================================ */
.rbp-live-table {
  width: 100%;
  border-collapse: collapse;
}
.rbp-live-table td {
  padding: 6px 4px;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}
.rbp-live-table tr:last-child td {
  border-bottom: none;
}
.rbp-live-icon {
  width: 24px;
  font-size: 14px;
  text-align: center;
}
.rbp-live-label {
  color: #888;
  font-size: 12px;
  white-space: nowrap;
  padding-right: 8px;
  width: 60px;
}
.rbp-live-value {
  font-weight: 600;
  color: #333;
  word-break: break-word;
}

/* ============================================
   v3.17.1 — Age Group Grid (from inline to class)
   ============================================ */
.rbp-age-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rbp-age-group-grid--3col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ============================================
   v3.17.1 — Payment Summary in Step 3
   ============================================ */
.rbp-pay-summary .rbp-pb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: #444;
  gap: 8px;
}

/* ============================================
   v3.17.2 — Payment Summary Note
   ============================================ */
.rbp-summary-note {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-left: 4px solid #f39c12;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 12px;
  font-size: 12px;
  color: #795548;
  line-height: 1.6;
}

/* ============================================
   v3.17.4 — Collapsible Summary Sidebar Tab
   ============================================ */
.rbp-summary-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: stretch;
}
.rbp-summary-tab-toggle {
  background: var(--rbp-slot-primary, #c0392b);
  color: #fff;
  border: none;
  padding: 14px 7px;
  cursor: pointer;
  border-radius: 8px 0 0 8px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: -2px 0 12px rgba(0,0,0,.15);
  transition: background .2s;
}
.rbp-summary-tab-toggle:hover { opacity: .9; }
.rbp-tab-arrow { font-size: 10px; line-height: 1; }
.rbp-tab-label { writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.rbp-summary-panel {
  width: 0;
  overflow: hidden;
  background: #fff;
  border-left: 2px solid #e8e8e8;
  box-shadow: -4px 0 24px rgba(0,0,0,.08);
  transition: width .3s ease, padding .3s ease;
  padding: 0;
}
.rbp-summary-panel.rbp-summary-open {
  width: 300px;
  padding: 16px 14px;
  overflow-y: auto;
  max-height: 80vh;
}
/* Hide old sticky bottom bar — replaced by tab */
.rbp-booking-inner--single .rbp-live-summary { display: none !important; }

/* ============================================
   v3.17.1 — Mobile Responsive Fixes (Bug #2)
   ============================================ */
@media (max-width: 600px) {
  .rbp-booking-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .rbp-panel {
    padding: 16px 14px;
  }
  .rbp-steps {
    padding: 14px 12px 10px;
  }
  .rbp-step {
    min-width: 28px;
  }
  .rbp-step-num {
    width: 28px;
    height: 28px;
    font-size: 12px;
    line-height: 28px;
  }
  .rbp-step-line {
    max-width: 30px;
  }
  /* BUG-1c FIX v5.4.11: Phone group must stay in ONE row on mobile — same as desktop.
     Previous code forced flex-wrap:wrap + width:100% on phone-code, breaking it to
     its own row. Fix: keep flex-wrap:nowrap so country code + number stay side-by-side.
     Shrink code width slightly to fit narrow screens without wrapping. */
  .rbp-phone-group {
    flex-wrap: nowrap;
  }
  .rbp-phone-code {
    width: 110px;
    min-width: 90px;
    flex-shrink: 0;
  }
  .rbp-pay-row-inner {
    padding: 10px 12px;
    gap: 8px;
  }
  .rbp-pay-row-icon {
    font-size: 20px;
  }
  .rbp-pay-row-text strong {
    font-size: 13px;
  }
  .rbp-pay-row-text span {
    font-size: 11px;
  }
  .rbp-qr-wrap {
    flex-direction: column !important;
  }
  .rbp-qr-right {
    width: 100% !important;
  }
  .rbp-qr-left {
    width: 100% !important;
    display: flex;
    justify-content: center;
  }
  .rbp-btn-next, .rbp-btn-outline, .rbp-btn-book {
    padding: 10px 16px;
    font-size: 14px;
  }
  .rbp-sum-table td:nth-child(2) {
    width: auto;
  }
  .rbp-slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }
  .rbp-pkg-grid {
    grid-template-columns: 1fr !important;
  }
  /* BUG-3 FIX v4.5.6: Removed flex-direction:row !important on .rbp-pkg-card here.
     It forced a horizontal layout that conflicted with the vertical grid stack,
     causing package images to be pulled into a tiny corner on mobile. */
  .rbp-booking-sidebar {
    display: none;
  }
  /* v4.3.11: Show service selector in split layout on mobile (sidebar is hidden above) */
  .rbp-svc-mobile-only {
    display: block;
  }
  .rbp-age-group-grid,
  .rbp-age-group-grid--3col {
    grid-template-columns: 1fr !important;
  }
  .rbp-live-table td {
    padding: 5px 2px;
    font-size: 12px;
  }
  .rbp-live-label {
    width: auto;
  }
  .rbp-input-icon > span:first-child {
    font-size: 14px;
  }
  .rbp-input-icon .rbp-input {
    padding-left: 32px;
  }
  .rbp-step-title {
    font-size: 15px;
  }
  .rbp-field label {
    font-size: 12px;
  }
  .rbp-input, .rbp-select {
    font-size: 14px;
    padding: 8px 12px;
  }
  .rbp-input-icon .rbp-input {
    padding-left: 32px;
  }
  .rbp-booking-form {
    border-radius: 0 0 8px 8px;
  }
  /* BUG-1 ROOT CAUSE FIX v5.4.13: Removed legacy .rbp-svc-card img { height:50px !important }
     This rule was from the old horizontal card layout (image 50px tall on left side).
     It overrode position:absolute+height:100% on .rbp-svc-img, forcing the image to only
     50px inside a 16/9 aspect-ratio wrapper → remaining area showed gray background.
     New layout uses flex-column with full-width image on top — this rule must not exist. */
  .rbp-summary-panel.rbp-summary-open {
    width: 260px;
  }
}

@media (max-width: 400px) {
  .rbp-panel {
    padding: 12px 10px;
  }
  .rbp-step-title {
    font-size: 14px;
  }
  .rbp-btn-next, .rbp-btn-outline {
    padding: 8px 12px;
    font-size: 13px;
  }
  .rbp-slot-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .rbp-slot-btn {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   v4.1.12 — ALL SEASONS BOOKING FLOW NEW STYLES
═══════════════════════════════════════════════════════════ */

/* ── Guest Table (Step 1) ── */
.rbp-guest-table {
  border: 1px solid var(--rbp-primary, #1a1a1a);
  border-radius: 8px;
  overflow: hidden;
}
.rbp-guest-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
}
.rbp-guest-row:last-child { border-bottom: none; }
.rbp-guest-total-row {
  background: #f7f6f3;
  border-top: 1px solid #ddd;
}
.rbp-guest-label {
  flex: 1;
  font-size: 13px;
}
.rbp-guest-sub {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 1px;
}
.rbp-guest-input {
  width: 64px !important;
  text-align: center !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  flex-shrink: 0;
}
.rbp-guest-total-val {
  width: 64px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--rbp-primary, #1a1a1a);
}

/* ── Lock Note ── */
.rbp-lock-note {
  border-left: 3px solid #d08020;
  padding: 8px 14px;
  margin: 8px 0;
  font-size: 12px;
  background: #fffaf4;
  border-radius: 0 6px 6px 0;
  color: #7a4a00;
}

/* ── Inline Time Picker (inside slot cards) ── */
.rbp-inline-times {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
}
.rbp-it-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
  text-align: center;
}
.rbp-it-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.rbp-it-btn {
  border: 1px solid #bbb;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
  color: #333;
  transition: all .15s;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
}
.rbp-it-btn:hover {
  border-color: var(--rbp-primary, #c0392b);
  background: #fff5f5;
}
.rbp-it-btn.rbp-it-active {
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  border-color: var(--rbp-primary, #c0392b);
  font-weight: 700;
}
.rbp-it-btn.rbp-it-past {
  border: 1px dashed #ccc;
  color: #aaa;
  text-decoration: line-through;
  cursor: not-allowed;
  background: #f9f9f9;
}
.rbp-it-none {
  font-size: 12px;
  color: #c0392b;
  font-style: italic;
}

/* ── Guest Confirmation Box (Step 2) ── */
.rbp-guest-confirm-box {
  border: 1px solid #e0ddd5;
  border-radius: 8px;
  overflow: hidden;
  background: #fafaf8;
}
.rbp-gc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}
.rbp-gc-row:last-child { border-bottom: none; }
/* v4.1.15: Label stays left, count+desc grouped right */
.rbp-gc-label {
  color: #444;
  flex: 0 0 auto;
}
.rbp-gc-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.rbp-gc-count {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
}
.rbp-gc-desc {
  color: #888;
  font-size: 11px;
}
.rbp-gc-row small {
  color: #888;
  margin-left: 6px;
}
.rbp-gc-total {
  background: #f0f0ec;
  font-weight: 700;
  border-top: 1px solid #ccc;
}

/* ── Step 5 Panel ── */
.rbp-pay-widget-outer {
  margin-top: 12px;
}

/* ── Payment Cards (Step 3) ── */
.rbp-pay-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 560px) {
  .rbp-pay-cards { grid-template-columns: 1fr; }
}
.rbp-pay-card {
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  position: relative;            /* v4.1.14: needed for absolute tick */
  transition: border-color .2s, box-shadow .2s, transform .15s;
  overflow: hidden;
}
.rbp-pay-card:hover {
  border-color: var(--rbp-primary, #c0392b);
  box-shadow: 0 6px 20px rgba(192,57,43,.13);
  transform: translateY(-2px);
}
.rbp-pay-card.rbp-pc-selected {
  border-color: var(--rbp-primary, #c0392b);
  border-width: 2.5px;
  background: #fff8f7;
  box-shadow: 0 8px 28px rgba(192,57,43,.18);
  transform: translateY(-2px);
}
/* v4.1.14: Selected checkmark tick on payment card */
.rbp-pc-sel-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(192,57,43,.4);
  z-index: 2;
}
.rbp-pay-card.rbp-pc-selected .rbp-pc-sel-tick {
  opacity: 1;
  transform: scale(1);
}
.rbp-pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rbp-pc-title {
  font-size: 15px;
  font-weight: 700;
}
.rbp-pc-badge {
  font-size: 10px;
  font-weight: 600;
  border: 1px solid var(--rbp-primary, #c0392b);
  color: var(--rbp-primary, #c0392b);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
/* v4.1.17: Pay-at-venue card badge — green tint, distinct from deposit */
.rbp-pc-badge--venue {
  border-color: #27ae60;
  color: #27ae60;
}
/* v4.1.17: Venue card hover accent */
.rbp-pay-card--venue:hover { border-color: #27ae60; box-shadow: 0 3px 10px rgba(39,174,96,.12); }
.rbp-pay-card--venue.rbp-pc-selected { border-color: #27ae60; background: #f0fff4; }
.rbp-pay-card--venue.rbp-pc-selected .rbp-pc-sel-tick { background: #27ae60; color: #fff; }
/* v4.1.17: Pay-at-venue note in price breakdown */
.rbp-pbd-venue-note {
  background: #f0fff4;
  border: 1px solid #a9dfbf;
  border-radius: 6px;
  padding: 10px 14px;
  color: #1e8449;
  font-size: 13px;
  margin-top: 10px;
}
.rbp-pc-desc {
  font-size: 12px;
  color: #666;
  margin: 4px 0 10px;
}
.rbp-pc-calc {
  border: 1px dashed #ccc;
  border-radius: 6px;
  padding: 8px 12px;
  background: #fafaf8;
  font-size: 12px;
}
.rbp-pc-calc-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.rbp-pc-muted { color: #888; }
.rbp-pc-calc-total {
  font-weight: 700;
  border-top: 1px solid #ccc;
  margin-top: 4px;
  padding-top: 4px;
}

/* ── Payment Card CTA Button ── */
.rbp-pc-cta {
  margin-top: 12px;
}
.rbp-pc-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  pointer-events: none;   /* card click handles selection — button is visual only */
  user-select: none;
}
.rbp-pc-cta-btn--venue {
  background: #27ae60;
}
.rbp-pc-cta-btn--prepaid {
  background: #2980b9;
}
/* When card is selected — darken CTA to show active state */
.rbp-pay-card.rbp-pc-selected .rbp-pc-cta-btn {
  opacity: 0.85;
}
/* On hover of unselected card — slight lift effect on CTA */
.rbp-pay-card:not(.rbp-pc-selected):hover .rbp-pc-cta-btn {
  opacity: 0.9;
}

/* ── Payment Card — Elegant Style (v5.8.5) ──────────────────────────────── */
/* Applied when Settings > Design > Payment Card Style = 'Elegant'           */
/* The Design class outputs scoped overrides; this adds base rules.           */
/* ═══════════════════════════════════════════════════════════════════
   Payment Card — ELEGANT / LUXURY style  (v5.8.6)
   Inspired by premium brand UX: Amex, Marriott, Four Seasons.
   No icons. Typographic hierarchy. Dark-fill selected state.
   Three distinct accent palettes per card type.
   ═══════════════════════════════════════════════════════════════════ */

/* Grid: 3 equal columns desktop, 1 column mobile */
.rbp-pay-cards.rbp-pc--elegant {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ── Base card ─────────────────────────────────────────────────────── */
.rbp-pc--elegant .rbp-pay-card {
  border: 1px solid #dedede;
  border-radius: 2px;
  padding: 28px 24px 22px;
  background: #fafafa;
  box-shadow: none;
  transform: none;
  overflow: hidden;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
  display: flex;
  flex-direction: column;
  gap: 0;
  cursor: pointer;
}

/* ── Hover: subtle lift, dark border ──────────────────────────────── */
.rbp-pc--elegant .rbp-pay-card:hover {
  border-color: #1a1a1a;
  background: #f2f2f2;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
  transform: none;
}

/* ── Selected state: full dark fill (per card type) ─────────────── */
/* Default (deposit/generic): charcoal */
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected {
  border-color: #1a1a1a;
  background: #1a1a1a;
  box-shadow: 0 4px 24px rgba(0,0,0,.22);
  transform: none;
}
/* Venue (at_restaurant): deep forest green */
.rbp-pc--elegant .rbp-pay-card--venue.rbp-pc-selected {
  border-color: #0f2b1e;
  background: #0f2b1e;
  box-shadow: 0 4px 24px rgba(15,43,30,.35);
}
/* Prepaid (pay in full): deep navy */
.rbp-pc--elegant .rbp-pay-card--prepaid.rbp-pc-selected {
  border-color: #0d1f35;
  background: #0d1f35;
  box-shadow: 0 4px 24px rgba(13,31,53,.35);
}

/* ── Hide tick (no icon) ──────────────────────────────────────────── */
.rbp-pc--elegant .rbp-pc-sel-tick { display: none !important; }

/* ── Header: type label + status ─────────────────────────────────── */
.rbp-pc--elegant .rbp-pc-header {
  margin-bottom: 0;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-header {
  border-bottom-color: rgba(255,255,255,.12);
}

/* Type label */
.rbp-pc--elegant .rbp-pc-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #333;
  display: block;
  margin-bottom: 10px;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-title {
  color: rgba(255,255,255,.6);
}

/* Card name line (the main value proposition) */
.rbp-pc--elegant .rbp-pc-header::after {
  content: '';  /* placeholder — real name is in .rbp-pc-title */
}

/* Badge: text-only pill, no border-radius overdone */
.rbp-pc--elegant .rbp-pc-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  border: 1px solid #ccc;
  border-radius: 1px;
  padding: 2px 6px;
  color: #555;
  background: transparent;
  white-space: nowrap;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-badge {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.6);
}

/* ── Description ─────────────────────────────────────────────────── */
.rbp-pc--elegant .rbp-pc-desc {
  font-size: 13px;
  font-weight: 400;
  color: #555;
  line-height: 1.55;
  margin: 0 0 16px;
  letter-spacing: 0;
  flex: 1;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-desc {
  color: rgba(255,255,255,.75);
}

/* ── Price breakdown calc ────────────────────────────────────────── */
.rbp-pc--elegant .rbp-pc-calc {
  border: none;
  border-top: 1px solid #ebebeb;
  border-radius: 0;
  padding: 14px 0 0;
  background: transparent;
  margin-bottom: 16px;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-calc {
  border-top-color: rgba(255,255,255,.12);
}
.rbp-pc--elegant .rbp-pc-calc-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .1px;
  padding: 4px 0;
  color: #444;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-calc-row {
  color: rgba(255,255,255,.65);
}
.rbp-pc--elegant .rbp-pc-muted {
  color: #999 !important;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-muted {
  color: rgba(255,255,255,.4) !important;
}
.rbp-pc--elegant .rbp-pc-calc-total {
  border-top: 1px solid #ddd;
  margin-top: 6px;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-calc-total {
  border-top-color: rgba(255,255,255,.15);
  color: #fff;
}

/* ── CTA button ──────────────────────────────────────────────────── */
.rbp-pc--elegant .rbp-pc-cta {
  margin-top: auto;
  padding-top: 16px;
}
.rbp-pc--elegant .rbp-pc-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 1px;
  border: 1px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  pointer-events: none;
  user-select: none;
}
/* Venue CTA: green border */
.rbp-pc--elegant .rbp-pc-cta-btn--venue {
  border-color: #0f5c33;
  color: #0f5c33;
  background: transparent;
}
/* Prepaid CTA: navy border */
.rbp-pc--elegant .rbp-pc-cta-btn--prepaid {
  border-color: #0d2e5c;
  color: #0d2e5c;
  background: transparent;
}
/* Selected: invert to filled button */
.rbp-pc--elegant .rbp-pay-card.rbp-pc-selected .rbp-pc-cta-btn {
  background: rgba(255,255,255,.95);
  color: #1a1a1a;
  border-color: transparent;
  opacity: 1;
}
.rbp-pc--elegant .rbp-pay-card--venue.rbp-pc-selected .rbp-pc-cta-btn {
  background: rgba(255,255,255,.95);
  color: #0f2b1e;
}
.rbp-pc--elegant .rbp-pay-card--prepaid.rbp-pc-selected .rbp-pc-cta-btn {
  background: rgba(255,255,255,.95);
  color: #0d1f35;
}

/* ── Hover CTA lift on unselected ────────────────────────────────── */
.rbp-pc--elegant .rbp-pay-card:not(.rbp-pc-selected):hover .rbp-pc-cta-btn {
  background: #1a1a1a;
  color: #fff;
  opacity: 1;
}
.rbp-pc--elegant .rbp-pay-card--venue:not(.rbp-pc-selected):hover .rbp-pc-cta-btn {
  background: #0f2b1e;
  color: #fff;
  border-color: #0f2b1e;
}
.rbp-pc--elegant .rbp-pay-card--prepaid:not(.rbp-pc-selected):hover .rbp-pc-cta-btn {
  background: #0d1f35;
  color: #fff;
  border-color: #0d1f35;
}

/* ── Responsive ──────────────────────────────────────────────────── */
/* Tablet: 2 columns */
@media (max-width: 768px) {
  .rbp-pay-cards.rbp-pc--elegant {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
/* Mobile: full width stack */
@media (max-width: 560px) {
  .rbp-pay-cards.rbp-pc--elegant {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rbp-pc--elegant .rbp-pay-card {
    padding: 22px 20px 18px;
  }
}

/* ── Payment Card — Bold Color style (v5.8.7) ────────────────────────────
   Inspired by the screenshot: colored top-border per card type, white
   background, bold colored CTA buttons, rounded 14px cards.
   Green → Pay Later, Primary → Deposit, Blue → Pay in Full.
   Design class outputs the primary-color overrides.
   ──────────────────────────────────────────────────────────────────── */

/* Grid: 3 columns desktop */
.rbp-pay-cards.rbp-pc--bold {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Base card */
.rbp-pc--bold .rbp-pay-card {
  border: 1.5px solid #e0e0e0;
  border-radius: 14px;
  padding: 0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, border-color .2s;
}
.rbp-pc--bold .rbp-pay-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  transform: none;
}

/* No circle tick — bold uses card border as selection indicator */
.rbp-pc--bold .rbp-pc-sel-tick { display: none !important; }

/* Inner layout with top padding */
.rbp-pc--bold .rbp-pc-header {
  padding: 22px 20px 0;
  margin-bottom: 0;
}
.rbp-pc--bold .rbp-pc-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
}
.rbp-pc--bold .rbp-pc-desc {
  padding: 0 20px;
  margin: 8px 0 14px;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}
.rbp-pc--bold .rbp-pc-calc {
  margin: 0 20px 14px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #fafafa;
  font-size: 13px;
}
.rbp-pc--bold .rbp-pc-cta {
  padding: 0 20px 20px;
  margin-top: auto;
}
.rbp-pc--bold .rbp-pc-cta-btn {
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
}

/* Badge: pill */
.rbp-pc--bold .rbp-pc-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  border: none;
}

/* ── Venue card — GREEN ─────────────────────────────────────────────── */
.rbp-pc--bold .rbp-pay-card--venue {
  border-top: 4px solid #27ae60;
}
.rbp-pc--bold .rbp-pay-card--venue:hover {
  border-color: #27ae60;
}
.rbp-pc--bold .rbp-pay-card--venue.rbp-pc-selected {
  border-color: #27ae60;
  box-shadow: 0 0 0 3px rgba(39,174,96,.18), 0 6px 24px rgba(39,174,96,.15);
  background: #f0fff4;
}
.rbp-pc--bold .rbp-pay-card--venue.rbp-pc-selected .rbp-pc-title { color: #1a5c35; }
.rbp-pc--bold .rbp-pc-badge--venue {
  background: rgba(39,174,96,.12);
  color: #1a7a40;
}
.rbp-pc--bold .rbp-pc-cta-btn--venue {
  background: #27ae60;
  color: #fff;
  border: none;
}

/* ── Prepaid card — BLUE ────────────────────────────────────────────── */
.rbp-pc--bold .rbp-pay-card--prepaid {
  border-top: 4px solid #2980b9;
}
.rbp-pc--bold .rbp-pay-card--prepaid:hover {
  border-color: #2980b9;
}
.rbp-pc--bold .rbp-pay-card--prepaid.rbp-pc-selected {
  border-color: #2980b9;
  box-shadow: 0 0 0 3px rgba(41,128,185,.18), 0 6px 24px rgba(41,128,185,.12);
  background: #f0f7ff;
}
.rbp-pc--bold .rbp-pay-card--prepaid.rbp-pc-selected .rbp-pc-title { color: #1a4a6e; }
.rbp-pc--bold .rbp-pc-cta-btn--prepaid {
  background: #2980b9;
  color: #fff;
  border: none;
}

/* Selected: slight opacity on CTA to show active state */
.rbp-pc--bold .rbp-pay-card.rbp-pc-selected .rbp-pc-cta-btn { opacity: .88; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rbp-pay-cards.rbp-pc--bold { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 560px) {
  .rbp-pay-cards.rbp-pc--bold { grid-template-columns: 1fr; gap: 10px; }
  .rbp-pc--bold .rbp-pay-card { border-radius: 10px; }
}

/* ── Price Breakdown (Step 3) ── */
.rbp-pbd {
  border: 1.5px dashed var(--rbp-primary, #c0392b);  /* v4.1.14: dashed */
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
}
.rbp-pbd-title {
  font-weight: 700;
  margin-bottom: 8px;
}
.rbp-pbd-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.rbp-pbd-muted { color: #888; }
/* v5.8.0: Model A/B spec classes */
.rbp-pbd-subtotal {
  font-weight: 700;
}
.rbp-pbd-green {
  color: #27ae60;
}
.rbp-pbd-grand-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
  border-top: 2px solid var(--rbp-accent, #c0392b);
  margin-top: 6px;
  padding-top: 6px;
}
.rbp-pbd-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 14px;
  border-top: 2px solid var(--rbp-primary, #1a1a1a);
  margin-top: 6px;
  padding-top: 6px;
}
.rbp-pbd-split {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #ccc;
}
.rbp-pbd-split-title {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 6px;
}

/* ── Payment Warning ── */
.rbp-pay-warning {
  border: 1px dashed #bbb;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  color: #888;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   v4.1.13 — Luxury Service Cards
   ══════════════════════════════════════════════════════════════ */

.rbp-svc-luxury-grid {
  display: grid;
  /* Base: 2 cols (default). JS + PHP inline style override with admin svc_card_cols setting.
     Mobile ≤480px overrides via media query to horizontal stacked list. */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
  align-items: stretch;
}

.rbp-svc-luxury-card {
  position: relative;
  border: 2px solid #e8e8e8;
  border-radius: 14px;
  padding: 0;
  cursor: pointer;
  background: #fff;
  text-align: left;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.rbp-svc-luxury-card:hover {
  border-color: var(--rbp-primary, #c0392b);
  box-shadow: 0 6px 24px rgba(192,57,43,.13);
  transform: translateY(-2px);
}

.rbp-svc-luxury-card.rbp-svc-selected,
.rbp-svc-luxury-card[data-selected="1"] {
  border-color: var(--rbp-primary, #c0392b);
  background: #fff8f7;
  box-shadow: 0 6px 24px rgba(192,57,43,.18);
}

/* ── Image area ── */
.rbp-svc-img-wrap {
  position: relative;
  width: 100%;
  /* BUG-1 FIX FINAL v5.4.12: aspect-ratio defines the container height from width.
     CRITICAL: img must use position:absolute+inset:0 (not height:100%) because
     WebKit/Safari mobile does NOT resolve height:100% when parent height is
     defined via aspect-ratio — causing the "half image + gray area" bug.
     position:absolute+inset:0 is universally reliable across all browsers. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
  background: #e8e8e8; /* fallback bg while image loads — gray prevention */
}

.rbp-svc-img {
  /* BUG-1 FIX: absolute positioning — always fills 100% of aspect-ratio wrapper */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .35s ease;
}

.rbp-svc-luxury-card:hover .rbp-svc-img {
  transform: scale(1.05);
}

.rbp-svc-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}

/* ── Color bar fallback (no image) ── */
.rbp-svc-color-bar {
  width: 100%;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rbp-svc-color-bar-icon {
  font-size: 24px;
  padding: 12px 0 8px;
  display: block;
  text-align: center;
  width: 100%;
}

/* ── Body ── */
.rbp-svc-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
  min-height: 0;
}

/* ── Badges row ── */
.rbp-svc-badges {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
}

.rbp-svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* BUG-2 FIX FINAL v5.4.12: Use explicit 11px — px values are device-independent
     and not affected by iOS text-size-adjust. Previous 9px was too small causing
     browsers to visually "upgrade" it. 11px is legible and controlled. */
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;  /* reduced from 20px — large radius made badges look oversized */
  letter-spacing: .2px;
  text-transform: uppercase;
  min-width: 0;
  height: 22px;        /* explicit height locks badge size regardless of emoji/font rendering */
  box-sizing: border-box;
}

.rbp-svc-badge-perpax {
  background: #eef7ff;
  color: #1a73e8;
  border: 1px solid #c2dbff;
}

.rbp-svc-badge-fixed {
  background: #fdf3ff;
  color: #8b2fc9;
  border: 1px solid #e4c2ff;
}

.rbp-svc-badge-time {
  background: #f0f0f0;
  color: #555;
  border: 1px solid #ddd;
}

/* ── Name ── */
.rbp-svc-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Full description (clamped to 2 lines for card height consistency) ── */
.rbp-svc-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rbp-svc-desc p  { margin: 0 0 6px; }
.rbp-svc-desc p:last-child { margin-bottom: 0; }
.rbp-svc-desc ul,
.rbp-svc-desc ol { margin: 4px 0 6px 18px; padding: 0; }
.rbp-svc-desc li { margin-bottom: 3px; }
.rbp-svc-desc strong, .rbp-svc-desc b { color: #333; }
.rbp-svc-desc a   { color: var(--rbp-primary, #c0392b); text-decoration: underline; }

/* v4.3.31: Structured meta DL — service card (Label: Value rows) */
.rbp-svc-meta-dl {
  margin: 2px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rbp-svc-meta-row {
  display: flex;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.4;
  align-items: baseline;
}
.rbp-svc-meta-key {
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  flex-shrink: 0;
}
.rbp-svc-meta-key::after { content: ':'; }
.rbp-svc-meta-val {
  color: #555;
  flex: 1;
}
.rbp-svc-meta-plain {
  font-size: 11.5px;
  color: #777;
  font-style: italic;
  line-height: 1.4;
}
.rbp-svc-desc h3,
.rbp-svc-desc h4 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; color: #333; }

/* ── Footer: price + select button ── */
/* v5.4.32: Force horizontal Price + Select layout on DESKTOP service cards.
   !important here is intentional: prevents any later rule (luxury skin, custom CSS,
   theme injects) from collapsing the footer into a vertical stack. Mobile media
   query at line ~3193 keeps the explicit row layout so this rule is consistent
   across breakpoints — only the styling values differ between desktop/mobile. */
.rbp-svc-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  flex-wrap: nowrap !important;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* v5.4.30 / v5.4.32 / v5.4.33: Price block — confident weight, single row with Select.
   flex:1 1 auto + min-width:0 is the canonical Flexbox pattern for "shrink with ellipsis":
   - flex-basis:auto means start at content's natural width
   - flex-shrink:1 + min-width:0 allows shrinking below min-content (so ellipsis works)
   v5.4.32 used flex:1 1 0 which made the element start at 0 width and grow ONLY into
   leftover space. On narrow cards where Select button consumed all available width,
   price stayed at 0 width and was effectively invisible. Reverted in v5.4.33. */
.rbp-svc-price {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.15;
}

/* v4.3.32: Professional "Select" CTA button — uses Design system CSS vars */
.rbp-svc-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rbp-primary, #c0392b);
  background: transparent;
  border: 1.5px solid var(--rbp-primary, #c0392b);
  border-radius: var(--rbp-btn-radius, 8px);
  transition: background .18s, color .18s, box-shadow .18s, transform .12s;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  letter-spacing: .2px;
  line-height: 1.15;
}

.rbp-svc-select-arrow {
  transition: transform .18s;
  display: inline-block;
}

.rbp-svc-luxury-card:hover .rbp-svc-select-btn {
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

.rbp-svc-luxury-card:hover .rbp-svc-select-arrow {
  transform: translateX(3px);
}

.rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-select-btn,
.rbp-svc-luxury-card[data-selected="1"] .rbp-svc-select-btn {
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  border-color: var(--rbp-primary, #c0392b);
}

/* ── Selected checkmark tick ── */
.rbp-svc-selected-tick {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rbp-primary, #c0392b);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(192,57,43,.4);
}

.rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-selected-tick,
.rbp-svc-luxury-card[data-selected="1"] .rbp-svc-selected-tick {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   v5.4.34 — LIST STYLE service cards (Design tab → Card Style: List)
   Image on LEFT (~40% width), content on RIGHT.
   Footer (Price + Select) sits on SINGLE ROW on desktop ≥481px.
   Previous version had no .rbp-svc-style-list CSS at all — list mode
   inherited grid CSS which forced image on top + Price stacked above
   Select. This block defines proper horizontal list layout.
   ═══════════════════════════════════════════════════════════════ */

/* Container: respect admin svc_card_cols setting.
   v5.10.9 fix — previously used `display:flex; flex-direction:column` plus
   `grid-template-columns:none !important`, which DISCARDED the inline
   grid-template-columns:repeat(N,1fr) rendered from svc_card_cols.
   Result: choosing "2 cols" in Settings did nothing for list cards.
   Now: keep display:grid; drop the !important reset, so the inline
   grid-template-columns from PHP takes effect. Cards inside still use
   their own horizontal flex layout (image left + body right). On tablet
   ≤880px and mobile ≤480px we force 1 col so the image doesn't shrink
   below a usable size. */
.rbp-svc-luxury-grid.rbp-svc-style-list {
  display: grid;
  gap: 14px;
}
/* v6.3.0: tablets keep the admin's multi-column layout down to 660px (was 880px,
   which made list cards collapse to one very long column too early). Below 660px
   a horizontal list card can't fit two-up, so we drop to 1 col. */
@media (max-width: 660px) {
  .rbp-svc-luxury-grid.rbp-svc-style-list {
    grid-template-columns: 1fr !important;
  }
}

/* Each card: horizontal flex row.
   v5.10.9 bug #2: previously had no max-height — body could grow unbounded.
   Cap at 220px so the list reads as a scannable horizontal row, Airbnb/
   Booking.com style, regardless of description length. */
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 160px;
  max-height: 220px;
  width: 100%;
}

/* Image area: fixed proportional width, full card height */
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap {
  width: 34%;
  max-width: 280px;
  flex-shrink: 0;
  height: auto;
  align-self: stretch;
  aspect-ratio: auto;   /* override the 16:9 from base grid; height comes from card */
}
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap img,
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body: takes remaining space, vertical flow with footer pinned to bottom.
   v5.10.9 bug #2: tighter padding, clamp description to 2 lines so the
   card reads as a list item, not a full article. */
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 18px;
}
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Footer: v5.10.9 bug #2 — remove the big highlighted bg; align price+button on
   one inline row, button is auto-width on the right (was forcing its own line). */
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 10px;
  flex-wrap: nowrap !important;
}

/* Price: bigger, more prominent in list mode */
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-price {
  font-size: 17px;
  font-weight: 800;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Select button: stays on same row, auto width, compact padding */
.rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-select-btn {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 120px;
  padding: 8px 18px;
  font-size: 12px;
  white-space: nowrap;
}

/* List-mode mobile: revert to vertical stack (handled by mobile media query below) */

/* ───────────────────────────────────────────────────────────────────────────
   §4. Service 'pill' mode (v5.13.2, fixed v5.13.9-hotfix2) — Compact horizontal
   pill buttons. Professional, high-density layout ideal for clinics, salons &
   consulting. Services displayed as wrapped horizontal pills with colored dots.

   v5.13.9-hotfix2 BUG-2 FIX SUMMARY:
   - Original pill rules targeted `.rbp-svc-title`, but the template renders
     the service name with class `.rbp-svc-name`. Result: pill-specific font
     sizing / nowrap / ellipsis / selected-state color never applied; on mobile
     the un-styled name overflowed the 48px-tall pill (the "empty teal blob"
     visible in the user-reported screenshot).
   - `.rbp-svc-badges` and `.rbp-svc-meta-dl` (rendered for every service) were
     not hidden, adding vertical clutter and forcing the pill to grow taller
     than its intended 48px touch target.
   - `.rbp-svc-price` lives INSIDE `.rbp-svc-footer`; hiding the footer hid the
     price entirely. Fix: do NOT hide the footer — instead unstyle it (flatten
     to inline-flex with no padding/border) so the price renders on the right
     side of the pill, and hide only the secondary footer children (select-btn,
     select-arrow) that should not appear in pill mode.
   ─────────────────────────────────────────────────────────────────────────── */

/* Grid container — single-column stack, owns full width */
.rbp-svc-luxury-grid.rbp-svc-style-pill {
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-template-columns: unset !important; /* Override inline grid-template-columns */
}

/* Each pill: compact horizontal button (44px+ touch target = a11y minimum) */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 48px;
  padding: 10px 18px;
  margin: 0;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  overflow: hidden;          /* prevent any nested content from breaking the pill shape */
  position: relative;
  transition: transform .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
  cursor: pointer;
  /* Box-shadow inset reset so selected state doesn't inherit a stray shadow */
  box-shadow: none;
}
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card:hover {
  transform: translateY(-1px);
  border-color: var(--rbp-primary, #c0392b);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] {
  background: var(--rbp-primary, #c0392b);
  border-color: var(--rbp-primary, #c0392b);
  color: #fff;
}

/* Hide thumb image / color bar — pill mode is icon-free */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-img-wrap,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-color-bar {
  display: none;
}

/* Body: row with dot + name */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0;
  background: transparent;
  margin: 0;
}

/* Colored dot indicator before the name */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: .8;
}
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-body::before,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-body::before {
  background: #fff;
  opacity: .95;
}

/* v5.13.9-hotfix2 BUG-2 FIX: target the correct class .rbp-svc-name (template
   actually renders this; the old rules targeted .rbp-svc-title which doesn't
   exist on the pill DOM and never applied). The !important on text properties
   here is intentional — it defeats the multiple cascading .rbp-svc-name rules
   in this same stylesheet that try to set 2-line clamp, padding, etc. */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
  display: inline-block !important;
  color: #1f2937;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-name,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-name {
  color: #fff;
}

/* v5.13.9-hotfix2 BUG-2 FIX: hide the secondary content blocks that the
   template always renders (badges / description / meta-dl). They clutter the
   compact pill silhouette and previously caused the pill to grow tall and
   break the row layout — exactly what the screenshot showed. */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-badges,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-desc,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-category,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-dl,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-row,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-meta-plain {
  display: none !important;
}

/* v5.13.9-hotfix2 BUG-2 FIX: keep the footer in flow (it contains the price)
   but flatten its styling so it sits as a small inline element on the right.
   The previous rule was `display:none` on the footer, which hid the price
   completely. */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-footer {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
}

/* Price (now visible via the footer fix above) */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-price {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  margin: 0 0 0 10px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  flex: 0 0 auto;
  color: var(--rbp-primary, #c0392b);
}
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-price,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-price {
  color: #fff;
}

/* Hide select-button / arrow — entire pill is clickable */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-btn,
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-select-arrow {
  display: none !important;
}

/* Hide selected-tick — pill background already signals selection */
.rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-selected-tick {
  display: none !important;
}

/* Pill mode on mobile — remain pills, just wrap naturally */
@media (max-width: 880px) {
  .rbp-svc-luxury-grid.rbp-svc-style-pill {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    flex: 0 1 auto;
    margin: 0;
    min-width: fit-content;
  }
  
  .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .rbp-svc-luxury-grid.rbp-svc-style-pill {
    flex-direction: column;
    gap: 6px;
  }
  
  .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-luxury-card {
    flex: 1 1 100%;
    width: 100%;
    min-width: unset;
  }
  
  .rbp-svc-luxury-grid.rbp-svc-style-pill .rbp-svc-body {
    flex: 1 1 auto;
  }
}

/* ─────────────────────────────────────────────────────────────
   BUG-1b FIX v5.4.11 — Mobile ≤480px service cards: Vertical layout
   Previous version forced flex-direction:row + 72px left image,
   causing the "image shrinks to corner" UX bug on all styles.
   Fix: restore natural vertical card layout (image full-width on top,
   body + footer below). Applies to ALL styles on mobile.
───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Grid → vertical stack, single column */
  .rbp-svc-luxury-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Card → vertical (default), natural height */
  .rbp-svc-luxury-card {
    flex-direction: column;
    align-items: stretch;
    min-height: unset;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
  }
  .rbp-svc-luxury-card:hover {
    transform: translateY(-2px);
  }

  /* Image: BUG-1 FIX FINAL v5.4.12 — aspect-ratio + absolute img */
  .rbp-svc-img-wrap {
    width: 100%;
    min-width: unset;
    aspect-ratio: 16 / 9;
    /* No explicit height — aspect-ratio computes it from width automatically */
    flex-shrink: 0;
    border-radius: 0;
    background: #e8e8e8;   /* gray-free fallback while image loads */
  }
  /* img stays absolute — same fix applies on mobile */
  .rbp-svc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Color-bar fallback: full width, reasonable height with centered emoji */
  .rbp-svc-color-bar {
    width: 100%;
    min-width: unset;
    height: 64px;
    min-height: unset;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }
  .rbp-svc-color-bar-icon {
    font-size: 28px;
    padding: 0;
    line-height: 1;
  }

  /* Body → normal vertical padding, NOT absolute */
  .rbp-svc-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 12px 12px;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    position: static; /* IMPORTANT: remove relative/absolute */
  }

  /* Badges: BUG-2 FIX FINAL v5.4.12 */
  .rbp-svc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .rbp-svc-badge {
    font-size: 11px;
    padding: 4px 8px;
    height: 22px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 1;
    line-height: 1;
  }

  /* Name: 2 lines */
  .rbp-svc-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* Desc: 2 lines */
  .rbp-svc-desc {
    font-size: 12px;
    color: #777;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* Footer → proper horizontal row — BUG-3 FIX v5.4.12 / refined v5.4.30 */
  .rbp-svc-footer {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* width:100% stretches footer across full svc-body content area.
       svc-body already has 12px side padding — footer must NOT add side padding. */
    width: 100%;
    box-sizing: border-box;
    right: auto;
    top: auto;
    bottom: auto;
    border-top: 1px solid #f0f0f0;
    border-left: none;
    padding: 10px 0 0;
    margin-top: 6px;
    gap: 10px;
    flex-wrap: nowrap;
  }

  /* v5.4.30: Price stays prominent on mobile but never crowds the Select button */
  .rbp-svc-price {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
  }

  /* Select button: compact but tappable (≥36px tall via padding+border) */
  .rbp-svc-select-btn {
    font-size: 12px;
    padding: 7px 12px;
    flex-shrink: 0;
    line-height: 1.15;
  }

  /* Tick: back to normal top-right position */
  .rbp-svc-selected-tick {
    top: 10px;
    right: 10px;
    left: auto;
    transform: scale(0.6);
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
  .rbp-svc-luxury-card.rbp-svc-selected .rbp-svc-selected-tick,
  .rbp-svc-luxury-card[data-selected="1"] .rbp-svc-selected-tick {
    opacity: 1;
    transform: scale(1);
  }

  /* v5.4.34: List style on mobile — revert to vertical (image on top, body below).
     Same as default grid, but stays single-column. */
  .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-luxury-card {
    flex-direction: column;
    min-height: 0;
  }
  .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-img-wrap {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    align-self: auto;
  }
  .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-body {
    padding: 12px;
  }
  .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-footer {
    padding: 10px 12px;
  }
  .rbp-svc-luxury-grid.rbp-svc-style-list .rbp-svc-price {
    font-size: 15px;
  }

} /* end @media (max-width: 480px) — luxury service cards v5.4.11 */


/* Very small ≤360px — same vertical layout, slightly tighter */
@media (max-width: 360px) {
  .rbp-svc-img-wrap {
    aspect-ratio: 4 / 3;  /* slightly taller on very small screens */
    /* img stays position:absolute — no changes needed */
  }
  .rbp-svc-color-bar {
    height: 56px;
  }
  .rbp-svc-body {
    padding: 8px 10px 10px;
  }
  .rbp-svc-selected-tick {
    top: 8px;
    right: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════
   v4.5.2 — FIX #1: Luxury Service Card — Text Contrast & Layout
   Ensures text is NEVER swallowed by background color regardless
   of image, color-bar, or gradient used behind/around cards.
   ══════════════════════════════════════════════════════════════ */

/* ── Color-bar fallback: guarantee text contrast ── */
/* When there is NO image, the color bar shows the service color.
   Text in .rbp-svc-body sits on #fff background → always readable.
   The color bar height is just 8px so no overlay needed there.
   Issue was ONLY in mobile horizontal mode where color-bar becomes
   a 72px-wide left column — add a subtle gradient so emoji is legible. */
.rbp-svc-color-bar {
  /* Luxury: soft inner gradient so the emoji/icon pops against any hue */
  background-image: linear-gradient(135deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.12) 100%);
  background-blend-mode: multiply;
  background-size: cover;
}

/* ── Image overlay: stronger gradient for text readability ── */
/* v4.5.2: Previous overlay was transparent→rgba(0,0,0,.28) which is too
   weak on bright images. Increase to .45 and extend start point. */
.rbp-svc-img-overlay {
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.45) 100%);
}

/* ── Service card body: always white-background text area ── */
/* Ensure .rbp-svc-body never inherits a colored background */
.rbp-svc-body {
  background: #fff;
  position: relative;
  z-index: 1;
}

/* ── Service name: stronger contrast, no bleed into colored areas ── */
.rbp-svc-name {
  color: #111;
  font-weight: 800; /* upgraded from 700 for luxury feel */
}

/* ── Service description: slightly darker for legibility ── */
.rbp-svc-desc {
  color: #555; /* upgraded from #666 */
}

/* ── Service card: luxury box-shadow upgrade ── */
.rbp-svc-luxury-card {
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
}
.rbp-svc-luxury-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06);
}
.rbp-svc-luxury-card.rbp-svc-selected,
.rbp-svc-luxury-card[data-selected="1"] {
  box-shadow: 0 8px 28px rgba(0,0,0,.16), 0 0 0 3px rgba(192,57,43,.2);
}

/* ── Color-bar icon: centered, always visible ── */
.rbp-svc-color-bar-icon {
  /* Ensure emoji is visible on any background color */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  /* Elegant vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px 0 6px;
}

/* ── Badge readability on white background ── */
.rbp-svc-badge-perpax { background: #eef7ff; color: #1a73e8; border: 1px solid #c2dbff; }
.rbp-svc-badge-fixed  { background: #fdf3ff; color: #8b2fc9; border: 1px solid #e4c2ff; }
/* v5.4.30: "Starting from" badge — distinct from fixed/per_person */
.rbp-svc-badge-from   { background: #fff7ec; color: #c47a09; border: 1px solid #ffd9a3; }
.rbp-svc-badge-time   { background: #f0f0f0; color: #444;   border: 1px solid #ddd;   }

/* ── Footer: price text always in service color — no bleed ── */
.rbp-svc-footer {
  background: #fff; /* Explicit white — prevents inheriting any color */
}

/* ── Sidebar service cards: luxury upgrade ── */
/* Sidebar card name: guarantee dark text on white background */
.rbp-sidebar-svc-name {
  color: #111;
  font-weight: 700;
  letter-spacing: -.1px;
}
/* Sidebar desc: slightly darker */
.rbp-sidebar-svc-desc {
  color: #555;
}
/* Sidebar card: luxury elevation */
.rbp-sidebar-svc-card {
  box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  border: 1px solid #e8e8e8;
}
.rbp-sidebar-svc-card:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}
/* Sidebar color bar: always 4px — subtle accent line, no text on it */
.rbp-sidebar-svc-bar {
  height: 4px;
  opacity: .85;
}
/* Sidebar body: always white base */
.rbp-sidebar-svc-body {
  background: #fff;
  padding: 14px 16px 16px;
}

/* ── Package cards: luxury upgrade + text contrast guarantee ── */
/* Package name is dark text on white body — was already correct.
   Upgrade: stronger font + card shadow for luxury feel. */
.rbp-pkg-name {
  font-size: 14px;
  font-weight: 800;  /* upgraded from 700 */
  color: #111;       /* upgraded from #1a1a2e */
  letter-spacing: -.1px;
}
.rbp-pkg-desc {
  color: #555;       /* upgraded from #666 */
  font-size: 12px;
}
/* Package image placeholder: ensure emoji reads on gradient */
.rbp-pkg-img-placeholder {
  /* Soften gradient so emoji isn't lost in dark version */
  background: linear-gradient(135deg, #eef2f7, #dde4ef);
  font-size: 36px;
  letter-spacing: 0;
}
/* Package card luxury box-shadow */
.rbp-pkg-card {
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.rbp-pkg-card:hover {
  box-shadow: 0 6px 20px rgba(192,57,43,.15);
}
.rbp-pkg-card.selected {
  box-shadow: 0 6px 22px rgba(192,57,43,.22);
}
/* BUG-3 FIX v4.5.6: Previous @480px rule forced flex-direction:row + 64x64 image
   which caused package image to appear as a tiny square "pulled to corner".
   Restored to standard vertical card layout matching the existing @480px grid rule
   (1fr 1fr two-column grid). Image gets standard 90px height from the existing
   @480px rule above (.rbp-pkg-img { height:90px }). No flex-direction override needed. */

/* ══════════════════════════════════════════════════════════════
   END v4.5.2 FIX #1
   ══════════════════════════════════════════════════════════════ */



.rbp-trust-wrap {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
  text-align: center;
}

.rbp-trust-custom-img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}

.rbp-trust-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.rbp-trust-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: .85;
  transition: opacity .15s, transform .15s;
}

.rbp-trust-icon:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.rbp-trust-icon svg {
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.rbp-trust-icon small {
  font-size: 9px;
  color: #aaa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.rbp-trust-text {
  margin: 4px 0 0;
  font-size: 11px;
  color: #999;
  line-height: 1.5;
}

/* ── Payment card selected tick (Bug #2 v4.1.14) ── */
/* Already defined above in pay-card block — no duplicate needed */

/* ── v4.3.3: Booking Confirmation Card ───────────────────────────────────── */
.rbp-confirm-card{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);max-width:520px;margin:16px auto 0;overflow:hidden;border:1px solid #eee}
.rbp-confirm-head{text-align:center;padding:28px 24px 20px}
.rbp-confirm-icon{font-size:52px;line-height:1;margin-bottom:8px}
.rbp-confirm-title{color:#27ae60;font-size:22px;font-weight:700;margin:0 0 6px}
.rbp-confirm-ref{color:#c0392b;font-size:20px;font-weight:700;margin:0;letter-spacing:.5px}
.rbp-confirm-divider{height:1px;background:#f0f0f0;margin:0}
.rbp-confirm-rows{padding:14px 24px}
.rbp-confirm-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:14px;border-bottom:1px solid #fafafa}
.rbp-confirm-row:last-child{border-bottom:none}
.rbp-confirm-row-label{color:#999;min-width:96px;flex-shrink:0;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding-top:1px}
.rbp-confirm-row-val{color:#222;font-weight:500;word-break:break-word}
.rbp-confirm-row-val strong{color:#c0392b}
.rbp-confirm-msg{margin:0 16px 16px;padding:12px 14px;border-radius:8px;border-left:4px solid #ddd;font-size:13px;line-height:1.5;background:#fafafa}
.rbp-confirm-email-note{text-align:center;padding:8px 24px 20px;font-size:12px;color:#999}

/* ══════════════════════════════════════════════════════════════
   BUG-1a FIX v5.4.11 — Service card dim/fade for ALL form styles
   When any card has .rbp-svc-selected, dim the un-selected siblings.
   Uses CSS :has() — supported Chrome 105+, Safari 15.4+, FF 121+.
   Falls back gracefully (older browsers: no dim, no error).
   NOTE: Luxury skin's rbp-luxury.css already overrides these with its
   own stronger (opacity:0.42 + blur + grayscale) scoped under .rbp-lux.
   These rules are the base effect for Standard + all other skins.
   ══════════════════════════════════════════════════════════════ */

/* Smooth transition on all service cards */
.rbp-svc-luxury-card {
  transition: opacity .3s ease, filter .3s ease, transform .2s ease,
              border-color .2s, box-shadow .2s;
}

/* When a card is selected → dim unselected siblings */
.rbp-svc-luxury-grid:has(.rbp-svc-selected)
  .rbp-svc-luxury-card:not(.rbp-svc-selected),
.rbp-svc-luxury-grid:has([data-selected="1"])
  .rbp-svc-luxury-card:not([data-selected="1"]) {
  opacity: 0.45;
  transform: scale(0.98);
}

/* Selected card: full opacity, slight lift */
.rbp-svc-luxury-card.rbp-svc-selected,
.rbp-svc-luxury-card[data-selected="1"] {
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

/* Hovering a dimmed card: bring back to readable */
.rbp-svc-luxury-grid:has(.rbp-svc-selected)
  .rbp-svc-luxury-card:not(.rbp-svc-selected):hover,
.rbp-svc-luxury-grid:has([data-selected="1"])
  .rbp-svc-luxury-card:not([data-selected="1"]):hover {
  opacity: 0.82 !important;
  transform: scale(1) !important;
}

/* ══════════════════════════════════════════════════════════════
   BUG-2 FIX v5.4.11 — Date input placeholder on mobile
   iOS Safari + older Android: input[type="date"] shows blank field
   with no format hint (dd/mm/yyyy) when empty.
   Fix: wrap the input in .rbp-date-wrap. CSS overlays a fake
   placeholder using ::after on the wrapper. JS adds .has-date class
   when a date is selected → hides the overlay.
   Desktop is UNAFFECTED (media-query guards this block to ≤680px only).
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {

  .rbp-date-wrap {
    position: relative;
    display: block;
  }

  /* Fake placeholder overlay — shows "dd/mm/yyyy" when field is empty */
  .rbp-date-wrap::after {
    content: attr(data-ph);           /* data-ph set to "dd/mm/yyyy" in PHP */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #aaa;
    font-size: 14px;
    pointer-events: none;             /* click passes through to the real input */
    z-index: 2;
    background: #fff;
    border-radius: 7px;
    border: 1.5px solid #d0d0d0;
    box-sizing: border-box;
  }

  /* Hide overlay when: date is selected OR field is focused (picker is open) */
  .rbp-date-wrap.has-date::after,
  .rbp-date-wrap:focus-within::after {
    display: none;
  }

  /* Luxury skin: match parchment background */
  .rbp-lux .rbp-date-wrap::after {
    background: var(--lux-parchment-50, #fbf6ea);
    border-color: var(--lux-rule, rgba(58,39,22,.18));
    color: var(--lux-ink-500, #7a5c40);
    border-radius: 4px;               /* match luxury input radius */
  }

} /* end @media (max-width: 680px) — date placeholder */


/* ══════════════════════════════════════════════════════════════════════════
   v5.10.9 — UX hardening for Package / Service / Timeslot cards
   ──────────────────────────────────────────────────────────────────────────
   Targeted, minimal-surface polish that fixes real UX issues across the
   default Standard skin. Only touches existing class names (no markup or
   JS change). Each rule below addresses one concrete defect described in
   the v5.10.9 bug report; no subjective restyling.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §1. Keyboard a11y — every interactive card needs a visible focus ring.
   Standard global UX requirement (WCAG 2.4.7). The base CSS only sets
   focus on .rbp-pkg-card; the other cards relied on browser default which
   many themes strip out. */
.rbp-slot-card:focus-visible,
.rbp-slot-card-long:focus-visible,
.rbp-slot-box:focus-visible,
.rbp-slot-btn:focus-visible,
.rbp-slot-pill:focus-visible,
.rbp-svc-luxury-card:focus-visible,
.rbp-sidebar-svc-card:focus-visible {
  outline: 2px solid var(--rbp-slot-primary, var(--rbp-primary, #c0392b));
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, .14);
}

/* ── §2. Tap target — mobile (≤480px) interactive elements should be ≥44px
   tall (Apple HIG / Material Design baseline). The slot pill currently
   computes to ~36px on small screens; bump to 44px without changing the
   visual weight on desktop. */
@media (max-width: 480px) {
  .rbp-slot-pill {
    min-height: 44px;
    padding: 10px 14px;
  }
  .rbp-slot-btn {
    min-height: 44px;
  }
}

/* ── §3. Package card image — the default gradient was a hard red→orange
   ramp that fights any branded primary colour. Use the existing
   --rbp-primary / --rbp-secondary CSS vars so admin's chosen brand
   colour flows through (and stays neutral via fallback when not set). */
.rbp-pkg-img {
  background: linear-gradient(
    135deg,
    var(--rbp-primary, #c0392b),
    var(--rbp-secondary, #e74c3c)
  );
}
/* Placeholder when no image uploaded — keep neutral so the brand colour
   does not dominate a card with no real artwork. */
.rbp-pkg-img-placeholder {
  background: linear-gradient(135deg, #f3f5f8, #dde2ea);
}

/* ── §4. Service / package / slot description — clamp to ≤3 lines to keep
   card heights consistent. Description over 3 lines is unreadable in a
   grid and breaks card alignment. Standard pattern on Airbnb / Booking. */
.rbp-svc-desc,
.rbp-svc-meta-plain,
.rbp-clong-desc,
.rbp-card-desc,
.rbp-box-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── §5. Service grid — consistent gap across cols/rows (was 12px between
   cols but row gap inherited from grid 'gap' which could be overridden by
   inline style). Establish predictable rhythm. */
.rbp-svc-luxury-grid {
  row-gap: 14px;
  column-gap: 14px;
}

/* ── §6. Slot card description — was unbounded and pushed footer down,
   misaligning grid rows. Same 3-line clamp pattern. */
.rbp-card-desc { margin-bottom: 8px; }

/* ── §7. Disabled / full slot cards — increase opacity from .45 to .55 so
   the slot name stays legible (the booked-out time is information the
   user still needs to read; .45 was too aggressive). */
.rbp-slot-card.rbp-slot-full,
.rbp-slot-card-long.rbp-slot-full,
.rbp-slot-box.rbp-slot-full,
.rbp-slot-btn.rbp-slot-full {
  opacity: .55;
}

/* ── §8. Reduced-motion respect — disable card hover transforms for users
   who set prefers-reduced-motion. Standard a11y requirement. */
@media (prefers-reduced-motion: reduce) {
  .rbp-pkg-card,
  .rbp-svc-luxury-card,
  .rbp-slot-card,
  .rbp-slot-card-long,
  .rbp-slot-box,
  .rbp-slot-btn,
  .rbp-slot-pill,
  .rbp-sidebar-svc-card {
    transition: none !important;
  }
  .rbp-pkg-card:hover,
  .rbp-svc-luxury-card:hover,
  .rbp-slot-card:hover,
  .rbp-slot-card-long:hover,
  .rbp-slot-box:hover {
    transform: none !important;
  }
}
/* ── END v5.10.9 UX hardening ─────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════
   v5.11.6 — Custom inline calendar (rbp-cal)
   Renders inside .rbp-booking-wrap[data-rbp-layout=wizard|split_left|split_right]
   on non-touch devices. Replaces the native <input type="date"> with a
   branded month grid. The native input is kept (off-screen) for form
   serialization and downstream JS handlers; selection writes input.value
   and dispatches a 'change' event so blackout / availability / draft logic
   continues unchanged.

   Touch devices and other layouts are unaffected — JS bails out and the
   native input remains the active picker.
   ════════════════════════════════════════════════════════════════════════ */
.rbp-cal {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  margin-top: 6px;
  font-family: inherit;
  user-select: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  /* v5.12.2 BUG 1 FIX — guarantee the calendar never extends past its parent
     field column, regardless of host-theme global box-sizing. */
  box-sizing: border-box;
  max-width: 100%;
}
.rbp-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rbp-cal-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  text-transform: capitalize; /* "march 2026" → "March 2026" for Intl locales that lowercase */
  letter-spacing: .2px;
}
.rbp-cal-nav {
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: #4b5563;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  padding: 0;
}
.rbp-cal-nav:hover:not(.rbp-cal-nav-disabled) {
  background: #f9fafb;
  border-color: var(--rbp-primary, #c0392b);
  color: var(--rbp-primary, #c0392b);
}
.rbp-cal-nav-disabled,
.rbp-cal-nav:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.rbp-cal-wd {
  display: grid;
  /* v5.12.2 BUG 1 FIX — `1fr` is `minmax(auto, 1fr)`. When weekday/day cells
     carry an intrinsic min-size (e.g. mobile `min-height` combined with
     `aspect-ratio:1/1`), `auto` lets the column grow PAST 1/7 of available
     width, pushing the 7th column off the right edge of the card on narrow
     viewports (most visibly: iPhone SE / 360px Android — Sun-column day
     clipped). `minmax(0, 1fr)` forces hard 1/7 distribution regardless of
     content min-size, eliminating the overflow. Desktop is unaffected
     (intrinsic min-size never exceeded the 1/7 allotment at ≥600px). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 4px;
}
.rbp-cal-wd-cell {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 0;
}
.rbp-cal-grid {
  display: grid;
  /* v5.12.2 BUG 1 FIX — see .rbp-cal-wd comment above. Same minmax(0,1fr) fix
     ensures the 7-day grid can never push past its container, regardless of
     the day cell's intrinsic min-size (e.g. mobile min-height + aspect-ratio
     combination). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  /* Safety belt — even if a host theme injects margin/box-sizing changes, the
     grid never exceeds 100% of its parent column. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.rbp-cal-day {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  padding: 0;
  /* v5.11.7 UX FIX — drop aspect-ratio:1/1 (made cells huge in wide form columns;
     a 600px-wide form had 80px-tall cells × 6 rows = ~480px calendar height,
     overwhelming the rest of the step). Switch to fixed cell height so the
     calendar lands at a predictable ~280px regardless of column width. */
  height: 36px;
  /* v5.12.2 BUG 1 FIX — grid items default to `min-width: auto` (= the cell's
     intrinsic content min-size). With `min-height: 44px` + `aspect-ratio:1/1`
     applied on mobile, the auto min-width resolved to ~44px and made each of
     the 7 columns demand at least 44px of width — overflowing on narrow
     viewports. `min-width: 0` releases that constraint so the explicit
     `minmax(0, 1fr)` on the grid is honoured. (`min-height` below still
     guarantees a comfortable tap target — see mobile media-query.) */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.rbp-cal-day:hover:not(:disabled):not(.rbp-cal-day-selected) {
  background: rgba(0, 0, 0, .04);
  border-color: rgba(0, 0, 0, .1);
}
.rbp-cal-day-blank {
  cursor: default;
  pointer-events: none;
}
.rbp-cal-day-today:not(.rbp-cal-day-selected) {
  color: var(--rbp-primary, #c0392b);
  font-weight: 700;
  /* subtle ring without overpowering the selected state */
  box-shadow: inset 0 0 0 1px var(--rbp-primary, #c0392b);
}
.rbp-cal-day-selected {
  background: var(--rbp-primary, #c0392b);
  color: #fff !important;
  font-weight: 700;
  border-color: var(--rbp-primary, #c0392b);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
/* v5.11.7 UX FIX — disabled/past dates were rendered in #d1d5db (very pale,
   RGB 209/213/219) which was practically invisible on the white panel.
   Bumped to #9ca3af (RGB 156/163/175) — clearly "muted" but still readable
   so customers can SEE the past dates greyed out rather than empty space. */
.rbp-cal-day-disabled {
  color: #9ca3af;
  cursor: not-allowed;
  background: transparent;
}
.rbp-cal-day-blackout {
  color: #9ca3af;
  cursor: not-allowed;
  text-decoration: line-through;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    rgba(0, 0, 0, .03) 4px,
    rgba(0, 0, 0, .03) 8px
  );
}
/* Honour reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .rbp-cal-nav, .rbp-cal-day {
    transition: none;
  }
}
/* v5.11.9 BUG 4 FIX — Mobile / touch responsive tuning.
   v5.11.6 had a JS touch-device gate that bailed completely on iOS/Android.
   That gate was removed so the inline calendar now renders on mobile too
   (matching Calendly / Airbnb / OpenTable). To keep the experience usable
   on small viewports we:
   • Bump day cells to 40px on touch-sized screens (Apple HIG / Material
     accessible-tap-target floor).
   • Bump nav buttons to 40px square and font-size on the title so the
     month name remains the visual anchor.
   • Switch hover to active-state for touch (`@media (hover: none)`) so
     fingers don't leave a "stuck" hover state behind.
   The desktop styles above (height: 36px) remain unchanged. */
/* ════════════════════════════════════════════════════════════════════════
   v5.11.9 — Mobile UX/UI optimization (CSS-ONLY — no JS / markup / logic change)

   Brought in line with the patterns the major booking products converged on
   (Calendly / Airbnb / OpenTable / Booking.com) after their own usability
   work. Every rule here is scoped to a touch/narrow media query so the
   desktop calendar (height:36px, etc.) is byte-for-byte unchanged. Nothing
   below touches selection logic, blackout handling, bounds, or the native
   input sync — it is pure presentation.

   Principles applied (all sourced from public UX research, not invented):
   1. FULL-WIDTH 7-DAY ROWS — on a phone the grid should use the entire width
      so each of the 7 columns is as wide (= as tappable) as possible. We let
      the day cells flex to fill the row and key their HEIGHT off their width
      via aspect-ratio:1, so cells stay comfortably square instead of short
      40px slivers.
   2. TRUE 44px TAP TARGET — Apple HIG's real minimum is 44px (we previously
      sat at the 40px Material floor). min-height:44px guarantees it even on
      the narrowest phones, while aspect-ratio makes most cells larger.
   3. BUTTON-STYLE NAV — Airbnb's rolled-out A/B winner gave the prev/next
      arrows a defined border so they read as buttons, not glyphs. We give
      them a solid surface, border, and a clear pressed state.
   4. STRONGER SELECTED + TODAY FEEDBACK — a bolder ring/elevation on the
      selected day so the tap result is unmistakable on a small screen.
   5. PRESSED-STATE MICROFEEDBACK — a subtle scale on :active (suppressed
      automatically by the existing prefers-reduced-motion block above).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Let the calendar breathe to the full form width on phones. */
  .rbp-cal {
    padding: 16px 12px;
    border-radius: 14px;
  }

  /* Header: bigger, bolder month label as the visual anchor; nav arrows
     become real buttons (Airbnb pattern). */
  .rbp-cal-head { margin-bottom: 12px; }
  .rbp-cal-title { font-size: 16px; font-weight: 800; }
  .rbp-cal-nav {
    width: 44px;
    height: 44px;
    font-size: 24px;
    border-width: 1.5px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }
  .rbp-cal-nav:active:not(.rbp-cal-nav-disabled):not(:disabled) {
    background: #f3f4f6;
    transform: scale(.94);
  }

  /* 7 even columns that consume the full width; slightly larger gap so the
     touch targets don't visually merge. */
  .rbp-cal-grid,
  .rbp-cal-wd {
    gap: 4px;
  }
  .rbp-cal-wd-cell { font-size: 11px; }

  /* Square, full-width, ≥44px tap targets. aspect-ratio drives height from
     the (flex-distributed) column width, so cells scale with the device:
     on a 360px phone each cell lands ~46px, on a 414px phone ~52px — always
     comfortably above the 44px floor that min-height guarantees as a backstop. */
  .rbp-cal-day {
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 44px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* Clearer selected + today states for small screens. */
  .rbp-cal-day-selected {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  }
  .rbp-cal-day-today:not(.rbp-cal-day-selected) {
    box-shadow: inset 0 0 0 1.5px var(--rbp-primary, #c0392b);
  }
}
@media (hover: none) {
  .rbp-cal-day:hover:not(:disabled):not(.rbp-cal-day-selected) {
    background: transparent;
    border-color: transparent;
  }
  /* Pressed-state microfeedback — the existing prefers-reduced-motion block
     above already zeroes .rbp-cal-day transitions, so this is auto-disabled
     for users who ask for reduced motion. */
  .rbp-cal-day:active:not(:disabled):not(.rbp-cal-day-selected) {
    background: rgba(0, 0, 0, .07);
    transform: scale(.93);
  }
}
/* Very small (≤380px) screens — keep the square full-width cells but ease the
   minimum so 7 columns + gaps never overflow a 320px viewport. */
@media (max-width: 380px) {
  .rbp-cal { padding: 14px 9px; }
  .rbp-cal-day { font-size: 14px; min-height: 40px; }
  .rbp-cal-wd-cell { font-size: 10px; }
  .rbp-cal-title { font-size: 15px; }
  .rbp-cal-nav { width: 40px; height: 40px; font-size: 22px; }
  .rbp-cal-grid,
  .rbp-cal-wd { gap: 3px; }
}
/* v5.12.2 BUG 1 FIX — Ultra-narrow viewports (≤360px: iPhone SE 1st/2nd gen,
   small Android, theme-injected sidebars, etc.). The combination of
   `aspect-ratio: 1/1` + `min-height: 40px` on .rbp-cal-day (from the
   ≤600px / ≤380px blocks above) forces every cell to be at least 40×40 px
   square. When the parent column shrinks below ~290px of inner width
   (which can happen on a 360px viewport with WP theme + plugin paddings),
   the grid wants 7×40px + gaps ≈ 298px and overflows the right edge —
   the user-visible "30 spills past the card" bug.

   At this size we drop `aspect-ratio` so cells become a touch taller than
   wide (~38×40 px) instead of forcing the grid to widen. Cells remain
   ≥40px tall on the touch axis — well within tap-target guidance for
   numeric date picking (Material design accepts 40px; this is below
   Apple's 44px ideal but the alternative is broken layout). Visible
   numerals stay centred via the existing flex-centering rule. */
@media (max-width: 360px) {
  .rbp-cal-day {
    aspect-ratio: auto;
    /* Explicit height ≥ min-height — keeps a comfortable touch target while
       letting width flex down to 1/7 of the (narrow) container. */
    height: 40px;
    min-height: 40px;
  }
  /* Pull the calendar's own padding in another notch so we yield a few more
     px to the day grid. Combined with the aspect-ratio drop above, this
     keeps a comfortable 38–42px-wide cell even on a 320px viewport. */
  .rbp-cal { padding: 12px 6px; }
  .rbp-cal-grid,
  .rbp-cal-wd { gap: 2px; }
}
/* ── END v5.11.6 calendar ───────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   v5.12.9 — Booking Policy Checkbox
   Shown above the confirm/pay button in Step 3 (merged review panel).
   Designed to be unambiguous, accessible, and brand-neutral.
═══════════════════════════════════════════════════════════════════ */

/* Wrapper: subtle separator from the summary area above */
.rbp-policy-wrap {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: border-color .15s ease, background .15s ease;
}

/* Highlight border when focused within (keyboard nav) */
.rbp-policy-wrap:focus-within {
  border-color: #3b82f6;
  background: #eff6ff;
}

/* Label row: inline-flex for tight vertical alignment */
.rbp-policy-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

/* Custom checkbox — replaces native but stays accessible */
.rbp-policy-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: #1a1a1a;
  /* Preserve native checkbox on all browsers — no hiding/replacing
     so SR / keyboard / switch control always works out of the box */
}

/* Luxury skin: use brand accent */
.rbp-skin-luxury .rbp-policy-check {
  accent-color: #c9a96e;
}

/* Policy text & required asterisk */
.rbp-policy-text {
  font-size: 13.5px;
  color: #374151;
  line-height: 1.5;
}

.rbp-policy-text a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rbp-policy-text a:hover {
  color: #1e40af;
}

.rbp-skin-luxury .rbp-policy-text a {
  color: #c9a96e;
}

.rbp-policy-required {
  color: #ef4444;
  font-weight: 600;
}

/* Inline error message */
.rbp-policy-error {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 5px;
  color: #b91c1c;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Shake animation on error for visibility */
@keyframes rbp-policy-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

.rbp-policy-wrap.rbp-policy-invalid {
  border-color: #fca5a5;
  animation: rbp-policy-shake .35s ease;
}

/* Mobile: full-width, slightly larger touch target for checkbox */
@media (max-width: 480px) {
  .rbp-policy-wrap { padding: 12px 14px; }
  .rbp-policy-check { width: 20px; height: 20px; }
}
/* ── END v5.12.9 policy ─────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   v6.3.2 patch — selected-service-card clarity (Bug 2)
   The prior light selected background (#fff8f7) is overridden by dark Design
   palettes, leaving only a faint border ≈ hover. A primary-colour ring + the
   ✓ tick are background-independent and read clearly on light or dark cards.
   ════════════════════════════════════════════════════════════════ */
.rbp-booking-wrap .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-luxury-card[data-selected="1"]{
  border-color:var(--rbp-primary,#c0392b)!important;
  box-shadow:0 0 0 3px var(--rbp-primary,#c0392b),0 8px 24px rgba(0,0,0,.22)!important;
}
.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{
  opacity:1!important;transform:scale(1)!important;
}
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-luxury-card.rbp-svc-selected,
.rbp-booking-wrap .rbp-svc-style-pill .rbp-svc-luxury-card[data-selected="1"]{
  box-shadow:0 0 0 2px var(--rbp-primary,#c0392b),0 4px 14px rgba(0,0,0,.18)!important;
}